From a51157f0f33572910b9b2cd02249c549f0c60331 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maxi=20Quo=C3=9F?= Date: Mon, 16 Jan 2023 00:09:39 +0100 Subject: [PATCH] add basic frontend connection --- .../1673733059_collections_snapshot.go | 26 ++++----- frontend/package.json | 9 ++- frontend/pnpm-lock.yaml | 29 ++++++++++ frontend/src/app.html | 2 +- frontend/src/components/DeviceCard.svelte | 31 +++++++++++ frontend/src/components/Navbar.svelte | 50 ----------------- frontend/src/routes/+layout.svelte | 11 ++++ frontend/src/routes/+page.svelte | 35 ++++++++++-- frontend/src/scss/main.scss | 55 ++++++++++++++----- 9 files changed, 161 insertions(+), 87 deletions(-) create mode 100644 frontend/src/components/DeviceCard.svelte diff --git a/backend/migrations/1673733059_collections_snapshot.go b/backend/migrations/1673733059_collections_snapshot.go index b516b436..68fe59e8 100644 --- a/backend/migrations/1673733059_collections_snapshot.go +++ b/backend/migrations/1673733059_collections_snapshot.go @@ -59,6 +59,19 @@ func init() { "pattern": "" } }, + { + "system": false, + "id": "s8c5z7n0", + "name": "netmask", + "type": "text", + "required": true, + "unique": false, + "options": { + "min": null, + "max": null, + "pattern": "" + } + }, { "system": false, "id": "gdctb8hj", @@ -109,19 +122,6 @@ func init() { "max": null, "pattern": "" } - }, - { - "system": false, - "id": "s8c5z7n0", - "name": "netmask", - "type": "text", - "required": true, - "unique": false, - "options": { - "min": null, - "max": null, - "pattern": "" - } } ], "listRule": "", diff --git a/frontend/package.json b/frontend/package.json index 389b1ded..b8d9a0db 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,15 +17,18 @@ "eslint-plugin-svelte3": "^4.0.0", "prettier": "^2.8.3", "prettier-plugin-svelte": "^2.9.0", - "svelte": "^3.55.0", - "svelte-preprocess": "^4.10.7", + "svelte": "^3.55.0", + "svelte-preprocess": "^4.10.7", "vite": "^4.0.4" }, "type": "module", "dependencies": { + "@fortawesome/free-solid-svg-icons": "^6.2.1", "@popperjs/core": "^2.11.6", "bootstrap": "5.3.0-alpha1", + "date-fns": "^2.29.3", "pocketbase": "^0.10.0", - "sass": "^1.57.1" + "sass": "^1.57.1", + "svelte-fa": "^3.0.3" } } diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 81ad9ded..bc15a5a9 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -1,10 +1,12 @@ lockfileVersion: 5.4 specifiers: + '@fortawesome/free-solid-svg-icons': ^6.2.1 '@popperjs/core': ^2.11.6 '@sveltejs/adapter-auto': ^1.0.1 '@sveltejs/kit': ^1.1.1 bootstrap: 5.3.0-alpha1 + date-fns: ^2.29.3 eslint: ^8.32.0 eslint-config-prettier: ^8.6.0 eslint-plugin-svelte3: ^4.0.0 @@ -13,14 +15,18 @@ specifiers: prettier-plugin-svelte: ^2.9.0 sass: ^1.57.1 svelte: ^3.55.0 + svelte-fa: ^3.0.3 svelte-preprocess: ^4.10.7 vite: ^4.0.4 dependencies: + '@fortawesome/free-solid-svg-icons': 6.2.1 '@popperjs/core': 2.11.6 bootstrap: 5.3.0-alpha1_@popperjs+core@2.11.6 + date-fns: 2.29.3 pocketbase: 0.10.0 sass: 1.57.1 + svelte-fa: 3.0.3 devDependencies: '@sveltejs/adapter-auto': 1.0.1_@sveltejs+kit@1.1.1 @@ -251,6 +257,20 @@ packages: - supports-color dev: true + /@fortawesome/fontawesome-common-types/6.2.1: + resolution: {integrity: sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==} + engines: {node: '>=6'} + requiresBuild: true + dev: false + + /@fortawesome/free-solid-svg-icons/6.2.1: + resolution: {integrity: sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==} + engines: {node: '>=6'} + requiresBuild: true + dependencies: + '@fortawesome/fontawesome-common-types': 6.2.1 + dev: false + /@humanwhocodes/config-array/0.11.8: resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==} engines: {node: '>=10.10.0'} @@ -520,6 +540,11 @@ packages: which: 2.0.2 dev: true + /date-fns/2.29.3: + resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==} + engines: {node: '>=0.11'} + dev: false + /debug/4.3.4: resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -1308,6 +1333,10 @@ packages: engines: {node: '>= 0.4'} dev: true + /svelte-fa/3.0.3: + resolution: {integrity: sha512-GIikJjcVCD+5Y/x9hZc2R4gvuA0gVftacuWu1a+zVQWSFjFYZ+hhU825x+QNs2slsppfrgmFiUyU9Sz9gj4Rdw==} + dev: false + /svelte-hmr/0.15.1_svelte@3.55.1: resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==} engines: {node: ^12.20 || ^14.13.1 || >= 16} diff --git a/frontend/src/app.html b/frontend/src/app.html index 20535b88..effe0d0d 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/frontend/src/components/DeviceCard.svelte b/frontend/src/components/DeviceCard.svelte new file mode 100644 index 00000000..fa86257b --- /dev/null +++ b/frontend/src/components/DeviceCard.svelte @@ -0,0 +1,31 @@ + + +
+
+
+

