55 lines
2.5 KiB
HTML
55 lines
2.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Dashboard — UPS{% endblock %}
|
|
{% block head_extra %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<section class="fleet-overview" id="fleet-overview">
|
|
<div class="fleet-card">
|
|
<div class="fleet-stat">
|
|
<span class="fleet-stat-label">Total UPS</span>
|
|
<span class="fleet-stat-value" id="fleet-total">-</span>
|
|
</div>
|
|
<div class="fleet-stat"><span class="fleet-stat-label">Online</span><span class="fleet-stat-value online" id="fleet-online">-</span></div>
|
|
<div class="fleet-stat"><span class="fleet-stat-label">On Battery</span><span class="fleet-stat-value onbatt" id="fleet-onbatt">-</span></div>
|
|
<div class="fleet-stat"><span class="fleet-stat-label">Offline</span><span class="fleet-stat-value offline" id="fleet-offline">-</span></div>
|
|
<div class="fleet-stat"><span class="fleet-stat-label">Total Load (W)</span><span class="fleet-stat-value" id="fleet-watts">-</span></div>
|
|
<div class="fleet-stat"><span class="fleet-stat-label">Min Runtime</span><span class="fleet-stat-value" id="fleet-min-runtime">-</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="ups-cards" data-ui='{{ ui_cfg | tojson }}'>
|
|
{% for ups in ups_list %}
|
|
<div class="card" id="card-{{ ups.name }}">
|
|
<div class="card-header">
|
|
<h2>
|
|
<span class="state-dot" data-state-dot></span>
|
|
{{ ups.name }}
|
|
</h2>
|
|
<div class="ups-connection" data-field-conn>{{ ups.host }}:{{ ups.port }}</div>
|
|
<button class="reset-layout-btn" data-reset-layout title="Reset tile layout">⟳</button>
|
|
</div>
|
|
<div class="metrics">
|
|
<div class="highline">
|
|
<span class="ups-status unknown" data-field="STATUS">-</span>
|
|
<span class="badge" data-field="RUNTIME_MINUTES" data-badge="runtime">- m</span>
|
|
<span class="badge" data-field="DERIVED_WATTS" data-badge="watts">- W</span>
|
|
<span class="badge" data-field="HEADROOM_PCT" data-badge="headroom">- headroom</span>
|
|
</div>
|
|
<div class="tile-grid" data-tile-grid></div>
|
|
</div>
|
|
<div class="ups-footer" data-ups-footer></div>
|
|
</div>
|
|
{% endfor %}
|
|
{% if not ups_list %}
|
|
<div class="empty-state">
|
|
<h3>No UPS Configured</h3>
|
|
<p>Get started by <a href="/config">adding a UPS configuration</a>.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script src="/static/js/dashboard.js?v=5"></script>
|
|
{% endblock %}
|