add config import button 😲

README.md

@@ -27,7 +27,7 @@ The project is in a very early stage. More detailed customization options and fe
  * refresh on reaction
  * watched players (notify when a watched player enters/leaves the server)
  * detect when the server goes offline, notify when player number crosses a threshold
- * bot commands (reinit message, cleanup, start/stop, configure)
+ * bot commands (reinit message, cleanup, start/stop, post server status, configure)
  * more integrations: slack, ms teams, twillio (email, sms)
  * ~~web ui to manage & configure the servers and bots~~
  * put custom information in the channel name or bot status (online status indicator, number of players, map)

TODO

@@ -1,10 +1,8 @@
-// import config button!
 // move loop inside watcher instance
 // flush game server specific (d/t) data
-// print server info on demand / command
 // response normalization: https://github.com/GameServerManagers/LinuxGSM/blob/master/lgsm/functions/query_gamedig.sh
-// support gamedig udpListenPort config
 
 //v3
 // refactor config structure
-// introduce storage layer and add free postgresql support
+// introduce storage layer and add free postgresql support
+// support gamedig udpListenPort config

public/main.css

@@ -80,7 +80,8 @@ body>nav {
 }
 
 #config-form .json-editor-btn-add,
-#config-form .json-editor-btn-save {
+#config-form .json-editor-btn-save,
+#config-form .json-editor-btn-file-import {
     background-color: darkgreen;
 }
 #config-form .json-editor-btn-add span {
@@ -97,7 +98,8 @@ body>nav {
     display: none;
 }
 
-#config-form .json-editor-btn-copy {
+#config-form .json-editor-btn-copy,
+#config-form .json-editor-btn-file-export {
     background-color: darkblue;
 }
 

public/main.js

@@ -2,7 +2,7 @@ let configEditor;
 $(async () => {
     const gswFeatures = await fetchApi('GET', 'features');
     if (gswFeatures) {
-        await setRandomBg().catch(() => {});
+        await setRandomBg().catch(() => { });
         setInterval(setRandomBg, 60000);
 
         let unsavedChanges = false;
@@ -69,7 +69,8 @@ $(async () => {
             });
 
             configEditor.on('ready', () => {
-                addExportButton();
+                addExportImportButtons();
+
                 $('#config-form').submit(e => {
                     e.preventDefault();
                 });
@@ -162,13 +163,15 @@ function checkForChanges(formCurrVal) {
     }
 };
 
-function addExportButton() {
+function addExportImportButtons() {
     const button_holder = configEditor.root.theme.getHeaderButtonHolder();
-    const exportBtn = configEditor.root.getButton('Export', 'save', 'Export As JSON File');
+    const exportBtn = configEditor.root.getButton('Export', 'file-export', 'Export as JSON file');
+    const importBtn = configEditor.root.getButton('Import', 'file-import', 'Import from JSON file');
     button_holder.appendChild(exportBtn);
+    button_holder.appendChild(importBtn);
     configEditor.root.header.parentNode.insertBefore(button_holder, configEditor.root.header.nextSibling);
 
-    exportBtn.addEventListener('click', e => {
+    exportBtn.onclick = e => {
         e.preventDefault();
         const dt = (new Date()).toISOString().slice(0, 19).replace(/\D/g, '');
         const filename = dt + '-gsw.config.json';
@@ -189,7 +192,28 @@ function addExportButton() {
                 'cancelable': false
             }));
         }
-    }, false);
+    };
+
+    const fileSelector = document.createElement('input');
+    fileSelector.type = 'file';
+    fileSelector.accept = 'application/json';
+
+    fileSelector.onchange = e => {
+        const file = e.target.files[0];
+
+        const reader = new FileReader();
+        reader.readAsText(file, 'UTF-8');
+
+        reader.onload = readerEvent => {
+            const content = JSON.parse(readerEvent.target.result);
+            configEditor.setValue(content);
+        };
+    };
+
+    importBtn.onclick = e => {
+        e.preventDefault();
+        fileSelector.click();
+    };
 }
 
 function logout() {