finish implementing json dictionary manager

json_config.js

@@ -52,6 +52,91 @@ function toggle()
     
     save_dicts();
 }
+function add_blank()
+{
+    dicts.push({"name": "Unnamed", "entries": "[]", "enabled": true});
+    let list = document.getElementById("dicts");
+    
+    let option = document.createElement("option");
+    option.innerText = "Unnamed";
+    option.value = "Unnamed";
+    list.appendChild(option);
+    
+    save_dicts();
+}
+
+function errormessage(text)
+{
+    if(!text) return;
+    let mydiv = document.createElement("div");
+    mydiv.style = "background-color: #111; color: #CCC; font-family: Arial, sans-serif; font-size: 13px; width: 300px; border: 3px double red; position: fixed; right: 25px; top: 25px; z-index: 1000000000000000000000; padding: 5px; border-radius: 3px;"
+    mydiv.textContent = text;
+    document.body.appendChild(mydiv);
+    
+    function delete_later()
+    {
+        mydiv.remove();
+    }
+    
+    setTimeout(delete_later, 3000);
+}
+
+function edit()
+{
+    let list = document.getElementById("dicts");
+    let index = list.selectedIndex;
+    if(index == -1)
+        return;
+    if(dicts[index].entries.length > 100*1000)
+    {
+        errormessage("This dictionary is too large to edit within your web browser.");
+        return;
+    }
+    
+    let name = dicts[index].name;
+    let entries = JSON.stringify(JSON.parse(dicts[index].entries), null, 2);
+    console.log(entries);
+    
+    document.getElementById("dict_manager").className = "closed";
+    document.getElementById("dict_editor").className = "";
+    document.getElementById("edit_name").value = name;
+    document.getElementById("edit_entries").value = entries;
+    
+}
+function edit_cancel()
+{
+    document.getElementById("dict_manager").className = "";
+    document.getElementById("dict_editor").className = "closed";
+    document.getElementById("edit_entries").value = "";
+}
+function edit_apply()
+{
+    try
+    {
+        let list = document.getElementById("dicts");
+        let index = list.selectedIndex;
+        if(index != -1)
+        {
+            let new_name = document.getElementById("edit_name").value;
+            let new_json = JSON.stringify(JSON.parse(document.getElementById("edit_entries").value));
+            dicts[index].name = new_name;
+            dicts[index].entries = new_json;
+            list[index].value = new_name;
+            list[index].innerText = new_name;
+            
+            save_dicts();
+        }
+    }
+    catch(e)
+    {
+        errormessage(e);
+    }
+}
+function edit_okay()
+{
+    edit_apply();
+    edit_cancel();
+}
 
 function or_default(val, fallback)
 {
@@ -68,9 +153,9 @@ async function get_storage_or_default(name, fallback)
 async function insert_dicts()
 {
     let list = document.getElementById("dicts");
-    list.innerHTML = "";
     
     dicts = (await get_storage_or_default("custom_dicts", []));
+    list.innerHTML = "";
     
     for(let stored_dict of dicts)
     {
@@ -83,11 +168,118 @@ async function insert_dicts()
     }
 }
 
+let delete_timeout = undefined;
+
+function really_delete()
+{
+    console.log("on REALLY delete");
+    set_base_delete_mode();
+    
+    let list = document.getElementById("dicts");
+    let index = list.selectedIndex;
+    if(index == -1)
+        return;
+    console.log("gonna delete it!");
+    
+    dicts.splice(index, 1);
+    list.remove(index);
+    
+    save_dicts();
+}
+
+function ask_delete()
+{
+    document.getElementById("delete").onclick = really_delete;
+    document.getElementById("delete").innerText = "REALLY Delete";
+    delete_timeout = setTimeout(set_base_delete_mode, 5000);
+}
+
+function set_base_delete_mode()
+{
+    try
+    {
+        clearTimeout(delete_timeout);
+    } catch(e) {}
+    delete_timeout = undefined;
+    document.getElementById("delete").onclick = ask_delete;
+    document.getElementById("delete").innerText = "Delete";
+}
+
+function import_new()
+{
+    document.getElementById("file_input").click();
+}
+
+function export_dict()
+{
+    let list = document.getElementById("dicts");
+    let index = list.selectedIndex;
+    if(index == -1)
+        return;
+    
+    let name = dicts[index].name;
+    let obj = JSON.parse(dicts[index].entries);
+    obj.unshift(name);
+    
+    let blob = new Blob([JSON.stringify(obj, null, 2)], {type: 'text/plain'});
+    let url = window.URL.createObjectURL(blob);
+
+    let a = document.createElement("a");
+    a.href = url;
+    a.download = "nazeka_dict_export_"+name+".json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    
+    window.URL.revokeObjectURL(url);
+}
+
+
 function buildpage()
 {
     document.getElementById("move_up").onclick = move_up;
     document.getElementById("move_down").onclick = move_down;
     document.getElementById("toggle").onclick = toggle;
+    document.getElementById("add").onclick = add_blank;
+    document.getElementById("edit").onclick = edit;
+    document.getElementById("delete").onclick = ask_delete;
+    document.getElementById("edit_apply").onclick = edit_apply;
+    document.getElementById("edit_okay").onclick = edit_okay;
+    document.getElementById("edit_cancel").onclick = edit_cancel;
+    
+    document.getElementById("import").onclick = import_new;
+    document.getElementById("export").onclick = export_dict;
+    
+    
+    document.getElementById("file_input").onchange = () =>
+    {
+        let fname = document.getElementById("file_input").files[0];
+        let reader = new FileReader();
+        reader.onload = async(e) =>
+        {
+            // FIXME: add asking for the unlimited storage permission
+            try
+            {
+                let myobj = JSON.parse(e.target.result);
+                let name = myobj.shift();
+                dicts.push({"name": name, "entries": JSON.stringify(myobj), "enabled": true});
+                
+                let option = document.createElement("option");
+                option.innerText = name;
+                option.value = name;
+                
+                let list = document.getElementById("dicts");
+                list.appendChild(option);
+                
+                save_dicts();
+            }
+            catch(e)
+            {
+                errormessage(e);
+            }
+        };
+        reader.readAsText(fname);
+    };
     
     insert_dicts();
 }