env: deploy script & minor ui changes

apps/front/.env.example

@@ -0,0 +1,3 @@
+SSH_TO_SERVER=user@server
+PATH_APPS=~/apps
+HOSTNAME_GB_APP=gb.example.com

apps/front/Makefile

@@ -0,0 +1,20 @@
+.PHONY: *
+-include .env.prod
+export $(shell sed 's/=.*//' .env.prod)
+
+# Replace env variables in index.html
+build:
+	pnpm run build
+
+# Copy files to server
+copy-files:
+	rsync -avhzru -P -e ssh --include-from='prod.deploy.files.txt' --exclude '*' ./ $(SSH_TO_SERVER):$(PATH_APPS)/gb
+
+# Deploy Immich
+up-gb:
+	ssh homelab "cd $(PATH_APPS)/gb && docker compose --env-file ../.env --env-file .env.prod -f prod.compose.yml up -d"
+
+deploy:
+	make build
+	make copy-files
+	make up-gb

apps/front/package.json

@@ -11,15 +11,15 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest",
 		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+		"format": "prettier --write .",
+		"prod:deploy": "make deploy"
 	},
 	"dependencies": {
 		"chart.js": "^4.4.1",
-		"pnpm": "^8.15.0",
 		"svelte-chartjs": "^3.1.2"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tailwindcss/forms": "^0.5.7",

apps/front/pnpm-lock.yaml

@@ -8,17 +8,14 @@ dependencies:
   chart.js:
     specifier: ^4.4.1
     version: 4.4.1
-  pnpm:
-    specifier: ^8.15.0
-    version: 8.15.0
   svelte-chartjs:
     specifier: ^3.1.2
     version: 3.1.2(chart.js@4.4.1)(svelte@4.2.9)
 
 devDependencies:
-  '@sveltejs/adapter-auto':
+  '@sveltejs/adapter-static':
-    specifier: ^3.0.0
+    specifier: ^3.0.1
-    version: 3.1.1(@sveltejs/kit@2.4.3)
+    version: 3.0.1(@sveltejs/kit@2.4.3)
   '@sveltejs/kit':
     specifier: ^2.0.0
     version: 2.4.3(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.12)
@@ -551,13 +548,12 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
-  /@sveltejs/adapter-auto@3.1.1(@sveltejs/kit@2.4.3):
+  /@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.4.3):
-    resolution: {integrity: sha512-6LeZft2Fo/4HfmLBi5CucMYmgRxgcETweQl/yQoZo/895K3S9YWYN4Sfm/IhwlIpbJp3QNvhKmwCHbsqQNYQpw==}
+    resolution: {integrity: sha512-6lMvf7xYEJ+oGeR5L8DFJJrowkefTK6ZgA4JiMqoClMkKq0s6yvsd3FZfCFvX1fQ0tpCD7fkuRVHsnUVgsHyNg==}
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
       '@sveltejs/kit': 2.4.3(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.12)
-      import-meta-resolve: 4.0.0
     dev: true
 
   /@sveltejs/kit@2.4.3(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.12):
@@ -2068,12 +2064,6 @@ packages:
       pathe: 1.1.2
     dev: true
 
-  /pnpm@8.15.0:
-    resolution: {integrity: sha512-6kVRfVKF0SPqwCw3k1Bfof1tqQovxg0ejZ4MHpKSiG7Pr/UT8GK50cyAIbuGFQM7GsW+o7LuP8FlptcDS75rAw==}
-    engines: {node: '>=16.14'}
-    hasBin: true
-    dev: false
-
   /postcss-import@15.1.0(postcss@8.4.33):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}

apps/front/prod.compose.yml

@@ -0,0 +1,31 @@
+version: '3.8'
+
+networks:
+  proxy:
+    external: true
+
+services:
+  gb-app:
+    container_name: gb-app
+    image: nginx:alpine
+    volumes:
+      - ./build:/usr/share/nginx/html:ro
+    restart: unless-stopped
+    networks:
+      - proxy
+      - default
+    deploy:
+      resources:
+        limits:
+          memory: 256M
+          cpus: '0.25'
+    security_opt:
+      - no-new-privileges:true
+    labels:
+      - "traefik.enable=true"
+      - "traefik.docker.network=proxy"
+      - "traefik.http.routers.gb-app.rule=Host(`${HOSTNAME_GB_APP}`)"
+      - "traefik.http.routers.gb-app.entrypoints=websecure"
+      - "traefik.http.routers.gb-app.tls=true"
+      - "traefik.http.routers.gb-app.tls.certresolver=myresolver"
+      - "traefik.http.services.gb-app.loadbalancer.server.port=80"

apps/front/prod.deploy.files.txt

