Finished adding default & custom instances

2 files changed, 98 insertions, 9 deletions

diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html
index 7d4ba006..efc43058 100644
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@@ -27,20 +27,67 @@
             <h4>Enable</h4>
             <input id="disable-simplyTranslate" type="checkbox" checked />
         </div>
-        <!-- <div class="some-block option-block">
-            <h4>Instance</h4>
-            <div class="autocomplete">
-                <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" />
-            </div>
-        </div> -->
 
         <div class="some-block option-block">
             <h4>Frontend</h4>
             <select id="translate-frontend">
-                <option value="simplyTransalte">SimplyTransalte</option>
+                <option value="simplyTranslate">SimplyTranslate</option>
                 <option value="lingva">Lingva</option>
             </select>
         </div>
+
+        <hr>
+
+        <div id="simplyTranslate">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="simplyTranslate-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-simplyTranslate-instance-form">
+                <div class="some-block option-block">
+                    <input id="simplyTranslate-custom-instance" placeholder="https://simplyTranslate.com" type="url" />
+                    <button type="submit" class="add" id="simplyTranslate-add-instance">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                            fill="currentColor">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                        </svg>
+                    </button>
+                </div>
+            </form>
+            <div class="checklist" id="simplyTranslate-custom-checklist"></div>
+        </div>
+
+        <div id="lingva">
+            <div class="some-block option-block">
+                <h4>Default Instances</h4>
+            </div>
+            <div class="checklist" id="lingva-checklist">
+            </div>
+            <hr>
+            <div class="some-block option-block">
+                <h4>Custom Instances</h4>
+            </div>
+            <form id="custom-lingva-instance-form">
+                <div class="some-block option-block">
+                    <input id="lingva-custom-instance" placeholder="https://lingva.com" type="url" />
+                    <button type="submit" class="add" id="lingva-add-instance">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                            fill="currentColor">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                        </svg>
+                    </button>
+                </div>
+            </form>
+            <div class="checklist" id="lingva-custom-checklist"></div>
+        </div>
+
     </section>
 
     <script type="module" src="../init.js"></script>
diff --git a/src/pages/options/translate/translate.js b/src/pages/options/translate/translate.js
index 480b754e..a28d3215 100644
--- a/src/pages/options/translate/translate.js
+++ b/src/pages/options/translate/translate.js
@@ -1,16 +1,58 @@
 import translateHelper from "../../../assets/javascripts/helpers/translate.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let disableTranslateElement = document.getElementById("disable-simplyTranslate");
 disableTranslateElement.addEventListener("change",
     (event) => translateHelper.setDisableTranslate(!event.target.checked)
 );
 
+
+let simplyTranslateDivElement = document.getElementById("simplyTranslate")
+let lingvaDivElement = document.getElementById("lingva")
+
+
+function changeFrontendsSettings(frontend) {
+    if (frontend == 'simplyTranslate') {
+        simplyTranslateDivElement.style.display = 'block';
+        lingvaDivElement.style.display = 'none';
+    }
+    else if (frontend == 'lingva') {
+        simplyTranslateDivElement.style.display = 'none';
+        lingvaDivElement.style.display = 'block';
+    }
+}
 let translateFrontendElement = document.getElementById("translate-frontend");
 translateFrontendElement.addEventListener("change",
-    (event) => translateHelper.setFrontend(event.target.options[translateFrontendElement.selectedIndex].value)
+    (event) => {
+        let frontend = event.target.options[translateFrontendElement.selectedIndex].value
+        translateHelper.setFrontend(frontend)
+        changeFrontendsSettings(frontend);
+    }
 );
 
 translateHelper.init().then(() => {
     disableTranslateElement.checked = !translateHelper.getDisableTranslate();
-    translateFrontendElement.value = translateHelper.getFrontend();
+    let frontend = translateHelper.getFrontend();
+    translateFrontendElement.value = frontend;
+    changeFrontendsSettings(frontend);
+
+    commonHelper.processDefaultCustomInstances(
+        'simplyTranslate',
+        translateHelper,
+        document,
+        translateHelper.getSimplyTranslateRedirectsChecks,
+        translateHelper.setSimplyTranslateRedirectsChecks,
+        translateHelper.getSimplyTranslateCustomRedirects,
+        translateHelper.setSimplyTranslateCustomRedirects
+    )
+
+    commonHelper.processDefaultCustomInstances(
+        'lingva',
+        translateHelper,
+        document,
+        translateHelper.getLingvaRedirectsChecks,
+        translateHelper.setLingvaRedirectsChecks,
+        translateHelper.getLingvaCustomRedirects,
+        translateHelper.setLingvaCustomRedirects
+    )
 });
\ No newline at end of file