From 02c1a4c58c75a6a716ac8ffbd60d115986c8f517 Mon Sep 17 00:00:00 2001 From: Nicola Belluti Date: Thu, 7 May 2026 23:22:05 +0200 Subject: [PATCH] Added UI with station cards, grouping and styling --- README.md | 19 ++++ index.html | 7 +- src/App.svelte | 128 +++++++++++++++++++++- src/app.css | 27 ++++- src/components/StationList.svelte | 65 +++++++++++ src/components/StationRow.svelte | 176 ++++++++++++++++++++++++++++++ src/lib/api.js | 19 ++++ src/lib/groups.json | 6 + vite.config.js | 5 + 9 files changed, 444 insertions(+), 8 deletions(-) create mode 100644 src/components/StationList.svelte create mode 100644 src/components/StationRow.svelte create mode 100644 src/lib/api.js create mode 100644 src/lib/groups.json diff --git a/README.md b/README.md index 353c940..150590a 100644 --- a/README.md +++ b/README.md @@ -30,3 +30,22 @@ bun run dev bun run build bun run preview ``` + +## Gruppi di centraline + +Le centraline vengono raggruppate visivamente tramite il file +`src/lib/groups.json`. La struttura è un array di gruppi: + +```json +[ + { + "nome": "Mantova", + "ids": [151, 154, 155, 158, 159, 173, 174, 176, 177, 178, 179, 180] + } +] +``` + +Ogni gruppo ha un nome e una lista di ID numerici delle centraline. Le +centraline non presenti in nessun gruppo vengono mostrate automaticamente nella +sezione "Altre". L'ordine dei gruppi nel file determina l'ordine di +visualizzazione sulla pagina. diff --git a/index.html b/index.html index e685a76..5945819 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,13 @@ - + - Download Dati Centraline + Centraline 37100Lab + + +
diff --git a/src/App.svelte b/src/App.svelte index 3b1f211..c0d1927 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,2 +1,126 @@ -
-
+ + +
+
+

Centraline

+

Scarica i dati storici delle stazioni di monitoraggio ambientale di 37100Lab.

+
+ +
+ {#if loading} +

Caricamento…

+ {:else if error} +

{error}

+ {:else} + + {/if} +
+ + +
+ + diff --git a/src/app.css b/src/app.css index d9c7de0..ffa41b1 100644 --- a/src/app.css +++ b/src/app.css @@ -2,9 +2,28 @@ box-sizing: border-box; } -body { - margin: 0; - font-synthesis: none; - text-rendering: optimizeLegibility; +:root { + --bg: #f0f2f5; + --surface: #ffffff; + --border: #dde1e7; + + --text: #374151; + --text-dim:#9ca3af; + --text-hi: #111827; + + --accent: #2563eb; + + --sans: 'Poppins', system-ui, sans-serif; + + font-family: var(--sans); + font-size: 14px; + line-height: 1.5; + color: var(--text); + background: var(--bg); -webkit-font-smoothing: antialiased; } + +body { + margin: 0; + min-height: 100svh; +} diff --git a/src/components/StationList.svelte b/src/components/StationList.svelte new file mode 100644 index 0000000..a60ed6f --- /dev/null +++ b/src/components/StationList.svelte @@ -0,0 +1,65 @@ + + +
+ {#each sezioni as sezione} +
+

{sezione.nome}

+
+ {#each sezione.stazioni as station (station.pk)} + + {/each} +
+
+ {/each} +
+ + diff --git a/src/components/StationRow.svelte b/src/components/StationRow.svelte new file mode 100644 index 0000000..0f12a8e --- /dev/null +++ b/src/components/StationRow.svelte @@ -0,0 +1,176 @@ + + +
+
+ {station.title} + #{station.pk} +
+ +
+ Attivata il {dataCreazione} + · + tooltipVisibile = true} + on:mouseleave={() => tooltipVisibile = false} + > + {attiva ? 'Attiva' : 'Terminata'} + {#if !attiva && tooltipVisibile} + Terminata il {dataFine} + {/if} + + +
+
+ + diff --git a/src/lib/api.js b/src/lib/api.js new file mode 100644 index 0000000..b5c4b22 --- /dev/null +++ b/src/lib/api.js @@ -0,0 +1,19 @@ +export async function fetchStations() { + const res = await fetch('/api/campagne_map_data'); + if (!res.ok) throw new Error(`Errore HTTP ${res.status}`); + const geojson = await res.json(); + return geojson.features + .map(f => ({ ...f.properties, pk: parseInt(f.properties.pk, 10) })) + .sort((a, b) => b.pk - a.pk); +} + +export async function fetchDay(id, date) { + try { + const res = await fetch(`/api/get_measurements/${id}?day=${date}`); + if (!res.ok) return []; + const data = await res.json(); + return data.misure ?? []; + } catch { + return []; + } +} diff --git a/src/lib/groups.json b/src/lib/groups.json new file mode 100644 index 0000000..b25013b --- /dev/null +++ b/src/lib/groups.json @@ -0,0 +1,6 @@ +[ + { + "nome": "Mantova", + "ids": [151, 154, 155, 158, 159, 173, 174, 176, 177, 178, 179, 180] + } +] diff --git a/vite.config.js b/vite.config.js index d32eba1..d07d620 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,4 +4,9 @@ import { svelte } from '@sveltejs/vite-plugin-svelte' // https://vite.dev/config/ export default defineConfig({ plugins: [svelte()], + server: { + proxy: { + '/api': 'http://37100lab.it:8101', + }, + }, })