Extend admin for websites/scripts and surface links
This commit is contained in:
Nirodan
@@ -18,6 +18,40 @@ def _require_admin():
|
||||
return user, None
|
||||
|
||||
|
||||
def _ensure_tables(cur):
|
||||
cur.execute(
|
||||
"""
|
||||
CREATE TABLE IF NOT EXISTS users (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
username VARCHAR(50) NOT NULL UNIQUE,
|
||||
password VARCHAR(255) NOT NULL,
|
||||
role VARCHAR(20) NOT NULL
|
||||
)
|
||||
"""
|
||||
)
|
||||
cur.execute(
|
||||
"""
|
||||
CREATE TABLE IF NOT EXISTS websites (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
name VARCHAR(100) NOT NULL,
|
||||
url VARCHAR(255) NOT NULL,
|
||||
description VARCHAR(255) DEFAULT ''
|
||||
)
|
||||
"""
|
||||
)
|
||||
cur.execute(
|
||||
"""
|
||||
CREATE TABLE IF NOT EXISTS scripts (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
name VARCHAR(100) NOT NULL,
|
||||
description VARCHAR(255) DEFAULT '',
|
||||
content TEXT NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
"""
|
||||
)
|
||||
|
||||
|
||||
@admin_bp.route("/api/admin/users", methods=["GET"])
|
||||
def list_users():
|
||||
_, err = _require_admin()
|
||||
@@ -27,6 +61,7 @@ def list_users():
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor(dictionary=True)
|
||||
_ensure_tables(cur)
|
||||
cur.execute("SELECT id, username, role FROM users ORDER BY username ASC")
|
||||
users = cur.fetchall()
|
||||
cur.close()
|
||||
@@ -52,6 +87,7 @@ def create_user():
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor(dictionary=True)
|
||||
_ensure_tables(cur)
|
||||
cur.execute("SELECT id FROM users WHERE username=%s", (username,))
|
||||
if cur.fetchone():
|
||||
cur.close()
|
||||
@@ -86,6 +122,7 @@ def update_user(user_id):
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor()
|
||||
_ensure_tables(cur)
|
||||
if role:
|
||||
cur.execute("UPDATE users SET role=%s WHERE id=%s", (role, user_id))
|
||||
if password:
|
||||
@@ -112,6 +149,7 @@ def delete_user(user_id):
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor()
|
||||
_ensure_tables(cur)
|
||||
# Schutz: Admin darf sich nicht selbst löschen
|
||||
cur.execute("SELECT username FROM users WHERE id=%s", (user_id,))
|
||||
row = cur.fetchone()
|
||||
@@ -133,3 +171,213 @@ def delete_user(user_id):
|
||||
except Exception as e:
|
||||
logger.error(f"[Admin delete_user] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
# ---------- Websites (Admin CRUD) ----------
|
||||
|
||||
@admin_bp.route("/api/admin/websites", methods=["GET"])
|
||||
def list_websites_admin():
|
||||
_, err = _require_admin()
|
||||
if err:
|
||||
return err
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor(dictionary=True)
|
||||
_ensure_tables(cur)
|
||||
cur.execute("SELECT id, name, url, description FROM websites ORDER BY name ASC")
|
||||
rows = cur.fetchall()
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify(rows)
|
||||
except Exception as e:
|
||||
logger.error(f"[Admin list_websites] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
@admin_bp.route("/api/admin/websites", methods=["POST"])
|
||||
def create_website():
|
||||
_, err = _require_admin()
|
||||
if err:
|
||||
return err
|
||||
data = request.get_json() or {}
|
||||
name = data.get("name", "").strip()
|
||||
url = data.get("url", "").strip()
|
||||
description = data.get("description", "").strip()
|
||||
if not name or not url:
|
||||
return jsonify({"message": "Name und URL erforderlich"}), 400
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor()
|
||||
_ensure_tables(cur)
|
||||
cur.execute(
|
||||
"INSERT INTO websites (name, url, description) VALUES (%s, %s, %s)",
|
||||
(name, url, description),
|
||||
)
|
||||
conn.commit()
|
||||
new_id = cur.lastrowid
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify({"id": new_id, "name": name, "url": url, "description": description}), 201
|
||||
except Exception as e:
|
||||
logger.error(f"[Admin create_website] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
@admin_bp.route("/api/admin/websites/<int:item_id>", methods=["PUT"])
|
||||
def update_website(item_id):
|
||||
_, err = _require_admin()
|
||||
if err:
|
||||
return err
|
||||
data = request.get_json() or {}
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor()
|
||||
_ensure_tables(cur)
|
||||
cur.execute(
|
||||
"UPDATE websites SET name=%s, url=%s, description=%s WHERE id=%s",
|
||||
(data.get("name"), data.get("url"), data.get("description", ""), item_id),
|
||||
)
|
||||
conn.commit()
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify({"message": "Aktualisiert"}), 200
|
||||
except Exception as e:
|
||||
logger.error(f"[Admin update_website] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
@admin_bp.route("/api/admin/websites/<int:item_id>", methods=["DELETE"])
|
||||
def delete_website(item_id):
|
||||
_, err = _require_admin()
|
||||
if err:
|
||||
return err
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor()
|
||||
_ensure_tables(cur)
|
||||
cur.execute("DELETE FROM websites WHERE id=%s", (item_id,))
|
||||
conn.commit()
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify({"message": "Gelöscht"}), 200
|
||||
except Exception as e:
|
||||
logger.error(f"[Admin delete_website] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
# ---------- Scripts (Admin CRUD) ----------
|
||||
|
||||
@admin_bp.route("/api/admin/scripts", methods=["GET"])
|
||||
def list_scripts_admin():
|
||||
_, err = _require_admin()
|
||||
if err:
|
||||
return err
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor(dictionary=True)
|
||||
_ensure_tables(cur)
|
||||
cur.execute("SELECT id, name, description, created_at FROM scripts ORDER BY created_at DESC")
|
||||
rows = cur.fetchall()
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify(rows)
|
||||
except Exception as e:
|
||||
logger.error(f"[Admin list_scripts] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
@admin_bp.route("/api/admin/scripts", methods=["POST"])
|
||||
def create_script():
|
||||
_, err = _require_admin()
|
||||
if err:
|
||||
return err
|
||||
data = request.get_json() or {}
|
||||
name = data.get("name", "").strip()
|
||||
description = data.get("description", "").strip()
|
||||
content = data.get("content", "")
|
||||
if not name or not content:
|
||||
return jsonify({"message": "Name und Inhalt erforderlich"}), 400
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor()
|
||||
_ensure_tables(cur)
|
||||
cur.execute(
|
||||
"INSERT INTO scripts (name, description, content) VALUES (%s, %s, %s)",
|
||||
(name, description, content),
|
||||
)
|
||||
conn.commit()
|
||||
new_id = cur.lastrowid
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify({"id": new_id, "name": name, "description": description}), 201
|
||||
except Exception as e:
|
||||
logger.error(f"[Admin create_script] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
@admin_bp.route("/api/admin/scripts/<int:item_id>", methods=["DELETE"])
|
||||
def delete_script(item_id):
|
||||
_, err = _require_admin()
|
||||
if err:
|
||||
return err
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor()
|
||||
_ensure_tables(cur)
|
||||
cur.execute("DELETE FROM scripts WHERE id=%s", (item_id,))
|
||||
conn.commit()
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify({"message": "Gelöscht"}), 200
|
||||
except Exception as e:
|
||||
logger.error(f"[Admin delete_script] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
# ---------- Public (logged-in) endpoints ----------
|
||||
|
||||
@admin_bp.route("/api/websites", methods=["GET"])
|
||||
def list_websites_public():
|
||||
user = verify_token()
|
||||
if not user:
|
||||
return jsonify({"message": "Nicht autorisiert"}), 401
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor(dictionary=True)
|
||||
_ensure_tables(cur)
|
||||
cur.execute("SELECT id, name, url, description FROM websites ORDER BY name ASC")
|
||||
rows = cur.fetchall()
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify(rows)
|
||||
except Exception as e:
|
||||
logger.error(f"[Public list_websites] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
|
||||
@admin_bp.route("/api/scripts", methods=["GET"])
|
||||
def list_scripts_public():
|
||||
user = verify_token()
|
||||
if not user:
|
||||
return jsonify({"message": "Nicht autorisiert"}), 401
|
||||
try:
|
||||
cfg = load_config()
|
||||
conn = connect(**cfg)
|
||||
cur = conn.cursor(dictionary=True)
|
||||
_ensure_tables(cur)
|
||||
cur.execute("SELECT id, name, description, created_at FROM scripts ORDER BY created_at DESC")
|
||||
rows = cur.fetchall()
|
||||
cur.close()
|
||||
conn.close()
|
||||
return jsonify(rows)
|
||||
except Exception as e:
|
||||
logger.error(f"[Public list_scripts] {e}")
|
||||
return jsonify({"message": "Serverfehler"}), 500
|
||||
|
||||
@@ -3,42 +3,110 @@ import axios from '../services/api';
|
||||
|
||||
function AdminDashboard() {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [form, setForm] = useState({ username: '', password: '', role: 'user' });
|
||||
const [websites, setWebsites] = useState([]);
|
||||
const [scripts, setScripts] = useState([]);
|
||||
const [loadingUsers, setLoadingUsers] = useState(true);
|
||||
const [loadingSites, setLoadingSites] = useState(true);
|
||||
const [loadingScripts, setLoadingScripts] = useState(true);
|
||||
const [creatingUser, setCreatingUser] = useState(false);
|
||||
const [creatingSite, setCreatingSite] = useState(false);
|
||||
const [creatingScript, setCreatingScript] = useState(false);
|
||||
const [formUser, setFormUser] = useState({ username: '', password: '', role: 'user' });
|
||||
const [formSite, setFormSite] = useState({ name: '', url: '', description: '' });
|
||||
const [formScript, setFormScript] = useState({ name: '', description: '', content: '' });
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setLoadingUsers(true);
|
||||
const res = await axios.get('/api/admin/users');
|
||||
setUsers(res.data);
|
||||
setError(null);
|
||||
} catch (e) {
|
||||
setError('Konnte Nutzerliste nicht laden');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingUsers(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchWebsites = async () => {
|
||||
try {
|
||||
setLoadingSites(true);
|
||||
const res = await axios.get('/api/admin/websites');
|
||||
setWebsites(res.data);
|
||||
} catch (e) {
|
||||
setError('Webseiten konnten nicht geladen werden');
|
||||
} finally {
|
||||
setLoadingSites(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchScripts = async () => {
|
||||
try {
|
||||
setLoadingScripts(true);
|
||||
const res = await axios.get('/api/admin/scripts');
|
||||
setScripts(res.data);
|
||||
} catch (e) {
|
||||
setError('Scripts konnten nicht geladen werden');
|
||||
} finally {
|
||||
setLoadingScripts(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
fetchWebsites();
|
||||
fetchScripts();
|
||||
}, []);
|
||||
|
||||
const createUser = async () => {
|
||||
if (!form.username || !form.password) {
|
||||
if (!formUser.username || !formUser.password) {
|
||||
setError('Username und Passwort erforderlich');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setCreating(true);
|
||||
await axios.post('/api/admin/users', form);
|
||||
setForm({ username: '', password: '', role: 'user' });
|
||||
setCreatingUser(true);
|
||||
await axios.post('/api/admin/users', formUser);
|
||||
setFormUser({ username: '', password: '', role: 'user' });
|
||||
await fetchUsers();
|
||||
} catch (e) {
|
||||
setError(e.response?.data?.message || 'Erstellen fehlgeschlagen');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
setCreatingUser(false);
|
||||
}
|
||||
};
|
||||
|
||||
const createWebsite = async () => {
|
||||
if (!formSite.name || !formSite.url) {
|
||||
setError('Name und URL erforderlich');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setCreatingSite(true);
|
||||
await axios.post('/api/admin/websites', formSite);
|
||||
setFormSite({ name: '', url: '', description: '' });
|
||||
await fetchWebsites();
|
||||
} catch (e) {
|
||||
setError(e.response?.data?.message || 'Webseite konnte nicht angelegt werden');
|
||||
} finally {
|
||||
setCreatingSite(false);
|
||||
}
|
||||
};
|
||||
|
||||
const createScript = async () => {
|
||||
if (!formScript.name || !formScript.content) {
|
||||
setError('Name und Inhalt erforderlich');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setCreatingScript(true);
|
||||
await axios.post('/api/admin/scripts', formScript);
|
||||
setFormScript({ name: '', description: '', content: '' });
|
||||
await fetchScripts();
|
||||
} catch (e) {
|
||||
setError(e.response?.data?.message || 'Script konnte nicht angelegt werden');
|
||||
} finally {
|
||||
setCreatingScript(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -72,13 +140,33 @@ function AdminDashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
const deleteWebsite = async (id) => {
|
||||
if (!window.confirm('Webseite löschen?')) return;
|
||||
try {
|
||||
await axios.delete(`/api/admin/websites/${id}`);
|
||||
await fetchWebsites();
|
||||
} catch (e) {
|
||||
setError('Konnte Webseite nicht löschen');
|
||||
}
|
||||
};
|
||||
|
||||
const deleteScript = async (id) => {
|
||||
if (!window.confirm('Script löschen?')) return;
|
||||
try {
|
||||
await axios.delete(`/api/admin/scripts/${id}`);
|
||||
await fetchScripts();
|
||||
} catch (e) {
|
||||
setError('Konnte Script nicht löschen');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="main-content admin">
|
||||
<div className="admin-header">
|
||||
<div>
|
||||
<p className="eyebrow">Adminbereich</p>
|
||||
<h2>Benutzerverwaltung</h2>
|
||||
<p className="muted">Nutzer anlegen, Rollen setzen, Passwörter zurücksetzen.</p>
|
||||
<h2>Verwaltung</h2>
|
||||
<p className="muted">Nutzer, externe Links und Python-Skripte zentral verwalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,8 +177,8 @@ function AdminDashboard() {
|
||||
<label>
|
||||
Benutzername
|
||||
<input
|
||||
value={form.username}
|
||||
onChange={(e) => setForm({ ...form, username: e.target.value })}
|
||||
value={formUser.username}
|
||||
onChange={(e) => setFormUser({ ...formUser, username: e.target.value })}
|
||||
placeholder="z.B. maria"
|
||||
/>
|
||||
</label>
|
||||
@@ -98,34 +186,33 @@ function AdminDashboard() {
|
||||
Passwort
|
||||
<input
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
value={formUser.password}
|
||||
onChange={(e) => setFormUser({ ...formUser, password: e.target.value })}
|
||||
placeholder="Sicheres Passwort"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Rolle
|
||||
<select
|
||||
value={form.role}
|
||||
onChange={(e) => setForm({ ...form, role: e.target.value })}
|
||||
value={formUser.role}
|
||||
onChange={(e) => setFormUser({ ...formUser, role: e.target.value })}
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<button onClick={createUser} disabled={creating}>
|
||||
<button onClick={createUser} disabled={creatingUser}>
|
||||
➕ Nutzer anlegen
|
||||
</button>
|
||||
{error && <p className="error">{error}</p>}
|
||||
</div>
|
||||
|
||||
<div className="admin-card">
|
||||
<div className="table-head">
|
||||
<h3>Nutzer</h3>
|
||||
<button className="ghost" onClick={fetchUsers} disabled={loading}>↻ Aktualisieren</button>
|
||||
<button className="ghost" onClick={fetchUsers} disabled={loadingUsers}>↻ Aktualisieren</button>
|
||||
</div>
|
||||
{loading ? (
|
||||
{loadingUsers ? (
|
||||
<p className="muted">Lade Nutzer...</p>
|
||||
) : (
|
||||
<div className="table">
|
||||
@@ -156,6 +243,109 @@ function AdminDashboard() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-grid">
|
||||
<div className="admin-card">
|
||||
<h3>Externe Webseiten</h3>
|
||||
<div className="form-grid">
|
||||
<label>
|
||||
Name
|
||||
<input
|
||||
value={formSite.name}
|
||||
onChange={(e) => setFormSite({ ...formSite, name: e.target.value })}
|
||||
placeholder="z.B. Docs"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
URL
|
||||
<input
|
||||
value={formSite.url}
|
||||
onChange={(e) => setFormSite({ ...formSite, url: e.target.value })}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Beschreibung
|
||||
<input
|
||||
value={formSite.description}
|
||||
onChange={(e) => setFormSite({ ...formSite, description: e.target.value })}
|
||||
placeholder="Kurzbeschreibung"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button onClick={createWebsite} disabled={creatingSite}>➕ Webseite speichern</button>
|
||||
{loadingSites ? <p className="muted">Lade Webseiten...</p> : (
|
||||
<div className="table compact">
|
||||
<div className="table-row table-headings">
|
||||
<span>🌐 Name</span>
|
||||
<span>URL</span>
|
||||
<span className="actions">Aktionen</span>
|
||||
</div>
|
||||
{websites.map((w) => (
|
||||
<div className="table-row" key={w.id}>
|
||||
<span className="user">{w.name}</span>
|
||||
<span className="muted">{w.url}</span>
|
||||
<span className="actions">
|
||||
<button className="ghost danger" onClick={() => deleteWebsite(w.id)}>🗑️</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="admin-card">
|
||||
<h3>Python-Skripte</h3>
|
||||
<div className="form-grid">
|
||||
<label>
|
||||
Name
|
||||
<input
|
||||
value={formScript.name}
|
||||
onChange={(e) => setFormScript({ ...formScript, name: e.target.value })}
|
||||
placeholder="Cleanup Job"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Beschreibung
|
||||
<input
|
||||
value={formScript.description}
|
||||
onChange={(e) => setFormScript({ ...formScript, description: e.target.value })}
|
||||
placeholder="Kurzbeschreibung"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Inhalt
|
||||
<textarea
|
||||
rows={6}
|
||||
value={formScript.content}
|
||||
onChange={(e) => setFormScript({ ...formScript, content: e.target.value })}
|
||||
placeholder="#!/usr/bin/env python3\nprint('Hello')"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button onClick={createScript} disabled={creatingScript}>➕ Script speichern</button>
|
||||
{loadingScripts ? <p className="muted">Lade Scripts...</p> : (
|
||||
<div className="table compact">
|
||||
<div className="table-row table-headings">
|
||||
<span>🐍 Script</span>
|
||||
<span>Beschreibung</span>
|
||||
<span className="actions">Aktionen</span>
|
||||
</div>
|
||||
{scripts.map((s) => (
|
||||
<div className="table-row" key={s.id}>
|
||||
<span className="user">{s.name}</span>
|
||||
<span className="muted">{s.description}</span>
|
||||
<span className="actions">
|
||||
<button className="ghost danger" onClick={() => deleteScript(s.id)}>🗑️</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="error">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,26 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import axios from '../services/api';
|
||||
|
||||
function ToolOverview() {
|
||||
const navigate = useNavigate();
|
||||
const role = localStorage.getItem('role');
|
||||
const [websites, setWebsites] = useState([]);
|
||||
const [loadingWebsites, setLoadingWebsites] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/websites');
|
||||
setWebsites(res.data);
|
||||
} catch (e) {
|
||||
setWebsites([]);
|
||||
} finally {
|
||||
setLoadingWebsites(false);
|
||||
}
|
||||
};
|
||||
load();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
@@ -13,6 +31,31 @@ function ToolOverview() {
|
||||
{role === 'admin' && (
|
||||
<button onClick={() => navigate('/admin')}>🛠️ Admin-Bereich</button>
|
||||
)}
|
||||
|
||||
<h3 style={{ marginTop: '24px' }}>🌐 Externe Webseiten</h3>
|
||||
{loadingWebsites ? (
|
||||
<p className="muted">Lade Links...</p>
|
||||
) : websites.length === 0 ? (
|
||||
<p className="muted">Keine Links angelegt.</p>
|
||||
) : (
|
||||
<div className="card-grid">
|
||||
{websites.map((w) => (
|
||||
<a
|
||||
key={w.id}
|
||||
className="link-card"
|
||||
href={w.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<div className="link-card__icon">🌐</div>
|
||||
<div>
|
||||
<div className="link-card__title">{w.name}</div>
|
||||
<div className="link-card__desc">{w.description || w.url}</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -85,6 +85,10 @@ select {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.table.compact .table-row {
|
||||
grid-template-columns: 1fr 1fr 0.6fr;
|
||||
}
|
||||
|
||||
.table .user {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -46,3 +46,51 @@ input:focus, textarea:focus {
|
||||
input::placeholder, textarea::placeholder {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.link-card {
|
||||
display: grid;
|
||||
grid-template-columns: 44px 1fr;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
box-shadow: var(--shadow);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.link-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 14px 30px rgba(14, 165, 233, 0.2);
|
||||
}
|
||||
|
||||
.link-card__icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(34, 211, 238, 0.12);
|
||||
color: var(--accent);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.link-card__title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.link-card__desc {
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user