spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

env: deploy script & minor ui changes

Browse Source
This commit is contained in:
Anton Shubin 2024-01-31 13:39:46 +08:00
parent 18b11cb413
commit 7b9799ac11
20 changed files with 181 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/front/.env.example Normal file
View File

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

20
apps/front/Makefile Normal file
View File

@ -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

6
apps/front/package.json
View File

@ -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",

20
apps/front/pnpm-lock.yaml
View File

@ -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':
specifier: ^3.0.0
version: 3.1.1(@sveltejs/kit@2.4.3)
'@sveltejs/adapter-static':
specifier: ^3.0.1
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):
resolution: {integrity: sha512-6LeZft2Fo/4HfmLBi5CucMYmgRxgcETweQl/yQoZo/895K3S9YWYN4Sfm/IhwlIpbJp3QNvhKmwCHbsqQNYQpw==}
/@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.4.3):
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'}

31
apps/front/prod.compose.yml Normal file
View File

@ -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"

3
apps/front/prod.deploy.files.txt Normal file
View File

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

4
apps/front/src/lib/client/components/chartMotion.svelte
View File

@ -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]
}
]
};

4
apps/front/src/lib/client/components/chartPower.svelte
View File

@ -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]
}
]
};

4
apps/front/src/lib/client/components/chartVoltage.svelte
View File

@ -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]
}
]
};

2
apps/front/src/lib/client/components/table.svelte
View File

@ -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 = '#';

1
apps/front/src/routes/+layout.ts Normal file
View File

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

6
apps/front/src/routes/+page.svelte
View File

@ -128,10 +128,8 @@
</ul>
</div>
<Table />
<ul
class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8
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"
>
<li>
@ -144,4 +142,6 @@
<ChartVoltage />
</li>
</ul>
<Table />
</section>

3
apps/front/src/routes/admin/+page.svelte Normal file
View File

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

0
apps/front/src/routes/devices/[id]/+page.svelte → apps/front/src/routes/devices/1/+page.svelte
View File

0
apps/front/src/routes/devices/[id]/add/+page.svelte → apps/front/src/routes/devices/1/add/+page.svelte
View File

175
apps/front/src/routes/map/+page.svelte
View File

@ -1,94 +1,103 @@
<script lang="ts">
import Map from '$lib/client/components/map.svelte';
import Table from '$lib/client/components/table.svelte';
import ToggleSwitch from '$lib/client/components/toggle.svelte';
import {
IconArrowUturnLeft,
IconArrowUturnRight,
IconCheck,
IconCursorArrowRays,
IconXMark
} from '../../lib/client/components/icons';
import Map from '$lib/client/components/map.svelte';
import Table from '$lib/client/components/table.svelte';
import ToggleSwitch from '$lib/client/components/toggle.svelte';
import {
IconArrowUturnLeft,
IconArrowUturnRight,
IconCheck,
IconCursorArrowRays,
IconXMark
} from '../../lib/client/components/icons';
let initialValueForSwitch: boolean = true;
let initialValueForSwitch: boolean = true;
</script>
<section class="space-y-4 lg:space-y-8">
<div class="flex relative overflow-hidden rounded-xl border border-gray-200 bg-white">
<Map />
<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">
<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">
<IconArrowUturnLeft />
</button>
<button type="button" class="btn btn-primary"><IconArrowUturnRight /></button>
</div>
<Map/>
<button type="button" class="btn btn-primary"><IconCursorArrowRays /></button>
<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 class="btn btn-primary" type="button">
<IconArrowUturnLeft/>
</button>
<div class="flex-col gap-0.5 hidden">
<button type="button" class="btn btn-primary"><IconCheck /></button>
<button type="button" class="btn btn-primary">
<IconXMark />
</button>
</div>
<button class="btn btn-primary" type="button">
<IconArrowUturnRight/>
</button>
</div>
<div class="flex flex-col gap-0.5">
<button type="button" class="btn btn-primary">
<span class="size-6 border-2 border-white rounded block"></span>
</button>
<button type="button" class="btn btn-primary">
<span class="size-6 border-2 border-white rounded-full block"></span>
</button>
</div>
</div>
</div>
</div>
<div class="mx-auto max-w-6xl">
<div class="flex flex-col">
<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr
class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
>
<th class="text-left" scope="col">Zone name</th>
<th class="text-right" scope="col">Gateways</th>
<th class="text-right" scope="col">Lamps</th>
<th class="text-right" scope="col">Sensors</th>
<th class="text-center" scope="col">Schedule</th>
<th class="text-right" scope="col">On/Off</th>
<th class="text-right" scope="col">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
{#each { length: 10 } as item, index}
<tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900">
Zone #{index + 1}
</td>
<td class="text-right">12</td>
<td class="text-right"> 20 </td>
<td class="text-right">40</td>
<td class="text-center"> <a href="/" class="text-purple-800">View</a></td>
<td class="text-right">
<ToggleSwitch {initialValueForSwitch} />
</td>
<td class="text-right">
<div class="flex gap-4 items-center justify-end">
<a href="/" class="text-purple-800">Edit</a>
<a href="/" class="text-red-600">Delete</a>
</div>
</td>
</tr>
{/each}
<!-- More transactions... -->
</tbody>
</table>
</div>
</div>
</div>
<button class="btn btn-primary" type="button">
<IconCursorArrowRays/>
</button>
<div class="flex-col gap-0.5 hidden">
<button class="btn btn-primary" type="button">
<IconCheck/>
</button>
<button class="btn btn-primary" type="button">
<IconXMark/>
</button>
</div>
<div class="flex flex-col gap-0.5">
<button class="btn btn-primary" type="button">
<span class="size-6 border-2 border-white rounded block"></span>
</button>
<button class="btn btn-primary" type="button">
<span class="size-6 border-2 border-white rounded-full block"></span>
</button>
</div>
</div>
</div>
</div>
<div class="mx-auto max-w-6xl">
<div class="flex flex-col">
<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr
class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
>
<th class="text-left" scope="col">Zone name</th>
<th class="text-right" scope="col">Gateways</th>
<th class="text-right" scope="col">Lamps</th>
<th class="text-right" scope="col">Sensors</th>
<th class="text-center" scope="col">Schedule</th>
<th class="text-right" scope="col">On/Off</th>
<th class="text-right" scope="col">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
{#each {length: 10} as item, index}
<tr class="bg-white text-sm *:px-6 *:py-4">
<td class="text-gray-900">
Zone #{index + 1}
</td>
<td class="text-right">12</td>
<td class="text-right"> 20</td>
<td class="text-right">40</td>
<td class="text-center"><a href="/" class="text-purple-800">View</a></td>
<td class="text-right">
<ToggleSwitch {initialValueForSwitch}/>
</td>
<td class="text-right">
<div class="flex gap-4 items-center justify-end">
<a href="/" class="text-purple-800">Edit</a>
<a href="/" class="text-red-600">Delete</a>
</div>
</td>
</tr>
{/each}
<!-- More transactions... -->
</tbody>
</table>
</div>
</div>
</div>
</section>

3
apps/front/src/routes/notifications/+page.svelte Normal file
View File

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

3
apps/front/src/routes/reports/+page.svelte Normal file
View File

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

3
apps/front/src/routes/settings/+page.svelte Normal file
View File

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

2
apps/front/svelte.config.js
View File

@ -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} */