Fixed bell

gui/dashboard/apiclient.js

@@ -1,5 +1,3 @@
-import { ringBell } from './lib';
-
 const socketUrl = window.location.href.replace('http', 'ws') + '/socket';
 let reconnectAttempts = 0;
 let ws;
@@ -8,20 +6,8 @@ export async function connect({ onData }) {
   ws = new WebSocket(socketUrl);
 
   ws.onmessage = async evt => {
-    const data = JSON.parse(evt.data || 'false');
-
-    switch (data.cmd) {
-      case 'data':
-        onData(data);
-        break;
-
-      case 'bell':
-        ringBell();
-        break;
-
-      default:
-        break;
-    }
+    const data = JSON.parse(evt.data || '{}');
+    onData(data);
   };
 
   ws.onopen = () => {
@@ -36,5 +22,5 @@ export async function connect({ onData }) {
     await connect({ onData });
   };
 
-  ws.onerror = err => console.error('Connection error', err);
+  ws.onerror = err => console.error('Connection error:', err);
 }

gui/dashboard/app.svelte

@@ -3,7 +3,7 @@
   import Tile from './tile.svelte';
   import Settings from './settings.svelte';
   import { flip } from 'svelte/animate';
-  import { settings, shuffle } from './lib';
+  import { ringBell, settings, shuffle } from './lib';
   import { connect } from './apiclient';
 
   const [ send, receive ] = shuffle;
@@ -91,13 +91,18 @@
 
   onMount(async () => {
     await connect({
-      onData: data => {
-        allTiles = data.tiles?.map(tile => {
+      onData: ({ tiles, newOutage }) => {
+        allTiles = tiles?.map(tile => {
           if (tile?.service?.checked) {
             tile.service.checked = new Date(tile.service.checked);
           }
           return tile;
         });
+
+        if (newOutage) {
+          ringBell();
+        }
+
         organiseGrid();
         hasData = true;
       },

gui/dashboard/settings.svelte

@@ -1,6 +1,6 @@
 <script>
   import Modal from './modal.svelte';
-  import { settings } from './lib';
+  import { ringBell, settings } from './lib';
 
   let open = false;
   let showCopyCheck = false;
@@ -43,6 +43,9 @@
         </svg>
       {/if}
     </button>
+    <button on:click={ringBell} class="btn">
+      Test bell
+    </button>
   </div>
 
   <label>
@@ -87,9 +90,9 @@
   }
 
   button.copy svg {
-    fill: var(--green);
+    fill: currentColor;
     height: 1rem;
     width: 1rem;
-    margin-left: 1rem;
+    margin-left: 0.5rem;
   }
 </style>