+ +

+

{device.name} ({device.status})

+

{device.ip}

+
+
+ Last change: {formatDistance(parseISO(device.updated), now, { + includeSeconds: true, + addSuffix: true + })} +
+
+
diff --git a/frontend/src/components/Navbar.svelte b/frontend/src/components/Navbar.svelte index d0a65224..e69de29b 100644 --- a/frontend/src/components/Navbar.svelte +++ b/frontend/src/components/Navbar.svelte @@ -1,50 +0,0 @@ - diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 28f56d46..9e7bcc36 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -2,6 +2,17 @@ import Navbar from '@components/Navbar.svelte'; + + + + diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index c2587b92..b2fc7ecb 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -1,16 +1,41 @@ -{#each devices as device} - {device.name} -{/each} +
+
+ {#each Object.entries(devices) as [_, device]} + + {/each} +
+
diff --git a/frontend/src/scss/main.scss b/frontend/src/scss/main.scss index ab0ca99c..680103a2 100644 --- a/frontend/src/scss/main.scss +++ b/frontend/src/scss/main.scss @@ -1,15 +1,40 @@ -// @import "../../node_modules/bootstrap/scss/functions"; -// @import "../../node_modules/bootstrap/scss/variables"; -// @import "../../node_modules/bootstrap/scss/variables-dark"; -// @import "../../node_modules/bootstrap/scss/maps"; -// @import "../../node_modules/bootstrap/scss/mixins"; -// @import "../../node_modules/bootstrap/scss/root"; -// @import "../../node_modules/bootstrap/scss/utilities"; -// @import "../../node_modules/bootstrap/scss/reboot"; -// @import "../../node_modules/bootstrap/scss/type"; -// @import "../../node_modules/bootstrap/scss/images"; -// @import "../../node_modules/bootstrap/scss/containers"; -// @import "../../node_modules/bootstrap/scss/grid"; -// @import "../../node_modules/bootstrap/scss/helpers"; -// @import "../../node_modules/bootstrap/scss/utilities/api"; -@import "../../node_modules/bootstrap/scss/bootstrap"; +// import bootstrap functions and variables +@import '../../node_modules/bootstrap/scss/functions'; +@import '../../node_modules/bootstrap/scss/variables'; +@import '../../node_modules/bootstrap/scss/variables-dark'; + +// custom colors +$gray-1000: #111; +$grays: ( + '100': $gray-100, + '200': $gray-200, + '300': $gray-300, + '400': $gray-400, + '500': $gray-500, + '600': $gray-600, + '700': $gray-700, + '800': $gray-800, + '900': $gray-900, + '1000': $gray-1000 +) !default; + +$body-bg-dark: $gray-1000; + +// import rest +@import '../../node_modules/bootstrap/scss/maps'; +@import '../../node_modules/bootstrap/scss/mixins'; +@import '../../node_modules/bootstrap/scss/root'; +@import '../../node_modules/bootstrap/scss/utilities'; +@import '../../node_modules/bootstrap/scss/reboot'; +@import '../../node_modules/bootstrap/scss/type'; +@import '../../node_modules/bootstrap/scss/images'; +@import '../../node_modules/bootstrap/scss/containers'; +@import '../../node_modules/bootstrap/scss/grid'; +@import '../../node_modules/bootstrap/scss/helpers'; +@import '../../node_modules/bootstrap/scss/card'; + +@import '../../node_modules/bootstrap/scss/utilities/api'; + +.text-success { + color: $teal-500 !important; +}