correctly switching connectiontype in addtags page. see #438

pages/_lib/connection-ui.js

@@ -45,7 +45,7 @@ export async function injectConnectionUI({
   }
 
   let tpl = `
-  <tr${tr_class ? ` class="${tr_class}"` : ''}>
+  <tr id="${selectId}_tr"${tr_class ? ` class="${tr_class}"` : ''}>
     <td>
       <label>
         <span class="opt_title">__MSG_prefs_Connection_type__</span>
@@ -828,6 +828,15 @@ export function updateWarnings() {
   warn_Anthropic_VersionEmpty();
 }
 
+export function changeConnTypeRowColor(conntype_row, conntype_select) {
+  conntype_row.classList.toggle("conntype_chatgpt_web", (conntype_select.value === "chatgpt_web"));
+  conntype_row.classList.toggle("conntype_chatgpt_api", (conntype_select.value === "chatgpt_api"));
+  conntype_row.classList.toggle("conntype_ollama_api", (conntype_select.value === "ollama_api"));
+  conntype_row.classList.toggle("conntype_openai_comp_api", (conntype_select.value === "openai_comp_api"));
+  conntype_row.classList.toggle("conntype_google_gemini_api", (conntype_select.value === "google_gemini_api"));
+  conntype_row.classList.toggle("conntype_anthropic_api", (conntype_select.value === "anthropic_api"));  
+}
+
 export function showConnectionOptions(conntype_select) {
   let chatgpt_web_display = 'table-row';
   let chatgpt_api_display = 'none';
@@ -836,12 +845,7 @@ export function showConnectionOptions(conntype_select) {
   let google_gemini_api_display = 'none';
   let anthropic_api_display = 'none';
   let parent = conntype_select.parentElement.parentElement.parentElement;
-  parent.classList.toggle("conntype_chatgpt_web", (conntype_select.value === "chatgpt_web"));
+  changeConnTypeRowColor(parent, conntype_select);
-  parent.classList.toggle("conntype_chatgpt_api", (conntype_select.value === "chatgpt_api"));
-  parent.classList.toggle("conntype_ollama_api", (conntype_select.value === "ollama_api"));
-  parent.classList.toggle("conntype_openai_comp_api", (conntype_select.value === "openai_comp_api"));
-  parent.classList.toggle("conntype_google_gemini_api", (conntype_select.value === "google_gemini_api"));
-  parent.classList.toggle("conntype_anthropic_api", (conntype_select.value === "anthropic_api"));
   if (conntype_select.value === "chatgpt_web") {
     chatgpt_web_display = 'table-row';
   }else{

pages/addtags/mzta-add-tags.css

@@ -52,6 +52,10 @@ tr.specific_integration_sub td{
     padding-left: 0.8em !important;
 }
 
+.specific_integration_sub{
+    display: none;
+}
+
 .btn_div{
     width: 100%;
     display: flex;

pages/addtags/mzta-add-tags.js

@@ -23,16 +23,18 @@ import { getPlaceholders } from "../../js/mzta-placeholders.js";
 import { textareaAutocomplete } from "../../js/mzta-placeholders-autocomplete.js";
 import { addTags_getExclusionList, addTags_setExclusionList } from "../../js/mzta-addatags-exclusion-list.js";
 import { getAccountsList, normalizeStringList, isAPIKeyValue } from "../../js/mzta-utils.js";
-import { injectConnectionUI, updateWarnings } from "../_lib/connection-ui.js";
+import { injectConnectionUI, updateWarnings, changeConnTypeRowColor } from "../_lib/connection-ui.js";
 
 let autocompleteSuggestions = [];
 let taLog = new taLogger("mzta-addtags-page",true);
+let conntype_select_id = 'add_tags_connection_type';
 
 document.addEventListener('DOMContentLoaded', async () => {
     try {
       await injectConnectionUI({
         afterTrId: 'connection_ui_anchor',
-        selectId: 'add_tags_connection_type',
+        tr_class: 'specific_integration_sub',
+        selectId: conntype_select_id,
         no_chatgpt_web: true,
         taLog: taLog
       });
@@ -46,6 +48,25 @@ document.addEventListener('DOMContentLoaded', async () => {
         element.addEventListener("change", saveOptions);
       });
 
+    let conntype_el = document.getElementById(conntype_select_id);
+    let add_tags_use_specific_integration_el = document.getElementById('add_tags_use_specific_integration');
+    let conntype_row = document.getElementById(conntype_select_id + '_tr');
+    add_tags_use_specific_integration_el.addEventListener('change', (event) => {
+      console.log(">>>>>>>>>>>>> conntype_el.value: " + conntype_el.value);
+      document.querySelectorAll(".specific_integration_sub").forEach(tr => {
+        tr.style.display = event.target.checked && tr.classList.contains('conntype_' + conntype_el.value) ? 'table-row' : 'none';
+      });
+      conntype_el.style.display = event.target.checked ? 'table-row' : 'none';
+      changeConnTypeRowColor(conntype_row, conntype_el);
+    });
+
+    console.log(">>>>>>>>>>>>> conntype_el.value: " + conntype_el.value);
+    document.querySelectorAll(".specific_integration_sub").forEach(tr => {
+        tr.style.display = add_tags_use_specific_integration_el.checked && tr.classList.contains('conntype_' + conntype_el.value) ? 'table-row' : 'none';
+      });
+    document.getElementById(conntype_select_id + '_tr').style.display = add_tags_use_specific_integration_el.checked ? 'table-row' : 'none';
+    changeConnTypeRowColor(conntype_row, conntype_el);
+
     let addtags_textarea = document.getElementById('addtags_prompt_text');
     let addtags_save_btn = document.getElementById('btn_save_prompt');
     let addtags_reset_btn = document.getElementById('btn_reset_prompt');