admin/bodenfeuchte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle to match Werte-App layout: light theme, bordered container

Browse Source 
- Cream background (#FFFFDD), 2px black border, rounded container
- Current value card with #CCCCFF background
- White chart area with border
- Footer with border-top matching Werte-App style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Reinhard X. Fürst
2026-05-16 08:38:12 +02:00
parent 99e274aed6
commit c7f2c70d23
2 changed files with 58 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
src/routes/+page.svelte
+48 -24
View File
@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { base } from '$app/paths'; import { base } from '$app/paths';
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip, Filler } from 'chart.js';
import 'chart.js/auto'; import 'chart.js/auto';
import { Chart } from 'chart.js';
type Measurement = { timestamp: number; soil_moisture: number }; type Measurement = { timestamp: number; soil_moisture: number };
@@ -21,7 +21,9 @@
function updateChart() { function updateChart() {
if (!chart) return; if (!chart) return;
chart.data.labels = data.map(d => new Date(d.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })); chart.data.labels = data.map(d =>
new Date(d.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
);
chart.data.datasets[0].data = data.map(d => d.soil_moisture); chart.data.datasets[0].data = data.map(d => d.soil_moisture);
chart.update(); chart.update();
} }
@@ -34,8 +36,8 @@
datasets: [{ datasets: [{
label: 'Bodenfeuchte (%)', label: 'Bodenfeuchte (%)',
data: [], data: [],
borderColor: '#4ade80', borderColor: '#2980b9',
backgroundColor: 'rgba(74, 222, 128, 0.1)', backgroundColor: 'rgba(133, 183, 215, 0.2)',
borderWidth: 2, borderWidth: 2,
pointRadius: 0, pointRadius: 0,
pointHoverRadius: 4, pointHoverRadius: 4,
@@ -48,14 +50,14 @@
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
x: { x: {
ticks: { color: '#9ca3af', maxTicksLimit: 8 }, ticks: { color: '#555', maxTicksLimit: 8 },
grid: { color: '#374151' }, grid: { color: '#e5e7eb' },
}, },
y: { y: {
min: 0, min: 0,
max: 100, max: 100,
ticks: { color: '#9ca3af', callback: v => `${v} %` }, ticks: { color: '#555', callback: v => `${v} %` },
grid: { color: '#374151' }, grid: { color: '#e5e7eb' },
} }
}, },
plugins: { plugins: {
@@ -81,33 +83,55 @@
const latest = $derived(data.at(-1)); const latest = $derived(data.at(-1));
</script> </script>
<main class="min-h-screen bg-gray-950 text-gray-100 p-8 flex flex-col"> <svelte:head>
<h1 class="text-2xl font-semibold mb-1">Bodenfeuchte</h1> <title>Bodenfeuchte</title>
<p class="text-sm text-gray-400 mb-6"> </svelte:head>
Letzte 6 Stunden · Aktualisierung: {lastUpdate || '…'}
</p>
<div class="min-h-screen py-8 px-4" style="background:#f4f4f5; font-family: Arial, Helvetica, sans-serif;">
<div class="mx-auto flex flex-col" style="max-width:56rem; border:2px solid black; border-radius:0.75rem; background:#FFFFDD; min-height:calc(100vh - 4rem);">
<!-- Header -->
<div class="px-8 pt-6 pb-4 border-b-2 border-black">
<h1 class="text-3xl font-bold text-center">Bodenfeuchte</h1>
</div>
<!-- Content -->
<div class="flex-1 px-8 py-6 flex flex-col gap-6">
<!-- Aktueller Wert -->
<div style="background:#CCCCFF; border:2px solid black; border-radius:0.5rem;" class="px-6 py-4 flex items-center justify-between">
<span class="text-gray-600 text-sm">Aktueller Wert</span>
{#if latest} {#if latest}
<div class="mb-8 inline-block bg-gray-800 rounded-xl px-6 py-4"> <div class="text-right">
<span class="text-5xl font-bold text-green-400">{latest.soil_moisture.toFixed(1)}</span> <span class="text-4xl font-bold">{latest.soil_moisture.toFixed(1)}</span>
<span class="text-2xl text-gray-400 ml-2">%</span> <span class="text-xl text-gray-500 ml-1">%</span>
<p class="text-xs text-gray-500 mt-1"> <p class="text-xs text-gray-500 mt-0.5">
{new Date(latest.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr {new Date(latest.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
</p> </p>
</div> </div>
{:else}
<span class="text-gray-400 text-sm">–</span>
{/if} {/if}
</div>
<div class="bg-gray-900 rounded-2xl p-4" style="height: 360px;"> <!-- Diagramm -->
<div style="border:2px solid black; border-radius:0.5rem; background:white; height:340px;" class="p-4">
<p class="text-xs text-gray-400 mb-2">Letzte 6 Stunden · Stand: {lastUpdate || '…'}</p>
{#if data.length === 0} {#if data.length === 0}
<div class="flex items-center justify-center h-full text-gray-500"> <div class="flex items-center justify-center h-full text-gray-400 text-sm">
Noch keine Daten vorhanden Noch keine Daten vorhanden
</div> </div>
{/if} {/if}
<canvas bind:this={canvas} class={data.length === 0 ? 'hidden' : ''}></canvas> <canvas bind:this={canvas} class={data.length === 0 ? 'hidden' : 'w-full'} style="height:280px;"></canvas>
</div> </div>
<footer class="mt-auto pt-8 flex justify-between text-xs text-gray-600"> </div>
<a href="mailto:rexfue@gmail.com" class="hover:text-gray-400 transition-colors">rexfue@gmail.com</a>
<!-- Footer -->
<div class="px-8 py-4 border-t-2 border-black flex justify-between text-xs text-gray-500">
<a href="mailto:rexfue@gmail.com" class="hover:text-gray-800 transition-colors">rexfue@gmail.com</a>
<span>v{__APP_VERSION__} · {__BUILD_DATE__}</span> <span>v{__APP_VERSION__} · {__BUILD_DATE__}</span>
</footer> </div>
</main>
</div>
</div>