From be51bba14d723b4bbc6613ecec8828c5a98759df Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Tue, 12 Jul 2022 13:51:16 +0200
Subject: [PATCH] Debounce dashboard on:resize

Signed-off-by: Romein van Buren <romein@vburen.nl>
---
 gui/dashboard/app.svelte | 27 +++++++++++++++++++++++++--
 gui/dashboard/lib.js     | 16 ----------------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte
index 2207bef..847ec76 100644
--- a/gui/dashboard/app.svelte
+++ b/gui/dashboard/app.svelte
@@ -3,7 +3,7 @@
   import TileRawValue from './tile-rawvalue.svelte';
   import Settings from './settings.svelte';
   import { flip } from 'svelte/animate';
-  import { proportionalGrid, settings, shuffle, ringBell } from './lib';
+  import { settings, shuffle, ringBell } from './lib';
 
   const [ send, receive ] = shuffle;
   let size = ($settings.cols || 4) * ($settings.rows || 3) - 1;
@@ -11,6 +11,28 @@
   let tiles = [];
   let time = '';
   let globalData = {};
+  let resizeTimer;
+
+  function onResize() {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(proportionalGrid, 750);
+  }
+
+  function proportionalGrid() {
+    const container = document.querySelector('.center');
+    const w = container.clientWidth;
+    const h = container.clientHeight;
+    const tileW = 400;
+    const tileH = 300;
+    const availableCols = Math.floor(w / tileW);
+    const availableRows = Math.floor(h / tileH);
+    console.log(w, h, availableCols, availableRows);
+
+    settings.update({
+      cols: availableCols,
+      rows: availableRows,
+    });
+  }
 
   function tileProps(service) {
     let props = {
@@ -65,6 +87,7 @@
   }
 
   onMount(() => {
+    proportionalGrid();
     const ws = new WebSocket('ws://__SERVER__/statusdashboard/socket');
 
     ws.onmessage = async evt => {
@@ -100,7 +123,7 @@
   });
 </script>
 
-<svelte:window on:resize={proportionalGrid} />
+<svelte:window on:resize={onResize} />
 <Settings />
 
 <div
diff --git a/gui/dashboard/lib.js b/gui/dashboard/lib.js
index fe61468..a7d441d 100644
--- a/gui/dashboard/lib.js
+++ b/gui/dashboard/lib.js
@@ -63,19 +63,3 @@ export function formatDuration(ms) {
     .map(([ key, val ]) => `${val} ${key}`)
     .join(' ');
 }
-
-export function proportionalGrid() {
-  const container = document.querySelector('.center');
-  const w = container.clientWidth;
-  const h = container.clientHeight;
-  const tileW = 400;
-  const tileH = 300;
-  const availableCols = Math.floor(w / tileW);
-  const availableRows = Math.floor(h / tileH);
-  console.log(w, h, availableCols, availableRows);
-
-  settings.update({
-    cols: availableCols,
-    rows: availableRows,
-  });
-}