interface updates

thiccnfun · Apr 28, 2024 · 80aa4a2 · 80aa4a2
1 parent 46fb32f
commit 80aa4a2
Show file tree

Hide file tree

Showing 22 changed files with 920 additions and 686 deletions.
diff --git a/interface/package-lock.json b/interface/package-lock.json
diff --git a/interface/package.json b/interface/package.json
@@ -34,15 +34,15 @@
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.1",
 		"typescript": "^5.1.6",
-		"unplugin-icons": "^0.17.0",
+		"unplugin-icons": "^0.18.5",
 		"vite": "^4.4.8"
 	},
 	"type": "module",
 	"dependencies": {
 		"chart.js": "^4.4.0",
 		"compare-versions": "^6.0.0",
 		"daisyui": "^3.5.1",
-		"jwt-decode": "^3.1.2",
+		"jwt-decode": "^4.0.0",
 		"svelte-dnd-list": "^0.1.8",
 		"svelte-modals": "^1.3.0",
 		"svelte-range-slider-pips": "^2.3.1"

diff --git a/interface/postcss.config.js b/interface/postcss.config.js
@@ -3,9 +3,9 @@ import autoprefixer from 'autoprefixer';
 import postcssRemoveClasses from 'postcss-remove-classes';
 
 export default {
-  plugins: [
-    tailwindcss(),
-    autoprefixer(),
-    postcssRemoveClasses.default('range'),
-  ],
-}
+	plugins: [
+		tailwindcss(),
+		autoprefixer(),
+		postcssRemoveClasses.default('range')
+	]
+};
diff --git a/interface/src/app.css b/interface/src/app.css
@@ -3,132 +3,132 @@
 @tailwind utilities;
 
 .blink {
-  animation: blink 0.33s linear infinite;
-}
-@keyframes blink {
-  50% {
-    opacity: 0;
+    animation: blink 0.33s linear infinite;
   }
-}
-
-/* https://simeydotme.github.io/svelte-range-slider-pips/en/recipes/daisy-ui/ */
-
-/**
- * Range Slider default size/colors
- */
-.rangeSlider {
-  font-size: 18px;
-  --handleBg: var(--range-inactive);
-}
-
-.rangeSlider.focus { 
-  --handleBg: var(--range); 
-}
-
-/**
- * Track / Bar
- */
-.rangeSlider .rangeBar {
-  height: 1.4em;
-  top: .25em;
-  /* translate:  0 -50%; */
-}
-
-.rangeSlider.range .rangeBar {
-  border-radius: 0;
-}
-
-.rangeSlider.range.min .rangeBar {
-  border-radius: 100px 0 0 100px;
-}
-
-.rangeSlider.range.max .rangeBar {
-  border-radius: 0 100px 100px 0;
-}
-
-/** 
- * Handles / Floats
- */
-.rangeSlider .rangeNub,
-.rangeSlider.focus .rangeNub {
-  background: white;
-  border: 3px solid var(--handleBg);
-}
-
-.rangeSlider .rangeFloat {
-  border-radius: 2em;
-  min-width: 2em;
-}
-
-.rangeSlider.range .rangeFloat {
-  left: 0;
-  transform: translateX(100%);
-}
-
-/* float position on the first handle (or min-range slider) */
-.rangeSlider.range.min .rangeFloat,
-.rangeSlider.range.min:hover .rangeFloat,
-.rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2) .rangeFloat,
-.rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2):hover .rangeFloat {
-  left: auto;
-  right: 0;
-  transform: translateX(-1.5em);
-  background: transparent;
-}
-
-/* float position on the second handle (or max-range slider) */
-.rangeSlider.range.max .rangeFloat,
-.rangeSlider.range.max:hover .rangeFloat,
-.rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1) .rangeFloat,
-.rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1):hover .rangeFloat {
-  left: 0;
-  transform: translateX(1.5em);
-  background: transparent;
-}
-
-/* flip the float position on the first handle when range is < 20 */
-.daisy-ui.minFlip .rangeSlider.range.min .rangeFloat,
-.daisy-ui.minFlip .rangeSlider.range.min:hover .rangeFloat,
-.daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2) .rangeFloat,
-.daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2):hover .rangeFloat {
-  left: 0;
-  transform: translateX(1.75em);
-  background: var(--handleBg);
-}
-
-/* flip the float position on the second handle when range is > 80 */
-.daisy-ui.maxFlip .rangeSlider.range.max .rangeFloat,
-.daisy-ui.maxFlip .rangeSlider.range.max:hover .rangeFloat,
-.daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1) .rangeFloat,
-.daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1):hover .rangeFloat {
-  left: auto;
-  right: 0;
-  transform: translateX(-1.75em);
-  background: var(--handleBg);
-}
-
-/**
- * Pips
- */
-.rangeSlider .rangePips {
-  z-index: 1;
-}
-
-.rangeSlider .pip {
-  border-radius: 3px;
-  background: var(--slider);
-  translate: -1px -5px;
-}
-
-.rangeSlider .pip.selected,
-.rangeSlider .pip.in-range {
-  width: 3px;
-  background: var(--handleBg);
-  translate: -1px -1px;
-}
-
-.rangeSlider .pip.in-range {
-  width: 1px;
-  height: 4px;
-  background: hsla(0, 0%, 100%, 0.75);
-}
+  @keyframes blink {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  /* https://simeydotme.github.io/svelte-range-slider-pips/en/recipes/daisy-ui/ */
+
+  /**
+   * Range Slider default size/colors
+   */
+  .rangeSlider {
+    font-size: 18px;
+    --handleBg: var(--range-inactive);
+  }
+
+  .rangeSlider.focus { 
+    --handleBg: var(--range); 
+  }
+
+  /**
+   * Track / Bar
+   */
+  .rangeSlider .rangeBar {
+    height: 1.4em;
+    top: .25em;
+    /* translate:  0 -50%; */
+  }
+
+  .rangeSlider.range .rangeBar {
+    border-radius: 0;
+  }
+
+  .rangeSlider.range.min .rangeBar {
+    border-radius: 100px 0 0 100px;
+  }
+
+  .rangeSlider.range.max .rangeBar {
+    border-radius: 0 100px 100px 0;
+  }
+
+  /** 
+   * Handles / Floats
+   */
+  .rangeSlider .rangeNub,
+  .rangeSlider.focus .rangeNub {
+    background: white;
+    border: 3px solid var(--handleBg);
+  }
+
+  .rangeSlider .rangeFloat {
+    border-radius: 2em;
+    min-width: 2em;
+  }
+
+  .rangeSlider.range .rangeFloat {
+    left: 0;
+    transform: translateX(100%);
+  }
+
+  /* float position on the first handle (or min-range slider) */
+  .rangeSlider.range.min .rangeFloat,
+  .rangeSlider.range.min:hover .rangeFloat,
+  .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2) .rangeFloat,
+  .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2):hover .rangeFloat {
+    left: auto;
+    right: 0;
+    transform: translateX(-1.5em);
+    background: transparent;
+  }
+
+  /* float position on the second handle (or max-range slider) */
+  .rangeSlider.range.max .rangeFloat,
+  .rangeSlider.range.max:hover .rangeFloat,
+  .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1) .rangeFloat,
+  .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1):hover .rangeFloat {
+    left: 0;
+    transform: translateX(1.5em);
+    background: transparent;
+  }
+
+  /* flip the float position on the first handle when range is < 20 */
+  .daisy-ui.minFlip .rangeSlider.range.min .rangeFloat,
+  .daisy-ui.minFlip .rangeSlider.range.min:hover .rangeFloat,
+  .daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2) .rangeFloat,
+  .daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(2):hover .rangeFloat {
+    left: 0;
+    transform: translateX(1.75em);
+    background: var(--handleBg);
+  }
+
+  /* flip the float position on the second handle when range is > 80 */
+  .daisy-ui.maxFlip .rangeSlider.range.max .rangeFloat,
+  .daisy-ui.maxFlip .rangeSlider.range.max:hover .rangeFloat,
+  .daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1) .rangeFloat,
+  .daisy-ui.rangeFlip .rangeSlider.range:not(.min):not(.max) .rangeHandle:nth-child(1):hover .rangeFloat {
+    left: auto;
+    right: 0;
+    transform: translateX(-1.75em);
+    background: var(--handleBg);
+  }
+
+  /**
+   * Pips
+   */
+  .rangeSlider .rangePips {
+    z-index: 1;
+  }
+
+  .rangeSlider .pip {
+    border-radius: 3px;
+    background: var(--slider);
+    translate: -1px -5px;
+  }
+
+  .rangeSlider .pip.selected,
+  .rangeSlider .pip.in-range {
+    width: 3px;
+    background: var(--handleBg);
+    translate: -1px -1px;
+  }
+
+  .rangeSlider .pip.in-range {
+    width: 1px;
+    height: 4px;
+    background: hsla(0, 0%, 100%, 0.75);
+  }
diff --git a/interface/src/lib/components/UpdateIndicator.svelte b/interface/src/lib/components/UpdateIndicator.svelte
@@ -17,9 +17,10 @@
 	let firmwareDownloadLink: string;
 
 	async function getGithubAPI() {
+		const githubUrl = `https://api.github.com/repos/${$page.data.github}/releases/latest`;
 		try {
 			const response = await fetch(
-				'https://api.github.com/repos/' + $page.data.github + '/releases/latest',
+				githubUrl,
 				{
 					method: 'GET',
 					headers: {
@@ -28,6 +29,9 @@
 					}
 				}
 			);
+			if (response.status !== 200) {
+				throw new Error(`Failed to fetch latest release from ${githubUrl}`);
+			}
 			const results = await response.json();
 
 			update = false;

diff --git a/interface/src/lib/components/toasts/notifications.ts b/interface/src/lib/components/toasts/notifications.ts
@@ -1,40 +1,30 @@
-import { writable, derived } from 'svelte/store';
+import { writable, derived, type Writable } from 'svelte/store';
+
+type StateType = 'info' | 'success' | 'warning' | 'error';
 
 type State = {
 	id: string;
-	type: string;
+	type: StateType;
 	message: string;
-	timeout: number;
 };
 
 function createNotificationStore() {
 	const state: State[] = [];
-	const _notifications = writable(state);
+	const notifications = writable(state);
+	const { subscribe } = notifications;
 
-	function send(message: string, type = 'info', timeout: number) {
-		_notifications.update((state) => {
-			return [...state, { id: id(), type, message, timeout }];
+	function send(message: string, type: StateType = 'info', timeout: number) {
+		const id = generateId();
+		setTimeout(() => {
+			notifications.update((state) => {
+				return state.filter((n) => n.id !== id);
+			});
+		}, timeout);
+		notifications.update((state) => {
+			return [...state, { id, type, message }];
 		});
 	}
 
-	let timers = [];
-
-	const notifications = derived(_notifications, ($_notifications, set) => {
-		set($_notifications);
-		if ($_notifications.length > 0) {
-			const timer = setTimeout(() => {
-				_notifications.update((state) => {
-					state.shift();
-					return state;
-				});
-			}, $_notifications[0].timeout);
-			return () => {
-				clearTimeout(timer);
-			};
-		}
-	});
-	const { subscribe } = notifications;
-
 	return {
 		subscribe,
 		send,
@@ -45,7 +35,7 @@ function createNotificationStore() {
 	};
 }
 
-function id() {
+function generateId() {
 	return '_' + Math.random().toString(36).substr(2, 9);
 }