Mist, jetzt vielleicht
This commit is contained in:
16
app/api/check/route.ts
Normal file
16
app/api/check/route.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { doCheckAndMail } from '@/lib/mailService';
|
||||
|
||||
// Einfacher Shared-Secret-Schutz
|
||||
const SECRET = process.env.CHECK_SECRET || '';
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
if (SECRET) {
|
||||
const token = req.nextUrl.searchParams.get('secret');
|
||||
if (token !== SECRET) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||
}
|
||||
}
|
||||
const result = await doCheckAndMail();
|
||||
return NextResponse.json({ ok: true, result });
|
||||
}
|
||||
94
app/api/data/route.ts
Normal file
94
app/api/data/route.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import type { RowDataPacket } from 'mysql2';
|
||||
import pool from '@/lib/mysql';
|
||||
import { checkAblauf } from '@/lib/checkAblauf';
|
||||
import moment from 'moment';
|
||||
import { Tablette, DataResponse } from '@/types/tablette';
|
||||
|
||||
function formatDate(dt: Date | string | null): string {
|
||||
if (!dt) return '';
|
||||
const d = moment(dt);
|
||||
if (!d.isValid() || d.isBefore(moment('2020-01-01'))) return '';
|
||||
return d.format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
const SORT_WHITELIST = new Set(['tab', 'pday', 'cnt', 'at', 'akt', 'until', 'warn', 'rem', 'order']);
|
||||
|
||||
// GET /api/data?sidx=...&sord=asc|desc
|
||||
export async function GET(req: NextRequest) {
|
||||
const { searchParams } = req.nextUrl;
|
||||
const sidxRaw = searchParams.get('sidx') || 'pday';
|
||||
const sidx = SORT_WHITELIST.has(sidxRaw) ? sidxRaw : 'pday';
|
||||
const sord = searchParams.get('sord') === 'asc' ? 'ASC' : 'DESC';
|
||||
const col = `\`${sidx}\``;
|
||||
|
||||
const [rows] = await pool.query<RowDataPacket[]>(
|
||||
`SELECT tab, pday, cnt, at, akt, until, warn, rem, \`order\`
|
||||
FROM tabletten
|
||||
ORDER BY ${col} ${sord}, rem DESC, tab ASC`
|
||||
);
|
||||
|
||||
const values: Tablette[] = rows.map((r) => ({
|
||||
tab: r.tab,
|
||||
pday: r.pday,
|
||||
cnt: r.cnt,
|
||||
at: formatDate(r.at),
|
||||
akt: r.akt,
|
||||
until: formatDate(r.until),
|
||||
warn: r.warn === 1 || r.warn === true,
|
||||
rem: r.rem,
|
||||
order: r.order,
|
||||
}));
|
||||
|
||||
const result: DataResponse = {
|
||||
total: 1,
|
||||
page: 1,
|
||||
records: values.length,
|
||||
values,
|
||||
};
|
||||
|
||||
return NextResponse.json(result);
|
||||
}
|
||||
|
||||
// POST /api/data
|
||||
// body: { oper: 'add'|'edit'|'del', tab, pday, cnt, at, rem, order }
|
||||
export async function POST(req: NextRequest) {
|
||||
const data = await req.json();
|
||||
|
||||
if (data.oper === 'del') {
|
||||
await pool.execute('DELETE FROM tabletten WHERE tab = ?', [data.tab]);
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
|
||||
// add or edit
|
||||
const pday = parseFloat(data.pday) || 1;
|
||||
const cnt = parseInt(data.cnt, 10) || 0;
|
||||
const at = data.at === '' ? '1900-01-01' : data.at;
|
||||
const rem = data.rem || '';
|
||||
const order = data.order || '';
|
||||
|
||||
const updates = checkAblauf({ cnt, pday, at: new Date(at) });
|
||||
|
||||
await pool.execute(
|
||||
`INSERT INTO tabletten (tab, pday, cnt, at, akt, until, warn, rem, \`order\`)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||
ON DUPLICATE KEY UPDATE
|
||||
pday = VALUES(pday),
|
||||
cnt = VALUES(cnt),
|
||||
at = VALUES(at),
|
||||
akt = VALUES(akt),
|
||||
until = VALUES(until),
|
||||
warn = VALUES(warn),
|
||||
rem = VALUES(rem),
|
||||
\`order\` = VALUES(\`order\`)`,
|
||||
[
|
||||
data.tab, pday, cnt, at,
|
||||
updates.akt,
|
||||
moment(updates.until).format('YYYY-MM-DD'),
|
||||
updates.warn ? 1 : 0,
|
||||
rem, order,
|
||||
]
|
||||
);
|
||||
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
110
app/globals.css
110
app/globals.css
@@ -12,15 +12,109 @@
|
||||
--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;
|
||||
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
background-color: #eeeeee;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* ---- Toolbar ---- */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn-add { background: #4caf50; color: white; }
|
||||
.btn-add:hover { background: #388e3c; }
|
||||
.btn-refresh { background: #2196f3; color: white; }
|
||||
.btn-refresh:hover { background: #1565c0; }
|
||||
.btn-delete { background: #e53935; color: white; }
|
||||
.btn-delete:hover { background: #b71c1c; }
|
||||
.btn-icon { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0; }
|
||||
|
||||
/* ---- Table ---- */
|
||||
.table-container { overflow-x: auto; }
|
||||
|
||||
.main-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
}
|
||||
.main-table th,
|
||||
.main-table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.main-table th {
|
||||
background: #d0d0d0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
.main-table th:hover { background: #bbb; }
|
||||
.main-table tbody tr:nth-child(even) { background: #f7f7f7; }
|
||||
|
||||
.sortable-header { white-space: nowrap; }
|
||||
.cell-center { text-align: center; }
|
||||
.action-cell { white-space: nowrap; }
|
||||
.col-tab { font-weight: bold; font-size: 115%; }
|
||||
.col-pday { width: 40px; text-align: center; }
|
||||
.col-date { width: 110px; white-space: nowrap; text-align: center; }
|
||||
|
||||
/* ---- Warn highlighting (mirrors original) ---- */
|
||||
.row-warn { background: #fabebe !important; }
|
||||
.cell-warn { background: #ff8033 !important; color: white; font-weight: bold; }
|
||||
.row-abgesetzt { color: #aaa; }
|
||||
|
||||
/* ---- Error ---- */
|
||||
.error-msg { color: red; font-weight: bold; }
|
||||
|
||||
/* ---- Modal ---- */
|
||||
.modal-overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.45);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 28px 32px;
|
||||
min-width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.25);
|
||||
}
|
||||
.modal h2 { margin: 0 0 8px; font-size: 1.2rem; }
|
||||
.modal label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 13px;
|
||||
gap: 4px;
|
||||
}
|
||||
.modal input {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.modal input:disabled { background: #eee; color: #777; }
|
||||
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
|
||||
|
||||
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Tabletten-Übersicht",
|
||||
description: "Verwaltung von Medikamenten und Tabletten",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
27
app/login/actions.ts
Normal file
27
app/login/actions.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
'use server';
|
||||
|
||||
import { verifyCredentials } from '@/lib/auth';
|
||||
import { createSession, deleteSession } from '@/lib/session';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
export async function login(prevState: any, formData: FormData) {
|
||||
const username = formData.get('username') as string;
|
||||
const password = formData.get('password') as string;
|
||||
|
||||
if (!username || !password) {
|
||||
return { error: 'Bitte Benutzername und Passwort eingeben' };
|
||||
}
|
||||
|
||||
const isValid = verifyCredentials(username, password);
|
||||
if (!isValid) {
|
||||
return { error: 'Ungültige Anmeldedaten' };
|
||||
}
|
||||
|
||||
await createSession(username);
|
||||
redirect('/');
|
||||
}
|
||||
|
||||
export async function logout() {
|
||||
await deleteSession();
|
||||
redirect('/login');
|
||||
}
|
||||
72
app/login/page.tsx
Normal file
72
app/login/page.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
'use client';
|
||||
|
||||
import { useActionState } from 'react';
|
||||
import { login } from './actions';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [state, loginAction, isPending] = useActionState(login, undefined);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white py-4 px-4">
|
||||
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold">Tabletten-Übersicht</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center py-10">
|
||||
<div className="w-full max-w-sm bg-white border border-gray-300 rounded-xl shadow-md p-8">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-6 text-center">Anmeldung</h2>
|
||||
|
||||
<form action={loginAction} className="space-y-5">
|
||||
<div>
|
||||
<label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Benutzername
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
required
|
||||
autoComplete="off"
|
||||
className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-gray-900 focus:border-blue-500 focus:outline-none text-sm"
|
||||
placeholder="Benutzername"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Passwort
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-gray-900 focus:border-blue-500 focus:outline-none text-sm"
|
||||
placeholder="Passwort"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{state?.error && (
|
||||
<div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm">
|
||||
{state.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="w-full py-2 px-4 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
|
||||
>
|
||||
{isPending ? 'Anmeldung läuft...' : 'Anmelden'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
app/page.tsx
65
app/page.tsx
@@ -1,65 +1,10 @@
|
||||
import Image from "next/image";
|
||||
import TablettenTable from '@/components/TablettenTable';
|
||||
import AppLayout from '@/components/AppLayout';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen 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>
|
||||
<AppLayout>
|
||||
<TablettenTable />
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user