@@ -0,0 +1,3 @@
+build/***
+prod.compose.yml
+.env.prod

apps/front/src/lib/client/components/chartMotion.svelte

@@ -18,7 +18,7 @@
 		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 		datasets: [
 			{
-				label: 'Motion detection',
+				label: 'Motion detection, # of people',
 				fill: true,
 				lineTension: 0.3,
 				backgroundColor: 'rgba(225, 204,230, .3)',
@@ -36,7 +36,7 @@
 				pointHoverBorderWidth: 2,
 				pointRadius: 1,
 				pointHitRadius: 10,
-				data: [65, 59, 80, 81, 56, 55, 40]
+				data: [900, 850, 1000, 1200, 1500, 1300, 1100]
 			}
 		]
 	};

apps/front/src/lib/client/components/chartPower.svelte

@@ -18,7 +18,7 @@
 		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 		datasets: [
 			{
-				label: 'Power consumption',
+				label: 'Power consumption, kWh',
 				fill: true,
 				lineTension: 0.3,
 				backgroundColor: 'rgba(225, 204,230, .3)',
@@ -36,7 +36,7 @@
 				pointHoverBorderWidth: 2,
 				pointRadius: 1,
 				pointHitRadius: 10,
-				data: [65, 59, 80, 81, 56, 55, 40]
+				data: [1200, 1100, 1850, 1500, 1600, 1550, 1450]
 			}
 		]
 	};

apps/front/src/lib/client/components/chartVoltage.svelte

@@ -18,7 +18,7 @@
 		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 		datasets: [
 			{
-				label: 'Voltage',
+				label: 'Voltage, V',
 				fill: true,
 				lineTension: 0.3,
 				backgroundColor: 'rgba(225, 204,230, .3)',
@@ -36,7 +36,7 @@
 				pointHoverBorderWidth: 2,
 				pointRadius: 1,
 				pointHitRadius: 10,
-				data: [65, 59, 80, 81, 56, 55, 40]
+				data: [224, 223, 221, 220, 222, 224, 223]
 			}
 		]
 	};

apps/front/src/lib/client/components/table.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Badge from '$lib/client/components/badgeStatus.svelte';
-	export let title = 'Failed devices';
+	export let title = 'Faulty devices';
 	export let description =
 		'Lamp is not working / too much voltage / no signal from device for a long time.';
 	export let link = '#';

apps/front/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

apps/front/src/routes/+page.svelte

@@ -128,8 +128,6 @@
 		</ul>
 	</div>
 
-	<Table />
-
 	<ul
 			class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8
 	*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
@@ -144,4 +142,6 @@
 			<ChartVoltage />
 		</li>
 	</ul>
+
+	<Table />
 </section>

apps/front/src/routes/admin/+page.svelte

@@ -0,0 +1,3 @@
+<h1 class="text-3xl font-bold text-center text-gray-900">
+    To be discussed...
+</h1>

apps/front/src/routes/map/+page.svelte

@@ -14,33 +14,42 @@
 </script>
 
 <section class="space-y-4 lg:space-y-8">
+    <h1 class="text-2xl font-semibold text-right text-gray-400">Create new zones with edit buttons:</h1>
     <div class="flex relative overflow-hidden rounded-xl border border-gray-200 bg-white">
+
+
         <Map/>
 
         <div class="top-2 absolute bg-white block right-2 rounded-xl shadow z-10">
             <div class="flex flex-col gap-4 p-2">
                 <div class="flex flex-col gap-0.5">
-					<button type="button" class="btn btn-primary">
+                    <button class="btn btn-primary" type="button">
                         <IconArrowUturnLeft/>
                     </button>
 
-					<button type="button" class="btn btn-primary"><IconArrowUturnRight /></button>
+                    <button class="btn btn-primary" type="button">
+                        <IconArrowUturnRight/>
+                    </button>
                 </div>
 
-				<button type="button" class="btn btn-primary"><IconCursorArrowRays /></button>
+                <button class="btn btn-primary" type="button">
+                    <IconCursorArrowRays/>
+                </button>
 
                 <div class="flex-col gap-0.5 hidden">
-					<button type="button" class="btn btn-primary"><IconCheck /></button>
+                    <button class="btn btn-primary" type="button">
-					<button type="button" class="btn btn-primary">
+                        <IconCheck/>
+                    </button>
+                    <button class="btn btn-primary" type="button">
                         <IconXMark/>
                     </button>
                 </div>
 
                 <div class="flex flex-col gap-0.5">
-					<button type="button" class="btn btn-primary">
+                    <button class="btn btn-primary" type="button">
                         <span class="size-6 border-2 border-white rounded block"></span>
                     </button>
-					<button type="button" class="btn btn-primary">
+                    <button class="btn btn-primary" type="button">
                         <span class="size-6 border-2 border-white rounded-full block"></span>
                     </button>
                 </div>

apps/front/src/routes/notifications/+page.svelte

@@ -0,0 +1,3 @@
+<h1 class="text-3xl font-bold text-center text-gray-900">
+    To be discussed...
+</h1>

apps/front/src/routes/reports/+page.svelte

@@ -0,0 +1,3 @@
+<h1 class="text-3xl font-bold text-center text-gray-900">
+    To be discussed...
+</h1>

apps/front/src/routes/settings/+page.svelte

@@ -0,0 +1,3 @@
+<h1 class="text-3xl font-bold text-center text-gray-900">
+    To be discussed...
+</h1>

apps/front/svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */