push

templates/dashboards/view.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+{% block title %}{{ dashboard.name }} - MikroMon{% endblock %}
+{% block head %}
+<script>window.MIKROMON={dashboardId: {{ dashboard.id }}, publicToken: null};</script>
+{% endblock %}
+{% block content %}
+<div class="d-flex align-items-start justify-content-between mb-3 flex-wrap gap-2">
+  <div>
+    <h1 class="h3 mb-0">{{ dashboard.name }}</h1>
+    {% if dashboard.description %}<div class="text-muted">{{ dashboard.description }}</div>{% endif %}
+  </div>
+  <div class="d-flex gap-2">
+    <a class="btn btn-outline-secondary" href="{{ url_for('dashboards.share', dashboard_id=dashboard.id) }}"><i class="fa-solid fa-share-nodes me-1"></i>Share</a>
+    <a class="btn btn-primary" href="{{ url_for('dashboards.widget_new', dashboard_id=dashboard.id) }}"><i class="fa-solid fa-plus me-1"></i>Add widget</a>
+  </div>
+</div>
+
+<div class="row g-3">
+  {% for w in widgets %}
+  <div class="col-12 col-lg-{{ w.col_span or 6 }}">
+    <div class="card shadow-sm h-100">
+      <div class="card-header bg-white d-flex align-items-center justify-content-between">
+        <div class="fw-semibold">{{ w.title }}</div>
+        <form method="post" action="{{ url_for('dashboards.widget_delete', dashboard_id=dashboard.id, widget_id=w.id) }}">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+          <button class="btn btn-sm btn-outline-danger" type="submit" title="Delete"><i class="fa-solid fa-trash"></i></button>
+        </form>
+      </div>
+      <div class="card-body">
+        {% if w.widget_type == 'table' %}
+          <div class="table-responsive">
+            <table class="table table-sm align-middle mb-0" data-table-widget="{{ w.id }}">
+              <thead class="table-light"></thead>
+              <tbody></tbody>
+            </table>
+          </div>
+        {% else %}
+          <div class="chart-wrap" style="height: {{ w.height_px or 260 }}px;"><canvas id="chart-{{ w.id }}"></canvas></div>
+          <div class="text-muted small mt-2" id="meta-{{ w.id }}">Waiting for data…</div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  {% else %}
+  <div class="col-12"><div class="alert alert-info mb-0">No widgets yet. Add the first one.</div></div>
+  {% endfor %}
+</div>
+{% endblock %}