commit b9a9d4b056fbc32208179a9ba6eb0c3f0f4514da
Author: OverPoweredDev <omkar.prabhune19@vit.edu>
Date:   Fri Jun 4 18:51:23 2021 +0530

    completed the settings page
    
    well, almost. The Hover-Enabled table is still left

diff --git a/settings/settings.css b/settings/settings.css
index 14fba57..40b27db 100644
--- a/settings/settings.css
+++ b/settings/settings.css
@@ -56,6 +56,10 @@ tr, td, th {
     width: 10em;
 }
 
+#default-target-language-button {
+    width: 2em;
+}
+
 #update-button {
     width: 10em;
 }
@@ -98,18 +102,22 @@ tr, td, th {
 }
 
 .language-dropdown {
+    float: right;
     display: none;
     position: absolute;
     background-color: #f1f1f1;
-    min-width: 30em;
+    max-height: 30em;
+    width: 10em;
     box-shadow: 0 0.2em 0.4em 0 rgba(0,0,0,0.2);
-    z-index: 1;
+    z-index: 2;
+    overflow-y: auto;
 }
 
 .enabled-language {
     color: black;
     padding: 0.3em 0.4em;
-    text-decoration: none;
+
+    cursor: pointer;
     display: block;
 }
 
diff --git a/settings/settings.html b/settings/settings.html
index 0ea47b7..c61eb80 100644
--- a/settings/settings.html
+++ b/settings/settings.html
@@ -21,7 +21,7 @@
     <span>Default Language to Translate to</span>
     <div class="dropdown">
       <div role="group" class="d-flex flex-wrap pl-0 btn-group">
-        <button type="button" class="btn btn-dark btn-sm no-focus">Target Lang</button>
+        <button id="target-language" type="button" class="btn btn-dark btn-sm no-focus">Target Lang</button>
         <button id="default-target-language-button" value="detect" type="button"
                 class="btn no-focus btn-dark btn-sm more-languages">
           <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor"
@@ -31,12 +31,11 @@
         </button>
       </div>
       <div id="target-language-dropdown" class="language-dropdown">
-        <a>eng</a>
       </div>
     </div>
   </div>
   <div class="single-line-setting">
-    <span>Last Updated: Yesterday at 13.00 UTC</span>
+    <span id="last-updated">Last Updated: </span>
     <div role="group" class="d-flex flex-wrap pl-0 btn-group">
       <button type="button" id="update-button" class="btn btn-dark btn-sm no-focus">Update Now</button>
     </div>
@@ -44,9 +43,9 @@
   <div class="single-line-setting">
     <span>Select Apertium Source</span>
     <select id="source-select" class="source-select form-select no-focus" aria-label="Default select example">
-      <option selected>Apertium Release</option>
-      <option>Apertium Beta</option>
-      <option>Local/Custom Source</option>
+      <option value="release">Apertium Release</option>
+      <option value="beta">Apertium Beta</option>
+      <option value="custom">Local/Custom Source</option>
     </select>
   </div>
   <div class="website-table">
diff --git a/settings/settings.js b/settings/settings.js
index bc763aa..51e8085 100644
--- a/settings/settings.js
+++ b/settings/settings.js
@@ -1,18 +1,26 @@
-globalSettings = getGlobalSettings();
-createDropdown();
-
+let globalSettings;
+init();
 
 $("#default-target-language-button").click(function () {
     let dropdown = $("#target-language-dropdown")[0];
-    if(dropdown.style.display === "") {
-        dropdown.style.display ="block";
+    if (dropdown.style.display === "") {
+        dropdown.style.display = "block";
     } else {
-        dropdown.style.display ="";
+        dropdown.style.display = "";
     }
 });
 
+$(".enabled-language").click(function () {
+    let selectedLanguage = getSelectedLanguage($(this));
+
+    globalSettings.DefaultLanguage = selectedLanguage;
+    $("#target-language").text(selectedLanguage);
+    saveGlobalSettings(globalSettings);
+});
+
 $("#update-button").click(async function () {
     await updateLanguagePairs();
+    saveGlobalSettings(globalSettings);
 });
 
 $("#source-select").change(async function () {
@@ -20,26 +28,60 @@ $("#source-select").change(async function () {
     switch (selectedSource) {
         case "Apertium Release":
             globalSettings.ApertiumSource = "https://apertium.org/apy/";
-            saveGlobalSettings(globalSettings);
-            await updateLanguagePairs();
             break;
         case "Apertium Beta":
             globalSettings.ApertiumSource = "https://beta.apertium.org/apy/";
-            saveGlobalSettings(globalSettings);
-            await updateLanguagePairs();
             break;
         case "Local/Custom Source":
             alert("Option not available yet");
             break;
     }
+    await updateLanguagePairs();
+    createDropdown($("#target-language-dropdown"));
+    saveGlobalSettings(globalSettings);
 });
 
+// TODO: hover-enabled table
+
+function init() {
+    globalSettings = getGlobalSettings();
+    createDropdown($("#target-language-dropdown"));
+    setDefaultLanguage(globalSettings.DefaultLanguage);
+    setApertiumSource(globalSettings.ApertiumSource);
+    setLastUpdated(globalSettings.lastUpdated)
+}
+
+function setDefaultLanguage(defaultLanguage) {
+    $("#target-language").text(defaultLanguage);
+}
+
+function setApertiumSource(apertiumSource) {
+    let sourceSelect = $("#source-select");
+    switch (apertiumSource) {
+        case "https://apertium.org/apy/":
+            sourceSelect.val("release").change();
+            break;
+        case "https://beta.apertium.org/apy/":
+            sourceSelect.val("beta").change();
+            break;
+        case "Local/Custom Source":
+            sourceSelect.val("custom").change();
+            break;
+    }
+}
+
+function setLastUpdated(lastUpdated) {
+    let updatedText = "Last Updated: " + lastUpdated
+    $("#last-updated").text(updatedText);
+}
+
 function getGlobalSettings() {
     let settings = JSON.parse(localStorage.getItem("apertium.settings"));
     if (settings === null) {
         return {
             ApertiumSource: "https://beta.apertium.org/apy/",
-            DefaultLanguage: "eng"
+            DefaultLanguage: "eng",
+            lastUpdated: "on Installation"
         }
     } else {
         return settings;
@@ -52,12 +94,13 @@ function saveGlobalSettings(settings) {
 }
 
 async function updateLanguagePairs() {
+    let time = new Date().toLocaleString();
     let languageList = await fetchLanguageList(getLangPairsEndpoint());
     let languagePairsJSON = JSON.stringify(createLanguagePairs(languageList));
 
     localStorage.setItem("apertium.langPairs", languagePairsJSON);
-
-    // console.log(localStorage.getItem("apertium.langPairs"));
+    globalSettings.lastUpdated = time;
+    setLastUpdated(time);
 }
 
 function getLangPairsEndpoint() {
@@ -89,7 +132,18 @@ function getTargetLanguages() {
     return [...new Set(list)];
 }
 
-function createDropdown() {
+function createDropdown(parent) {
+    parent.empty();
     let list = getTargetLanguages();
+    list.forEach((languageCode) => {
+        parent.append("<option class='enabled-language' value='" + languageCode + "'>" + languageCode + "</option>");
+    })
+}
+
+function getSelectedLanguage(selector) {
+    selector.addClass("selected-language");
+    let text = $(".selected-language").text();
+    selector.removeClass("selected-language");
 
+    return text;
 }
\ No newline at end of file