smartyellow/status
1
0
Fork 0
mirror of https://github.com/smartyellow/status.git synced 2025-01-18 21:47:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Debounce dashboard on:resize

Browse Source 
Signed-off-by: Romein van Buren <romein@vburen.nl>
This commit is contained in:
Romein van Buren 2022-07-12 13:51:16 +02:00
parent 8ab20c9e2e
commit be51bba14d
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
gui/dashboard/app.svelte
View File

@ -3,7 +3,7 @@
import TileRawValue from './tile-rawvalue.svelte'; import TileRawValue from './tile-rawvalue.svelte';
import Settings from './settings.svelte'; import Settings from './settings.svelte';
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
import { proportionalGrid, settings, shuffle, ringBell } from './lib'; import { settings, shuffle, ringBell } from './lib';
const [ send, receive ] = shuffle; const [ send, receive ] = shuffle;
let size = ($settings.cols || 4) * ($settings.rows || 3) - 1; let size = ($settings.cols || 4) * ($settings.rows || 3) - 1;
@ -11,6 +11,28 @@
let tiles = []; let tiles = [];
let time = ''; let time = '';
let globalData = {}; 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) { function tileProps(service) {
let props = { let props = {
@ -65,6 +87,7 @@
} }
onMount(() => { onMount(() => {
proportionalGrid();
const ws = new WebSocket('ws://__SERVER__/statusdashboard/socket'); const ws = new WebSocket('ws://__SERVER__/statusdashboard/socket');
ws.onmessage = async evt => { ws.onmessage = async evt => {
@ -100,7 +123,7 @@
}); });
</script> </script>
<svelte:window on:resize={proportionalGrid} /> <svelte:window on:resize={onResize} />
<Settings /> <Settings />
<div <div

16
gui/dashboard/lib.js
View File

@ -63,19 +63,3 @@ export function formatDuration(ms) {
.map(([ key, val ]) => `${val} ${key}`) .map(([ key, val ]) => `${val} ${key}`)
.join(' '); .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,
});
}