Dashboard settings (WIP)

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

gui/dashboard/app.css

@@ -0,0 +1,30 @@
+html, body {
+  --body-bg: #000;
+  --tile-bg: #181818;
+  --red: red;
+  --green: green;
+  --radius: 10px;
+  --cols: 4;
+  --rows: 3;
+
+  background-color: var(--body-bg);
+  color: #fff;
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+.theme-light {
+  --body-bg: #fff;
+  --tile-bg: #dedede;
+}
+
+button {
+  transition: linear 0.4s;
+  cursor: pointer;
+  background: none;
+  border: none;
+  appearance: none;
+  padding: 1rem;
+  color: inherit;
+}

gui/dashboard/app.svelte

@@ -1,7 +1,9 @@
 <script>
+  import './app.css';
   import { onMount } from 'svelte';
   import TileRawValue from './tile-rawvalue.svelte';
   import Tiles from './tiles.svelte';
+  import Settings from './settings.svelte';
 
   let lastUpdated = new Date();
   let lastUpdatedFormatted = '';
@@ -10,8 +12,6 @@
   let servicesDown = {};
   let loading = true;
 
-  $:console.log(services);
-
   onMount(() => {
     const ws = new WebSocket('ws://__SERVER__/statusdashboard/socket');
 
@@ -56,6 +56,8 @@
   });
 </script>
 
+<Settings />
+
 <div class="center">
   <div class="ratio">
     <div class="tiles">
@@ -72,21 +74,6 @@
 </div>
 
 <style>
-  :global(html), :global(body) {
-    --tile-bg: #181818;
-    --red: red;
-    --green: green;
-    --radius: 10px;
-    --cols: 4;
-    --rows: 3;
-
-    background-color: #000;
-    color: #fff;
-    padding: 0;
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  }
-
   .center {
     display: flex;
     align-items: center;

gui/dashboard/index.js

@@ -1,7 +1,8 @@
 import App from './app.svelte';
+import { writable } from 'svelte-local-storage-store';
 
-document.addEventListener('DOMContentLoaded', () => {
-  new App({
-    target: document.getElementsByTagName('body')[0],
-  });
+new App({ target: document.body });
+
+export const settings = writable('settings', {
+  theme: 'dark',
 });

gui/dashboard/modal.svelte

@@ -0,0 +1,72 @@
+<script>
+  export let title = '';
+  export let open = false;
+
+  function close() {
+    open = false;
+  }
+</script>
+
+<div class="modal-bg" class:open>
+  <div class="modal">
+    <div class="header">
+      <div class="title">{title}</div>
+      <button class="close" on:click={close}>&times;</button>
+    </div>
+
+    <div class="body">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .modal-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-top: 3rem;
+    background-color: rgba(0, 0, 0, 0.4);
+    align-items: center;
+    justify-content: center;
+    display: none;
+    z-index: 10;
+  }
+
+  .modal-bg.open {
+    display: flex;
+  }
+
+  .modal {
+    background-color: var(--tile-bg);
+    border-radius: var(--radius);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 500px;
+    z-index: 11;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+  }
+
+  .header button.close {
+    margin-left: auto;
+    overflow-y: auto;
+  }
+
+  .header .title {
+    font-weight: 600;
+    font-size: 1.4rem;
+    margin-left: 1rem;
+  }
+
+  .body {
+    flex-grow: 1;
+    padding: 1rem;
+  }
+</style>

gui/dashboard/settings.svelte

@@ -0,0 +1,42 @@
+<script>
+  import Modal from './modal.svelte';
+
+  let open = false;
+
+  function toggle() {
+    open = !open;
+  }
+</script>
+
+{#if !open}
+  <button class="settings" on:click={toggle}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 262.39 262.39">
+      <path fill="currentColor" d="M245.63 103.39h-9.91a107.45 107.45 0 0 0-10.96-26.43l7.02-7.02a16.76 16.76 0 0 0 0-23.7l-15.62-15.62a16.76 16.76 0 0 0-23.7 0l-7.02 7.01A107.48 107.48 0 0 0 159 26.68v-9.92C159 7.5 151.5 0 142.24 0h-22.09c-9.26 0-16.76 7.5-16.76 16.76v9.92a107.47 107.47 0 0 0-26.43 10.95l-7.02-7.01a16.76 16.76 0 0 0-23.7 0L30.62 46.24a16.76 16.76 0 0 0 0 23.7l7.01 7.02a107.45 107.45 0 0 0-10.95 26.43h-9.92c-9.25 0-16.76 7.5-16.76 16.76v22.1C0 151.5 7.5 159 16.76 159h9.92a107.5 107.5 0 0 0 10.95 26.43l-7.01 7.01a16.76 16.76 0 0 0 0 23.7l15.62 15.63a16.76 16.76 0 0 0 23.7 0l7.02-7.02a107.44 107.44 0 0 0 26.43 10.96v9.91c0 9.26 7.5 16.77 16.76 16.77h22.1c9.25 0 16.76-7.51 16.76-16.77v-9.91c9.37-2.49 18.24-6.2 26.43-10.96l7.02 7.02a16.76 16.76 0 0 0 23.7 0l15.62-15.62a16.76 16.76 0 0 0 0-23.7l-7.01-7.02A107.48 107.48 0 0 0 235.72 159h9.91c9.26 0 16.76-7.51 16.76-16.77v-22.09c0-9.26-7.5-16.76-16.76-16.76zm-114.43 87.8c-33.08 0-60-26.91-60-60 0-33.08 26.92-60 60-60s60 26.92 60 60c0 33.09-26.92 60-60 60z"/><path d="M131.2 101.2c-16.54 0-30 13.46-30 30s13.46 30 30 30 30-13.46 30-30-13.46-30-30-30z"/>
+    </svg>
+  </button>
+{/if}
+
+<Modal title="Settings" bind:open>
+  hi
+</Modal>
+
+<style>
+  button.settings {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    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);
+  }
+</style>

index.js

@@ -558,9 +558,10 @@ module.exports = {
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                 <title>Web service status dashboard</title>
                 <style>${renderedDashboard.css || ''}</style>
-                <script>${renderedDashboard.code || ''}</script>
               </head>
-              <body></body>
+              <body>
+                <script>${renderedDashboard.code || ''}</script>
+              </body>
             </html>
           `);
           res.send(dashboardHtml);