commit 5c94d84d38d463c279c52d0f4172eb725da37449
Author: OverPoweredDev <omkar.prabhune19@vit.edu>
Date:   Fri Jul 30 14:01:36 2021 +0530

    added UI for custom source
    
    no substance to it yet though

diff --git a/src/settings/settings.css b/src/settings/settings.css
index 59e3ed5..8f59274 100644
--- a/src/settings/settings.css
+++ b/src/settings/settings.css
@@ -17,8 +17,8 @@ tr, td, th {
     justify-content: space-between;
 
     width: auto;
-    height: 8em;
-    padding: 0.5em 1em 1em 1em;
+    height: 8rem;
+    padding: 0.5rem 1rem 1rem 1rem;
 
     background-color: #333333;
 }
@@ -33,8 +33,8 @@ tr, td, th {
 }
 
 .main-container {
-    padding: 1em;
-    height: calc(100vh - 8em);
+    padding: 1rem;
+    height: calc(100vh - 8rem);
 }
 
 .single-line-setting {
@@ -43,39 +43,49 @@ tr, td, th {
     justify-content: space-between;
     align-content: center;
 
-    margin-top: 1em;
-    margin-bottom: 1.5em;
+    margin-top: 1rem;
+    margin-bottom: 1.5rem;
 }
 
 .single-line-setting span {
-    padding-left: 0.35em;
-    padding-top: 0.3em;
+    padding-left: 0.35rem;
+    padding-top: 0.3rem;
 }
 
 .single-line-setting .btn-group {
-    width: 10em;
+    width: 10rem;
 }
 
 #default-target-language-button {
-    width: 2em;
+    width: 2rem;
 }
 
 #update-button {
-    width: 10em;
+    width: 10rem;
+}
+
+#apy-input-wrapper {
+    width: 100%;
+    overflow: auto;
+    margin-bottom: 1.5rem;
+}
+
+#add-custom-apy-div {
+    width: 20rem;
+    float: right;
 }
 
 .source-select {
-    width: 12em !important;
+    width: 12rem !important;
 }
 
 .website-table-scrollbar {
     position: relative;
     overflow: auto;
 
-    margin-bottom: 2em;
+    margin-bottom: 2rem;
 
     -ms-overflow-style: none;
-    scrollbar-width: none;
 }
 
 .website-table-scrollbar::-webkit-scrollbar {
@@ -108,9 +118,9 @@ tr, td, th {
     display: none;
     position: absolute;
     background-color: #f1f1f1;
-    max-height: 30em;
-    width: 10em;
-    box-shadow: 0 0.2em 0.4em 0 rgba(0,0,0,0.2);
+    max-height: 30rem;
+    width: 10rem;
+    box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.2);
     z-index: 50;
     overflow-y: auto;
 }
@@ -118,7 +128,7 @@ tr, td, th {
 .enabled-language {
     font-size: smaller;
     color: black;
-    padding: 0.3em 0.4em;
+    padding: 0.3rem 0.4rem;
 
     cursor: pointer;
     display: block;
@@ -127,7 +137,7 @@ tr, td, th {
 .disabled-language {
     font-size: smaller;
     color: gray;
-    padding: 0.3em 0.4em;
+    padding: 0.3rem 0.4rem;
     text-decoration: none;
     display: block;
     cursor: pointer;
diff --git a/src/settings/settings.html b/src/settings/settings.html
index 2f32e2b..5f3001e 100644
--- a/src/settings/settings.html
+++ b/src/settings/settings.html
@@ -46,9 +46,15 @@
     <select id="source-select" class="source-select form-select no-focus" aria-label="Default select example">
       <option value="release">Apertium Release</option>
       <option value="beta">Apertium Beta</option>
-      <option value="custom">Local/Custom Source</option>
+      <option value="custom">Custom Source</option>
     </select>
   </div>
+  <div id="apy-input-wrapper">
+    <div id="add-custom-apy-div" class="input-group mb-3" style="display: none">
+      <input id="apy-input" type="text" class="form-control no-focus" placeholder="http://localhost:2737/">
+      <button id="add-apy-url" class="btn btn-sm btn-dark no-focus" type="button">Set Source</button>
+    </div>
+  </div>
   <div class="website-table">
     <div class="table-wrapper-scroll-y website-table-scrollbar">
       <table id="website-table" class="table table-condensed table-striped mb-0">
@@ -65,7 +71,7 @@
     </div>
     <div class="input-group mb-3">
       <input id="website-input" type="text" class="form-control no-focus" placeholder="example.com">
-      <button id="add-website-button" class="btn btn-sm btn-dark" type="button">Add Website</button>
+      <button id="add-website-button" class="btn btn-sm btn-dark no-focus" type="button">Add Website</button>
     </div>
   </div>
 </div>
diff --git a/src/settings/settings.js b/src/settings/settings.js
index d1cba50..30efa4a 100644
--- a/src/settings/settings.js
+++ b/src/settings/settings.js
@@ -25,7 +25,8 @@ $("#default-target-language-button").on('click', function (e) {
     }
 });
 
-$("#source-select").on('click', async function () {
+$("#source-select").on('click', async function (e) {
+    let customApyInput = $("#add-custom-apy-div")[0];
     let selectedSource = $("#source-select option:selected").text();
     switch (selectedSource) {
         case "Apertium Release":
@@ -36,8 +37,11 @@ $("#source-select").on('click', async function () {
             globalSettings.apertiumSource = "https://beta.apertium.org/apy/";
             saveGlobalSettings(globalSettings);
             break;
-        case "Local/Custom Source":
-            alert("Option not available yet");
+        case "Custom Source":
+            e.stopPropagation();
+            if (customApyInput.style.display === "none") {
+                customApyInput.style.display = "flex";
+            }
             break;
     }
     await updateLanguagePairs();
@@ -45,6 +49,10 @@ $("#source-select").on('click', async function () {
     createDropdown($("#target-language-dropdown"));
 });
 
+$('#add-custom-apy-div').on('click', function (e) {
+    e.stopPropagation();
+});
+
 // Delete a website from hover-enabled table
 $(".delete-website").on('click', function () {
     let hostname = $(this).attr("data-url");
@@ -63,6 +71,7 @@ $("#add-website-button").on('click', function () {
 
 $(document).click(function(){
     $("#target-language-dropdown").hide();
+    $('#add-custom-apy-div').hide();
 });
 
 function init() {