Save the last uploaded locale

apps/locale/locale.html

@@ -352,36 +352,79 @@ ${customizeLocale ? `<tr><td class="table_t">Meridian names</td>
         return getLocaleModule(false);
       }
 
+      const lastUploadedLocaleID = "last-uploaded-locale";
+      let lastUploadedLocale;
+      try{
+        lastUploadedLocale = JSON.parse(localStorage?.getItem(lastUploadedLocaleID));
+      }catch(error){
+        console.warn("Unable to load last uploaded locale", error);
+      }
+      if(lastUploadedLocale){
+        if(!lastUploadedLocale.lang){
+          lastUploadedLocale = undefined;
+          console.warn("Unable to load last uploaded locale, it is missing the lang entry");
+        }else if(lastUploadedLocale.custom){
+          // Make sure to add any missing data from the original lang
+          // We don't know if fx a new entry has been added after the locale was last saved
+          const originalLocale = structuredClone(locales[lastUploadedLocale.lang]);
+          lastUploadedLocale = {...originalLocale, ...lastUploadedLocale};
+
+          // Add a special entry for the custom locale, put it first in the list
+          locales = {[lastUploadedLocaleID]: lastUploadedLocale, ...locales};
+        }
+      }
+
       var lang;
       var locale;
-      var customizeLocale;
+      var customizeLocale = false;
       var languageSelector = document.getElementById("languages");
       var customizeSelector = document.getElementById('customize');
       languageSelector.innerHTML = Object.keys(locales).map(l=>{
         var locale = locales[l];
-        var localeParts = l.split("_"); // en_GB -> ["en","GB"]
+        var name = l === lastUploadedLocaleID ? `Custom locale based on ${locale.lang}` : locale.lang;
+        var localeParts = locale.lang.split("_"); // en_GB -> ["en","GB"]
         var icon = "";
         // If we have a 2 char ISO country code, use it to get the unicode flag
         if (locale.icon)
           icon = locale.icon+" ";
         else if (localeParts[1] && localeParts[1].length==2)
           icon = localeParts[1].toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0)+127397) )+" ";
-        return `<option value="${l}">${icon}${l}${locale.notes?" - "+locale.notes:""}</option>`
+        return `<option value="${l}">${icon}${name}${locale.notes?" - "+locale.notes:""}</option>`
       }).join("\n");
-      languageSelector.addEventListener('change', function() {
-        lang = languageSelector.options[languageSelector.selectedIndex].value;
-        locale = locales[lang]
+      if(lastUploadedLocale){
+        if(lastUploadedLocale.custom){
+          // If the last uploaded locale was customized, choose the custom locale as default value
+          languageSelector.value = lastUploadedLocaleID;
+        }else{
+          // If the last uploaded locale was not customized, choose the existing locale in the list as the default value
+          languageSelector.value = lastUploadedLocale.lang;
+        }
+      }
+      languageSelector.addEventListener('change', handleLanguageChange);
+      function handleLanguageChange(){
+        lang = languageSelector.value;
+        locale = structuredClone(locales[lang]);
+        // If the locale is customized, make sure the customization option is activated. If not, disable it.
+        if(Boolean(customizeSelector.checked) !== Boolean(locale.custom)){
+          customizeSelector.checked = Boolean(locale.custom);
+          handleCustomizeChange();
+        }else{
           createLocaleModule();
-      });
-      customizeSelector.addEventListener('change', function() {
+        }
+      }
+      customizeSelector.addEventListener('change', handleCustomizeChange);
+      function handleCustomizeChange(){
         customizeLocale = customizeSelector.checked;
+        // If the user no longer wants to customize, make sure to return to the default lang entry
+        if(!customizeLocale){
+          languageSelector.value = locales[lang].lang;
+          handleLanguageChange();
+        }else{
           createLocaleModule();
-      });
-      // initial value
-      lang = languageSelector.options[languageSelector.selectedIndex].value;
-      locale = locales[lang];
-      customizeLocale = false;
-      createLocaleModule();
+        }
+      }
+      // set initial values
+      handleLanguageChange();
 
 
 
@@ -389,6 +432,11 @@ ${customizeLocale ? `<tr><td class="table_t">Meridian names</td>
 
         var localeModule = createLocaleModule();
 
+        // Save the locale data to make it easier to upload the same locale next time.
+        // If the locale is not customized, only save the lang. The rest of the data will be added when the page loads next time.
+        const savedLocaleData = customizeLocale ? {...locale, custom: true} : {lang: locale.lang};
+        localStorage?.setItem(lastUploadedLocaleID, JSON.stringify(savedLocaleData));
+
         console.log("Locale Module is:",localeModule);
         sendCustomizedApp({
           storage:[