v1.9: Zähler-Modul (Strom/Wasser/Gas) + Registrierungs-Mail an Verwaltung + Vorname/Nachname im Formular
This commit is contained in:
@@ -189,6 +189,21 @@ tar -czf mp-dist.tar.gz -C dist .
|
||||
|
||||
## 8. Verlauf / offene Punkte
|
||||
|
||||
**Erledigt 04.10. (v1.9):** Zähler-Modul + Registrierungs-Mail + getrennter Name.
|
||||
Neue Tabelle `meters` (Zählernummer, Art Strom/Wasser/Gas/Wärme/Sonstiges,
|
||||
Stand, Stand-Datum, Wohneinheit nullable, Haus, Pflege-Zeitstempel) mit
|
||||
idempotentem Demo-Seed (`seedeZaehler()` läuft bei jedem Start, füllt nur bei
|
||||
leerer Tabelle – auch nachträglich auf Live-DB). API: POST/PATCH /api/meters
|
||||
(adminOnly), Bootstrap liefert meters (Admin: alle, Mieter: nur eigene Wohnung);
|
||||
Haus wird aus der Wohneinheit abgeleitet, bei Allgemeinzählern direkt gepflegt.
|
||||
Frontend: neue Seite /zaehler (Kartenraster, Filter nach Haus + Art, Admin-
|
||||
Dialog zum Anlegen/Bearbeiten), Nav-Eintrag mit Gauge-Icon, Store-Aktionen
|
||||
addZaehler/updateZaehler. Registrierung: neuer Mieter löst HTML-Mail an die
|
||||
Verwaltung aus (Name/Benutzername/E-Mail/Wohnung, Button zur Benutzerverwaltung);
|
||||
Formular jetzt mit getrennten Feldern Vorname/Nachname + Benutzername.
|
||||
E2E verifiziert: Zähler-CRUD + Rechte (403 Mieter), Registrierung inkl.
|
||||
Mail-Zustellung an beide Verwaltungspostfächer, Umlaute sauber.
|
||||
|
||||
**Erledigt 02.10. (v1.8):** Schadensmeldungen starten jetzt automatisch eine
|
||||
Unterhaltung (Thread „Schadensmeldung: …" mit erster Nachricht inkl. Kategorie/
|
||||
Priorität, ungelesen für die Gegenseite) – Antworten darauf lösen über
|
||||
|
||||
@@ -115,6 +115,18 @@ CREATE TABLE IF NOT EXISTS sessions (
|
||||
expires TIMESTAMPTZ NOT NULL
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_sessions_user ON sessions(user_id);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS meters (
|
||||
id TEXT PRIMARY KEY,
|
||||
unit_id TEXT REFERENCES units(id), -- NULL = Haus-/Allgemeinzähler
|
||||
building TEXT NOT NULL,
|
||||
nummer TEXT NOT NULL, -- Zählernummer
|
||||
art TEXT NOT NULL CHECK (art IN ('Strom','Wasser','Gas','Wärme','Sonstiges')),
|
||||
stand NUMERIC(12,3) NOT NULL,
|
||||
stand_am TEXT NOT NULL, -- Datum des abgelesenen Standes
|
||||
geaendert_am TEXT NOT NULL -- letzte Pflege durch die Verwaltung
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_meters_unit ON meters(unit_id);
|
||||
`
|
||||
|
||||
async function init() {
|
||||
|
||||
+101
-2
@@ -9,7 +9,7 @@
|
||||
const express = require('express')
|
||||
const crypto = require('crypto')
|
||||
const { pool, init, sessionsAufraeumen } = require('./db')
|
||||
const { seed } = require('./seed')
|
||||
const { seed, seedeZaehler } = require('./seed')
|
||||
const mail = require('./mail')
|
||||
|
||||
const PORT = Number(process.env.PORT || 3000)
|
||||
@@ -111,6 +111,10 @@ const mapThread = (t) => ({
|
||||
})
|
||||
const mapCode = (c) => ({ code: c.code, einheitId: c.einheit_id, erstelltAm: c.erstellt_am, verwendetAm: c.verwendet_am ?? undefined })
|
||||
const mapAnnouncement = (a) => ({ id: a.id, title: a.title, text: a.text, date: a.date, tag: a.tag })
|
||||
const mapMeter = (m) => ({
|
||||
id: m.id, unitId: m.unit_id, building: m.building, nummer: m.nummer, art: m.art,
|
||||
stand: Number(m.stand), standAm: m.stand_am, geaendertAm: m.geaendert_am,
|
||||
})
|
||||
|
||||
const deutschesDatum = () => new Date().toLocaleDateString('de-DE')
|
||||
const deutschesDatumZeit = () => new Date().toLocaleString('de-DE')
|
||||
@@ -181,6 +185,30 @@ app.post('/api/auth/register', async (req, res, next) => {
|
||||
String(email || '').trim(), codeRows[0].einheit_id, deutschesDatum()],
|
||||
)
|
||||
await sessionAnlegen(res, id, req)
|
||||
// Verwaltung über die neue Registrierung benachrichtigen (fire-and-forget)
|
||||
const { rows: einheitRows } = await pool.query('SELECT * FROM units WHERE id = $1', [codeRows[0].einheit_id])
|
||||
const label = mail.einheitLabel(mapUnit(einheitRows[0]))
|
||||
const benutzernameNeu = String(benutzername || '').trim()
|
||||
const nameNeu = String(name || '').trim()
|
||||
const emailNeu = String(email || '').trim()
|
||||
const betreff = `Neue Mieter-Registrierung: ${nameNeu} (${label})`
|
||||
const text =
|
||||
`Im Mieterportal hat sich ein neuer Mieter registriert.\n\n` +
|
||||
`Name: ${nameNeu}\nBenutzername: ${benutzernameNeu}\nE-Mail: ${emailNeu}\nWohnung: ${label}\nRegistriert am: ${deutschesDatumZeit()}`
|
||||
const html = mail.baueHtmlMail({
|
||||
titel: 'Neue Mieter-Registrierung',
|
||||
untertitel: label,
|
||||
einleitung: `Im Mieterportal hat sich ein neuer Mieter registriert:`,
|
||||
zeilen: [
|
||||
['Name', nameNeu],
|
||||
['Benutzername', benutzernameNeu],
|
||||
['E-Mail', emailNeu],
|
||||
['Wohnung', label],
|
||||
['Registriert am', deutschesDatumZeit()],
|
||||
],
|
||||
aktionenHtml: mail.buttonHtml('Zur Benutzerverwaltung', `${process.env.PORTAL_URL || 'https://mieterportal.hocks.eu'}/benutzer`),
|
||||
})
|
||||
mail.benachrichtigeVerwaltung(betreff, text, html)
|
||||
res.json({ benutzer: oeffentlicherBenutzer(rows[0]) })
|
||||
} catch (e) { next(e) }
|
||||
})
|
||||
@@ -190,7 +218,7 @@ app.get('/api/bootstrap', auth, async (req, res, next) => {
|
||||
try {
|
||||
const istAdmin = req.user.rolle === 'verwaltung'
|
||||
const einheit = req.user.einheit_id
|
||||
const [units, transactions, documents, tickets, threads, messages, announcements, users, codes] =
|
||||
const [units, transactions, documents, tickets, threads, messages, announcements, users, codes, meters] =
|
||||
await Promise.all([
|
||||
pool.query('SELECT * FROM units ORDER BY id'),
|
||||
istAdmin
|
||||
@@ -215,6 +243,9 @@ app.get('/api/bootstrap', auth, async (req, res, next) => {
|
||||
istAdmin
|
||||
? pool.query('SELECT * FROM registration_codes ORDER BY erstellt_am DESC')
|
||||
: { rows: [] },
|
||||
istAdmin
|
||||
? pool.query('SELECT * FROM meters ORDER BY building, nummer')
|
||||
: pool.query('SELECT * FROM meters WHERE unit_id = $1 ORDER BY nummer', [einheit]),
|
||||
])
|
||||
// Threads mit ihren Nachrichten zusammenführen
|
||||
const nachrichtenProThread = {}
|
||||
@@ -234,6 +265,7 @@ app.get('/api/bootstrap', auth, async (req, res, next) => {
|
||||
announcements: announcements.rows.map(mapAnnouncement),
|
||||
benutzer: users.rows.map(oeffentlicherBenutzer),
|
||||
codes: codes.rows.map(mapCode),
|
||||
meters: meters.rows.map(mapMeter),
|
||||
})
|
||||
} catch (e) { next(e) }
|
||||
})
|
||||
@@ -338,6 +370,71 @@ app.patch('/api/tickets/:id', auth, adminOnly, async (req, res, next) => {
|
||||
} catch (e) { next(e) }
|
||||
})
|
||||
|
||||
// ── Zählerstände (Strom / Wasser / Gas) ─────────────────────
|
||||
const ZAEHLER_ARTEN = ['Strom', 'Wasser', 'Gas', 'Wärme', 'Sonstiges']
|
||||
|
||||
app.post('/api/meters', auth, adminOnly, async (req, res, next) => {
|
||||
try {
|
||||
const { nummer, art, stand, unitId, building } = req.body || {}
|
||||
if (!String(nummer || '').trim()) return res.status(400).json({ fehler: 'Zählernummer fehlt.' })
|
||||
if (!ZAEHLER_ARTEN.includes(art)) return res.status(400).json({ fehler: 'Ungültige Zählerart.' })
|
||||
const standZahl = Number(stand)
|
||||
if (!Number.isFinite(standZahl) || standZahl < 0) return res.status(400).json({ fehler: 'Ungültiger Zählerstand.' })
|
||||
// Wohnung angegeben → Haus aus der Wohnung ableiten; sonst muss das Haus im Body stehen
|
||||
let einheitId = unitId ? String(unitId) : null
|
||||
let haus = String(building || '').trim()
|
||||
if (einheitId) {
|
||||
const { rows: u } = await pool.query('SELECT building FROM units WHERE id = $1', [einheitId])
|
||||
if (!u.length) return res.status(400).json({ fehler: 'Wohnung unbekannt.' })
|
||||
haus = u[0].building
|
||||
} else if (!haus) {
|
||||
return res.status(400).json({ fehler: 'Haus fehlt (bei Zählern ohne Wohnung).' })
|
||||
}
|
||||
const id = `z-${Date.now()}`
|
||||
const { rows } = await pool.query(
|
||||
`INSERT INTO meters (id, unit_id, building, nummer, art, stand, stand_am, geaendert_am)
|
||||
VALUES ($1,$2,$3,$4,$5,$6,$7,$8) RETURNING *`,
|
||||
[id, einheitId, haus, String(nummer).trim(), art, standZahl, deutschesDatum(), deutschesDatumZeit()],
|
||||
)
|
||||
res.json({ meter: mapMeter(rows[0]) })
|
||||
} catch (e) { next(e) }
|
||||
})
|
||||
|
||||
app.patch('/api/meters/:id', auth, adminOnly, async (req, res, next) => {
|
||||
try {
|
||||
const b = req.body || {}
|
||||
const { rows } = await pool.query('SELECT * FROM meters WHERE id = $1', [req.params.id])
|
||||
if (!rows.length) return res.status(404).json({ fehler: 'Zähler nicht gefunden.' })
|
||||
const m = rows[0]
|
||||
const neu = {
|
||||
nummer: b.nummer !== undefined ? String(b.nummer).trim() : m.nummer,
|
||||
art: b.art !== undefined ? String(b.art) : m.art,
|
||||
stand: b.stand !== undefined ? Number(b.stand) : Number(m.stand),
|
||||
unit_id: b.unitId !== undefined ? (b.unitId || null) : m.unit_id,
|
||||
building: m.building,
|
||||
}
|
||||
if (!neu.nummer) return res.status(400).json({ fehler: 'Zählernummer darf nicht leer sein.' })
|
||||
if (!ZAEHLER_ARTEN.includes(neu.art)) return res.status(400).json({ fehler: 'Ungültige Zählerart.' })
|
||||
if (!Number.isFinite(neu.stand) || neu.stand < 0) return res.status(400).json({ fehler: 'Ungültiger Zählerstand.' })
|
||||
if (neu.unit_id) {
|
||||
const { rows: u } = await pool.query('SELECT building FROM units WHERE id = $1', [neu.unit_id])
|
||||
if (!u.length) return res.status(400).json({ fehler: 'Wohnung unbekannt.' })
|
||||
neu.building = u[0].building // Haus folgt immer der Wohnung
|
||||
} else if (b.building !== undefined && String(b.building).trim()) {
|
||||
neu.building = String(b.building).trim()
|
||||
}
|
||||
// Stand-Datum nur neu setzen, wenn sich der Stand ändert
|
||||
const standGeaendert = b.stand !== undefined && neu.stand !== Number(m.stand)
|
||||
const { rows: aktualisiert } = await pool.query(
|
||||
`UPDATE meters SET nummer = $1, art = $2, stand = $3, unit_id = $4, building = $5,
|
||||
stand_am = $6, geaendert_am = $7
|
||||
WHERE id = $8 RETURNING *`,
|
||||
[neu.nummer, neu.art, neu.stand, neu.unit_id, neu.building,
|
||||
standGeaendert ? deutschesDatum() : m.stand_am, deutschesDatumZeit(), req.params.id],
|
||||
)
|
||||
res.json({ meter: mapMeter(aktualisiert[0]) })
|
||||
} catch (e) { next(e) }
|
||||
})
|
||||
// ── Nachrichten (Threads) ────────────────────────────────────
|
||||
app.post('/api/threads', auth, async (req, res, next) => {
|
||||
try {
|
||||
@@ -544,6 +641,8 @@ async function start() {
|
||||
await warteAufDatenbank()
|
||||
const geseedet = await seed()
|
||||
if (geseedet) console.log('[api] Demo-Daten eingespielt (50 Wohnungen, 552 Buchungen, …)')
|
||||
const zaehlerGeseedet = await seedeZaehler()
|
||||
if (zaehlerGeseedet) console.log('[api] Zähler-Demo-Daten eingespielt')
|
||||
setInterval(sessionsAufraeumen, 60 * 60 * 1000).unref()
|
||||
app.listen(PORT, () => console.log(`[api] mp-api lauscht auf :${PORT}`))
|
||||
}
|
||||
|
||||
+17
-1
@@ -152,4 +152,20 @@ const announcements = [
|
||||
{ id: 'a-4', title: 'Nebenkostenabrechnungen 2025 versandt', text: 'Alle Abrechnungen liegen digital im Dokumentenbereich vor. Nachzahlungen sind bis 31.10.2026 überwiesen.', date: '31.05.2026', tag: 'Abrechnung' },
|
||||
]
|
||||
|
||||
module.exports = { users, registrationCodes, tickets, documents, threads, announcements }
|
||||
const meters = [
|
||||
// Hauptstraße 12 (hs) – Wohnung hs-7 (Anna Berger)
|
||||
{ id: 'z-1', unit_id: 'hs-7', building: 'Hauptstraße 12', nummer: 'ST-0815-4711', art: 'Strom', stand: 48231.4, stand_am: '01.09.2026', geaendert_am: '01.09.2026, 10:15' },
|
||||
{ id: 'z-2', unit_id: 'hs-7', building: 'Hauptstraße 12', nummer: 'WA-0815-1024', art: 'Wasser', stand: 903.812, stand_am: '01.09.2026', geaendert_am: '01.09.2026, 10:16' },
|
||||
{ id: 'z-3', unit_id: 'hs-7', building: 'Hauptstraße 12', nummer: 'GA-0815-3387', art: 'Gas', stand: 22114.9, stand_am: '01.09.2026', geaendert_am: '01.09.2026, 10:17' },
|
||||
// Ringweg 3 (rw) – Wohnung rw-4 (Jonas Klein)
|
||||
{ id: 'z-4', unit_id: 'rw-4', building: 'Ringweg 3', nummer: 'ST-2201-8842', art: 'Strom', stand: 31877.2, stand_am: '15.09.2026', geaendert_am: '15.09.2026, 09:40' },
|
||||
{ id: 'z-5', unit_id: 'rw-4', building: 'Ringweg 3', nummer: 'WA-2201-5518', art: 'Wasser', stand: 412.095, stand_am: '15.09.2026', geaendert_am: '15.09.2026, 09:41' },
|
||||
// Am Park 5 (ap) – Wohnung ap-2
|
||||
{ id: 'z-6', unit_id: 'ap-2', building: 'Am Park 5', nummer: 'ST-3307-2210', art: 'Strom', stand: 15002.7, stand_am: '20.09.2026', geaendert_am: '20.09.2026, 14:05' },
|
||||
{ id: 'z-7', unit_id: 'ap-2', building: 'Am Park 5', nummer: 'GA-3307-0904', art: 'Gas', stand: 9812.55, stand_am: '20.09.2026', geaendert_am: '20.09.2026, 14:06' },
|
||||
// Haus-/Allgemeinzähler ohne Wohnungsbezug
|
||||
{ id: 'z-8', unit_id: null, building: 'Hauptstraße 12', nummer: 'WA-HAUS-0001', art: 'Wasser', stand: 12044.6, stand_am: '01.09.2026', geaendert_am: '01.09.2026, 10:20' },
|
||||
{ id: 'z-9', unit_id: null, building: 'Ringweg 3', nummer: 'ST-HAUS-0007', art: 'Strom', stand: 88420.3, stand_am: '15.09.2026', geaendert_am: '15.09.2026, 09:45' },
|
||||
]
|
||||
|
||||
module.exports = { users, registrationCodes, tickets, documents, threads, announcements, meters }
|
||||
|
||||
+27
-1
@@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
const { pool } = require('./db')
|
||||
const { users, registrationCodes, tickets, documents, threads, announcements } = require('./seed-data')
|
||||
const { users, registrationCodes, tickets, documents, threads, announcements, meters } = require('./seed-data')
|
||||
const generated = require('../seed/generated.json')
|
||||
|
||||
async function seed() {
|
||||
@@ -87,6 +87,14 @@ async function seed() {
|
||||
)
|
||||
}
|
||||
|
||||
for (const z of meters) {
|
||||
await client.query(
|
||||
`INSERT INTO meters (id, unit_id, building, nummer, art, stand, stand_am, geaendert_am)
|
||||
VALUES ($1,$2,$3,$4,$5,$6,$7,$8)`,
|
||||
[z.id, z.unit_id, z.building, z.nummer, z.art, z.stand, z.stand_am, z.geaendert_am],
|
||||
)
|
||||
}
|
||||
|
||||
await client.query('COMMIT')
|
||||
return true
|
||||
} catch (e) {
|
||||
@@ -98,3 +106,21 @@ async function seed() {
|
||||
}
|
||||
|
||||
module.exports = { seed }
|
||||
|
||||
/** Zähler-Demo-Daten: idempotent – läuft bei jedem Start und füllt die
|
||||
* Zähler-Tabelle nur, wenn sie leer ist (auch nachträglich auf bestehenden
|
||||
* Datenbanken, z. B. nach dem v1.9-Update). */
|
||||
async function seedeZaehler() {
|
||||
const { rows } = await pool.query('SELECT COUNT(*)::int AS n FROM meters')
|
||||
if (rows[0].n > 0) return false
|
||||
for (const z of meters) {
|
||||
await pool.query(
|
||||
`INSERT INTO meters (id, unit_id, building, nummer, art, stand, stand_am, geaendert_am)
|
||||
VALUES ($1,$2,$3,$4,$5,$6,$7,$8)`,
|
||||
[z.id, z.unit_id, z.building, z.nummer, z.art, z.stand, z.stand_am, z.geaendert_am],
|
||||
)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
module.exports = { seed, seedeZaehler }
|
||||
|
||||
@@ -8,6 +8,7 @@ import Payments from './pages/Payments'
|
||||
import Tickets from './pages/Tickets'
|
||||
import Documents from './pages/Documents'
|
||||
import Messages from './pages/Messages'
|
||||
import Zaehler from './pages/Zaehler'
|
||||
import BenutzerVerwaltung from './pages/BenutzerVerwaltung'
|
||||
|
||||
/** Fängt Render-Fehler ab – statt schwarzem Bildschirm: Hinweis + Reload. */
|
||||
@@ -80,6 +81,7 @@ export default function App() {
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/mietkonto" element={<Payments />} />
|
||||
<Route path="/schadensmeldungen" element={<Tickets />} />
|
||||
<Route path="/zaehler" element={<Zaehler />} />
|
||||
<Route path="/dokumente" element={<Documents />} />
|
||||
<Route path="/nachrichten" element={<Messages />} />
|
||||
<Route path="/benutzer" element={<BenutzerVerwaltung />} />
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
UserCog,
|
||||
LogOut,
|
||||
Building2,
|
||||
Gauge,
|
||||
} from 'lucide-react'
|
||||
import { useStore } from '../store/store'
|
||||
import ThemeToggle from './ThemeToggle'
|
||||
@@ -17,6 +18,7 @@ const navItems = [
|
||||
{ to: '/', label: 'Dashboard', icon: LayoutDashboard, end: true },
|
||||
{ to: '/mietkonto', label: 'Mietkonto & Zahlungen', icon: Wallet },
|
||||
{ to: '/schadensmeldungen', label: 'Schadensmeldungen', icon: Wrench },
|
||||
{ to: '/zaehler', label: 'Zählerstände', icon: Gauge },
|
||||
{ to: '/dokumente', label: 'Dokumente', icon: FileText },
|
||||
{ to: '/nachrichten', label: 'Nachrichten', icon: MessagesSquare },
|
||||
]
|
||||
|
||||
+15
-7
@@ -32,7 +32,8 @@ export default function Login() {
|
||||
|
||||
// Registrierung
|
||||
const [code, setCode] = useState('')
|
||||
const [rName, setRName] = useState('')
|
||||
const [rVorname, setRVorname] = useState('')
|
||||
const [rNachname, setRNachname] = useState('')
|
||||
const [rEmail, setREmail] = useState('')
|
||||
const [rBn, setRBn] = useState('')
|
||||
const [rPw, setRPw] = useState('')
|
||||
@@ -53,8 +54,9 @@ export default function Login() {
|
||||
setFehler(null)
|
||||
if (rPw.length < 4) return setFehler('Das Passwort muss mindestens 4 Zeichen haben.')
|
||||
if (rPw !== rPw2) return setFehler('Die Passwörter stimmen nicht überein.')
|
||||
if (!rVorname.trim() || !rNachname.trim()) return setFehler('Bitte Vor- und Nachname angeben.')
|
||||
setLade(true)
|
||||
const err = await registrieren(code, rBn, rName, rEmail, rPw)
|
||||
const err = await registrieren(code, rBn, `${rVorname.trim()} ${rNachname.trim()}`, rEmail, rPw)
|
||||
setLade(false)
|
||||
if (err) setFehler(err)
|
||||
else navigate('/')
|
||||
@@ -198,18 +200,24 @@ export default function Login() {
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="rname" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Name</label>
|
||||
<input id="rname" className={inputCls} value={rName} onChange={(e) => setRName(e.target.value)} placeholder="Vor- und Nachname" required />
|
||||
<label htmlFor="rvorname" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Vorname</label>
|
||||
<input id="rvorname" className={inputCls} value={rVorname} onChange={(e) => setRVorname(e.target.value)} placeholder="Max" autoComplete="given-name" required />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="remail" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">E-Mail</label>
|
||||
<input id="remail" type="email" className={inputCls} value={rEmail} onChange={(e) => setREmail(e.target.value)} required />
|
||||
<label htmlFor="rnachname" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Nachname</label>
|
||||
<input id="rnachname" className={inputCls} value={rNachname} onChange={(e) => setRNachname(e.target.value)} placeholder="Mustermann" autoComplete="family-name" required />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="remail" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">E-Mail</label>
|
||||
<input id="remail" type="email" className={inputCls} value={rEmail} onChange={(e) => setREmail(e.target.value)} autoComplete="email" required />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="rbn" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Benutzername (frei wählbar)</label>
|
||||
<input id="rbn" className={inputCls} value={rBn} onChange={(e) => setRBn(e.target.value)} autoComplete="username" required />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="rpw" className="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Passwort</label>
|
||||
@@ -227,7 +235,7 @@ export default function Login() {
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={lade || !code || !rName || !rEmail || !rBn || !rPw || !rPw2}
|
||||
disabled={lade || !code || !rVorname || !rNachname || !rEmail || !rBn || !rPw || !rPw2}
|
||||
className="w-full rounded-xl bg-amber-500 px-6 py-3 font-semibold text-slate-900 shadow transition hover:bg-amber-400 disabled:opacity-50"
|
||||
>
|
||||
{lade ? 'Bitte warten …' : 'Registrieren & anmelden'}
|
||||
|
||||
@@ -0,0 +1,276 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { Gauge, Zap, Droplets, Flame, Building2, Hash, CalendarDays, Pencil, Plus } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { useStore } from '../store/store'
|
||||
import type { Meter, ZaehlerArt } from '../types'
|
||||
|
||||
const ARTEN: ZaehlerArt[] = ['Strom', 'Wasser', 'Gas', 'Wärme', 'Sonstiges']
|
||||
|
||||
const artIcon = (art: ZaehlerArt) => {
|
||||
switch (art) {
|
||||
case 'Strom': return Zap
|
||||
case 'Wasser': return Droplets
|
||||
case 'Gas': return Flame
|
||||
default: return Gauge
|
||||
}
|
||||
}
|
||||
|
||||
const artStyle: Record<ZaehlerArt, string> = {
|
||||
Strom: 'bg-amber-100 text-amber-800',
|
||||
Wasser: 'bg-blue-100 text-blue-800',
|
||||
Gas: 'bg-orange-100 text-orange-800',
|
||||
Wärme: 'bg-red-100 text-red-700',
|
||||
Sonstiges: 'bg-slate-100 text-slate-600',
|
||||
}
|
||||
|
||||
/** Deutsche Zahlenanzeige: 48231,4 → „48.231,4" (bis zu 3 Nachkommastellen). */
|
||||
const fmtStand = (n: number) =>
|
||||
n.toLocaleString('de-DE', { maximumFractionDigits: 3 })
|
||||
|
||||
function ZaehlerDialog({ meter }: { meter?: Meter }) {
|
||||
const { addZaehler, updateZaehler, units } = useStore()
|
||||
const bearbeiten = Boolean(meter)
|
||||
const [open, setOpen] = useState(false)
|
||||
const [nummer, setNummer] = useState(meter?.nummer ?? '')
|
||||
const [art, setArt] = useState<ZaehlerArt>(meter?.art ?? 'Strom')
|
||||
const [stand, setStand] = useState(String(meter?.stand ?? '').replace('.', ','))
|
||||
const [unitId, setUnitId] = useState<string>(meter?.unitId ?? 'haus')
|
||||
const [building, setBuilding] = useState(meter?.building ?? 'Hauptstraße 12')
|
||||
const [sende, setSende] = useState(false)
|
||||
const [fehler, setFehler] = useState<string | null>(null)
|
||||
|
||||
const submit = async () => {
|
||||
const standZahl = Number(stand.replace(',', '.'))
|
||||
if (!nummer.trim() || !Number.isFinite(standZahl) || standZahl < 0 || sende) return
|
||||
setSende(true)
|
||||
setFehler(null)
|
||||
const payload = {
|
||||
nummer: nummer.trim(),
|
||||
art,
|
||||
stand: standZahl,
|
||||
unitId: unitId === 'haus' ? null : unitId,
|
||||
building,
|
||||
}
|
||||
const err = bearbeiten ? await updateZaehler(meter!.id, payload) : await addZaehler(payload)
|
||||
setSende(false)
|
||||
if (err) return setFehler(err)
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
{bearbeiten ? (
|
||||
<Button variant="outline" size="sm" className="gap-1.5">
|
||||
<Pencil className="h-3.5 w-3.5" /> Bearbeiten
|
||||
</Button>
|
||||
) : (
|
||||
<Button className="gap-2">
|
||||
<Plus className="h-4 w-4" /> Neuer Zähler
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{bearbeiten ? `Zähler ${meter!.nummer} bearbeiten` : 'Neuen Zähler anlegen'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="z-nr">Zählernummer</Label>
|
||||
<Input
|
||||
id="z-nr"
|
||||
placeholder="z. B. ST-0815-4711"
|
||||
value={nummer}
|
||||
onChange={(e) => setNummer(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Zählerart</Label>
|
||||
<Select value={art} onValueChange={(v) => setArt(v as ZaehlerArt)}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{ARTEN.map((a) => (
|
||||
<SelectItem key={a} value={a}>{a}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="z-stand">Aktueller Zählerstand</Label>
|
||||
<Input
|
||||
id="z-stand"
|
||||
inputMode="decimal"
|
||||
placeholder="z. B. 48231,4"
|
||||
value={stand}
|
||||
onChange={(e) => setStand(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Wohneinheit</Label>
|
||||
<Select value={unitId} onValueChange={setUnitId}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="haus">Allgemeinzähler (ohne Wohnung)</SelectItem>
|
||||
{units.map((u) => (
|
||||
<SelectItem key={u.id} value={u.id}>
|
||||
{u.building}, Whg. {u.number}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="z-haus">Haus</Label>
|
||||
<Input
|
||||
id="z-haus"
|
||||
value={building}
|
||||
onChange={(e) => setBuilding(e.target.value)}
|
||||
disabled={unitId !== 'haus'}
|
||||
title={unitId !== 'haus' ? 'Das Haus wird aus der Wohneinheit übernommen.' : undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{fehler && (
|
||||
<div className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950 dark:text-red-300" role="alert">
|
||||
{fehler}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
|
||||
<Button onClick={submit} disabled={!nummer.trim() || !stand.trim() || sende}>
|
||||
{sende ? 'Wird gespeichert …' : bearbeiten ? 'Speichern' : 'Zähler anlegen'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Zaehler() {
|
||||
const { meters, units, role } = useStore()
|
||||
const [filterHaus, setFilterHaus] = useState('alle')
|
||||
const [filterArt, setFilterArt] = useState<'alle' | ZaehlerArt>('alle')
|
||||
|
||||
const gebaeude = useMemo(
|
||||
() => Array.from(new Set(meters.map((m) => m.building))).sort(),
|
||||
[meters],
|
||||
)
|
||||
|
||||
const visible = useMemo(
|
||||
() =>
|
||||
meters.filter(
|
||||
(m) =>
|
||||
(filterHaus === 'alle' || m.building === filterHaus) &&
|
||||
(filterArt === 'alle' || m.art === filterArt),
|
||||
),
|
||||
[meters, filterHaus, filterArt],
|
||||
)
|
||||
|
||||
const einheitLabel = (m: Meter) => {
|
||||
if (!m.unitId) return 'Allgemeinzähler'
|
||||
const u = units.find((x) => x.id === m.unitId)
|
||||
return u ? `Whg. ${u.number}` : m.unitId
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Zählerstände</h1>
|
||||
<p className="text-sm text-slate-500">
|
||||
{role === 'tenant'
|
||||
? 'Ihre Zähler: Strom, Wasser und Gas auf einen Blick'
|
||||
: 'Alle Zähler des Bestands – Stände pflegen und Wohnungen zuordnen'}
|
||||
</p>
|
||||
</div>
|
||||
{role === 'admin' && <ZaehlerDialog />}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Select value={filterHaus} onValueChange={setFilterHaus}>
|
||||
<SelectTrigger className="h-9 w-auto min-w-36"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="alle">Alle Häuser</SelectItem>
|
||||
{gebaeude.map((g) => (
|
||||
<SelectItem key={g} value={g}>{g}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={filterArt} onValueChange={(v) => setFilterArt(v as 'alle' | ZaehlerArt)}>
|
||||
<SelectTrigger className="h-9 w-auto min-w-32"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="alle">Alle Arten</SelectItem>
|
||||
{ARTEN.map((a) => (
|
||||
<SelectItem key={a} value={a}>{a}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{visible.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed bg-white p-10 text-center text-sm text-slate-500">
|
||||
<Gauge className="mx-auto mb-3 h-8 w-8 text-slate-300" />
|
||||
Keine Zähler für diesen Filter.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{visible.map((m) => {
|
||||
const Icon = artIcon(m.art)
|
||||
return (
|
||||
<div key={m.id} className="rounded-2xl border bg-white p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="rounded-xl bg-slate-100 p-2">
|
||||
<Icon className="h-5 w-5 text-slate-600" />
|
||||
</span>
|
||||
<Badge className={artStyle[m.art]} variant="secondary">{m.art}</Badge>
|
||||
</div>
|
||||
{role === 'admin' && <ZaehlerDialog meter={m} />}
|
||||
</div>
|
||||
<div className="mt-4 text-3xl font-bold tracking-tight tabular-nums">
|
||||
{fmtStand(m.stand)}
|
||||
</div>
|
||||
<div className="mt-3 space-y-1.5 text-xs text-slate-500">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Hash className="h-3.5 w-3.5 shrink-0" /> {m.nummer}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Building2 className="h-3.5 w-3.5 shrink-0" />
|
||||
{m.building} · {einheitLabel(m)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CalendarDays className="h-3.5 w-3.5 shrink-0" />
|
||||
Stand: {m.standAm}
|
||||
<span className="text-slate-400">(gepflegt: {m.geaendertAm})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -29,6 +29,8 @@ import type {
|
||||
RegistrierungsCode,
|
||||
Unit,
|
||||
Announcement,
|
||||
Meter,
|
||||
ZaehlerArt,
|
||||
} from '../types'
|
||||
import { apiGet, apiPost, apiPatch, ApiFehler } from '../lib/api'
|
||||
import { sha256, DEMO_PASSWORT } from '../lib/auth'
|
||||
@@ -46,6 +48,7 @@ interface Bootstrap {
|
||||
announcements: Announcement[]
|
||||
benutzer: Benutzer[]
|
||||
codes: RegistrierungsCode[]
|
||||
meters: Meter[]
|
||||
}
|
||||
|
||||
const LEER: Bootstrap = {
|
||||
@@ -57,6 +60,7 @@ const LEER: Bootstrap = {
|
||||
announcements: [],
|
||||
benutzer: [],
|
||||
codes: [],
|
||||
meters: [],
|
||||
}
|
||||
|
||||
interface Store extends Bootstrap {
|
||||
@@ -91,6 +95,18 @@ interface Store extends Bootstrap {
|
||||
setPasswort: (id: string, passwort: string) => Promise<void>
|
||||
weiseEinheitZu: (id: string, einheitId: string | null) => Promise<void>
|
||||
generiereCodes: (anzahl: number, einheitId: string | null) => Promise<RegistrierungsCode[]>
|
||||
// ── Zählerstände (Verwaltung pflegt, Mieter lesen) ──────
|
||||
addZaehler: (z: {
|
||||
nummer: string
|
||||
art: ZaehlerArt
|
||||
stand: number
|
||||
unitId: string | null
|
||||
building: string
|
||||
}) => Promise<string | null>
|
||||
updateZaehler: (
|
||||
id: string,
|
||||
z: Partial<{ nummer: string; art: ZaehlerArt; stand: number; unitId: string | null; building: string }>,
|
||||
) => Promise<string | null>
|
||||
}
|
||||
|
||||
const StoreContext = createContext<Store | null>(null)
|
||||
@@ -259,6 +275,25 @@ export function StoreProvider({ children }: { children: ReactNode }) {
|
||||
await ladeAlles()
|
||||
return codes
|
||||
},
|
||||
// ── Zählerstände ────────────────────────────────────────
|
||||
async addZaehler(z) {
|
||||
try {
|
||||
const { meter } = await apiPost<{ meter: Meter }>('/api/meters', z)
|
||||
setDaten((d) => ({ ...d, meters: [...d.meters, meter] }))
|
||||
return null
|
||||
} catch (e) {
|
||||
return fehlerNachricht(e)
|
||||
}
|
||||
},
|
||||
async updateZaehler(id, z) {
|
||||
try {
|
||||
const { meter } = await apiPatch<{ meter: Meter }>(`/api/meters/${id}`, z)
|
||||
setDaten((d) => ({ ...d, meters: d.meters.map((m) => (m.id === id ? meter : m)) }))
|
||||
return null
|
||||
} catch (e) {
|
||||
return fehlerNachricht(e)
|
||||
}
|
||||
},
|
||||
}), [daten, bereit, me, role, meineEinheit, ladeAlles])
|
||||
|
||||
return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>
|
||||
|
||||
@@ -95,3 +95,16 @@ export interface Announcement {
|
||||
date: string
|
||||
tag: string
|
||||
}
|
||||
|
||||
export type ZaehlerArt = 'Strom' | 'Wasser' | 'Gas' | 'Wärme' | 'Sonstiges'
|
||||
|
||||
export interface Meter {
|
||||
id: string
|
||||
unitId: string | null // null = Haus-/Allgemeinzähler
|
||||
building: string
|
||||
nummer: string
|
||||
art: ZaehlerArt
|
||||
stand: number
|
||||
standAm: string
|
||||
geaendertAm: string
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user