Dashboard settings using localStorage

Signed-off-by: Romein van Buren <romein@vburen.nl>

gui/dashboard/app.css

@@ -4,6 +4,7 @@ html, body {
   --grey: grey;
   --red: red;
   --green: green;
+  --dark: #0a0a0a;
   --radius: 10px;
   --cols: 4;
   --rows: 3;
@@ -18,6 +19,11 @@ html, body {
 .theme-light {
   --body-bg: #fff;
   --tile-bg: #dedede;
+  --dark: #c2c2c2;
+}
+
+.mb {
+  margin-bottom: 1rem;
 }
 
 button {
@@ -28,4 +34,29 @@ button {
   appearance: none;
   padding: 1rem;
   color: inherit;
+  font: inherit;
+}
+
+.btn {
+  border: 1px solid var(--dark);
+  padding: 0.7rem;
+  border-radius: var(--radius);
+}
+
+.btn:hover {
+  background-color: var(--dark);
+}
+
+label {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+label input,
+label select {
+  display: block;
+  width: 100%;
+  margin-top: 0.5rem;
+  font-size: 1rem;
+  font-family: inherit;
 }

gui/dashboard/index.js

@@ -1,8 +1,21 @@
+import { get, writable } from 'svelte/store';
 import App from './app.svelte';
-import { writable } from 'svelte-local-storage-store';
 
 new App({ target: document.body });
 
-export const settings = writable('settings', {
-  theme: 'dark',
-});
+function createSettingsStore() {
+  const s = writable(0);
+
+  function updateStorage(val) {
+    window.localStorage.setItem('statusdash', JSON.stringify(val));
+    s.set(val);
+  }
+
+  return {
+    subscribe: s.subscribe,
+    set: val => updateStorage(val),
+    update: val => updateStorage({ ...get(s), val }),
+  };
+}
+
+export const settings = createSettingsStore();

gui/dashboard/modal.svelte

@@ -52,11 +52,19 @@
   .header {
     display: flex;
     align-items: center;
+    border-bottom: 1px solid var(--dark);
   }
 
   .header button.close {
     margin-left: auto;
     overflow-y: auto;
+    font-size: 1.5rem;
+    border-radius: var(--radius);
+    border-radius: 0 var(--radius) 0 0;
+  }
+
+  .header button.close:hover {
+    background-color: var(--dark);
   }
 
   .header .title {

gui/dashboard/settings.svelte

@@ -1,11 +1,39 @@
 <script>
   import Modal from './modal.svelte';
+  import { settings } from './index';
+  import { onMount } from 'svelte';
+  import { get } from 'svelte/store';
 
   let open = false;
+  let showCopyCheck = false;
+  let options = {};
+
+  let theme = 'dark';
+
+  onMount(() => {
+    ({ theme } = get(settings));
+  });
+
+  function fillOptions() {
+    options = { theme };
+  }
 
   function toggle() {
     open = !open;
   }
+
+  function copy() {
+    if (typeof navigator.clipboard?.writeText === 'function') {
+      navigator.clipboard.writeText(JSON.stringify(options));
+      showCopyCheck = true;
+      setTimeout(() => showCopyCheck = false, 2000);
+    }
+  }
+
+  function change() {
+    fillOptions();
+    settings.set(options);
+  }
 </script>
 
 {#if !open}
@@ -17,7 +45,24 @@
 {/if}
 
 <Modal title="Settings" bind:open>
-  hi
+  <div class="mb">
+    <button on:click={copy} class="btn copy">
+      Copy settings to clipboard
+      {#if showCopyCheck}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 405.27 405.27">
+          <path d="M393.4 124.42 179.6 338.21a40.57 40.57 0 0 1-57.36 0L11.88 227.84a40.56 40.56 0 0 1 57.35-57.37l81.7 81.7 185.1-185.1a40.57 40.57 0 0 1 57.37 57.36z"/>
+        </svg>
+      {/if}
+    </button>
+  </div>
+
+  <label for="theme">
+    Color theme
+    <select id="theme" bind:value={theme} on:change={change}>
+      <option value="dark">Dark</option>
+      <option value="light">Light</option>
+    </select>
+  </label>
 </Modal>
 
 <style>
@@ -28,15 +73,25 @@
     opacity: 0.4;
     color: #fff;
   }
+
   button.settings svg {
     width: 20px;
     height: 20px;
     transition: linear 0.4s;
   }
+
   button.settings:hover {
     opacity: 0.9;
   }
+
   button.settings:hover svg {
     transform: rotate(90deg);
   }
+
+  button.copy svg {
+    fill: var(--green);
+    height: 1rem;
+    width: 1rem;
+    margin-left: 1rem;
+  }
 </style>

index.js

@@ -2,8 +2,8 @@
 
 const { fork } = require('child_process');
 const { processOutage } = require('./lib/processoutage');
-const buildDashboard = require('./dashboard/build');
-const createDashboardSocket = require('./dashboard/socket');
+const buildDashboard = require('./lib/dashboard/build');
+const createDashboardSocket = require('./lib/dashboard/socket');
 const { minifyHtml } = require('core/strings');
 const { readFile } = require('fs/promises');
 

lib/dashboard/build.js

@@ -17,7 +17,7 @@ async function build({ server, settings }) {
 
   try {
     const bundle = await rollup({
-      input: __dirname + '/../gui/dashboard/index.js',
+      input: __dirname + '/../../gui/dashboard/index.js',
       plugins: [
         // Svelte
         svelte({