diff --git a/README.md b/README.md index d1cb31e..8c03aab 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,8 @@ python -c "import secrets; print(secrets.token_urlsafe(48))" python -c "from passlib.hash import argon2; print(argon2.hash('mysecret'))" ``` +> **Heads-up — `$` escaping in `.env`:** argon2 hashes look like `$argon2id$v=19$m=...$$`. Docker Compose treats `$word` as variable substitution in `.env`, so pasting a raw hash produces warnings (`The "argon2id" variable is not set…`) and the container receives a mangled, unverifiable hash — you won't be able to log in. Quoting does **not** help. Either double every `$` (`$$argon2id$$v=19$$m=...`), or skip this variable entirely and use the `/setup` wizard (recommended). + ## apcupsd server requirements Your remote APC UPS hosts must run `apcupsd` with the Network Information Server (NIS) enabled: diff --git a/app/logging_config.py b/app/logging_config.py index dcb62f1..073b56c 100644 --- a/app/logging_config.py +++ b/app/logging_config.py @@ -46,6 +46,14 @@ def configure_logging() -> None: # Calm down noisy loggers logging.getLogger("uvicorn.access").setLevel(logging.WARNING) + # Filter out "Invalid HTTP request received" noise from port scanners, + # TLS probes, and healthchecks hitting the HTTP socket. + class _InvalidHttpFilter(logging.Filter): + def filter(self, record: logging.LogRecord) -> bool: + msg = record.getMessage() + return "Invalid HTTP request received" not in msg + logging.getLogger("uvicorn.error").addFilter(_InvalidHttpFilter()) + class RequestIdMiddleware(BaseHTTPMiddleware): async def dispatch(self, request, call_next): diff --git a/app/static/css/base.css b/app/static/css/base.css index fd33143..bd1f219 100644 --- a/app/static/css/base.css +++ b/app/static/css/base.css @@ -1,57 +1,356 @@ -/* Base layout, header/nav */ -* { box-sizing: border-box; } -body { margin: 0; font-family: -apple-system, Segoe UI, Arial, sans-serif; background: #f5f7fa; color: #222; } -.site-header { - display: flex; align-items: center; gap: 24px; - padding: 10px 20px; background: #2c3e50; color: #ecf0f1; - box-shadow: 0 2px 4px rgba(0,0,0,.1); +/* ======================================================================== + Design Tokens — dark theme (slate/indigo) + ======================================================================== */ +:root { + /* Surfaces */ + --bg: #0b1220; + --surface: #131c2e; + --surface-2: #1a2540; + --surface-3: #223052; + --border: #263654; + --border-hi: #36507d; + + /* Text */ + --text: #e6edf7; + --text-muted: #9fb0cb; + --text-dim: #6c7fa2; + + /* Brand / accent */ + --accent: #60a5fa; + --accent-hover: #3b82f6; + --accent-dim: #1e3a8a; + + /* Semantic */ + --success: #10b981; + --success-bg: #053b2d; + --warning: #f59e0b; + --warning-bg: #3a2608; + --danger: #ef4444; + --danger-bg: #3b0f0f; + --info: #38bdf8; + --info-bg: #052b3a; + + /* Elevation */ + --shadow-sm: 0 1px 2px rgba(0,0,0,.3); + --shadow-md: 0 2px 8px rgba(0,0,0,.35); + --shadow-lg: 0 8px 24px rgba(0,0,0,.45); + + /* Radii & spacing */ + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 10px; + + /* Typography */ + --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; } -.site-header .brand a { color: #ecf0f1; text-decoration: none; font-weight: 600; font-size: 18px; } -.main-nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; } -.main-nav a { color: #bdc3c7; text-decoration: none; padding: 6px 10px; border-radius: 4px; } -.main-nav a:hover { background: #34495e; color: #fff; } -.main-nav a.active { background: #3498db; color: #fff; } + +/* ======================================================================== + Reset & base + ======================================================================== */ +* { box-sizing: border-box; } +html, body { height: 100%; } +body { + margin: 0; + font-family: var(--font); + font-size: 14px; + line-height: 1.5; + background: var(--bg); + color: var(--text); + -webkit-font-smoothing: antialiased; +} + +a { color: var(--accent); text-decoration: none; } +a:hover { color: var(--accent-hover); text-decoration: underline; } + +h1, h2, h3, h4 { margin: 0 0 0.5rem 0; font-weight: 600; color: var(--text); } +h1 { font-size: 1.4rem; } +h2 { font-size: 1.15rem; } +h3 { font-size: 1rem; } + +hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; } + +code, pre { font-family: var(--font-mono); } + +/* ======================================================================== + Header & nav + ======================================================================== */ +.site-header { + display: flex; + align-items: center; + gap: 24px; + padding: 10px 24px; + background: var(--surface); + border-bottom: 1px solid var(--border); + box-shadow: var(--shadow-sm); + position: sticky; + top: 0; + z-index: 100; +} +.site-header .brand a { + color: var(--text); + font-weight: 600; + font-size: 16px; +} +.site-header .brand a:hover { text-decoration: none; color: var(--accent); } + +.main-nav { + display: flex; + gap: 4px; + flex: 1; + flex-wrap: wrap; +} +.main-nav a { + color: var(--text-muted); + padding: 7px 14px; + border-radius: var(--radius-sm); + font-size: 13px; + font-weight: 500; + transition: background .15s, color .15s; +} +.main-nav a:hover { + background: var(--surface-2); + color: var(--text); + text-decoration: none; +} +.main-nav a.active { + background: var(--accent-dim); + color: var(--text); +} + .user-menu { display: flex; align-items: center; gap: 10px; } -.user-menu .username { font-size: 13px; opacity: 0.85; } -.btn-logout { background: #e74c3c; color: #fff; border: 0; padding: 6px 12px; border-radius: 4px; cursor: pointer; } -.btn-logout:hover { background: #c0392b; } -.site-main { padding: 20px; } -.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; } +.user-menu .username { + font-size: 13px; + color: var(--text-muted); + padding: 4px 8px; + background: var(--surface-2); + border-radius: var(--radius-sm); +} +.btn-logout { + background: transparent; + color: var(--text-muted); + border: 1px solid var(--border); + padding: 6px 12px; + border-radius: var(--radius-sm); + cursor: pointer; + font-size: 13px; + transition: background .15s, color .15s, border-color .15s; +} +.btn-logout:hover { + background: var(--danger-bg); + color: var(--danger); + border-color: var(--danger); +} + +.site-main { padding: 20px 24px; max-width: 1600px; margin: 0 auto; } + +/* ======================================================================== + Page scaffolding + ======================================================================== */ +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + gap: 16px; + flex-wrap: wrap; +} .page-header h1 { margin: 0; font-size: 22px; } + .filters { display: flex; gap: 8px; flex-wrap: wrap; } -.filters select, .filters input { padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; } +.filters select, .filters input { + padding: 7px 10px; + border: 1px solid var(--border); + background: var(--surface-2); + color: var(--text); + border-radius: var(--radius-sm); + font-size: 13px; +} +.filters select:focus, .filters input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15); +} -/* Tables */ -.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); } -.data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; font-size: 14px; } -.data-table th { background: #f0f2f5; font-weight: 600; } -.data-table tr:hover { background: #fafbfc; } -.sev.CRITICAL { color: #fff; background: #c0392b; padding: 2px 8px; border-radius: 3px; font-size: 12px; } -.sev.WARNING { color: #fff; background: #e67e22; padding: 2px 8px; border-radius: 3px; font-size: 12px; } -.sev.INFO { color: #fff; background: #2980b9; padding: 2px 8px; border-radius: 3px; font-size: 12px; } +.muted { color: var(--text-dim); font-size: 13px; } -/* Settings */ -.settings-section { background: #fff; border-radius: 6px; padding: 16px 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); } -.settings-section h2 { margin-top: 0; font-size: 18px; } -.settings-section form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; } -.settings-section label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } -.settings-section label[type=checkbox] input, .settings-section input[type=checkbox] + * { display: inline; } -.settings-section input, .settings-section select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; } +/* ======================================================================== + Tables + ======================================================================== */ +.data-table { + width: 100%; + border-collapse: collapse; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-md); + overflow: hidden; + box-shadow: var(--shadow-sm); +} +.data-table th, .data-table td { + text-align: left; + padding: 10px 14px; + border-bottom: 1px solid var(--border); + font-size: 13px; + color: var(--text); +} +.data-table th { + background: var(--surface-2); + font-weight: 600; + color: var(--text-muted); + text-transform: uppercase; + font-size: 11px; + letter-spacing: .5px; +} +.data-table tr:last-child td { border-bottom: none; } +.data-table tr:hover td { background: var(--surface-2); } + +/* Severity pills */ +.sev { + display: inline-block; + padding: 2px 10px; + border-radius: 999px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: .5px; +} +.sev.CRITICAL { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); } +.sev.WARNING { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning); } +.sev.INFO { background: var(--info-bg); color: var(--info); border: 1px solid var(--info); } + +/* ======================================================================== + Settings + ======================================================================== */ +.settings-section { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: 20px 24px; + margin-bottom: 20px; + box-shadow: var(--shadow-sm); +} +.settings-section h2 { + margin-top: 0; + font-size: 16px; + padding-bottom: 12px; + border-bottom: 1px solid var(--border); + margin-bottom: 16px; +} +.settings-section form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; } +.settings-section label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); } +.settings-section input, .settings-section select, .settings-section textarea { + padding: 8px 10px; + border: 1px solid var(--border); + background: var(--surface-2); + color: var(--text); + border-radius: var(--radius-sm); + font-size: 13px; + font-family: inherit; +} +.settings-section input:focus, .settings-section select:focus, .settings-section textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15); +} .settings-section button { align-self: flex-start; } -.muted { color: #777; font-size: 13px; } -/* Fleet overview */ -.fleet-overview { margin-bottom: 16px; } -.fleet-card { background: #fff; border-radius: 6px; padding: 16px 20px; display: flex; gap: 24px; flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0,0,0,.08); } -.fleet-stat { display: flex; flex-direction: column; gap: 4px; } -.fleet-stat-label { color: #7f8c8d; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; } -.fleet-stat-value { font-size: 22px; font-weight: 600; } -.fleet-stat-value.online { color: #27ae60; } -.fleet-stat-value.onbatt { color: #e67e22; } -.fleet-stat-value.offline { color: #c0392b; } +/* ======================================================================== + Buttons (global) + ======================================================================== */ +.btn-primary { + background: var(--accent-hover); + color: #fff; + border: 0; + padding: 9px 16px; + border-radius: var(--radius-sm); + cursor: pointer; + font-size: 13px; + font-weight: 500; + transition: background .15s; +} +.btn-primary:hover { background: var(--accent); } +.btn-primary:disabled { opacity: .5; cursor: not-allowed; } +.btn-block { width: 100%; } -/* Card state dot */ -.state-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #95a5a6; margin-right: 6px; vertical-align: middle; } -.state-dot.online { background: #27ae60; } -.state-dot.offline { background: #c0392b; } -.state-dot.onbatt { background: #e67e22; } +/* ======================================================================== + Fleet overview + ======================================================================== */ +.fleet-overview { margin-bottom: 20px; } +.fleet-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: 18px 22px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 20px; + box-shadow: var(--shadow-sm); +} +.fleet-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; } +.fleet-stat-label { + color: var(--text-dim); + font-size: 11px; + text-transform: uppercase; + letter-spacing: .5px; + font-weight: 600; +} +.fleet-stat-value { + font-size: 24px; + font-weight: 700; + color: var(--text); + line-height: 1.2; +} +.fleet-stat-value.online { color: var(--success); } +.fleet-stat-value.onbatt { color: var(--warning); } +.fleet-stat-value.offline { color: var(--danger); } + +/* ======================================================================== + State indicators (shared) + ======================================================================== */ +.state-dot { + display: inline-block; + width: 10px; height: 10px; + border-radius: 50%; + background: var(--text-dim); + margin-right: 8px; + vertical-align: middle; + box-shadow: 0 0 0 2px rgba(255,255,255,.05); +} +.state-dot.online { background: var(--success); box-shadow: 0 0 6px rgba(16,185,129,.5); } +.state-dot.onbatt { background: var(--warning); box-shadow: 0 0 6px rgba(245,158,11,.5); } +.state-dot.offline { background: var(--danger); box-shadow: 0 0 6px rgba(239,68,68,.5); } + +/* ======================================================================== + Empty state + ======================================================================== */ +.empty-state { + text-align: center; + padding: 3rem 1.5rem; + color: var(--text-muted); + background: var(--surface); + border: 1px dashed var(--border); + border-radius: var(--radius-md); + width: 100%; +} +.empty-state h3 { color: var(--text); margin-bottom: 0.5rem; } +.empty-state a { color: var(--accent); } + +/* ======================================================================== + Scrollbars + ======================================================================== */ +* { scrollbar-width: thin; scrollbar-color: var(--border-hi) var(--bg); } +*::-webkit-scrollbar { width: 10px; height: 10px; } +*::-webkit-scrollbar-track { background: var(--bg); } +*::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 5px; border: 2px solid var(--bg); } +*::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } + +/* ======================================================================== + Responsive + ======================================================================== */ +@media (max-width: 768px) { + .site-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 16px; } + .main-nav { width: 100%; } + .site-main { padding: 16px; } + .fleet-card { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; padding: 14px 16px; } + .fleet-stat-value { font-size: 20px; } +} diff --git a/app/static/css/config.css b/app/static/css/config.css index bcf57a1..9394701 100644 --- a/app/static/css/config.css +++ b/app/static/css/config.css @@ -1,355 +1,182 @@ -/* Configuration page styles */ -body { - background: #10151b; - color: #eef; -} +/* ============================================================ + Config page — UPS list, modals, toasts. + Inherits design tokens from base.css. + ============================================================ */ -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; - padding-bottom: 1rem; - border-bottom: 1px solid #333; -} - -.header h1 { - color: #eef; -} - -.header nav { - display: flex; - gap: 1rem; - align-items: center; -} - -.header nav a { - text-decoration: none; - color: #999; - font-weight: 500; -} - -.header nav a:hover { - color: #eef; -} - -/* Button styles */ -.btn { - padding: 0.5rem 1rem; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 0.9rem; - font-weight: 500; - transition: background-color 0.2s; -} - -.btn-primary { - background-color: #007bff; - color: white; -} - -.btn-primary:hover { - background-color: #0056b3; -} - -.btn-secondary { - background-color: #6c757d; - color: white; -} - -.btn-secondary:hover { - background-color: #545b62; -} - -.btn-danger { - background-color: #dc3545; - color: white; -} - -.btn-danger:hover { - background-color: #c82333; -} - -.btn-success { - background-color: #28a745; - color: white; -} - -.btn-success:hover { - background-color: #1e7e34; -} - -/* UPS list styles */ -.ups-list { - display: grid; - gap: 1rem; -} +/* UPS list */ +.ups-list { display: grid; gap: 12px; } .ups-item { - background: #1d2530; - border: 1px solid #333; - border-radius: 8px; - padding: 1.5rem; - box-shadow: 0 2px 4px rgba(0,0,0,0.3); + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 18px 20px; + box-shadow: var(--shadow-sm); + transition: border-color .15s; } +.ups-item:hover { border-color: var(--border-hi); } .ups-item-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 1rem; -} - -.ups-item-title { - font-size: 1.2rem; - font-weight: 600; - color: #eef; -} - -.ups-item-actions { - display: flex; - gap: 0.5rem; + margin-bottom: 12px; } +.ups-item-title { font-size: 16px; font-weight: 600; color: var(--text); } +.ups-item-actions { display: flex; gap: 8px; } .ups-item-details { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 1rem; - margin-bottom: 1rem; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 14px; + margin-bottom: 12px; } - -.ups-detail { - display: flex; - flex-direction: column; -} - +.ups-detail { display: flex; flex-direction: column; } .ups-detail-label { - font-size: 0.8rem; - color: #999; - margin-bottom: 0.25rem; + font-size: 11px; + color: var(--text-dim); + margin-bottom: 2px; + text-transform: uppercase; + letter-spacing: .5px; + font-weight: 600; } +.ups-detail-value { font-weight: 500; color: var(--text); font-size: 13px; } -.ups-detail-value { +/* Generic buttons */ +.btn { + padding: 7px 14px; + border: 1px solid transparent; + border-radius: var(--radius-sm); + cursor: pointer; + font-size: 13px; font-weight: 500; - color: #eef; + transition: background .15s, border-color .15s; + font-family: inherit; } +.btn-primary { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); } +.btn-primary:hover { background: var(--accent); } +.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); } +.btn-secondary:hover { background: var(--surface-3); border-color: var(--border-hi); } +.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } +.btn-danger:hover { background: #dc2626; } +.btn-success { background: var(--success); color: #fff; border-color: var(--success); } +.btn-success:hover { background: #059669; } -.ups-status { - display: inline-block; - padding: 0.25rem 0.5rem; - border-radius: 12px; - font-size: 0.8rem; - font-weight: 500; -} - -.ups-status.online { - background-color: #d4edda; - color: #155724; -} - -.ups-status.offline { - background-color: #f8d7da; - color: #721c24; -} - -.ups-status.testing { - background-color: #fff3cd; - color: #856404; -} - -/* Modal styles */ +/* Modals */ .modal { display: none; position: fixed; + inset: 0; z-index: 1000; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.5); + background: rgba(0,0,0,0.6); + backdrop-filter: blur(2px); } - .modal-content { - background-color: #1d2530; + background: var(--surface); + border: 1px solid var(--border); margin: 5% auto; padding: 0; - border-radius: 8px; + border-radius: var(--radius-lg); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; + box-shadow: var(--shadow-lg); } - -.modal-content.small { - max-width: 400px; -} +.modal-content.small { max-width: 400px; } .modal-header { display: flex; justify-content: space-between; align-items: center; - padding: 1.5rem; - border-bottom: 1px solid #333; -} - -.modal-header h2 { - margin: 0; - color: #eef; + padding: 16px 20px; + border-bottom: 1px solid var(--border); } +.modal-header h2 { margin: 0; font-size: 16px; } .close { - font-size: 1.5rem; - font-weight: bold; + font-size: 24px; + font-weight: 400; cursor: pointer; - color: #999; - padding: 0.25rem; -} - -.close:hover { - color: #eef; -} - -/* Form styles */ -form { - padding: 1.5rem; -} - -.form-group { - margin-bottom: 1.5rem; + color: var(--text-dim); + padding: 0 8px; + line-height: 1; + background: transparent; + border: none; } +.close:hover { color: var(--text); } +/* Forms */ +form { padding: 18px 20px; } +.form-group { margin-bottom: 18px; } .form-group label { display: block; - margin-bottom: 0.5rem; + margin-bottom: 6px; font-weight: 500; - color: #eef; + color: var(--text-muted); + font-size: 12px; + text-transform: uppercase; + letter-spacing: .5px; } - .form-group input[type="text"], -.form-group input[type="number"] { +.form-group input[type="number"], +.form-group input[type="password"], +.form-group input[type="email"], +.form-group select { width: 100%; - padding: 0.5rem; - border: 1px solid #555; - border-radius: 4px; - font-size: 0.9rem; - background: #2d3748; - color: #eef; + padding: 8px 10px; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + font-size: 13px; + background: var(--surface-2); + color: var(--text); + font-family: inherit; } - -.form-group input[type="text"]:focus, -.form-group input[type="number"]:focus { +.form-group input:focus, .form-group select:focus { outline: none; - border-color: #4a9eff; - box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.25); + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15); } - -.form-group input[type="checkbox"] { - margin-right: 0.5rem; -} - -.form-group small { - display: block; - margin-top: 0.25rem; - color: #999; - font-size: 0.8rem; -} - +.form-group input[type="checkbox"] { margin-right: 8px; vertical-align: middle; } +.form-group small { display: block; margin-top: 4px; color: var(--text-dim); font-size: 11px; } .form-actions { display: flex; - gap: 1rem; + gap: 10px; justify-content: flex-end; - margin-top: 2rem; - padding-top: 1rem; - border-top: 1px solid #333; -} - -/* Toast notifications */ -#toast-container { - position: fixed; - top: 1rem; - right: 1rem; - z-index: 1100; + margin-top: 20px; + padding-top: 16px; + border-top: 1px solid var(--border); } +/* Toasts */ +#toast-container { position: fixed; top: 80px; right: 20px; z-index: 1100; } .toast { - background: #1d2530; - border: 1px solid #333; - border-radius: 4px; - padding: 1rem; - margin-bottom: 0.5rem; - box-shadow: 0 2px 8px rgba(0,0,0,0.3); - max-width: 300px; - animation: slideIn 0.3s ease-out; - color: #eef; -} - -.toast.success { - border-left: 4px solid #28a745; -} - -.toast.error { - border-left: 4px solid #dc3545; -} - -.toast.warning { - border-left: 4px solid #ffc107; -} - -.toast.info { - border-left: 4px solid #17a2b8; + background: var(--surface); + border: 1px solid var(--border); + border-left-width: 4px; + border-radius: var(--radius-sm); + padding: 12px 16px; + margin-bottom: 8px; + box-shadow: var(--shadow-md); + max-width: 320px; + animation: slideIn .25s ease-out; + color: var(--text); + font-size: 13px; } +.toast.success { border-left-color: var(--success); } +.toast.error { border-left-color: var(--danger); } +.toast.warning { border-left-color: var(--warning); } +.toast.info { border-left-color: var(--info); } @keyframes slideIn { - from { - transform: translateX(100%); - opacity: 0; - } - to { - transform: translateX(0); - opacity: 1; - } + from { transform: translateX(110%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } } -/* Responsive design */ +/* Responsive */ @media (max-width: 768px) { - .header { - flex-direction: column; - gap: 1rem; - align-items: flex-start; - } - - .ups-item-details { - grid-template-columns: 1fr; - } - - .ups-item-header { - flex-direction: column; - align-items: flex-start; - gap: 1rem; - } - - .modal-content { - width: 95%; - margin: 2% auto; - } - - .form-actions { - flex-direction: column; - } + .ups-item-details { grid-template-columns: 1fr; } + .ups-item-header { flex-direction: column; align-items: flex-start; gap: 10px; } + .modal-content { width: 95%; margin: 2% auto; } + .form-actions { flex-direction: column; } } - -.empty-state { - text-align: center; - padding: 3rem; - color: #999; -} - -.empty-state h3 { - color: #eef; - margin-bottom: 0.5rem; -} - -.empty-state p { - margin: 0; -} \ No newline at end of file diff --git a/app/static/css/login.css b/app/static/css/login.css index 3f69d39..940589c 100644 --- a/app/static/css/login.css +++ b/app/static/css/login.css @@ -1,11 +1,59 @@ -.auth-body { background: #2c3e50; min-height: 100vh; display: flex; align-items: center; justify-content: center; } -.auth-card { background: #fff; border-radius: 8px; padding: 32px; width: 360px; box-shadow: 0 8px 24px rgba(0,0,0,.3); } -.auth-card.wide { width: 440px; } -.auth-card h1 { margin: 0 0 20px; text-align: center; font-size: 22px; } -.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } -.form-field label { font-size: 13px; color: #555; } -.form-field input { padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } -.btn-primary { background: #3498db; color: #fff; border: 0; padding: 10px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; } -.btn-primary:hover { background: #2980b9; } -.btn-block { width: 100%; } -.login-error { margin-top: 12px; padding: 8px 12px; background: #fee; color: #c0392b; border-radius: 4px; font-size: 13px; } +/* ============================================================ + Login / Setup page. Inherits tokens from base.css. + ============================================================ */ + +.auth-body { + background: + radial-gradient(ellipse 800px 600px at 50% -200px, rgba(96,165,250,.08), transparent), + var(--bg); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; +} + +.auth-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 36px 32px; + width: 380px; + box-shadow: var(--shadow-lg); +} +.auth-card.wide { width: 460px; } + +.auth-card h1 { + margin: 0 0 6px; + text-align: center; + font-size: 22px; + color: var(--text); +} +.auth-card .muted { text-align: center; margin-bottom: 20px; } + +.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } +.form-field label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; } +.form-field input { + padding: 10px 12px; + border: 1px solid var(--border); + background: var(--surface-2); + color: var(--text); + border-radius: var(--radius-sm); + font-size: 14px; + font-family: inherit; +} +.form-field input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15); +} + +.login-error { + margin-top: 12px; + padding: 10px 14px; + background: var(--danger-bg); + color: var(--danger); + border: 1px solid var(--danger); + border-radius: var(--radius-sm); + font-size: 13px; +} diff --git a/app/static/css/style.css b/app/static/css/style.css index c934a9c..7659f1e 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -1,328 +1,319 @@ -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 1rem; - background: #10151b; - color: #eef; +/* ============================================================ + Dashboard — UPS cards, tiles, badges, charts. + Inherits design tokens from base.css. No body/header redefinition. + ============================================================ */ + +/* Card grid */ +#ups-cards { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: 16px; } -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; - padding-bottom: 1rem; - border-bottom: 1px solid #333; -} - -.header h1 { - margin: 0; - color: #eef; -} - -.header nav { - display: flex; - gap: 1rem; - align-items: center; -} - -.config-link { - color: #6c757d; - text-decoration: none; - padding: 0.5rem 1rem; - border-radius: 4px; - transition: background-color 0.2s; -} - -.config-link:hover { - background-color: #2d3748; - color: #eef; -} - -.card { - background: #1d2530; - padding: 1.5rem; - margin: 0.5rem; - border-radius: 8px; - display: inline-block; - vertical-align: top; - min-width: 320px; - min-height: 260px; +.card { + background: var(--surface); + border: 1px solid var(--border); + padding: 16px 18px 28px; + border-radius: var(--radius-lg); position: relative; - box-shadow: 0 2px 4px rgba(0,0,0,0.3); - position: relative; - resize: both; /* fallback native resize for browsers that support */ + box-shadow: var(--shadow-sm); + min-height: 280px; + resize: both; overflow: hidden; + transition: border-color .15s, box-shadow .15s; +} +.card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-md); } +.card.resizing { outline: 2px dashed var(--accent); } + +.card-header { + display: flex; + align-items: center; + gap: 8px; + padding-bottom: 12px; + margin-bottom: 12px; + border-bottom: 1px solid var(--border); +} +.card-header h2 { + margin: 0; + font-size: 15px; + color: var(--text); + display: flex; + align-items: center; + flex: 1; +} +.ups-connection { + font-size: 11px; + color: var(--text-dim); + font-family: var(--font-mono); + padding: 2px 6px; + background: var(--surface-2); + border-radius: var(--radius-sm); } +/* ------- Highline (status + key badges) ------- */ .highline { display: flex; flex-wrap: wrap; - gap: 0.4rem; + gap: 6px; align-items: center; - margin-bottom: 0.75rem; -} - -.badge { - background: #243140; - padding: 2px 8px; - border-radius: 12px; - font-size: 0.7rem; - letter-spacing: 0.5px; - color: #cde; - font-weight: 600; -} - -.badge[data-badge="runtime"] { background:#2c3e50; } -.badge[data-badge="watts"] { background:#1f4f61; } -.badge[data-badge="headroom"] { background:#3b3f2a; } -.badge[data-badge="energy"] { background:#28324a; } - -/* Battery Gauge */ -.gauge { width: 120px; height: 70px; position: relative; } -.gauge svg { width: 100%; height: 100%; } -.gauge-bg { fill: none; stroke: #243140; stroke-width: 10; stroke-linecap: round; } -.gauge-fill { fill: none; stroke: #4a9eff; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .4s ease, stroke .4s; } -.gauge-text { fill: #cde; font-size: 16px; font-weight: 600; dominant-baseline: middle; } -.gauge.low .gauge-fill { stroke: #d97745; } -.gauge.critical .gauge-fill { stroke: #d9534f; } -.gauge.good .gauge-fill { stroke: #3bb273; } - -.events { margin-top: 0.75rem; } -.events-header { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; margin-bottom: 0.25rem; } -.events-list { list-style: none; padding: 0; margin: 0; max-height: 90px; overflow-y: auto; font-size: 0.65rem; line-height: 1.2; } -.events-list li { padding: 2px 0; border-bottom: 1px solid #233; } -.events-list li:last-child { border-bottom: none; } - -.card-header { - margin-bottom: 1rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid #333; - display: flex; - gap: 0.5rem; - align-items: center; -} - -.card h2 { - margin: 0 0 0.25rem 0; - color: #eef; -} - -.ups-connection { - font-size: 0.8rem; - color: #999; -} - -.metrics { - font-size: 0.9rem; - padding-bottom: 32px; /* Reserve space for footer */ - position: relative; -} - -.metric-row { - display: flex; - justify-content: space-between; - margin-bottom: 0.5rem; -} - -.metric-row > div { - flex: 1; -} - -.val { - font-weight: bold; - color: #4a9eff; + margin-bottom: 12px; } .ups-status { display: inline-block; - padding: 2px 6px; - border-radius: 4px; - font-size: 0.8rem; - font-weight: bold; + padding: 3px 10px; + border-radius: var(--radius-sm); + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .5px; + border: 1px solid var(--border); +} +.ups-status.online { background: var(--success-bg); color: var(--success); border-color: var(--success); } +.ups-status.onbattery { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); } +.ups-status.unknown { background: var(--surface-2); color: var(--text-dim); } +.ups-status.offline { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } + +.badge { + background: var(--surface-2); + padding: 3px 9px; + border-radius: 999px; + font-size: 10px; + letter-spacing: .5px; + color: var(--text-muted); + font-weight: 600; + border: 1px solid var(--border); text-transform: uppercase; } +.badge[data-badge="runtime"] { background: var(--surface-2); color: var(--accent); } +.badge[data-badge="watts"] { background: var(--surface-2); color: var(--info); } +.badge[data-badge="headroom"] { background: var(--surface-2); color: var(--warning); } +.badge[data-badge="energy"] { background: var(--surface-2); color: var(--success); } -.ups-status.online { - background-color: #155724; - color: #d4edda; -} +/* ------- Battery gauge ------- */ +.gauge { width: 120px; height: 70px; position: relative; } +.gauge svg { width: 100%; height: 100%; } +.gauge-bg { fill: none; stroke: var(--surface-3); stroke-width: 10; stroke-linecap: round; } +.gauge-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .4s ease, stroke .4s; } +.gauge-text { fill: var(--text); font-size: 16px; font-weight: 600; dominant-baseline: middle; } +.gauge.low .gauge-fill { stroke: var(--warning); } +.gauge.critical .gauge-fill { stroke: var(--danger); } +.gauge.good .gauge-fill { stroke: var(--success); } -.ups-status.onbattery { - background-color: #856404; - color: #fff3cd; -} +/* ------- Metrics layout ------- */ +.metrics { font-size: 13px; padding-bottom: 28px; position: relative; } +.metric-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } +.metric-row > div { flex: 1; } +.val { font-weight: 600; color: var(--accent); } -.ups-status.unknown { - background-color: #383d41; - color: #d6d8db; +/* ------- Tile system ------- */ +.tile-grid { position: relative; margin-top: 8px; min-height: 140px; } +.tile { + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: 8px 10px; + position: absolute; + display: flex; + flex-direction: column; + min-height: 110px; + min-width: 140px; + box-sizing: border-box; + transition: border-color .15s; } - -.charts { - margin-top: 1rem; +.tile:hover { border-color: var(--border-hi); } +.tile h4 { + margin: 0 0 6px 0; + font-size: 10px; + letter-spacing: .5px; + text-transform: uppercase; + color: var(--text-dim); + font-weight: 600; } - -#ups-cards { - display: flex; - flex-wrap: wrap; +.tile .tile-body { flex: 1; display: flex; align-items: center; justify-content: center; } +.tile .big-value { font-size: 22px; font-weight: 700; color: var(--accent); } +.tile canvas { width: 100% !important; height: 90px !important; } +.tile .gauge { margin: auto; } +.tile.small { min-height: 80px; } +.tile.hidden { display: none; } +.tile.dragging { opacity: 0.5; border: 1px dashed var(--accent); } +.tile.selected { outline: 2px solid var(--accent); } +.tile-controls { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; } +.tile-controls select { + background: var(--surface-3); + border: 1px solid var(--border); + color: var(--text-muted); + font-size: 10px; + padding: 2px 4px; + border-radius: var(--radius-sm); } - -canvas.chart { - width: 300px; - margin-bottom: 0.5rem; +.tile-resize { + position: absolute; right: 4px; bottom: 4px; width: 12px; height: 12px; + cursor: nwse-resize; background: rgba(255,255,255,0.06); + border: 1px solid var(--border); border-radius: 2px; +} +.tile-resize:after { + content: ''; position: absolute; right: 2px; bottom: 2px; + width: 6px; height: 6px; + border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); } +/* ------- Card resize handle ------- */ .resize-handle { position: absolute; - width: 14px; - height: 14px; - right: 4px; - bottom: 4px; - background: linear-gradient(135deg, #2f3b48 0%, #3e4c5c 60%, #4a5b6e 100%); - border: 1px solid #556; + width: 16px; height: 16px; + right: 4px; bottom: 4px; + background: var(--surface-3); + border: 1px solid var(--border-hi); border-radius: 3px; cursor: nwse-resize; display: flex; align-items: center; justify-content: center; - font-size: 8px; - color: #9fb1c3; + color: var(--accent); user-select: none; opacity: 0.75; - transition: opacity .15s; + transition: opacity .15s, background .15s; + z-index: 20; } -.resize-handle:hover { opacity: 1; } - -.card.resizing { outline: 1px dashed #4a9eff; } - -.empty-state { - text-align: center; - padding: 3rem; - color: #999; - width: 100%; +.resize-handle::before { + content: ''; + width: 8px; height: 8px; + border-right: 2px solid currentColor; + border-bottom: 2px solid currentColor; } +.resize-handle:hover { opacity: 1; background: var(--accent-dim); } -.empty-state h3 { - color: #eef; - margin-bottom: 0.5rem; -} - -.empty-state a { - color: #4a9eff; - text-decoration: none; -} - -.empty-state a:hover { - text-decoration: underline; -} - -/* Mode toggle */ -.mode-toggle { - margin-left: auto; - background: #2b3542; - color: #cdd6e2; - border: 1px solid #3a4756; - padding: 4px 6px; - border-radius: 4px; +/* ------- Card action buttons ------- */ +.mode-toggle, .reset-layout-btn, .add-metric-btn { + background: var(--surface-2); + color: var(--text-muted); + border: 1px solid var(--border); + border-radius: var(--radius-sm); cursor: pointer; - font-size: 0.7rem; + padding: 4px 8px; + font-size: 12px; + transition: background .15s, color .15s, border-color .15s; } -.mode-toggle:hover { background:#364250; } +.mode-toggle:hover, .reset-layout-btn:hover, .add-metric-btn:hover { + background: var(--surface-3); + color: var(--text); + border-color: var(--border-hi); +} +.add-metric-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; } +.reset-layout-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; } -/* Add Metric Button */ -.add-metric-btn { background:#2b3542; color:#9fb1c3; border:1px solid #3a4756; border-radius:4px; cursor:pointer; width:26px; height:26px; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; } -.add-metric-btn:hover { background:#364250; } +/* ------- Events (legacy, used by some views) ------- */ +.events { margin-top: 12px; } +.events-header { + font-size: 10px; text-transform: uppercase; letter-spacing: 1px; + color: var(--text-dim); margin-bottom: 4px; font-weight: 600; +} +.events-list { + list-style: none; padding: 0; margin: 0; + max-height: 90px; overflow-y: auto; + font-size: 11px; line-height: 1.3; +} +.events-list li { padding: 3px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); } +.events-list li:last-child { border-bottom: none; } -/* Reset layout button */ -.reset-layout-btn { background:#2b3542; color:#9fb1c3; border:1px solid #3a4756; border-radius:4px; cursor:pointer; width:28px; height:26px; font-size:14px; display:flex; align-items:center; justify-content:center; } -.reset-layout-btn:hover { background:#364250; } - -/* Metric Modal */ -.metric-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index:1000; } -.metric-modal { background:#1d2530; border:1px solid #2c3846; padding:1rem 1.25rem; width:340px; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.4); } -.metric-modal h3 { margin-top:0; margin-bottom:0.75rem; font-size:1rem; color:#eef; } -.metric-modal label { font-size:0.7rem; text-transform:uppercase; letter-spacing:1px; opacity:0.75; display:block; margin-top:0.75rem; margin-bottom:0.25rem; } -.metric-modal select, .metric-modal input { width:100%; background:#283240; color:#cdd6e2; border:1px solid #364250; border-radius:4px; padding:4px 6px; font-size:0.85rem; } -.metric-modal-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem; } -.metric-modal button { background:#2b3542; border:1px solid #3a4756; color:#cdd6e2; padding:6px 10px; border-radius:4px; cursor:pointer; font-size:0.75rem; } -.metric-modal button.primary { background:#1f5d85; border-color:#2675aa; } -.metric-modal button.primary:hover { background:#2675aa; } -.metric-modal button:hover { background:#364250; } - -/* Compact mode */ -.card.compact .charts { display: none; } -.card.compact .events { display: none; } -.card.compact { min-height: 140px; } -.card.compact .metric-row { margin-bottom: 0.25rem; } -.card.compact .highline { margin-bottom: 0.4rem; } - -/* Tile system */ -.tile-grid { position: relative; margin-top: 0.6rem; min-height: 140px; } -.tile { background:#212b36; border:1px solid #2c3a48; border-radius:6px; padding:0.5rem 0.6rem; position:absolute; display:flex; flex-direction:column; min-height:110px; min-width:140px; box-sizing:border-box; } -.tile h4 { margin:0 0 0.4rem 0; font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; opacity:0.7; font-weight:600; } -.tile .tile-body { flex:1; display:flex; align-items:center; justify-content:center; } -.tile .big-value { font-size:1.4rem; font-weight:600; color:#4a9eff; } -.tile canvas { width:100%!important; height:90px!important; } -.tile .gauge { margin:auto; } -.tile-controls { position:absolute; top:4px; right:4px; display:flex; gap:4px; } -.tile-controls select { background:#2b3542; border:1px solid #364250; color:#cdd6e2; font-size:0.6rem; padding:2px 4px; border-radius:4px; } -.tile.small { min-height:80px; } -.tile.hidden { display:none; } -.tile.dragging { opacity:0.5; border:1px dashed #4a9eff; } -.tile.selected { outline:2px solid #4a9eff; } -.tile-resize { position:absolute; right:4px; bottom:4px; width:12px; height:12px; cursor:nwse-resize; background:rgba(255,255,255,0.08); border:1px solid #3a4756; border-radius:2px; } -.tile-resize:after { content:''; position:absolute; right:2px; bottom:2px; width:6px; height:6px; border-right:2px solid #4a9eff; border-bottom:2px solid #4a9eff; } - -/* Event footer */ -.ups-footer { +/* ------- Footer marquee ------- */ +.ups-footer { position: absolute; - bottom: 0; - left: 0; - right: 0; - font-size: 0.65rem; - color: #9fb1c3; - border-top: 1px solid #2c3a48; - padding: 4px 8px; - min-height: 20px; - white-space: nowrap; - overflow: hidden; - background: rgba(29, 37, 48, 0.95); - border-radius: 0 0 8px 8px; + bottom: 0; left: 0; right: 0; + font-size: 11px; + color: var(--text-dim); + border-top: 1px solid var(--border); + padding: 5px 10px; + min-height: 22px; + white-space: nowrap; + overflow: hidden; + background: var(--surface); + border-radius: 0 0 var(--radius-lg) var(--radius-lg); z-index: 10; box-sizing: border-box; } .ups-footer .event-marquee { display: inline-block; animation: marquee 18s linear infinite; } +@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } -/* Value tile display */ -.big-value-container { - text-align: center; - display: flex; - align-items: baseline; - justify-content: center; - gap: 4px; - height: 100%; - padding: 10px; +/* ------- Big-value tile ------- */ +.big-value-container { + text-align: center; + display: flex; align-items: baseline; justify-content: center; + gap: 4px; height: 100%; padding: 10px; } -.big-value-container .big-value { - font-size: 2rem; - font-weight: 600; - color: #4a9eff; -} -.big-value-container .value-unit { - font-size: 0.9rem; - color: #9fb1c3; - font-weight: normal; +.big-value-container .big-value { font-size: 2rem; font-weight: 700; color: var(--accent); } +.big-value-container .value-unit { font-size: 0.9rem; color: var(--text-dim); font-weight: normal; } + +/* Voltage status (within spec/out of spec) */ +.voltage-good { color: var(--success) !important; } +.voltage-bad { color: var(--danger) !important; } + +/* Legend */ +.legend-badge { + background: var(--surface-2); + padding: 2px 8px; + border-radius: 999px; + font-size: 10px; + margin: 2px; + display: inline-block; + color: var(--text-muted); + border: 1px solid var(--border); } -/* Voltage color coding based on US electrical specs */ -.voltage-good { - color: #22c55e !important; /* Green for voltage in acceptable range (114V-126V) */ -} -.voltage-bad { - color: #ef4444 !important; /* Red for voltage out of acceptable range */ -} +/* ------- Compact mode ------- */ +.card.compact .charts, .card.compact .events, .card.compact .tile-grid { display: none; } +.card.compact { min-height: 140px; } +.card.compact .metric-row { margin-bottom: 0.25rem; } +.card.compact .highline { margin-bottom: 0.4rem; } -@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-100%); } } -.legend-badge { background:#243140; padding:2px 6px; border-radius:10px; font-size:0.6rem; margin:2px; display:inline-block; } - -.card.compact .tile-grid { display:none; } +/* ------- Metric modal ------- */ +.metric-modal-backdrop { + position: fixed; inset: 0; + background: rgba(0,0,0,0.6); + display: flex; align-items: center; justify-content: center; + z-index: 1000; + backdrop-filter: blur(2px); +} +.metric-modal { + background: var(--surface); + border: 1px solid var(--border); + padding: 18px 20px; + width: 360px; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); +} +.metric-modal h3 { margin-top: 0; margin-bottom: 12px; font-size: 15px; } +.metric-modal label { + font-size: 10px; + text-transform: uppercase; + letter-spacing: .5px; + color: var(--text-dim); + display: block; + margin-top: 12px; + margin-bottom: 4px; + font-weight: 600; +} +.metric-modal select, .metric-modal input { + width: 100%; + background: var(--surface-2); + color: var(--text); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + padding: 6px 10px; + font-size: 13px; +} +.metric-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } +.metric-modal button { + background: var(--surface-2); + border: 1px solid var(--border); + color: var(--text); + padding: 7px 14px; + border-radius: var(--radius-sm); + cursor: pointer; + font-size: 13px; + transition: background .15s; +} +.metric-modal button:hover { background: var(--surface-3); } +.metric-modal button.primary { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } +.metric-modal button.primary:hover { background: var(--accent); } diff --git a/app/static/js/dashboard.js b/app/static/js/dashboard.js index 5e7bf3b..fa39201 100644 --- a/app/static/js/dashboard.js +++ b/app/static/js/dashboard.js @@ -38,6 +38,25 @@ window.upsDebug = { const evtSource = new EventSource('/api/stream'); const charts = {}; + +// -------- Fleet overview poller -------- +async function refreshFleetOverview() { + try { + const r = await fetch('/api/ups/fleet/overview', { credentials: 'same-origin' }); + if (!r.ok) return; + const d = await r.json(); + const setText = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; }; + setText('fleet-total', d.total ?? 0); + setText('fleet-online', d.counts?.online ?? 0); + setText('fleet-onbatt', d.counts?.on_battery ?? 0); + setText('fleet-offline', d.counts?.offline ?? 0); + setText('fleet-watts', d.total_watts != null ? Math.round(d.total_watts) : '—'); + const minRT = d.min_timeleft_minutes; + setText('fleet-min-runtime', minRT != null ? `${Math.round(minRT)} m` : '—'); + } catch (e) { /* silent */ } +} +refreshFleetOverview(); +setInterval(refreshFleetOverview, 10000); // Tile registry and state const TILE_REGISTRY = [ { id: 'load_pct', metric: 'LOADPCT', label: 'UPS Load %', short: 'Load', types: ['gauge','line','bar'], defaultType: 'gauge' },