v1.1.2: Y-Achse wieder links (afterBuildTicks if→while)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+data
+.git
+*.log

.env.example

@@ -1,4 +1,4 @@
 MQTT_BROKER=nuccy
-MQTT_PORT=1882
+MQTT_PORT=1883
 MQTT_USER=rxf
 MQTT_PASSWORD=your_password_here

.gitignore

@@ -1,23 +1,8 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
 
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
+# SvelteKit build output
+/.svelte-kit
 /build
 
 # misc
@@ -30,14 +15,13 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
+# env files
 .env
 .env.local
 .env.*.local
 
-# vercel
-.vercel
+# sqlite data
+/data/*.db
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

AGENTS.md

@@ -1,5 +0,0 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
-
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->

CLAUDE.md

@@ -1 +0,0 @@
-@AGENTS.md

Dockerfile

@@ -0,0 +1,23 @@
+FROM node:20-alpine AS builder
+WORKDIR /app
+RUN apk add --no-cache python3 make g++
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+
+RUN apk add --no-cache python3 make g++
+COPY package*.json ./
+COPY --from=builder /app/node_modules ./node_modules
+RUN npm prune --omit=dev
+COPY --from=builder /app/build ./build
+
+RUN mkdir -p data
+
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node", "build"]

README.md

@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/globals.css

@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

app/layout.tsx

@@ -1,33 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
-    </html>
-  );
-}

app/page.tsx

@@ -1,65 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}

build-push.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+REGISTRY="docker.citysensor.de"
+IMAGE="${REGISTRY}/bodenfeuchte"
+PLATFORMS="linux/amd64"
+TAG="${1:-latest}"
+
+# Ensure a buildx builder with multi-platform support exists
+if ! docker buildx inspect bodenfeuchte-builder &>/dev/null; then
+  docker buildx create --name bodenfeuchte-builder --use
+else
+  docker buildx use bodenfeuchte-builder
+fi
+
+echo "Building and pushing ${IMAGE}:${TAG} for ${PLATFORMS} ..."
+
+docker buildx build \
+  --platform "${PLATFORMS}" \
+  --tag "${IMAGE}:${TAG}" \
+  --push \
+  .
+
+echo "Done: ${IMAGE}:${TAG}"

deploy.sh

@@ -0,0 +1,56 @@
+#!/bin/bash
+
+set -e
+
+REGISTRY="docker.citysensor.de"
+IMAGE_NAME="bodenfeuchte"
+TAG="${1:-latest}"
+FULL_IMAGE="${REGISTRY}/${IMAGE_NAME}:${TAG}"
+BUILD_DATE=$(date +%d.%m.%Y)
+
+echo "=========================================="
+echo "Bodenfeuchte Deploy Script"
+echo "=========================================="
+echo "Registry: ${REGISTRY}"
+echo "Image: ${IMAGE_NAME}"
+echo "Tag: ${TAG}"
+echo "Build-Datum: ${BUILD_DATE}"
+echo "=========================================="
+echo ""
+
+echo ">>> Login zu ${REGISTRY}..."
+docker login "${REGISTRY}"
+echo ""
+
+echo ">>> Richte Multiplatform Builder ein..."
+if ! docker buildx inspect multiplatform-builder &>/dev/null; then
+  docker buildx create --name multiplatform-builder --driver docker-container --bootstrap
+fi
+docker buildx use multiplatform-builder
+echo ""
+
+echo ">>> Baue Multiplatform Docker Image und pushe..."
+docker buildx build \
+  --platform linux/amd64,linux/arm64 \
+  --build-arg BUILD_DATE="${BUILD_DATE}" \
+  --provenance=false \
+  --progress=plain \
+  -t "${FULL_IMAGE}" \
+  --push \
+  .
+
+  echo ">>> Tagge ${IMAGE_NAME} als :latest..."
+  docker buildx imagetools create \
+    -t "${REGISTRY}/${IMAGE_NAME}:latest" \
+    "${FULL_IMAGE}"
+    
+
+echo ""
+echo "=========================================="
+echo "Deploy erfolgreich abgeschlossen!"
+echo "=========================================="
+echo ""
+echo "Auf dem Server ausführen:"
+echo "  docker pull ${FULL_IMAGE}"
+echo "  docker-compose -f docker-compose.prod.yml up -d"
+echo ""

docker-compose.prod.yml

@@ -0,0 +1,22 @@
+services:
+  bodenfeuchte:
+    image: docker.citysensor.de/bodenfeuchte:latest
+    expose:
+      - "3000"
+    volumes:
+      - ./data:/app/data
+    env_file:
+      - .env
+    extra_hosts:
+      - "nuccy:host-gateway"
+    restart: unless-stopped
+
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "80:80"
+    volumes:
+      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
+    depends_on:
+      - bodenfeuchte
+    restart: unless-stopped

docker-compose.yml

@@ -0,0 +1,24 @@
+services:
+  bodenfeuchte:
+    build: .
+    image: docker.citysensor.de/bodenfeuchte:latest
+    expose:
+      - "3000"
+    volumes:
+      - bodenfeuchte-data:/app/data
+    env_file:
+      - .env
+    restart: unless-stopped
+
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "80:80"
+    volumes:
+      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
+    depends_on:
+      - bodenfeuchte
+    restart: unless-stopped
+
+volumes:
+  bodenfeuchte-data:

eslint.config.mjs

@@ -1,18 +0,0 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
-]);
-
-export default eslintConfig;

next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;

nginx/default.conf

@@ -0,0 +1,13 @@
+server {
+    listen 80;
+    server_name _;
+
+    location /bodenfeuchte {
+        proxy_pass         http://bodenfeuchte:3000;
+        proxy_http_version 1.1;
+        proxy_set_header   Upgrade $http_upgrade;
+        proxy_set_header   Connection 'upgrade';
+        proxy_set_header   Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}

package.json

@@ -1,26 +1,31 @@
 {
-  "name": "bodenfeuchte",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint"
-  },
-  "dependencies": {
-    "next": "16.2.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.6",
-    "tailwindcss": "^4",
-    "typescript": "^5"
-  }
+	"name": "bodenfeuchte",
+	"private": true,
+	"version": "1.1.2",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"dependencies": {
+		"better-sqlite3": "^12.10.0",
+		"chart.js": "^4.5.0",
+		"chartjs-adapter-date-fns": "^3.0.0",
+		"date-fns": "^4.1.0",
+		"mqtt": "^5.15.1"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-node": "^5.2.11",
+		"@sveltejs/kit": "^2.57.0",
+		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"@types/better-sqlite3": "^7.6.13",
+		"svelte": "^5.55.2",
+		"svelte-check": "^4.4.6",
+		"typescript": "^6.0.2",
+		"vite": "^8.0.7"
+	}
 }

postcss.config.mjs

@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
-export default config;

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script src="https://cdn.tailwindcss.com"></script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/globals.d.ts

@@ -0,0 +1,2 @@
+declare const __APP_VERSION__: string;
+declare const __BUILD_DATE__: string;

src/hooks.server.ts

@@ -0,0 +1,3 @@
+import { startMqttListener } from '$lib/mqtt-listener';
+
+startMqttListener();

src/lib/db.ts

@@ -0,0 +1,37 @@
+import Database from 'better-sqlite3';
+import path from 'path';
+
+const DB_PATH = path.join(process.cwd(), 'data', 'bodenfeuchte.db');
+
+let db: Database.Database;
+
+export function getDb(): Database.Database {
+  if (!db) {
+    db = new Database(DB_PATH);
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS measurements (
+        id        INTEGER PRIMARY KEY AUTOINCREMENT,
+        timestamp INTEGER NOT NULL,
+        soil_moisture REAL NOT NULL
+      );
+      CREATE INDEX IF NOT EXISTS idx_timestamp ON measurements(timestamp);
+    `);
+  }
+  return db;
+}
+
+export function insertMeasurement(soilMoisture: number): void {
+  const stmt = getDb().prepare(
+    'INSERT INTO measurements (timestamp, soil_moisture) VALUES (?, ?)'
+  );
+  stmt.run(Date.now(), soilMoisture);
+}
+
+export function getMeasurementsSince(hours: number): { timestamp: number; soil_moisture: number }[] {
+  const since = Date.now() - hours * 60 * 60 * 1000;
+  return getDb()
+    .prepare(
+      'SELECT timestamp, soil_moisture FROM measurements WHERE timestamp >= ? ORDER BY timestamp ASC'
+    )
+    .all(since) as { timestamp: number; soil_moisture: number }[];
+}

src/lib/mqtt-listener.ts

@@ -0,0 +1,36 @@
+import mqtt from 'mqtt';
+import { insertMeasurement } from './db';
+import { env } from '$env/dynamic/private';
+
+const TOPIC = 'zigbee2mqtt/Bodenfeuchte_1';
+
+export function startMqttListener(): void {
+  const client = mqtt.connect({
+    host: env.MQTT_BROKER ?? 'nuccy',
+    port: Number(env.MQTT_PORT ?? 1883),
+    username: env.MQTT_USER ?? 'rxf',
+    password: env.MQTT_PASSWORD ?? '',
+  });
+
+  client.on('connect', () => {
+    console.log('[MQTT] Connected, subscribing to', TOPIC);
+    client.subscribe(TOPIC);
+  });
+
+  client.on('message', (_topic, payload) => {
+    try {
+      const data = JSON.parse(payload.toString());
+      const value = data?.soil_moisture;
+      if (typeof value === 'number') {
+        insertMeasurement(value);
+        console.log('[MQTT] Stored soil_moisture:', value);
+      }
+    } catch {
+      console.error('[MQTT] Failed to parse message');
+    }
+  });
+
+  client.on('error', (err) => {
+    console.error('[MQTT] Error:', err.message);
+  });
+}

src/routes/+page.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import { onMount, onDestroy } from 'svelte';
+	import 'chart.js/auto';
+	import 'chartjs-adapter-date-fns';
+	import { Chart } from 'chart.js';
+	import { de } from 'date-fns/locale';
+
+	type Measurement = { timestamp: number; soil_moisture: number };
+
+	type Range = {
+		label: string;
+		hours: number;
+		labelText: string;
+		step: number;
+		isMajor: (d: Date) => boolean;
+		formatTick: (d: Date, major: boolean) => string | string[];
+	};
+
+	const pad = (n: number) => String(n).padStart(2, '0');
+
+	const RANGES: Range[] = [
+		{
+			label: '6h', hours: 6, labelText: 'Letzte 6 Stunden',
+			step: 10 * 60 * 1000,
+			isMajor: (d) => d.getMinutes() === 0,
+			formatTick: (d) => `${pad(d.getHours())}:${pad(d.getMinutes())}`,
+		},
+		{
+			label: '12h', hours: 12, labelText: 'Letzte 12 Stunden',
+			step: 30 * 60 * 1000,
+			isMajor: (d) => d.getMinutes() === 0,
+			formatTick: (d) => `${pad(d.getHours())}:${pad(d.getMinutes())}`,
+		},
+		{
+			label: '1d', hours: 24, labelText: 'Letzter Tag',
+			step: 60 * 60 * 1000,
+			isMajor: (d) => d.getHours() % 6 === 0,
+			formatTick: (d) => `${pad(d.getHours())}:00`,
+		},
+		{
+			label: '7d', hours: 7 * 24, labelText: 'Letzte 7 Tage',
+			step: 6 * 60 * 60 * 1000,
+			isMajor: (d) => d.getHours() === 0,
+			formatTick: (d, major) => major
+				? ['00:00', `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.`]
+				: `${pad(d.getHours())}:00`,
+		},
+		{
+			label: '30d', hours: 30 * 24, labelText: 'Letzte 30 Tage',
+			step: 24 * 60 * 60 * 1000,
+			isMajor: (d) => d.getDay() === 1,
+			formatTick: (d) => `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.`,
+		},
+	];
+
+	let selectedRange = $state(0);
+	let data = $state<Measurement[]>([]);
+	let lastUpdate = $state('');
+	let canvas: HTMLCanvasElement;
+	let chart: Chart | null = null;
+	let interval: ReturnType<typeof setInterval>;
+
+	async function fetchData() {
+		const res = await fetch(`${base}/api/data?hours=${RANGES[selectedRange].hours}`);
+		data = await res.json();
+		lastUpdate = new Date().toLocaleTimeString('de-DE');
+		updateChart();
+	}
+
+	async function selectRange(idx: number) {
+		selectedRange = idx;
+		await fetchData();
+	}
+
+	function updateChart() {
+		if (!chart) return;
+		const now = Date.now();
+		const range = RANGES[selectedRange];
+		const showPoints = range.hours <= 24;
+		chart.data.datasets[0].data = data.map(d => ({ x: d.timestamp, y: d.soil_moisture }));
+		(chart.data.datasets[0] as any).pointRadius = showPoints ? 3 : 0;
+		(chart.data.datasets[0] as any).pointHoverRadius = showPoints ? 4 : 0;
+		chart.options.scales!['x']!.min = now - range.hours * 60 * 60 * 1000;
+		chart.options.scales!['x']!.max = now;
+		if (data.length > 0) {
+			const values = data.map(d => d.soil_moisture);
+			const yMin = Math.floor(Math.min(...values) / 10) * 10;
+			const yMax = Math.ceil(Math.max(...values) / 10) * 10;
+			chart.options.scales!['y']!.min = yMin;
+			chart.options.scales!['y']!.max = yMin === yMax ? yMax + 10 : yMax;
+		}
+		chart.update();
+	}
+
+	onMount(async () => {
+		chart = new Chart(canvas, {
+			type: 'line',
+			data: {
+				datasets: [{
+					label: 'Bodenfeuchte (%)',
+					data: [] as {x: number, y: number}[],
+					borderColor: '#2980b9',
+					backgroundColor: 'rgba(133, 183, 215, 0.2)',
+					borderWidth: 2,
+					pointRadius: 3,
+					pointHoverRadius: 4,
+					fill: true,
+					tension: 0.3,
+				}]
+			},
+			options: {
+				responsive: true,
+				maintainAspectRatio: false,
+				scales: {
+					x: {
+						type: 'time',
+						min: Date.now() - 6 * 60 * 60 * 1000,
+						max: Date.now(),
+						time: {
+							unit: 'minute',
+							displayFormats: { minute: 'HH:mm', hour: 'HH:mm' },
+						},
+						adapters: { date: { locale: de } },
+						afterBuildTicks(scale: any) {
+							const range = RANGES[selectedRange];
+							const min = scale.min;
+							const max = scale.max;
+							const step = range.step;
+							const ticks: { value: number; major: boolean }[] = [];
+
+							if (step < 60 * 60 * 1000) {
+								// Sub-hour: UTC alignment is fine (minutes are TZ-invariant)
+								const start = Math.ceil(min / step) * step;
+								for (let t = start; t <= max; t += step) {
+									ticks.push({ value: t, major: range.isMajor(new Date(t)) });
+								}
+							} else {
+								// Hour+: align to local midnight so isMajor works in any timezone
+								const isDaily = step === 24 * 60 * 60 * 1000;
+								const d = new Date(min);
+								d.setHours(0, 0, 0, 0);
+								const advance = () => isDaily ? d.setDate(d.getDate() + 1) : d.setTime(d.getTime() + step);
+								while (d.getTime() < min) advance();
+								while (d.getTime() <= max) {
+									ticks.push({ value: d.getTime(), major: range.isMajor(d) });
+									advance();
+								}
+							}
+
+							scale.ticks = ticks;
+						},
+						ticks: {
+							major: { enabled: true },
+							autoSkip: false,
+							callback: (value: any, index: number, ticks: any[]) => {
+								const range = RANGES[selectedRange];
+								const d = new Date(value);
+								const major = ticks[index]?.major ?? false;
+								return range.formatTick(d, major);
+							},
+							color: (ctx: any) => ctx.tick?.major ? '#222' : '#aaa',
+							font: (ctx: any) => ctx.tick?.major ? { weight: 'bold' as const, size: 13 } : { size: 10 },
+							maxRotation: 0,
+						},
+						grid: { color: (ctx: any) => ctx.tick?.major ? '#999' : '#e5e7eb', lineWidth: 1 },
+					},
+					y: {
+						ticks: { color: '#555', callback: v => `${v} %` },
+						grid: { color: '#e5e7eb' },
+					}
+				},
+				plugins: {
+					legend: { display: false },
+					tooltip: {
+						callbacks: {
+							label: ctx => `${Number(ctx.raw).toFixed(1)} %`
+						}
+					}
+				}
+			}
+		});
+
+		await fetchData();
+		interval = setInterval(fetchData, 60_000);
+	});
+
+	onDestroy(() => {
+		clearInterval(interval);
+		chart?.destroy();
+	});
+
+	const latest = $derived(data.at(-1));
+	const currentRangeLabel = $derived(RANGES[selectedRange].labelText);
+</script>
+
+<svelte:head>
+	<title>Bodenfeuchte</title>
+</svelte:head>
+
+<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; ">
+
+		<!-- 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 sm:px-8 py-6 flex flex-col gap-6">
+
+			<!-- Aktueller Wert -->
+			<div style="background:#CCCCFF;" class="border-y-2 sm:border-2 border-black sm:rounded-lg px-6 py-4 flex items-center justify-between">
+				<span class="text-gray-600 font-bold text-2xl">Aktueller Wert</span>
+				{#if latest}
+					<div class="text-right">
+						<span class="text-4xl font-bold">{latest.soil_moisture.toFixed(1)}</span>
+						<span class="text-xl text-gray-500 ml-1">%</span>
+						<p class="text-xs text-gray-500 mt-0.5">
+							{new Date(latest.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
+						</p>
+					</div>
+				{:else}
+					<span class="text-gray-400 text-sm">–</span>
+				{/if}
+			</div>
+
+			<!-- Zeitbereich-Auswahl -->
+			<div class="flex gap-2 justify-center flex-wrap px-2">
+				{#each RANGES as range, i}
+					<button
+						onclick={() => selectRange(i)}
+						class="px-5 py-1.5 border-2 border-black rounded font-bold text-sm"
+						style={selectedRange === i ? 'background:#2980b9; color:white;' : 'background:rgb(231,241,247); color:black;'}
+					>
+						{range.label}
+					</button>
+				{/each}
+			</div>
+
+			<!-- Diagramm -->
+			<div style="background:white; height:340px;" class="border-y-2 sm:border-2 border-black sm:rounded-lg p-4 pb-8">
+				<p class="text-xs text-gray-400 mb-2">{currentRangeLabel} · Stand: {lastUpdate || '…'}</p>
+				{#if data.length === 0}
+					<div class="flex items-center justify-center h-full text-gray-400 text-sm">
+						Noch keine Daten vorhanden
+					</div>
+				{/if}
+				<canvas bind:this={canvas} class={data.length === 0 ? 'hidden' : 'w-full'} style="height:280px;"></canvas>
+			</div>
+
+		</div>
+
+		<!-- 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>
+		</div>
+
+	</div>
+</div>

src/routes/api/data/+server.ts

@@ -0,0 +1,8 @@
+import { json } from '@sveltejs/kit';
+import { getMeasurementsSince } from '$lib/db';
+
+export function GET({ url }: { url: URL }) {
+	const hours = Number(url.searchParams.get('hours') ?? 6);
+	const safeHours = isFinite(hours) && hours > 0 ? hours : 6;
+	return json(getMeasurementsSince(safeHours));
+}

svelte.config.js

@@ -0,0 +1,13 @@
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter(),
+		paths: {
+			base: '/bodenfeuchte'
+		}
+	}
+};
+
+export default config;

tsconfig.json

@@ -1,34 +1,20 @@
 {
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
 }

vite.config.ts

@@ -0,0 +1,13 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { readFileSync } from 'fs';
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf-8'));
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	define: {
+		__APP_VERSION__: JSON.stringify(pkg.version),
+		__BUILD_DATE__: JSON.stringify(new Date().toLocaleDateString('de-DE')),
+	}
+});