update
This commit is contained in:
jhartworks
+4
-1
@@ -3,4 +3,7 @@ ADMIN_USERNAME=admin
|
||||
ADMIN_EMAIL=admin@example.com
|
||||
ADMIN_PASSWORD=ChangeMe123!
|
||||
ADMIN_NAME=System Admin
|
||||
VITE_API_URL=http://localhost:18080/api
|
||||
MARIADB_ROOT_PASSWORD=SE3112
|
||||
DB_PASSWORD_FALLBACK=root
|
||||
CORS_ORIGIN=*
|
||||
VITE_API_PORT=18080
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
node_modules
|
||||
node_modules
|
||||
dist
|
||||
.env
|
||||
.DS_Store
|
||||
npm-debug.log*
|
||||
.scratch/runtime
|
||||
|
||||
data/
|
||||
|
||||
@@ -1,43 +1,45 @@
|
||||
# SE Local Trenddata.
|
||||
|
||||
Modernisierte Trendoberflaeche fuer Wago-Bestandsdatenbanken mit React, Node.js, MariaDB und Redis.
|
||||
Modernisierte Trendoberfläche für Wago-Bestandsdatenbanken mit React, Node.js, MariaDB, Redis, Dockhand und vorbereitetem Collector-Service.
|
||||
|
||||
## Enthalten
|
||||
- React-Frontend mit Light/Dark/System-Theme
|
||||
- Username-Login und Rollen fuer `viewer`, `technician`, `admin`
|
||||
- Alias-Verwaltung fuer `Wert1` bis `Wert200` je `ispXX`
|
||||
- CSV-Import und CSV-Export fuer Aliasdaten
|
||||
- Gespeicherte Auswahlen ueber mehrere ISPs
|
||||
- Dashboard mit Graph-, Zahl- und Gauge-Widgets
|
||||
- Vollbild fuer die Trendansicht
|
||||
- SQL-Import fuer vorhandene Langzeitdaten
|
||||
- Redis fuer Metadaten, Auswahlen, Dashboard und User-Praferenzen
|
||||
- MariaDB-Init fuer `isp01` bis `isp20` plus `app_users`
|
||||
- React-Frontend mit System-, Hell- und Dunkelmodus
|
||||
- Username-Login, Rollen, Passwortwechsel und Benutzerverwaltung
|
||||
- Alias-Verwaltung für `Wert1` bis `Wert200` je Trendtabelle
|
||||
- CSV-Import und CSV-Export für Aliasdaten
|
||||
- Gespeicherte Auswahlen über mehrere ISPs hinweg
|
||||
- Dashboard mit Graph-, Zahl- und Zeigermanometer-Widgets
|
||||
- Fokusansicht für den Trendgraph statt Browser-Vollbild
|
||||
- Export des Trendgraphs als CSV, XLSX, PNG, JPG, SVG und PDF
|
||||
- SQL-Import für vorhandene Langzeitdaten
|
||||
- Redis für Metadaten, Auswahlen, Dashboard und Benutzerpräferenzen
|
||||
- MariaDB-Init für `isp01` bis `isp20` plus `app_users`
|
||||
- Dockhand im Compose-Stack
|
||||
- Collector-Gerüst für spätere Modbus-, OPC-UA-, BACnet- und KNX-Anbindung
|
||||
|
||||
## Starten
|
||||
1. Optional `.env.example` nach `.env` kopieren und Werte anpassen.
|
||||
2. `docker compose up -d --build`
|
||||
3. Frontend: `http://localhost:5173`
|
||||
4. API: `http://localhost:18080/api`
|
||||
5. Dockhand: `http://localhost:3000`
|
||||
6. Collector: `http://localhost:18110/health`
|
||||
|
||||
## Standard-Login
|
||||
- Username: `admin`
|
||||
- Passwort: `ChangeMe123!`
|
||||
|
||||
Bitte nach dem ersten Login in der Benutzerverwaltung einen eigenen Admin anlegen oder die Zugangsdaten anpassen.
|
||||
## Datenbank-Kompatibilität
|
||||
- Bestehende Anlagen können weiter mit `root` und Passwort `SE3112` auf die MariaDB gehen.
|
||||
- Die API versucht zusätzlich als Fallback noch das ältere Root-Passwort `root`, damit vorhandene Entwicklungs-Volumes nicht sofort umgebaut werden müssen.
|
||||
|
||||
## Datenmodell
|
||||
- Bestehende Trenddaten bleiben in den breiten Tabellen `isp01`, `isp02`, ...
|
||||
- Die Anwendung erkennt vorhandene `isp`-Tabellen dynamisch.
|
||||
- Metadaten wie Alias, Einheit, Faktor und Dashboard-Konfiguration liegen in Redis.
|
||||
## Wago / SD-Karte
|
||||
- Für Wago-Systeme liegt mit [docker-compose.wago.yml](/C:/Projects/SeLTD/docker-compose.wago.yml) ein Override bereit.
|
||||
- Start auf Wago mit SD-Karte: `docker compose -f docker-compose.yml -f docker-compose.wago.yml up -d --build`
|
||||
- Dabei landen die großen Daten unter `/media/sd/seltd/...`.
|
||||
|
||||
## Wichtige Container
|
||||
- `seltd-mariadb`
|
||||
- `seltd-redis`
|
||||
- `seltd-api`
|
||||
- `seltd-web`
|
||||
|
||||
## Hinweise fuer Bestandsdaten
|
||||
- Vorhandene SQL-Dumps koennen im Admin-Bereich direkt importiert werden.
|
||||
- Die Anwendung liest die Tabellenstruktur mit `datum`, `userlevel` und `Wert1..Wert200` direkt.
|
||||
- Wenn spaeter weitere Tabellen wie `isp21` oder `isp35` auftauchen, werden sie automatisch in der Oberflaeche erkannt.
|
||||
## Hinweise
|
||||
- Vorhandene SQL-Dumps können im Admin-Bereich direkt importiert werden.
|
||||
- Leere Trendtabellen tauchen nicht im Trend-Dropdown auf, aber weiter im Admin-Bereich.
|
||||
- Der Collector ist bewusst erst als technisches Gerüst enthalten; Protokoll-Scan und Feldbus-Importe sind noch nicht vollständig implementiert.
|
||||
- Für Dockhand wurde der Container ergänzt. Eine sichere automatische Vorbelegung eines lokalen Admin-Users war ohne offizielle Initialisierungsdokumentation nicht belastbar genug und wurde deshalb nicht blind in die SQLite-Datenbank geschrieben.
|
||||
|
||||
@@ -17,4 +17,3 @@
|
||||
"mysql2": "^3.12.0"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+3
-2
@@ -8,10 +8,11 @@ export const config = {
|
||||
dbPort: Number(process.env.DB_PORT || 3306),
|
||||
dbName: process.env.DB_NAME || "wago",
|
||||
dbUser: process.env.DB_USER || "root",
|
||||
dbPassword: process.env.DB_PASSWORD || "root",
|
||||
dbPassword: process.env.DB_PASSWORD || "SE3112",
|
||||
dbPasswordFallback: process.env.DB_PASSWORD_FALLBACK || "root",
|
||||
redisUrl: process.env.REDIS_URL || "redis://127.0.0.1:6379",
|
||||
jwtSecret: process.env.JWT_SECRET || "change-me",
|
||||
corsOrigin: process.env.CORS_ORIGIN || "http://localhost:5173",
|
||||
corsOrigin: process.env.CORS_ORIGIN || "*",
|
||||
adminUsername: process.env.ADMIN_USERNAME || "admin",
|
||||
adminEmail: process.env.ADMIN_EMAIL || "admin@example.com",
|
||||
adminPassword: process.env.ADMIN_PASSWORD || "ChangeMe123!",
|
||||
|
||||
+55
-11
@@ -1,14 +1,58 @@
|
||||
import mysql from "mysql2/promise";
|
||||
import { config } from "./config.js";
|
||||
|
||||
export const pool = mysql.createPool({
|
||||
host: config.dbHost,
|
||||
port: config.dbPort,
|
||||
user: config.dbUser,
|
||||
password: config.dbPassword,
|
||||
database: config.dbName,
|
||||
waitForConnections: true,
|
||||
connectionLimit: 10,
|
||||
namedPlaceholders: true,
|
||||
multipleStatements: true,
|
||||
});
|
||||
function createPool(password) {
|
||||
return mysql.createPool({
|
||||
host: config.dbHost,
|
||||
port: config.dbPort,
|
||||
user: config.dbUser,
|
||||
password,
|
||||
database: config.dbName,
|
||||
waitForConnections: true,
|
||||
connectionLimit: 10,
|
||||
namedPlaceholders: true,
|
||||
multipleStatements: true,
|
||||
charset: "utf8mb4",
|
||||
});
|
||||
}
|
||||
|
||||
const candidatePasswords = [...new Set([config.dbPassword, config.dbPasswordFallback].filter(Boolean))];
|
||||
let activePassword = candidatePasswords[0];
|
||||
let activePool = createPool(activePassword);
|
||||
|
||||
function isAccessDenied(error) {
|
||||
return error?.code === "ER_ACCESS_DENIED_ERROR";
|
||||
}
|
||||
|
||||
async function query(sql, values) {
|
||||
try {
|
||||
return await activePool.query(sql, values);
|
||||
} catch (error) {
|
||||
if (!isAccessDenied(error) || candidatePasswords.length < 2) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
for (const password of candidatePasswords) {
|
||||
if (password === activePassword) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const fallbackPool = createPool(password);
|
||||
try {
|
||||
const result = await fallbackPool.query(sql, values);
|
||||
activePool = fallbackPool;
|
||||
activePassword = password;
|
||||
return result;
|
||||
} catch (fallbackError) {
|
||||
await fallbackPool.end().catch(() => undefined);
|
||||
if (!isAccessDenied(fallbackError)) {
|
||||
throw fallbackError;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export const pool = { query };
|
||||
|
||||
+113
-26
@@ -5,10 +5,12 @@ import { authenticateToken, createToken, requireRoles } from "./auth.js";
|
||||
import { config } from "./config.js";
|
||||
import { pool } from "./db.js";
|
||||
import {
|
||||
createWideTrendTable,
|
||||
ensureIspMetadata,
|
||||
fetchLatestValues,
|
||||
fetchTrendSeries,
|
||||
getAvailableIsps,
|
||||
normalizeEngineeringUnit,
|
||||
normalizeRange,
|
||||
sanitizeIspName,
|
||||
sanitizePointIndex,
|
||||
@@ -29,9 +31,21 @@ import { redis } from "./redis.js";
|
||||
const app = express();
|
||||
const wrap = (handler) => (req, res, next) => Promise.resolve(handler(req, res, next)).catch(next);
|
||||
|
||||
const allowedOrigins = config.corsOrigin
|
||||
.split(",")
|
||||
.map((entry) => entry.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
app.use(
|
||||
cors({
|
||||
origin: config.corsOrigin,
|
||||
origin(origin, callback) {
|
||||
if (!origin || allowedOrigins.includes("*") || allowedOrigins.includes(origin)) {
|
||||
callback(null, true);
|
||||
return;
|
||||
}
|
||||
|
||||
callback(new Error("Origin not allowed."));
|
||||
},
|
||||
})
|
||||
);
|
||||
app.use(express.json({ limit: "50mb" }));
|
||||
@@ -111,6 +125,22 @@ async function resolveSelectionPoints(body, user) {
|
||||
return assertPoints(body.points || []);
|
||||
}
|
||||
|
||||
async function ensureUtf8Database() {
|
||||
await pool.query(`ALTER DATABASE \`${config.dbName}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`);
|
||||
|
||||
const [tables] = await pool.query(
|
||||
`SELECT TABLE_NAME AS tableName
|
||||
FROM information_schema.TABLES
|
||||
WHERE TABLE_SCHEMA = ?
|
||||
AND (TABLE_NAME = 'app_users' OR TABLE_NAME LIKE 'isp%' OR TABLE_NAME LIKE 'trend_%')`,
|
||||
[config.dbName]
|
||||
);
|
||||
|
||||
for (const table of tables) {
|
||||
await pool.query(`ALTER TABLE \`${table.tableName}\` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`);
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureUserSchema() {
|
||||
await pool.query(
|
||||
`
|
||||
@@ -209,20 +239,20 @@ app.post("/api/auth/login", wrap(async (req, res) => {
|
||||
const password = String(req.body.password || "");
|
||||
|
||||
const [rows] = await pool.query(
|
||||
"SELECT * FROM app_users WHERE username = ? AND active = 1 LIMIT 1",
|
||||
[username]
|
||||
"SELECT * FROM app_users WHERE (username = ? OR email = ?) AND active = 1 LIMIT 1",
|
||||
[username, username]
|
||||
);
|
||||
|
||||
const user = rows[0];
|
||||
|
||||
if (!user) {
|
||||
return res.status(401).json({ error: "Invalid credentials." });
|
||||
return res.status(401).json({ error: "Ungültige Zugangsdaten." });
|
||||
}
|
||||
|
||||
const isValid = await bcrypt.compare(password, user.password_hash);
|
||||
|
||||
if (!isValid) {
|
||||
return res.status(401).json({ error: "Invalid credentials." });
|
||||
return res.status(401).json({ error: "Ungültige Zugangsdaten." });
|
||||
}
|
||||
|
||||
const serializedUser = serializeUser(user);
|
||||
@@ -233,11 +263,37 @@ app.post("/api/auth/login", wrap(async (req, res) => {
|
||||
});
|
||||
}));
|
||||
|
||||
app.post("/api/auth/change-password", authenticateToken, wrap(async (req, res) => {
|
||||
const currentPassword = String(req.body.currentPassword || "");
|
||||
const nextPassword = String(req.body.nextPassword || "");
|
||||
|
||||
if (nextPassword.length < 8) {
|
||||
return res.status(400).json({ error: "Das neue Passwort muss mindestens 8 Zeichen lang sein." });
|
||||
}
|
||||
|
||||
const [rows] = await pool.query("SELECT * FROM app_users WHERE id = ? LIMIT 1", [req.user.sub]);
|
||||
const user = rows[0];
|
||||
|
||||
if (!user) {
|
||||
return res.status(404).json({ error: "Benutzer nicht gefunden." });
|
||||
}
|
||||
|
||||
const isValid = await bcrypt.compare(currentPassword, user.password_hash);
|
||||
|
||||
if (!isValid) {
|
||||
return res.status(400).json({ error: "Das aktuelle Passwort stimmt nicht." });
|
||||
}
|
||||
|
||||
const passwordHash = await bcrypt.hash(nextPassword, 10);
|
||||
await pool.query("UPDATE app_users SET password_hash = ? WHERE id = ?", [passwordHash, user.id]);
|
||||
res.json({ ok: true });
|
||||
}));
|
||||
|
||||
app.get("/api/auth/me", authenticateToken, wrap(async (req, res) => {
|
||||
const [rows] = await pool.query("SELECT * FROM app_users WHERE id = ? LIMIT 1", [req.user.sub]);
|
||||
|
||||
if (!rows[0]) {
|
||||
return res.status(404).json({ error: "User not found." });
|
||||
return res.status(404).json({ error: "Benutzer nicht gefunden." });
|
||||
}
|
||||
|
||||
return res.json({ user: serializeUser(rows[0]) });
|
||||
@@ -286,11 +342,12 @@ app.put(
|
||||
metadata.points[key] = {
|
||||
...metadata.points[key],
|
||||
alias: String(point.alias || metadata.points[key].alias).trim() || metadata.points[key].alias,
|
||||
unit: String(point.unit || metadata.points[key].unit).trim(),
|
||||
unit: normalizeEngineeringUnit(point.unit || metadata.points[key].unit),
|
||||
factor: Number.isFinite(Number(point.factor)) ? Number(point.factor) : metadata.points[key].factor,
|
||||
kind: point.kind === "digital" ? "digital" : "analog",
|
||||
min: Number.isFinite(Number(point.min)) ? Number(point.min) : metadata.points[key].min,
|
||||
max: Number.isFinite(Number(point.max)) ? Number(point.max) : metadata.points[key].max,
|
||||
color: typeof point.color === "string" ? point.color : metadata.points[key].color,
|
||||
};
|
||||
});
|
||||
}
|
||||
@@ -302,6 +359,42 @@ app.put(
|
||||
})
|
||||
);
|
||||
|
||||
app.post("/api/trend-tables", authenticateToken, requireRoles("admin"), wrap(async (req, res) => {
|
||||
const rawName = String(req.body.tableName || "").trim().toLowerCase();
|
||||
const displayName = String(req.body.displayName || rawName).trim();
|
||||
const safeName = await createWideTrendTable(pool, rawName.startsWith("trend_") ? rawName : `trend_${rawName}`);
|
||||
const metadata = await updateIspMetadata(redis, safeName, (current) => ({
|
||||
...current,
|
||||
displayName: displayName || current.displayName,
|
||||
}));
|
||||
res.status(201).json({ tableName: safeName, metadata });
|
||||
}));
|
||||
|
||||
app.post(
|
||||
"/api/admin/normalize-alias-metadata",
|
||||
authenticateToken,
|
||||
requireRoles("technician", "admin"),
|
||||
wrap(async (req, res) => {
|
||||
const targetIsp = req.body?.isp ? sanitizeIspName(req.body.isp) : null;
|
||||
|
||||
if (!targetIsp && req.user.role !== "admin") {
|
||||
return res.status(403).json({ error: "Nur Admins dürfen alle ISPs auf einmal bereinigen." });
|
||||
}
|
||||
|
||||
const targets = targetIsp
|
||||
? [{ tableName: targetIsp, pointCount: 200 }]
|
||||
: await getAvailableIsps(pool, config.dbName);
|
||||
|
||||
const normalized = [];
|
||||
for (const isp of targets) {
|
||||
const metadata = await ensureIspMetadata(redis, isp.tableName, isp.pointCount || 200);
|
||||
normalized.push({ isp: isp.tableName, metadata });
|
||||
}
|
||||
|
||||
res.json({ ok: true, normalizedCount: normalized.length, items: normalized });
|
||||
})
|
||||
);
|
||||
|
||||
app.post(
|
||||
"/api/admin/import-sql",
|
||||
authenticateToken,
|
||||
@@ -310,7 +403,7 @@ app.post(
|
||||
const sql = normalizeSqlDump(req.body.sql);
|
||||
|
||||
if (!sql) {
|
||||
throw new Error("SQL content is empty.");
|
||||
throw new Error("SQL-Inhalt ist leer.");
|
||||
}
|
||||
|
||||
await pool.query(sql);
|
||||
@@ -334,7 +427,7 @@ app.post("/api/users", authenticateToken, requireRoles("admin"), wrap(async (req
|
||||
const password = String(req.body.password || "");
|
||||
|
||||
if (!username || !name || password.length < 8) {
|
||||
return res.status(400).json({ error: "Username, name and password are required." });
|
||||
return res.status(400).json({ error: "Username, Name und Passwort sind erforderlich." });
|
||||
}
|
||||
|
||||
const passwordHash = await bcrypt.hash(password, 10);
|
||||
@@ -357,22 +450,16 @@ app.patch("/api/users/:id", authenticateToken, requireRoles("admin"), wrap(async
|
||||
const [rows] = await pool.query("SELECT * FROM app_users WHERE id = ? LIMIT 1", [userId]);
|
||||
|
||||
if (!rows[0]) {
|
||||
return res.status(404).json({ error: "User not found." });
|
||||
return res.status(404).json({ error: "Benutzer nicht gefunden." });
|
||||
}
|
||||
|
||||
const current = rows[0];
|
||||
const username = typeof payload.username === "string"
|
||||
? payload.username.trim().toLowerCase() || current.username
|
||||
: current.username;
|
||||
const username = typeof payload.username === "string" ? payload.username.trim().toLowerCase() || current.username : current.username;
|
||||
const name = typeof payload.name === "string" ? payload.name.trim() || current.name : current.name;
|
||||
const email = typeof payload.email === "string"
|
||||
? payload.email.trim().toLowerCase() || null
|
||||
: current.email;
|
||||
const email = typeof payload.email === "string" ? payload.email.trim().toLowerCase() || null : current.email;
|
||||
const role = ["viewer", "technician", "admin"].includes(payload.role) ? payload.role : current.role;
|
||||
const active = typeof payload.active === "boolean" ? Number(payload.active) : current.active;
|
||||
const passwordHash = payload.password
|
||||
? await bcrypt.hash(String(payload.password), 10)
|
||||
: current.password_hash;
|
||||
const passwordHash = payload.password ? await bcrypt.hash(String(payload.password), 10) : current.password_hash;
|
||||
|
||||
await pool.query(
|
||||
`
|
||||
@@ -410,11 +497,11 @@ app.put("/api/selections/:selectionId", authenticateToken, wrap(async (req, res)
|
||||
const existing = await getSelection(redis, req.params.selectionId);
|
||||
|
||||
if (!existing) {
|
||||
return res.status(404).json({ error: "Selection not found." });
|
||||
return res.status(404).json({ error: "Auswahl nicht gefunden." });
|
||||
}
|
||||
|
||||
if (existing.ownerId !== req.user.sub && req.user.role !== "admin") {
|
||||
return res.status(403).json({ error: "You can only edit your own selections." });
|
||||
return res.status(403).json({ error: "Du kannst nur eigene Auswahlen bearbeiten." });
|
||||
}
|
||||
|
||||
const points = assertPoints(req.body.points || existing.points || []);
|
||||
@@ -437,11 +524,11 @@ app.delete("/api/selections/:selectionId", authenticateToken, wrap(async (req, r
|
||||
const existing = await getSelection(redis, req.params.selectionId);
|
||||
|
||||
if (!existing) {
|
||||
return res.status(404).json({ error: "Selection not found." });
|
||||
return res.status(404).json({ error: "Auswahl nicht gefunden." });
|
||||
}
|
||||
|
||||
if (existing.ownerId !== req.user.sub && req.user.role !== "admin") {
|
||||
return res.status(403).json({ error: "You can only delete your own selections." });
|
||||
return res.status(403).json({ error: "Du kannst nur eigene Auswahlen löschen." });
|
||||
}
|
||||
|
||||
await deleteSelection(redis, existing.id);
|
||||
@@ -475,9 +562,7 @@ app.post("/api/dashboard/data", authenticateToken, wrap(async (req, res) => {
|
||||
const results = [];
|
||||
|
||||
for (const widget of widgets) {
|
||||
const points = widget.selectionId
|
||||
? await resolveSelectionPoints({ selectionId: widget.selectionId }, req.user)
|
||||
: assertPoints(widget.points || []);
|
||||
const points = widget.selectionId ? await resolveSelectionPoints({ selectionId: widget.selectionId }, req.user) : assertPoints(widget.points || []);
|
||||
|
||||
if (widget.type === "chart") {
|
||||
const trendData = await fetchTrendSeries(pool, redis, points, normalizeRange(widget.range));
|
||||
@@ -506,9 +591,11 @@ app.use((error, _req, res, _next) => {
|
||||
res.status(400).json({ error: error.message || "Unexpected error." });
|
||||
});
|
||||
|
||||
await ensureUtf8Database();
|
||||
await ensureUserSchema();
|
||||
await ensureAdminUser();
|
||||
|
||||
app.listen(config.port, () => {
|
||||
console.log(`SE Local Trenddata API listening on port ${config.port}`);
|
||||
});
|
||||
|
||||
|
||||
+185
-32
@@ -7,8 +7,8 @@ export function buildPointKey(isp, pointIndex) {
|
||||
export function sanitizeIspName(value) {
|
||||
const normalized = String(value || "").toLowerCase();
|
||||
|
||||
if (!/^isp\d+$/.test(normalized)) {
|
||||
throw new Error("Invalid ISP table name.");
|
||||
if (!/^(isp[a-z0-9_]*|trend_[a-z0-9_]+)$/.test(normalized)) {
|
||||
throw new Error("Invalid trend table name.");
|
||||
}
|
||||
|
||||
return normalized;
|
||||
@@ -45,6 +45,113 @@ export function parseTrendValue(rawValue, factor = 1) {
|
||||
};
|
||||
}
|
||||
|
||||
function buildValueColumns() {
|
||||
const columns = [];
|
||||
|
||||
for (let index = 1; index <= 200; index += 1) {
|
||||
columns.push('`Wert' + index + '` TEXT NULL');
|
||||
}
|
||||
|
||||
return columns.join(", ");
|
||||
}
|
||||
|
||||
function hslToHex(hue, saturation, lightness) {
|
||||
const s = saturation / 100;
|
||||
const l = lightness / 100;
|
||||
const c = (1 - Math.abs(2 * l - 1)) * s;
|
||||
const x = c * (1 - Math.abs((hue / 60) % 2 - 1));
|
||||
const m = l - c / 2;
|
||||
|
||||
let red = 0;
|
||||
let green = 0;
|
||||
let blue = 0;
|
||||
|
||||
if (hue < 60) {
|
||||
red = c;
|
||||
green = x;
|
||||
} else if (hue < 120) {
|
||||
red = x;
|
||||
green = c;
|
||||
} else if (hue < 180) {
|
||||
green = c;
|
||||
blue = x;
|
||||
} else if (hue < 240) {
|
||||
green = x;
|
||||
blue = c;
|
||||
} else if (hue < 300) {
|
||||
red = x;
|
||||
blue = c;
|
||||
} else {
|
||||
red = c;
|
||||
blue = x;
|
||||
}
|
||||
|
||||
const toHex = (value) => Math.round((value + m) * 255).toString(16).padStart(2, "0");
|
||||
return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
|
||||
}
|
||||
|
||||
function parseHslColor(value) {
|
||||
const match = String(value || "").match(/^hsl\((\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\)$/i);
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
hue: Number(match[1]),
|
||||
saturation: Number(match[2]),
|
||||
lightness: Number(match[3]),
|
||||
};
|
||||
}
|
||||
|
||||
function createRandomPointColor(seed) {
|
||||
const hue = Math.round((seed * 47 + 17 + Math.random() * 28) % 360);
|
||||
const saturation = 72 + (seed % 4) * 4;
|
||||
const lightness = 45 + (seed % 3) * 4;
|
||||
return hslToHex(hue, saturation, lightness);
|
||||
}
|
||||
|
||||
export function normalizeEngineeringUnit(value) {
|
||||
const raw = String(value ?? "").trim();
|
||||
if (!raw) {
|
||||
return "°C";
|
||||
}
|
||||
|
||||
const normalized = raw
|
||||
.replace(/°/g, "°")
|
||||
.replace(/^\?C$/i, "°C")
|
||||
.replace(/^°\s*C$/i, "°C");
|
||||
|
||||
return normalized || "°C";
|
||||
}
|
||||
|
||||
function createDefaultPoint(index) {
|
||||
return {
|
||||
alias: `Wert${index}`,
|
||||
unit: "°C",
|
||||
factor: 1,
|
||||
kind: "analog",
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: createRandomPointColor(index),
|
||||
};
|
||||
}
|
||||
|
||||
export async function createWideTrendTable(pool, tableName) {
|
||||
const safeTable = sanitizeIspName(tableName);
|
||||
const sql = `
|
||||
CREATE TABLE IF NOT EXISTS \`${safeTable}\` (
|
||||
\`id\` INT(11) NOT NULL AUTO_INCREMENT,
|
||||
\`datum\` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
\`userlevel\` INT(1) NOT NULL,
|
||||
${buildValueColumns()},
|
||||
PRIMARY KEY (\`id\`)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
`;
|
||||
|
||||
await pool.query(sql);
|
||||
return safeTable;
|
||||
}
|
||||
|
||||
export async function getAvailableIsps(pool, dbName) {
|
||||
const [tables] = await pool.query(
|
||||
`
|
||||
@@ -59,43 +166,42 @@ export async function getAvailableIsps(pool, dbName) {
|
||||
) AS pointCount
|
||||
FROM information_schema.TABLES t
|
||||
WHERE t.TABLE_SCHEMA = ?
|
||||
AND t.TABLE_NAME LIKE 'isp%'
|
||||
AND (t.TABLE_NAME LIKE 'isp%' OR t.TABLE_NAME LIKE 'trend_%')
|
||||
ORDER BY t.TABLE_NAME
|
||||
`,
|
||||
[dbName]
|
||||
);
|
||||
|
||||
const latestMap = new Map();
|
||||
const stats = new Map();
|
||||
|
||||
await Promise.all(
|
||||
tables.map(async (table) => {
|
||||
const safeTable = sanitizeIspName(table.tableName);
|
||||
const [rows] = await pool.query(
|
||||
`SELECT MAX(datum) AS latestTimestamp FROM \`${safeTable}\``
|
||||
`SELECT COUNT(*) AS rowCount, MAX(datum) AS latestTimestamp FROM \`${safeTable}\``
|
||||
);
|
||||
latestMap.set(safeTable, rows[0]?.latestTimestamp || null);
|
||||
stats.set(safeTable, rows[0] || { rowCount: 0, latestTimestamp: null });
|
||||
})
|
||||
);
|
||||
|
||||
return tables.map((table) => ({
|
||||
tableName: sanitizeIspName(table.tableName),
|
||||
pointCount: Number(table.pointCount || 0),
|
||||
latestTimestamp: latestMap.get(sanitizeIspName(table.tableName)) || null,
|
||||
}));
|
||||
return tables.map((table) => {
|
||||
const safeTable = sanitizeIspName(table.tableName);
|
||||
const info = stats.get(safeTable) || {};
|
||||
|
||||
return {
|
||||
tableName: safeTable,
|
||||
pointCount: Number(table.pointCount || 0),
|
||||
rowCount: Number(info.rowCount || 0),
|
||||
latestTimestamp: info.latestTimestamp || null,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function createDefaultMetadata(isp, pointCount = 200) {
|
||||
const points = {};
|
||||
|
||||
for (let index = 1; index <= pointCount; index += 1) {
|
||||
points[String(index)] = {
|
||||
alias: `Wert${index}`,
|
||||
unit: "",
|
||||
factor: 1,
|
||||
kind: "analog",
|
||||
min: 0,
|
||||
max: 100,
|
||||
};
|
||||
points[String(index)] = createDefaultPoint(index);
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -113,11 +219,62 @@ export async function ensureIspMetadata(redis, isp, pointCount = 200) {
|
||||
|
||||
if (existing) {
|
||||
const parsed = JSON.parse(existing);
|
||||
let changed = false;
|
||||
|
||||
if (!parsed.points) {
|
||||
parsed.points = {};
|
||||
changed = true;
|
||||
}
|
||||
|
||||
for (let index = 1; index <= pointCount; index += 1) {
|
||||
if (!parsed.points?.[String(index)]) {
|
||||
parsed.points[String(index)] = createDefaultMetadata(safeIsp, pointCount).points[String(index)];
|
||||
const pointKey = String(index);
|
||||
const defaultPoint = createDefaultPoint(index);
|
||||
|
||||
if (!parsed.points[pointKey]) {
|
||||
parsed.points[pointKey] = defaultPoint;
|
||||
changed = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
const point = parsed.points[pointKey];
|
||||
if (!point.alias) {
|
||||
point.alias = defaultPoint.alias;
|
||||
changed = true;
|
||||
}
|
||||
const normalizedUnit = normalizeEngineeringUnit(point.unit);
|
||||
if (normalizedUnit !== point.unit) {
|
||||
point.unit = normalizedUnit;
|
||||
changed = true;
|
||||
}
|
||||
if (!point.kind) {
|
||||
point.kind = defaultPoint.kind;
|
||||
changed = true;
|
||||
}
|
||||
if (!Number.isFinite(Number(point.factor))) {
|
||||
point.factor = defaultPoint.factor;
|
||||
changed = true;
|
||||
}
|
||||
if (!Number.isFinite(Number(point.min))) {
|
||||
point.min = defaultPoint.min;
|
||||
changed = true;
|
||||
}
|
||||
if (!Number.isFinite(Number(point.max))) {
|
||||
point.max = defaultPoint.max;
|
||||
changed = true;
|
||||
}
|
||||
const parsedHslColor = parseHslColor(point.color);
|
||||
if (parsedHslColor) {
|
||||
point.color = hslToHex(parsedHslColor.hue, parsedHslColor.saturation, parsedHslColor.lightness);
|
||||
changed = true;
|
||||
}
|
||||
if (!point.color) {
|
||||
point.color = defaultPoint.color;
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (changed) {
|
||||
await redis.set(key, JSON.stringify(parsed));
|
||||
}
|
||||
|
||||
return parsed;
|
||||
@@ -162,11 +319,12 @@ export async function getPointDescriptors(redis, points) {
|
||||
key: buildPointKey(isp, pointIndex),
|
||||
displayName: metadata.displayName,
|
||||
alias: pointMeta.alias,
|
||||
unit: pointMeta.unit,
|
||||
unit: normalizeEngineeringUnit(pointMeta.unit),
|
||||
factor: pointMeta.factor,
|
||||
kind: pointMeta.kind,
|
||||
min: pointMeta.min,
|
||||
max: pointMeta.max,
|
||||
color: pointMeta.color || "",
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -218,9 +376,7 @@ export async function fetchTrendSeries(pool, redis, points, range) {
|
||||
|
||||
return {
|
||||
series: descriptors,
|
||||
rows: [...mergedRows.values()].sort((left, right) =>
|
||||
left.timestamp.localeCompare(right.timestamp)
|
||||
),
|
||||
rows: [...mergedRows.values()].sort((left, right) => left.timestamp.localeCompare(right.timestamp)),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -242,10 +398,7 @@ export async function fetchLatestValues(pool, redis, points) {
|
||||
.map((descriptor) => `\`Wert${descriptor.pointIndex}\``)
|
||||
.join(", ");
|
||||
|
||||
const [rows] = await pool.query(
|
||||
`SELECT datum, ${columns} FROM \`${isp}\` ORDER BY datum DESC LIMIT 1`
|
||||
);
|
||||
|
||||
const [rows] = await pool.query(`SELECT datum, ${columns} FROM \`${isp}\` ORDER BY datum DESC LIMIT 1`);
|
||||
const row = rows[0];
|
||||
|
||||
pointDescriptors.forEach((descriptor) => {
|
||||
@@ -267,9 +420,7 @@ export function normalizeRange(input = {}) {
|
||||
const maxRows = Number(input.maxRows || 4000);
|
||||
const now = new Date();
|
||||
const to = input.to ? new Date(input.to) : now;
|
||||
const from = input.from
|
||||
? new Date(input.from)
|
||||
: new Date(now.getTime() - presetDays * 24 * 60 * 60 * 1000);
|
||||
const from = input.from ? new Date(input.from) : new Date(now.getTime() - presetDays * 24 * 60 * 60 * 1000);
|
||||
|
||||
return {
|
||||
from,
|
||||
@@ -277,3 +428,5 @@ export function normalizeRange(input = {}) {
|
||||
maxRows: Number.isFinite(maxRows) ? Math.max(100, Math.min(maxRows, 10000)) : 4000,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
+12
-3
@@ -1,4 +1,4 @@
|
||||
const SELECTION_SET_KEY = "selection:ids";
|
||||
const SELECTION_SET_KEY = "selection:ids";
|
||||
const SELECTION_SEQ_KEY = "selection:seq";
|
||||
|
||||
function safeParse(jsonValue) {
|
||||
@@ -54,12 +54,21 @@ export async function saveDashboard(redis, userId, dashboard) {
|
||||
}
|
||||
|
||||
export async function getPreferences(redis, userId) {
|
||||
return safeParse(await redis.get(`preferences:${userId}`)) || { theme: "system" };
|
||||
return safeParse(await redis.get(`preferences:${userId}`)) || {
|
||||
theme: "system",
|
||||
csvDelimiter: ";",
|
||||
sidebarPinned: true,
|
||||
};
|
||||
}
|
||||
|
||||
export async function savePreferences(redis, userId, preferences) {
|
||||
const current = await getPreferences(redis, userId);
|
||||
const payload = {
|
||||
theme: preferences.theme || "system",
|
||||
...current,
|
||||
...preferences,
|
||||
theme: preferences.theme || current.theme || "system",
|
||||
csvDelimiter: preferences.csvDelimiter || current.csvDelimiter || ";",
|
||||
sidebarPinned: typeof preferences.sidebarPinned === "boolean" ? preferences.sidebarPinned : current.sidebarPinned,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
await redis.set(`preferences:${userId}`, JSON.stringify(payload));
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
COPY package.json ./
|
||||
COPY src ./src
|
||||
RUN mkdir -p /app/data
|
||||
EXPOSE 18110
|
||||
CMD ["npm", "run", "start"]
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "seltd-collector",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "node src/index.js"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,436 @@
|
||||
import { createServer } from "node:http";
|
||||
import { mkdirSync, readFileSync, writeFileSync, existsSync } from "node:fs";
|
||||
import { dirname, join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { Buffer } from "node:buffer";
|
||||
import net from "node:net";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const dataDir = join(__dirname, "..", "data");
|
||||
const storeFile = join(dataDir, "sources.json");
|
||||
const port = Number(process.env.PORT || 18110);
|
||||
|
||||
mkdirSync(dataDir, { recursive: true });
|
||||
|
||||
function baseStore() {
|
||||
return {
|
||||
sources: [],
|
||||
datapoints: [],
|
||||
scans: { opcua: [], bacnet: [] },
|
||||
updatedAt: null,
|
||||
};
|
||||
}
|
||||
|
||||
function readStore() {
|
||||
if (!existsSync(storeFile)) {
|
||||
return baseStore();
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(readFileSync(storeFile, "utf8"));
|
||||
return {
|
||||
...baseStore(),
|
||||
...parsed,
|
||||
scans: { ...baseStore().scans, ...(parsed.scans || {}) },
|
||||
sources: Array.isArray(parsed.sources) ? parsed.sources : [],
|
||||
datapoints: Array.isArray(parsed.datapoints) ? parsed.datapoints : [],
|
||||
};
|
||||
} catch {
|
||||
return baseStore();
|
||||
}
|
||||
}
|
||||
|
||||
function writeStore(payload) {
|
||||
writeFileSync(storeFile, JSON.stringify(payload, null, 2), "utf8");
|
||||
}
|
||||
|
||||
function touchStore(mutator) {
|
||||
const store = readStore();
|
||||
const next = mutator(structuredClone(store)) || store;
|
||||
next.updatedAt = new Date().toISOString();
|
||||
writeStore(next);
|
||||
return next;
|
||||
}
|
||||
|
||||
function replyJson(res, statusCode, body) {
|
||||
res.writeHead(statusCode, {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS",
|
||||
"Access-Control-Allow-Headers": "Content-Type, Authorization",
|
||||
});
|
||||
res.end(JSON.stringify(body));
|
||||
}
|
||||
|
||||
function readBody(req) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const chunks = [];
|
||||
req.on("data", (chunk) => chunks.push(chunk));
|
||||
req.on("end", () => {
|
||||
try {
|
||||
const text = Buffer.concat(chunks).toString("utf8");
|
||||
resolve(text ? JSON.parse(text) : {});
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
req.on("error", reject);
|
||||
});
|
||||
}
|
||||
|
||||
function slugify(value) {
|
||||
return String(value || "")
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "_")
|
||||
.replace(/^_+|_+$/g, "") || "quelle";
|
||||
}
|
||||
|
||||
function normalizeProtocol(value) {
|
||||
const protocol = String(value || "").toLowerCase();
|
||||
if (["modbus-tcp", "opc-ua", "bacnet-ip", "knx-ip"].includes(protocol)) {
|
||||
return protocol;
|
||||
}
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
function normalizeWriteMode(value) {
|
||||
return String(value || "").toLowerCase() === "cov" ? "cov" : "interval";
|
||||
}
|
||||
|
||||
function normalizePollInterval(value) {
|
||||
const numeric = Number(value);
|
||||
return Number.isFinite(numeric) && numeric > 0 ? Math.round(numeric) : 60;
|
||||
}
|
||||
|
||||
function ensureSource(store, body) {
|
||||
const now = new Date().toISOString();
|
||||
const source = {
|
||||
id: body.id || `src-${Date.now()}`,
|
||||
protocol: normalizeProtocol(body.protocol),
|
||||
name: body.name || "Neue Quelle",
|
||||
host: body.host || "",
|
||||
port: body.port || "",
|
||||
deviceId: body.deviceId || "",
|
||||
displayName: body.displayName || body.name || "Neue Quelle",
|
||||
tableName: body.tableName || `trend_${slugify(body.name || body.protocol || "daten")}`,
|
||||
writeMode: normalizeWriteMode(body.writeMode),
|
||||
pollIntervalSeconds: normalizePollInterval(body.pollIntervalSeconds),
|
||||
options: {
|
||||
...(body.options || {}),
|
||||
writeMode: normalizeWriteMode(body.writeMode),
|
||||
pollIntervalSeconds: normalizePollInterval(body.pollIntervalSeconds),
|
||||
},
|
||||
createdAt: body.createdAt || now,
|
||||
updatedAt: now,
|
||||
};
|
||||
|
||||
const existingIndex = store.sources.findIndex((item) => item.id === source.id);
|
||||
if (existingIndex >= 0) {
|
||||
store.sources[existingIndex] = { ...store.sources[existingIndex], ...source };
|
||||
} else {
|
||||
store.sources.push(source);
|
||||
}
|
||||
return source;
|
||||
}
|
||||
|
||||
function splitDelimited(text, delimiter) {
|
||||
return text
|
||||
.split(/\r?\n/)
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean)
|
||||
.map((line) => line.split(delimiter).map((part) => part.trim().replace(/^"|"$/g, "")));
|
||||
}
|
||||
|
||||
function parseModbusCsv(payload) {
|
||||
const delimiter = payload.delimiter || ";";
|
||||
const rows = splitDelimited(payload.csv || "", delimiter);
|
||||
if (rows.length < 2) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const header = rows[0].map((value) => value.toLowerCase());
|
||||
return rows.slice(1).map((row, index) => {
|
||||
const get = (name, fallback = "") => {
|
||||
const columnIndex = header.indexOf(name);
|
||||
return columnIndex >= 0 ? row[columnIndex] || fallback : fallback;
|
||||
};
|
||||
|
||||
return {
|
||||
id: `dp-modbus-${Date.now()}-${index}`,
|
||||
sourceId: payload.sourceId || "",
|
||||
protocol: "modbus-tcp",
|
||||
address: get("address", get("register", String(index + 1))),
|
||||
pointIndex: Number(get("pointindex", index + 1)) || index + 1,
|
||||
name: get("name", `Register ${index + 1}`),
|
||||
alias: get("alias", get("name", `Register ${index + 1}`)),
|
||||
unit: get("unit"),
|
||||
dataType: get("datatype", "holding-register"),
|
||||
scale: Number(get("scale", 1)) || 1,
|
||||
host: payload.host || "",
|
||||
tableName: payload.tableName || "",
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function decodeXmlEntities(value) {
|
||||
return String(value || "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll(""", '"')
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function parseKnxXml(payload) {
|
||||
const xml = String(payload.xml || "");
|
||||
const datapoints = [];
|
||||
const pattern = /<GroupAddress\b([^>]*)\/?>(?:<\/GroupAddress>)?/gi;
|
||||
let match;
|
||||
let index = 0;
|
||||
|
||||
while ((match = pattern.exec(xml))) {
|
||||
const attrs = match[1];
|
||||
const getAttr = (name) => {
|
||||
const attrMatch = attrs.match(new RegExp(`${name}="([^"]*)"`, "i"));
|
||||
return attrMatch ? decodeXmlEntities(attrMatch[1]) : "";
|
||||
};
|
||||
|
||||
const address = getAttr("Address") || getAttr("address");
|
||||
const name = getAttr("Name") || getAttr("name") || `KNX ${index + 1}`;
|
||||
const dpt = getAttr("DatapointType") || getAttr("DPTs") || getAttr("DPT") || "";
|
||||
|
||||
if (address) {
|
||||
datapoints.push({
|
||||
id: `dp-knx-${Date.now()}-${index}`,
|
||||
sourceId: payload.sourceId || "",
|
||||
protocol: "knx-ip",
|
||||
address,
|
||||
pointIndex: index + 1,
|
||||
name,
|
||||
alias: name,
|
||||
unit: "",
|
||||
dataType: dpt || "group-address",
|
||||
host: payload.host || "",
|
||||
tableName: payload.tableName || "",
|
||||
createdAt: new Date().toISOString(),
|
||||
});
|
||||
index += 1;
|
||||
}
|
||||
}
|
||||
|
||||
return datapoints;
|
||||
}
|
||||
|
||||
function tryTcpConnect(host, portNumber, timeout = 1200) {
|
||||
return new Promise((resolve) => {
|
||||
if (!host || !portNumber) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const socket = new net.Socket();
|
||||
let settled = false;
|
||||
const finish = (value) => {
|
||||
if (!settled) {
|
||||
settled = true;
|
||||
socket.destroy();
|
||||
resolve(value);
|
||||
}
|
||||
};
|
||||
|
||||
socket.setTimeout(timeout);
|
||||
socket.once("connect", () => finish(true));
|
||||
socket.once("timeout", () => finish(false));
|
||||
socket.once("error", () => finish(false));
|
||||
socket.connect(portNumber, host);
|
||||
});
|
||||
}
|
||||
|
||||
const server = createServer(async (req, res) => {
|
||||
const url = new URL(req.url || "/", `http://${req.headers.host || "localhost"}`);
|
||||
|
||||
if (req.method === "OPTIONS") {
|
||||
replyJson(res, 204, {});
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "GET" && url.pathname === "/health") {
|
||||
replyJson(res, 200, { ok: true, service: "collector", timestamp: new Date().toISOString() });
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "GET" && url.pathname === "/capabilities") {
|
||||
replyJson(res, 200, {
|
||||
protocols: ["modbus-tcp", "opc-ua", "bacnet-ip", "knx-ip"],
|
||||
imports: ["modbus-csv", "knx-xml"],
|
||||
scans: ["opc-ua", "bacnet-ip"],
|
||||
note: "Importe und erste Scan-Stubs sind aktiv. Poll-Intervall und Schreibmodus werden bereits pro Quelle gespeichert; die echte Live-Kommunikation folgt als nächste Ausbaustufe.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "GET" && url.pathname === "/sources") {
|
||||
replyJson(res, 200, readStore());
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "GET" && url.pathname === "/datapoints") {
|
||||
const store = readStore();
|
||||
const sourceId = url.searchParams.get("sourceId");
|
||||
const items = sourceId ? store.datapoints.filter((item) => item.sourceId === sourceId) : store.datapoints;
|
||||
replyJson(res, 200, { datapoints: items, total: items.length, updatedAt: store.updatedAt });
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "POST" && url.pathname === "/sources") {
|
||||
try {
|
||||
const body = await readBody(req);
|
||||
const next = touchStore((store) => {
|
||||
const source = ensureSource(store, body);
|
||||
return { ...store, lastSource: source.id };
|
||||
});
|
||||
replyJson(res, 201, next.sources.at(-1));
|
||||
} catch {
|
||||
replyJson(res, 400, { error: "Ungültige JSON-Daten." });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "PUT" && url.pathname.startsWith("/sources/")) {
|
||||
try {
|
||||
const sourceId = url.pathname.split("/").at(-1);
|
||||
const body = await readBody(req);
|
||||
const next = touchStore((store) => {
|
||||
const existing = store.sources.find((item) => item.id === sourceId);
|
||||
if (!existing) {
|
||||
throw new Error("not-found");
|
||||
}
|
||||
ensureSource(store, { ...existing, ...body, id: sourceId });
|
||||
return store;
|
||||
});
|
||||
replyJson(res, 200, next.sources.find((item) => item.id === sourceId));
|
||||
} catch (error) {
|
||||
replyJson(res, error.message === "not-found" ? 404 : 400, {
|
||||
error: error.message === "not-found" ? "Quelle nicht gefunden." : "Ungültige JSON-Daten.",
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "DELETE" && url.pathname.startsWith("/sources/")) {
|
||||
const sourceId = url.pathname.split("/").at(-1);
|
||||
const next = touchStore((store) => ({
|
||||
...store,
|
||||
sources: store.sources.filter((item) => item.id !== sourceId),
|
||||
datapoints: store.datapoints.filter((item) => item.sourceId !== sourceId),
|
||||
}));
|
||||
replyJson(res, 200, { ok: true, sources: next.sources.length, datapoints: next.datapoints.length });
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "POST" && url.pathname === "/imports/modbus-csv") {
|
||||
try {
|
||||
const body = await readBody(req);
|
||||
const imported = parseModbusCsv(body);
|
||||
const next = touchStore((store) => {
|
||||
if (body.sourceId) {
|
||||
store.datapoints = store.datapoints.filter((item) => !(item.sourceId === body.sourceId && item.protocol === "modbus-tcp"));
|
||||
}
|
||||
store.datapoints.push(...imported);
|
||||
return store;
|
||||
});
|
||||
replyJson(res, 200, { imported: imported.length, datapoints: imported, updatedAt: next.updatedAt });
|
||||
} catch {
|
||||
replyJson(res, 400, { error: "CSV-Import fehlgeschlagen." });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "POST" && url.pathname === "/imports/knx-xml") {
|
||||
try {
|
||||
const body = await readBody(req);
|
||||
const imported = parseKnxXml(body);
|
||||
const next = touchStore((store) => {
|
||||
if (body.sourceId) {
|
||||
store.datapoints = store.datapoints.filter((item) => !(item.sourceId === body.sourceId && item.protocol === "knx-ip"));
|
||||
}
|
||||
store.datapoints.push(...imported);
|
||||
return store;
|
||||
});
|
||||
replyJson(res, 200, { imported: imported.length, datapoints: imported, updatedAt: next.updatedAt });
|
||||
} catch {
|
||||
replyJson(res, 400, { error: "KNX-XML-Import fehlgeschlagen." });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "POST" && url.pathname === "/scan/opcua") {
|
||||
try {
|
||||
const body = await readBody(req);
|
||||
const host = body.host || "";
|
||||
const portNumber = Number(body.port || 4840);
|
||||
const reachable = await tryTcpConnect(host, portNumber);
|
||||
const result = {
|
||||
host,
|
||||
port: portNumber,
|
||||
reachable,
|
||||
endpoints: reachable
|
||||
? [
|
||||
{ url: `opc.tcp://${host}:${portNumber}`, securityMode: "None", securityPolicy: "None" },
|
||||
]
|
||||
: [],
|
||||
sampleNodes: reachable
|
||||
? [
|
||||
{ nodeId: "ns=0;i=2258", browseName: "Server", displayName: "Server" },
|
||||
{ nodeId: "ns=0;i=2267", browseName: "ServerStatus", displayName: "ServerStatus" },
|
||||
]
|
||||
: [],
|
||||
scannedAt: new Date().toISOString(),
|
||||
};
|
||||
touchStore((store) => {
|
||||
store.scans.opcua.unshift(result);
|
||||
store.scans.opcua = store.scans.opcua.slice(0, 20);
|
||||
return store;
|
||||
});
|
||||
replyJson(res, 200, result);
|
||||
} catch {
|
||||
replyJson(res, 400, { error: "OPC-UA-Scan fehlgeschlagen." });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method === "POST" && url.pathname === "/scan/bacnet") {
|
||||
try {
|
||||
const body = await readBody(req);
|
||||
const hosts = Array.isArray(body.hosts) ? body.hosts : [body.host].filter(Boolean);
|
||||
const results = [];
|
||||
for (const host of hosts) {
|
||||
const reachable = await tryTcpConnect(host, Number(body.port || 47808), 650);
|
||||
results.push({
|
||||
host,
|
||||
port: Number(body.port || 47808),
|
||||
reachable,
|
||||
deviceId: body.deviceId || "",
|
||||
name: reachable ? `BACnet Gerät ${host}` : "Nicht erreichbar",
|
||||
});
|
||||
}
|
||||
const payload = { devices: results, scannedAt: new Date().toISOString() };
|
||||
touchStore((store) => {
|
||||
store.scans.bacnet.unshift(payload);
|
||||
store.scans.bacnet = store.scans.bacnet.slice(0, 20);
|
||||
return store;
|
||||
});
|
||||
replyJson(res, 200, payload);
|
||||
} catch {
|
||||
replyJson(res, 400, { error: "BACnet-Scan fehlgeschlagen." });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
replyJson(res, 404, { error: "Nicht gefunden." });
|
||||
});
|
||||
|
||||
server.listen(port, () => {
|
||||
console.log(`SE Local Trenddata collector listening on port ${port}`);
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
services:
|
||||
mariadb:
|
||||
volumes:
|
||||
- /media/sd/seltd/mariadb:/var/lib/mysql
|
||||
- ./docker/mariadb/init:/docker-entrypoint-initdb.d:ro
|
||||
|
||||
redis:
|
||||
volumes:
|
||||
- /media/sd/seltd/redis:/data
|
||||
- ./docker/redis/redis.conf:/usr/local/etc/redis/redis.conf:ro
|
||||
|
||||
collector:
|
||||
volumes:
|
||||
- /media/sd/seltd/collector:/app/data
|
||||
|
||||
dockhand:
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
- /media/sd/seltd/dockhand:/app/data
|
||||
+27
-4
@@ -4,7 +4,7 @@
|
||||
container_name: seltd-mariadb
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
MARIADB_ROOT_PASSWORD: root
|
||||
MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD:-SE3112}
|
||||
MARIADB_DATABASE: wago
|
||||
MARIADB_USER: app
|
||||
MARIADB_PASSWORD: app
|
||||
@@ -46,14 +46,15 @@
|
||||
DB_PORT: 3306
|
||||
DB_NAME: wago
|
||||
DB_USER: root
|
||||
DB_PASSWORD: root
|
||||
DB_PASSWORD: ${MARIADB_ROOT_PASSWORD:-SE3112}
|
||||
DB_PASSWORD_FALLBACK: ${DB_PASSWORD_FALLBACK:-root}
|
||||
REDIS_URL: redis://redis:6379
|
||||
JWT_SECRET: ${JWT_SECRET:-change-me}
|
||||
ADMIN_USERNAME: ${ADMIN_USERNAME:-admin}
|
||||
ADMIN_EMAIL: ${ADMIN_EMAIL:-admin@example.com}
|
||||
ADMIN_PASSWORD: ${ADMIN_PASSWORD:-ChangeMe123!}
|
||||
ADMIN_NAME: ${ADMIN_NAME:-System Admin}
|
||||
CORS_ORIGIN: http://localhost:5173
|
||||
CORS_ORIGIN: ${CORS_ORIGIN:-*}
|
||||
ports:
|
||||
- "18080:8080"
|
||||
depends_on:
|
||||
@@ -68,12 +69,34 @@
|
||||
container_name: seltd-web
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
VITE_API_URL: ${VITE_API_URL:-http://localhost:18080/api}
|
||||
VITE_API_PORT: ${VITE_API_PORT:-18080}
|
||||
ports:
|
||||
- "5173:5173"
|
||||
depends_on:
|
||||
- api
|
||||
|
||||
collector:
|
||||
build:
|
||||
context: ./collector
|
||||
container_name: seltd-collector
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "18110:18110"
|
||||
volumes:
|
||||
- collector_data:/app/data
|
||||
|
||||
dockhand:
|
||||
image: fnsys/dockhand:latest
|
||||
container_name: dockhand
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3000:3000"
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
- dockhand_data:/app/data
|
||||
|
||||
volumes:
|
||||
mariadb_data:
|
||||
redis_data:
|
||||
collector_data:
|
||||
dockhand_data:
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
CREATE DATABASE IF NOT EXISTS `wago` CHARACTER SET latin1 COLLATE latin1_swedish_ci;
|
||||
CREATE DATABASE IF NOT EXISTS `wago` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
|
||||
USE `wago`;
|
||||
|
||||
DELIMITER //
|
||||
@@ -25,7 +25,7 @@ BEGIN
|
||||
'`userlevel` INT(1) NOT NULL',
|
||||
value_columns,
|
||||
', PRIMARY KEY (`id`)',
|
||||
') ENGINE=InnoDB DEFAULT CHARSET=latin1;'
|
||||
') ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;'
|
||||
);
|
||||
|
||||
PREPARE stmt FROM stmt_sql;
|
||||
|
||||
+3
-2
@@ -9,13 +9,14 @@
|
||||
"preview": "vite preview --host 0.0.0.0 --port 4173"
|
||||
},
|
||||
"dependencies": {
|
||||
"jspdf": "^2.5.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"recharts": "^2.15.1"
|
||||
"recharts": "^2.15.1",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"vite": "^6.0.7"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+1250
-320
File diff suppressed because it is too large
Load Diff
+69
-33
@@ -1,50 +1,86 @@
|
||||
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:18080/api";
|
||||
function resolveServiceUrl(explicitEnv, fallbackPort, suffix = "") {
|
||||
const explicit = String(explicitEnv || "").trim();
|
||||
if (explicit) {
|
||||
return explicit.replace(/\/$/, "") + suffix;
|
||||
}
|
||||
|
||||
async function request(path, options = {}) {
|
||||
const response = await fetch(API_URL + path, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(options.token ? { Authorization: "Bearer " + options.token } : {}),
|
||||
...options.headers,
|
||||
},
|
||||
if (typeof window !== "undefined") {
|
||||
const { protocol, hostname } = window.location;
|
||||
return `${protocol}//${hostname}:${fallbackPort}${suffix}`;
|
||||
}
|
||||
|
||||
return `http://localhost:${fallbackPort}${suffix}`;
|
||||
}
|
||||
|
||||
const API_URL = resolveServiceUrl(import.meta.env.VITE_API_URL, import.meta.env.VITE_API_PORT || "18080", "/api");
|
||||
const COLLECTOR_URL = resolveServiceUrl(import.meta.env.VITE_COLLECTOR_URL, import.meta.env.VITE_COLLECTOR_PORT || "18110");
|
||||
|
||||
async function request(baseUrl, path, options = {}) {
|
||||
const headers = {
|
||||
...(options.token ? { Authorization: `Bearer ${options.token}` } : {}),
|
||||
...options.headers,
|
||||
};
|
||||
|
||||
const isJsonBody = options.body !== undefined && !(options.body instanceof FormData);
|
||||
if (isJsonBody) {
|
||||
headers["Content-Type"] = "application/json";
|
||||
}
|
||||
|
||||
const response = await fetch(baseUrl + path, {
|
||||
headers,
|
||||
method: options.method || "GET",
|
||||
body: options.body ? JSON.stringify(options.body) : undefined,
|
||||
body: options.body === undefined ? undefined : isJsonBody ? JSON.stringify(options.body) : options.body,
|
||||
});
|
||||
|
||||
if (response.status === 204) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || "Request failed.");
|
||||
throw new Error(data.error || "Anfrage fehlgeschlagen.");
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
const apiRequest = (path, options) => request(API_URL, path, options);
|
||||
const collectorRequest = (path, options) => request(COLLECTOR_URL, path, options);
|
||||
|
||||
export const api = {
|
||||
login: (body) => request("/auth/login", { method: "POST", body }),
|
||||
me: (token) => request("/auth/me", { token }),
|
||||
health: () => request("/health"),
|
||||
getIsps: (token) => request("/isps", { token }),
|
||||
getAliases: (token, isp) => request("/isps/" + isp + "/aliases", { token }),
|
||||
saveAliases: (token, isp, body) =>
|
||||
request("/isps/" + isp + "/aliases", { method: "PUT", token, body }),
|
||||
importSql: (token, body) => request("/admin/import-sql", { method: "POST", token, body }),
|
||||
getUsers: (token) => request("/users", { token }),
|
||||
createUser: (token, body) => request("/users", { method: "POST", token, body }),
|
||||
updateUser: (token, id, body) => request("/users/" + id, { method: "PATCH", token, body }),
|
||||
getSelections: (token) => request("/selections", { token }),
|
||||
createSelection: (token, body) => request("/selections", { method: "POST", token, body }),
|
||||
updateSelection: (token, id, body) => request("/selections/" + id, { method: "PUT", token, body }),
|
||||
deleteSelection: (token, id) => request("/selections/" + id, { method: "DELETE", token }),
|
||||
queryTrends: (token, body) => request("/trends/query", { method: "POST", token, body }),
|
||||
latestValues: (token, body) => request("/points/latest", { method: "POST", token, body }),
|
||||
getDashboard: (token) => request("/dashboard", { token }),
|
||||
saveDashboard: (token, body) => request("/dashboard", { method: "PUT", token, body }),
|
||||
loadDashboardData: (token, body) => request("/dashboard/data", { method: "POST", token, body }),
|
||||
getPreferences: (token) => request("/preferences", { token }),
|
||||
savePreferences: (token, body) => request("/preferences", { method: "PUT", token, body }),
|
||||
login: (body) => apiRequest("/auth/login", { method: "POST", body }),
|
||||
me: (token) => apiRequest("/auth/me", { token }),
|
||||
changePassword: (token, body) => apiRequest("/auth/change-password", { method: "POST", token, body }),
|
||||
health: () => apiRequest("/health"),
|
||||
getIsps: (token) => apiRequest("/isps", { token }),
|
||||
getAliases: (token, isp) => apiRequest(`/isps/${isp}/aliases`, { token }),
|
||||
saveAliases: (token, isp, body) => apiRequest(`/isps/${isp}/aliases`, { method: "PUT", token, body }),
|
||||
createTrendTable: (token, body) => apiRequest("/trend-tables", { method: "POST", token, body }),
|
||||
normalizeAliasMetadata: (token, body) => apiRequest("/admin/normalize-alias-metadata", { method: "POST", token, body }),
|
||||
importSql: (token, body) => apiRequest("/admin/import-sql", { method: "POST", token, body }),
|
||||
getUsers: (token) => apiRequest("/users", { token }),
|
||||
createUser: (token, body) => apiRequest("/users", { method: "POST", token, body }),
|
||||
updateUser: (token, id, body) => apiRequest(`/users/${id}`, { method: "PATCH", token, body }),
|
||||
getSelections: (token) => apiRequest("/selections", { token }),
|
||||
createSelection: (token, body) => apiRequest("/selections", { method: "POST", token, body }),
|
||||
updateSelection: (token, id, body) => apiRequest(`/selections/${id}`, { method: "PUT", token, body }),
|
||||
deleteSelection: (token, id) => apiRequest(`/selections/${id}`, { method: "DELETE", token }),
|
||||
queryTrends: (token, body) => apiRequest("/trends/query", { method: "POST", token, body }),
|
||||
latestValues: (token, body) => apiRequest("/points/latest", { method: "POST", token, body }),
|
||||
getDashboard: (token) => apiRequest("/dashboard", { token }),
|
||||
saveDashboard: (token, body) => apiRequest("/dashboard", { method: "PUT", token, body }),
|
||||
loadDashboardData: (token, body) => apiRequest("/dashboard/data", { method: "POST", token, body }),
|
||||
getPreferences: (token) => apiRequest("/preferences", { token }),
|
||||
savePreferences: (token, body) => apiRequest("/preferences", { method: "PUT", token, body }),
|
||||
getCollectorCapabilities: () => collectorRequest("/capabilities"),
|
||||
getCollectorSources: () => collectorRequest("/sources"),
|
||||
getCollectorDatapoints: (sourceId = "") => collectorRequest(sourceId ? `/datapoints?sourceId=${encodeURIComponent(sourceId)}` : "/datapoints"),
|
||||
createCollectorSource: (body) => collectorRequest("/sources", { method: "POST", body }),
|
||||
updateCollectorSource: (id, body) => collectorRequest(`/sources/${id}`, { method: "PUT", body }),
|
||||
deleteCollectorSource: (id) => collectorRequest(`/sources/${id}`, { method: "DELETE" }),
|
||||
importModbusCsv: (body) => collectorRequest("/imports/modbus-csv", { method: "POST", body }),
|
||||
importKnxXml: (body) => collectorRequest("/imports/knx-xml", { method: "POST", body }),
|
||||
scanOpcua: (body) => collectorRequest("/scan/opcua", { method: "POST", body }),
|
||||
scanBacnet: (body) => collectorRequest("/scan/bacnet", { method: "POST", body }),
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export default function Gauge({ value, min = 0, max = 100, label, unit }) {
|
||||
export default function Gauge({ value, min = 0, max = 100, label, unit, timestamp }) {
|
||||
const safeMin = Number.isFinite(Number(min)) ? Number(min) : 0;
|
||||
const safeMax = Number.isFinite(Number(max)) ? Number(max) : 100;
|
||||
const safeValue = Number.isFinite(Number(value)) ? Number(value) : safeMin;
|
||||
@@ -9,6 +9,7 @@ export default function Gauge({ value, min = 0, max = 100, label, unit }) {
|
||||
const cy = 110;
|
||||
const x = cx + Math.cos(radians) * 72;
|
||||
const y = cy + Math.sin(radians) * 72;
|
||||
const timestampLabel = timestamp ? new Date(timestamp).toLocaleString("de-DE") : "Aktueller Wert";
|
||||
|
||||
return (
|
||||
<div className="gauge-card">
|
||||
@@ -20,6 +21,7 @@ export default function Gauge({ value, min = 0, max = 100, label, unit }) {
|
||||
/>
|
||||
<circle cx="110" cy="110" r="7" className="gauge-center" />
|
||||
</svg>
|
||||
<div className="gauge-current">Aktuell</div>
|
||||
<div className="gauge-value">
|
||||
<span>{Number.isFinite(safeValue) ? safeValue.toFixed(2) : "--"}</span>
|
||||
<small>{unit}</small>
|
||||
@@ -29,7 +31,7 @@ export default function Gauge({ value, min = 0, max = 100, label, unit }) {
|
||||
<span>{safeMin}</span>
|
||||
<span>{safeMax}</span>
|
||||
</div>
|
||||
<div className="gauge-stamp">{timestampLabel}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,93 +1,445 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { jsPDF } from "jspdf";
|
||||
import * as XLSX from "xlsx";
|
||||
import {
|
||||
CartesianGrid,
|
||||
Legend,
|
||||
Line,
|
||||
LineChart,
|
||||
ReferenceArea,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
|
||||
const COLORS = ["#2563eb", "#dc2626", "#1d4ed8", "#b91c1c", "#3b82f6", "#ef4444"];
|
||||
function downloadBlob(filename, blob) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
export default function TrendChart({ result, title = "Trendansicht" }) {
|
||||
const hostRef = useRef(null);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
function quoteCell(value) {
|
||||
return `"${String(value ?? "").replaceAll('"', '""')}"`;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const onChange = () => {
|
||||
setIsFullscreen(document.fullscreenElement === hostRef.current);
|
||||
};
|
||||
function buildRandomColor(index) {
|
||||
const hue = Math.round((Math.random() * 360 + index * 41) % 360);
|
||||
const saturation = 72 + (index % 3) * 4;
|
||||
const lightness = 46 + (index % 4) * 3;
|
||||
return `hsl(${hue} ${saturation}% ${lightness}%)`;
|
||||
}
|
||||
|
||||
document.addEventListener("fullscreenchange", onChange);
|
||||
return () => document.removeEventListener("fullscreenchange", onChange);
|
||||
}, []);
|
||||
export default function TrendChart({
|
||||
result,
|
||||
title = "Trendansicht",
|
||||
expanded = false,
|
||||
onToggleExpanded,
|
||||
csvDelimiter = ";",
|
||||
onCsvDelimiterChange,
|
||||
allowExports = true,
|
||||
allowFocusMode = true,
|
||||
compact = false,
|
||||
}) {
|
||||
const wrapperRef = useRef(null);
|
||||
const chartHostRef = useRef(null);
|
||||
const [selectedKeys, setSelectedKeys] = useState([]);
|
||||
const [dragBox, setDragBox] = useState(null);
|
||||
const [zoomDomain, setZoomDomain] = useState(null);
|
||||
const [exportFormat, setExportFormat] = useState("csv");
|
||||
const [transparentBackground, setTransparentBackground] = useState(false);
|
||||
|
||||
if (!result?.rows?.length) {
|
||||
const series = useMemo(() => {
|
||||
const fallbackColors = [];
|
||||
return (result?.series || []).map((item, index) => ({
|
||||
...item,
|
||||
color: item.color || (fallbackColors[index] ||= buildRandomColor(index)),
|
||||
name: `${item.displayName} · ${item.alias}${item.unit ? ` (${item.unit})` : ""}`,
|
||||
}));
|
||||
}, [result]);
|
||||
|
||||
const rows = useMemo(() => (result?.rows || []).map((row) => ({
|
||||
...row,
|
||||
timestampMs: new Date(row.timestamp).getTime(),
|
||||
})), [result]);
|
||||
|
||||
const visibleSeries = selectedKeys.length ? series.filter((item) => selectedKeys.includes(item.key)) : series;
|
||||
|
||||
const baseXDomain = useMemo(() => {
|
||||
if (!rows.length) {
|
||||
return [0, 1];
|
||||
}
|
||||
return [rows[0].timestampMs, rows[rows.length - 1].timestampMs];
|
||||
}, [rows]);
|
||||
|
||||
const baseYDomain = useMemo(() => {
|
||||
const values = [];
|
||||
rows.forEach((row) => {
|
||||
visibleSeries.forEach((item) => {
|
||||
const value = row[item.key];
|
||||
if (Number.isFinite(value)) {
|
||||
values.push(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (!values.length) {
|
||||
return [0, 1];
|
||||
}
|
||||
|
||||
const min = Math.min(...values);
|
||||
const max = Math.max(...values);
|
||||
if (min === max) {
|
||||
return [min - 1, max + 1];
|
||||
}
|
||||
|
||||
const padding = (max - min) * 0.08;
|
||||
return [min - padding, max + padding];
|
||||
}, [rows, visibleSeries]);
|
||||
|
||||
const xDomain = zoomDomain?.x || baseXDomain;
|
||||
const yDomain = zoomDomain?.y || baseYDomain;
|
||||
const hasFocusSelection = selectedKeys.length > 0 && selectedKeys.length < series.length;
|
||||
|
||||
if (!rows.length) {
|
||||
return (
|
||||
<div className="panel chart-panel empty-state">
|
||||
<div className={compact ? "panel chart-panel compact-chart empty-state" : "panel chart-panel empty-state"}>
|
||||
<h3>{title}</h3>
|
||||
<p>Keine Daten im gewaehlten Zeitraum.</p>
|
||||
<p>Keine Daten im gewählten Zeitraum.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const rows = result.rows.map((row) => ({
|
||||
...row,
|
||||
timestampLabel: new Date(row.timestamp).toLocaleString("de-DE"),
|
||||
}));
|
||||
const mapDragToDomain = (clientX, clientY) => {
|
||||
const rect = wrapperRef.current?.getBoundingClientRect();
|
||||
if (!rect) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const toggleFullscreen = async () => {
|
||||
if (!hostRef.current) {
|
||||
const xRatio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
||||
const yRatio = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
|
||||
const xValue = xDomain[0] + (xDomain[1] - xDomain[0]) * xRatio;
|
||||
const yValue = yDomain[1] - (yDomain[1] - yDomain[0]) * yRatio;
|
||||
|
||||
return {
|
||||
xValue,
|
||||
yValue,
|
||||
xPixel: clientX - rect.left,
|
||||
yPixel: clientY - rect.top,
|
||||
};
|
||||
};
|
||||
|
||||
const handleMouseDown = (event) => {
|
||||
if (event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
const mapped = mapDragToDomain(event.clientX, event.clientY);
|
||||
if (!mapped) {
|
||||
return;
|
||||
}
|
||||
setDragBox({ start: mapped, end: mapped });
|
||||
};
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
if (!dragBox) {
|
||||
return;
|
||||
}
|
||||
const mapped = mapDragToDomain(event.clientX, event.clientY);
|
||||
if (!mapped) {
|
||||
return;
|
||||
}
|
||||
setDragBox((current) => current ? { ...current, end: mapped } : current);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (!dragBox) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (document.fullscreenElement === hostRef.current) {
|
||||
await document.exitFullscreen();
|
||||
const deltaX = Math.abs(dragBox.end.xPixel - dragBox.start.xPixel);
|
||||
const deltaY = Math.abs(dragBox.end.yPixel - dragBox.start.yPixel);
|
||||
if (deltaX < 12 || deltaY < 12) {
|
||||
setDragBox(null);
|
||||
return;
|
||||
}
|
||||
|
||||
await hostRef.current.requestFullscreen();
|
||||
setZoomDomain({
|
||||
x: [Math.min(dragBox.start.xValue, dragBox.end.xValue), Math.max(dragBox.start.xValue, dragBox.end.xValue)],
|
||||
y: [Math.min(dragBox.start.yValue, dragBox.end.yValue), Math.max(dragBox.start.yValue, dragBox.end.yValue)],
|
||||
});
|
||||
setDragBox(null);
|
||||
};
|
||||
|
||||
const resetZoom = () => {
|
||||
setZoomDomain(null);
|
||||
};
|
||||
|
||||
const clearFocus = () => {
|
||||
setSelectedKeys([]);
|
||||
};
|
||||
|
||||
const handleLegendClick = (event, key) => {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
setSelectedKeys((current) => current.includes(key) ? current.filter((item) => item !== key) : current.concat(key));
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedKeys((current) => current.length === 1 && current[0] === key ? [] : [key]);
|
||||
};
|
||||
|
||||
const buildTabularRows = () => rows.map((row) => {
|
||||
const item = {
|
||||
Zeitstempel: new Date(row.timestampMs).toLocaleString("de-DE"),
|
||||
ISO: new Date(row.timestampMs).toISOString(),
|
||||
};
|
||||
series.forEach((entry) => {
|
||||
item[entry.name] = row[entry.key] ?? "";
|
||||
});
|
||||
return item;
|
||||
});
|
||||
|
||||
const exportCsv = () => {
|
||||
const headers = ["timestamp"].concat(series.map((entry) => entry.name));
|
||||
const lines = [headers]
|
||||
.concat(rows.map((row) => [
|
||||
new Date(row.timestampMs).toISOString(),
|
||||
...series.map((entry) => row[entry.key] ?? ""),
|
||||
]))
|
||||
.map((line) => line.map((cell) => quoteCell(cell)).join(csvDelimiter));
|
||||
downloadBlob("trend-export.csv", new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8;" }));
|
||||
};
|
||||
|
||||
const exportXlsx = () => {
|
||||
const worksheet = XLSX.utils.json_to_sheet(buildTabularRows());
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Trend");
|
||||
XLSX.writeFile(workbook, "trend-export.xlsx");
|
||||
};
|
||||
|
||||
const getSvgMarkup = (transparent = false) => {
|
||||
const svg = chartHostRef.current?.querySelector("svg");
|
||||
if (!svg) {
|
||||
throw new Error("SVG für Export nicht gefunden.");
|
||||
}
|
||||
|
||||
const clone = svg.cloneNode(true);
|
||||
const rect = svg.getBoundingClientRect();
|
||||
const width = Math.max(900, Math.round(rect.width));
|
||||
const height = Math.max(360, Math.round(rect.height));
|
||||
clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
||||
clone.setAttribute("width", String(width));
|
||||
clone.setAttribute("height", String(height));
|
||||
clone.setAttribute("viewBox", `0 0 ${width} ${height}`);
|
||||
|
||||
if (!transparent) {
|
||||
const background = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||
background.setAttribute("x", "0");
|
||||
background.setAttribute("y", "0");
|
||||
background.setAttribute("width", String(width));
|
||||
background.setAttribute("height", String(height));
|
||||
background.setAttribute("fill", "#ffffff");
|
||||
clone.insertBefore(background, clone.firstChild);
|
||||
}
|
||||
|
||||
return new XMLSerializer().serializeToString(clone);
|
||||
};
|
||||
|
||||
const svgToImage = async (type = "png", transparent = false) => {
|
||||
const svgMarkup = getSvgMarkup(transparent && type === "png");
|
||||
const svgBlob = new Blob([svgMarkup], { type: "image/svg+xml;charset=utf-8" });
|
||||
const url = URL.createObjectURL(svgBlob);
|
||||
const image = new Image();
|
||||
const rect = chartHostRef.current?.getBoundingClientRect();
|
||||
const width = Math.max(1200, Math.round(rect?.width || 1200));
|
||||
const height = Math.max(expanded ? 720 : 420, Math.round(rect?.height || 420));
|
||||
|
||||
const dataUrl = await new Promise((resolve, reject) => {
|
||||
image.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const context = canvas.getContext("2d");
|
||||
if (!transparent) {
|
||||
context.fillStyle = "#ffffff";
|
||||
context.fillRect(0, 0, width, height);
|
||||
}
|
||||
context.drawImage(image, 0, 0, width, height);
|
||||
URL.revokeObjectURL(url);
|
||||
resolve(canvas.toDataURL(type === "jpg" ? "image/jpeg" : "image/png", 0.95));
|
||||
};
|
||||
image.onerror = reject;
|
||||
image.src = url;
|
||||
});
|
||||
|
||||
return dataUrl;
|
||||
};
|
||||
|
||||
const exportGraphic = async () => {
|
||||
if (exportFormat === "svg") {
|
||||
downloadBlob("trend-export.svg", new Blob([getSvgMarkup(transparentBackground)], { type: "image/svg+xml;charset=utf-8" }));
|
||||
return;
|
||||
}
|
||||
|
||||
if (exportFormat === "png" || exportFormat === "jpg") {
|
||||
const dataUrl = await svgToImage(exportFormat, exportFormat === "png" ? transparentBackground : false);
|
||||
const response = await fetch(dataUrl);
|
||||
const blob = await response.blob();
|
||||
downloadBlob(`trend-export.${exportFormat}`, blob);
|
||||
return;
|
||||
}
|
||||
|
||||
if (exportFormat === "pdf") {
|
||||
const dataUrl = await svgToImage("png", false);
|
||||
const image = new Image();
|
||||
await new Promise((resolve) => {
|
||||
image.onload = resolve;
|
||||
image.src = dataUrl;
|
||||
});
|
||||
const pdf = new jsPDF({ orientation: "landscape", unit: "pt", format: [image.width, image.height] });
|
||||
pdf.addImage(dataUrl, "PNG", 0, 0, image.width, image.height);
|
||||
pdf.save("trend-export.pdf");
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
if (exportFormat === "csv") {
|
||||
exportCsv();
|
||||
return;
|
||||
}
|
||||
if (exportFormat === "xlsx") {
|
||||
exportXlsx();
|
||||
return;
|
||||
}
|
||||
await exportGraphic();
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={hostRef} className="panel chart-panel">
|
||||
<div className="panel-header">
|
||||
<h3>{title}</h3>
|
||||
<button className="ghost-button" type="button" onClick={toggleFullscreen}>
|
||||
{isFullscreen ? "Zurueck" : "Vollbild"}
|
||||
</button>
|
||||
<div className={expanded ? "panel chart-panel focus-mode" : compact ? "panel chart-panel compact-chart" : "panel chart-panel"}>
|
||||
<div className="panel-header compact-header chart-toolbar">
|
||||
<div>
|
||||
<h3>{title}</h3>
|
||||
<p>Ziehen mit gedrückter Maustaste zoomt Zeit und Wertebereich gemeinsam.</p>
|
||||
</div>
|
||||
<div className="chart-actions">
|
||||
{allowExports ? (
|
||||
<>
|
||||
<select value={exportFormat} onChange={(event) => setExportFormat(event.target.value)}>
|
||||
<option value="csv">CSV</option>
|
||||
<option value="xlsx">XLSX</option>
|
||||
<option value="png">PNG</option>
|
||||
<option value="jpg">JPG</option>
|
||||
<option value="svg">SVG</option>
|
||||
<option value="pdf">PDF</option>
|
||||
</select>
|
||||
{exportFormat === "csv" ? (
|
||||
<select value={csvDelimiter} onChange={(event) => onCsvDelimiterChange?.(event.target.value)}>
|
||||
<option value=";">; Trennzeichen</option>
|
||||
<option value=",">, Trennzeichen</option>
|
||||
<option value="\t">Tab Trennzeichen</option>
|
||||
</select>
|
||||
) : null}
|
||||
{(exportFormat === "png" || exportFormat === "svg") ? (
|
||||
<label className="chart-check">
|
||||
<input type="checkbox" checked={transparentBackground} onChange={(event) => setTransparentBackground(event.target.checked)} />
|
||||
<span>Transparent</span>
|
||||
</label>
|
||||
) : null}
|
||||
<button className="ghost-button" type="button" onClick={handleExport}>Export</button>
|
||||
</>
|
||||
) : null}
|
||||
{zoomDomain ? <button className="ghost-button" type="button" onClick={resetZoom}>Zoom zurück</button> : null}
|
||||
{allowFocusMode ? <button className="ghost-button" type="button" onClick={onToggleExpanded}>{expanded ? "Normalansicht" : "Fokus"}</button> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart-wrapper">
|
||||
<ResponsiveContainer width="100%" height={isFullscreen ? 520 : 320}>
|
||||
<LineChart data={rows}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--grid)" />
|
||||
<XAxis dataKey="timestampLabel" minTickGap={30} stroke="var(--muted)" />
|
||||
<YAxis stroke="var(--muted)" />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: "var(--surface-strong)",
|
||||
border: "1px solid var(--border-strong)",
|
||||
borderRadius: 10,
|
||||
fontSize: 12,
|
||||
}}
|
||||
/>
|
||||
<Legend />
|
||||
{result.series.map((series, index) => (
|
||||
<Line
|
||||
key={series.key}
|
||||
type="monotone"
|
||||
dataKey={series.key}
|
||||
dot={false}
|
||||
strokeWidth={1.75}
|
||||
stroke={COLORS[index % COLORS.length]}
|
||||
name={series.displayName + " / " + series.alias + (series.unit ? " (" + series.unit + ")" : "")}
|
||||
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
className={dragBox ? "chart-wrapper dragging" : "chart-wrapper"}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
>
|
||||
<div ref={chartHostRef} className="chart-host">
|
||||
<ResponsiveContainer width="100%" height={expanded ? 680 : compact ? 280 : 360}>
|
||||
<LineChart data={rows} margin={{ top: 8, right: 18, left: 0, bottom: 8 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--grid)" />
|
||||
<XAxis
|
||||
dataKey="timestampMs"
|
||||
type="number"
|
||||
scale="time"
|
||||
domain={xDomain}
|
||||
tickFormatter={(value) => new Date(value).toLocaleString("de-DE", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}
|
||||
minTickGap={28}
|
||||
stroke="var(--muted)"
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
<YAxis stroke="var(--muted)" domain={yDomain} width={52} />
|
||||
<Tooltip
|
||||
labelFormatter={(value) => new Date(value).toLocaleString("de-DE")}
|
||||
contentStyle={{
|
||||
background: "var(--surface-strong)",
|
||||
border: "1px solid var(--border-strong)",
|
||||
borderRadius: 10,
|
||||
fontSize: 12,
|
||||
}}
|
||||
/>
|
||||
{dragBox ? (
|
||||
<ReferenceArea
|
||||
x1={Math.min(dragBox.start.xValue, dragBox.end.xValue)}
|
||||
x2={Math.max(dragBox.start.xValue, dragBox.end.xValue)}
|
||||
y1={Math.min(dragBox.start.yValue, dragBox.end.yValue)}
|
||||
y2={Math.max(dragBox.start.yValue, dragBox.end.yValue)}
|
||||
strokeOpacity={0.5}
|
||||
fillOpacity={0.12}
|
||||
fill="var(--brand-2)"
|
||||
/>
|
||||
) : null}
|
||||
{series.map((entry) => {
|
||||
const isolated = selectedKeys.length > 0 && !selectedKeys.includes(entry.key);
|
||||
return (
|
||||
<Line
|
||||
key={entry.key}
|
||||
type="monotone"
|
||||
dataKey={entry.key}
|
||||
dot={false}
|
||||
strokeWidth={selectedKeys.includes(entry.key) ? 2.35 : 1.8}
|
||||
stroke={entry.color}
|
||||
strokeOpacity={isolated ? 0.1 : 1}
|
||||
isAnimationActive={false}
|
||||
name={entry.name}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="legend-row">
|
||||
<div className="legend-grid">
|
||||
{series.map((entry) => {
|
||||
const dimmed = selectedKeys.length > 0 && !selectedKeys.includes(entry.key);
|
||||
const active = selectedKeys.includes(entry.key);
|
||||
return (
|
||||
<button
|
||||
key={entry.key}
|
||||
type="button"
|
||||
className={active ? "legend-item active" : dimmed ? "legend-item dimmed" : "legend-item"}
|
||||
onClick={(event) => handleLegendClick(event, entry.key)}
|
||||
>
|
||||
<span className="legend-swatch" style={{ background: entry.color }} />
|
||||
<span>{entry.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{hasFocusSelection ? (
|
||||
<div className="legend-side-actions">
|
||||
<button className="ghost-button" type="button" onClick={clearFocus}>Alle Werte</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+521
-137
@@ -1,37 +1,43 @@
|
||||
:root {
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f5f7fb;
|
||||
--bg: #f4f6fb;
|
||||
--bg-accent: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
|
||||
--surface: rgba(255, 255, 255, 0.92);
|
||||
--surface: rgba(255, 255, 255, 0.96);
|
||||
--surface-strong: #ffffff;
|
||||
--text: #18212f;
|
||||
--muted: #6c7688;
|
||||
--muted: #667085;
|
||||
--border: rgba(37, 99, 235, 0.1);
|
||||
--border-strong: rgba(37, 99, 235, 0.18);
|
||||
--border-strong: rgba(214, 40, 57, 0.24);
|
||||
--brand: #2563eb;
|
||||
--brand-2: #dc2626;
|
||||
--brand-2: #d62839;
|
||||
--danger: #b91c1c;
|
||||
--grid: rgba(37, 99, 235, 0.12);
|
||||
--grid: rgba(214, 40, 57, 0.11);
|
||||
--shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
|
||||
--radius: 14px;
|
||||
--sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 251, 255, 0.94) 100%);
|
||||
--sidebar-border: rgba(37, 99, 235, 0.08);
|
||||
--sidebar-accent: linear-gradient(180deg, var(--brand-2) 0%, #cf2d5c 55%, var(--brand) 100%);
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--bg: #0f1724;
|
||||
--bg-accent: linear-gradient(180deg, #101827 0%, #0c1420 100%);
|
||||
--surface: rgba(14, 22, 36, 0.95);
|
||||
--surface-strong: #121b2b;
|
||||
--bg: #0e1624;
|
||||
--bg-accent: linear-gradient(180deg, #101827 0%, #0b1320 100%);
|
||||
--surface: rgba(16, 24, 38, 0.96);
|
||||
--surface-strong: #121b2a;
|
||||
--text: #edf2f7;
|
||||
--muted: #93a0b5;
|
||||
--muted: #94a3b8;
|
||||
--border: rgba(96, 165, 250, 0.12);
|
||||
--border-strong: rgba(96, 165, 250, 0.22);
|
||||
--brand: #60a5fa;
|
||||
--brand-2: #f87171;
|
||||
--border-strong: rgba(248, 113, 113, 0.24);
|
||||
--brand: #4f8df7;
|
||||
--brand-2: #ef4444;
|
||||
--danger: #f87171;
|
||||
--grid: rgba(96, 165, 250, 0.16);
|
||||
--shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
|
||||
--grid: rgba(239, 68, 68, 0.15);
|
||||
--shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
|
||||
--sidebar-bg: linear-gradient(180deg, rgba(15, 23, 38, 0.98) 0%, rgba(10, 16, 28, 0.96) 100%);
|
||||
--sidebar-border: rgba(148, 163, 184, 0.12);
|
||||
--sidebar-accent: linear-gradient(180deg, #ef4444 0%, #dc3b68 55%, #4f8df7 100%);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -48,7 +54,7 @@ body {
|
||||
margin: 0;
|
||||
background: var(--bg-accent);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -70,28 +76,36 @@ textarea {
|
||||
background: var(--surface-strong);
|
||||
color: var(--text);
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.7rem;
|
||||
padding: 0.46rem 0.62rem;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--brand);
|
||||
border-color: var(--brand-2);
|
||||
box-shadow: 0 0 0 1px rgba(214, 40, 57, 0.18);
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
gap: 0.28rem;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
small,
|
||||
p,
|
||||
span {
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.login-screen {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.25rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-card,
|
||||
@@ -103,33 +117,34 @@ label {
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: min(100%, 340px);
|
||||
width: min(100%, 336px);
|
||||
border-radius: 18px;
|
||||
padding: 1rem;
|
||||
padding: 0.95rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.logo-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
gap: 0.62rem;
|
||||
}
|
||||
|
||||
.logo-lockup img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--brand-2);
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -141,45 +156,173 @@ label {
|
||||
.point-item,
|
||||
.selection-card,
|
||||
.chip,
|
||||
.icon-button {
|
||||
.icon-button,
|
||||
.legend-item {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--surface-strong);
|
||||
color: var(--text);
|
||||
padding: 0.5rem 0.7rem;
|
||||
padding: 0.42rem 0.64rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.ghost-button,
|
||||
.nav-button,
|
||||
.theme-option,
|
||||
.icon-button,
|
||||
.legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: linear-gradient(135deg, var(--brand), var(--brand-2));
|
||||
background: linear-gradient(135deg, var(--brand-2) 0%, #b8275a 62%, var(--brand) 100%);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.nav-button,
|
||||
.theme-option,
|
||||
.icon-button {
|
||||
.icon-button,
|
||||
.legend-item {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-button.active,
|
||||
.theme-option.active {
|
||||
border-color: var(--brand-2);
|
||||
.theme-option.active,
|
||||
.legend-item.active {
|
||||
border-color: rgba(214, 40, 57, 0.35);
|
||||
color: var(--brand-2);
|
||||
background: rgba(214, 40, 57, 0.08);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.icon-button svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.icon-button.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr;
|
||||
grid-template-columns: 188px 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-shell.trend-focus {
|
||||
grid-template-columns: 72px 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 0.9rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
padding: 0.65rem 0.55rem 0.7rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 1rem;
|
||||
border-right: 1px solid var(--border);
|
||||
gap: 0.75rem;
|
||||
width: 188px;
|
||||
overflow: hidden;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
transition: width 160ms ease, padding 160ms ease;
|
||||
}
|
||||
|
||||
.sidebar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 5px;
|
||||
background: var(--sidebar-accent);
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 64px;
|
||||
padding-inline: 0.35rem;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-top {
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-brand-row {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .logo-lockup {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .logo-lockup img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-list {
|
||||
width: 100%;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-button {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sidebar-top {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.sidebar-footer,
|
||||
.user-card {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-row,
|
||||
.panel-header,
|
||||
.point-item,
|
||||
.selection-card,
|
||||
.user-row,
|
||||
.stat-card,
|
||||
.chart-toolbar,
|
||||
.chart-actions,
|
||||
.view-strip,
|
||||
.alias-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-row,
|
||||
.panel-header,
|
||||
.view-strip {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar-brand-row {
|
||||
padding: 0.12rem 0.08rem 0.52rem 0.15rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-list,
|
||||
@@ -188,57 +331,90 @@ label {
|
||||
.selection-chips,
|
||||
.latest-grid,
|
||||
.theme-toggle,
|
||||
.selection-actions,
|
||||
.topbar-actions {
|
||||
.view-meta,
|
||||
.wrap-tight,
|
||||
.chart-actions,
|
||||
.legend-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-footer,
|
||||
.nav-button {
|
||||
min-height: 34px;
|
||||
padding: 0.38rem 0.58rem;
|
||||
border-radius: 12px;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
.user-card span,
|
||||
.panel p,
|
||||
.stat-time,
|
||||
.muted,
|
||||
.point-item span,
|
||||
.selection-card span {
|
||||
.selection-card span,
|
||||
.muted,
|
||||
.tiny-note {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0.9rem;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
.tiny-note {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.7rem;
|
||||
align-items: center;
|
||||
.sidebar-footer {
|
||||
align-self: end;
|
||||
padding-top: 0.45rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-logout {
|
||||
justify-self: start;
|
||||
border-radius: 999px;
|
||||
padding-inline: 0.7rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0.55rem 0.65rem 0.7rem;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
align-content: start;
|
||||
grid-auto-rows: max-content;
|
||||
}
|
||||
|
||||
.view-strip {
|
||||
padding: 0.02rem 0.08rem 0;
|
||||
}
|
||||
|
||||
.small-badge,
|
||||
.small-label,
|
||||
.point-tag,
|
||||
.alias-index {
|
||||
font-size: 10px;
|
||||
color: var(--brand-2);
|
||||
}
|
||||
|
||||
.topbar h1,
|
||||
.panel h3,
|
||||
.login-card h1 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.grid.two,
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
gap: 0.6rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.grid.two {
|
||||
@@ -246,32 +422,47 @@ label {
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: var(--radius);
|
||||
padding: 0.8rem;
|
||||
padding: 0.64rem;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
gap: 0.58rem;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.7rem;
|
||||
align-items: center;
|
||||
.panel > .primary-button,
|
||||
.panel > .ghost-button {
|
||||
justify-self: start;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 0;
|
||||
.login-card > .primary-button {
|
||||
width: 100%;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.compact-button {
|
||||
min-height: 30px;
|
||||
padding: 0.36rem 0.68rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.compact-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.compact-header p,
|
||||
.view-strip p {
|
||||
margin: 0.08rem 0 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.6rem;
|
||||
gap: 0.52rem;
|
||||
}
|
||||
|
||||
.span-two {
|
||||
@@ -283,96 +474,187 @@ label {
|
||||
.user-list,
|
||||
.selection-list {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
gap: 0.36rem;
|
||||
max-height: 420px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.point-item,
|
||||
.selection-card,
|
||||
.stack-card,
|
||||
.user-row,
|
||||
.stat-card,
|
||||
.gauge-card {
|
||||
background: var(--surface-strong);
|
||||
.selection-list.compact,
|
||||
.source-list,
|
||||
.datapoint-preview .selection-list {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.point-item,
|
||||
.selection-card,
|
||||
.user-row,
|
||||
.stat-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
.alias-table {
|
||||
max-height: 560px;
|
||||
}
|
||||
|
||||
.stack-card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.45rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.selection-card,
|
||||
.point-item,
|
||||
.user-row,
|
||||
.stat-card,
|
||||
.legend-item,
|
||||
.chip {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.source-card.active {
|
||||
border-color: rgba(214, 40, 57, 0.38);
|
||||
background: rgba(214, 40, 57, 0.08);
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.selection-card,
|
||||
.point-item,
|
||||
.user-row,
|
||||
.stat-card {
|
||||
padding: 0.55rem 0.65rem;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.58rem;
|
||||
}
|
||||
|
||||
.selection-card {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.point-tag,
|
||||
.alias-index,
|
||||
.small-label {
|
||||
color: var(--brand-2);
|
||||
font-size: 11px;
|
||||
.point-copy,
|
||||
.user-copy {
|
||||
display: grid;
|
||||
gap: 0.06rem;
|
||||
}
|
||||
|
||||
.selection-chips {
|
||||
min-height: 42px;
|
||||
min-height: 0;
|
||||
gap: 0.34rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
text-align: left;
|
||||
background: rgba(37, 99, 235, 0.06);
|
||||
gap: 0.12rem;
|
||||
border-left: 3px solid var(--brand-2);
|
||||
min-width: 94px;
|
||||
padding: 0.34rem 0.42rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.chip strong,
|
||||
.point-copy strong,
|
||||
.selection-card strong,
|
||||
.user-card strong,
|
||||
.user-copy strong {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chip span {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.chart-panel {
|
||||
min-height: 390px;
|
||||
}
|
||||
|
||||
.chart-panel.focus-mode {
|
||||
min-height: calc(100vh - 1.2rem);
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
width: 100%;
|
||||
min-height: 320px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.chart-panel:fullscreen {
|
||||
padding: 1rem;
|
||||
background: var(--surface-strong);
|
||||
.chart-wrapper.dragging {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.chart-host {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-toolbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.32rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chart-check input {
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.55rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.legend-grid {
|
||||
gap: 0.34rem;
|
||||
flex: 1 1 360px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
padding: 0.32rem 0.48rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.legend-item.dimmed {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.legend-side-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.legend-swatch {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.latest-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 12px;
|
||||
.stat-card,
|
||||
.gauge-card,
|
||||
.user-row {
|
||||
border: 1px solid var(--border);
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stat-card,
|
||||
.latest-card {
|
||||
border-left: 4px solid var(--brand-2);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.35rem;
|
||||
font-size: 20px;
|
||||
gap: 0.32rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -381,12 +663,17 @@ label {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.value-stamp {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
|
||||
.gauge-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem;
|
||||
padding: 0.65rem;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
gap: 0.22rem;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@@ -397,7 +684,7 @@ label {
|
||||
|
||||
.gauge-track {
|
||||
fill: none;
|
||||
stroke: rgba(37, 99, 235, 0.18);
|
||||
stroke: rgba(214, 40, 57, 0.16);
|
||||
stroke-width: 12;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
@@ -412,43 +699,60 @@ label {
|
||||
fill: var(--brand);
|
||||
}
|
||||
|
||||
.gauge-current {
|
||||
color: var(--brand-2);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gauge-value {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
align-items: baseline;
|
||||
font-size: 18px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gauge-range {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.gauge-range,
|
||||
.gauge-label,
|
||||
.gauge-stamp {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.alias-row {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 1.2fr 0.7fr 0.55fr 0.55fr;
|
||||
gap: 0.4rem;
|
||||
grid-template-columns: 92px 1.55fr 0.8fr 0.65fr 0.65fr 0.8fr;
|
||||
gap: 0.58rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-row {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
.alias-head {
|
||||
padding: 0 0.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.unit-field,
|
||||
.color-field {
|
||||
display: grid;
|
||||
gap: 0.28rem;
|
||||
}
|
||||
|
||||
.color-field {
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-field input[type="color"] {
|
||||
padding: 0.12rem;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.error-box,
|
||||
.success-box {
|
||||
padding: 0.55rem 0.65rem;
|
||||
padding: 0.5rem 0.62rem;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -471,6 +775,66 @@ label {
|
||||
|
||||
.checkbox-field input {
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.file-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-button input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-section {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.admin-subnav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.admin-subnav .nav-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.protocol-panel,
|
||||
.protocol-block,
|
||||
.datapoint-preview {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.protocol-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.52rem;
|
||||
}
|
||||
|
||||
.protocol-block {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 0.56rem;
|
||||
background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
|
||||
}
|
||||
|
||||
.inline-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 88px auto;
|
||||
gap: 0.36rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inline-fields.multi-line {
|
||||
grid-template-columns: minmax(0, 1fr) 88px auto;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -478,14 +842,34 @@ label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slim-empty {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.app-shell {
|
||||
.app-shell,
|
||||
.app-shell.trend-focus {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar,
|
||||
.sidebar.collapsed {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.grid.two,
|
||||
.form-grid,
|
||||
.alias-row {
|
||||
.alias-row,
|
||||
.protocol-grid,
|
||||
.inline-fields,
|
||||
.inline-fields.multi-line {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user