60 lines
2.7 KiB
HTML
60 lines
2.7 KiB
HTML
{% 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 gap-2 flex-wrap">
|
|
<div class="fw-semibold">{{ w.title }}</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
{% if w.widget_type != 'table' %}
|
|
<select class="form-select form-select-sm" data-range-widget="{{ w.id }}" style="width:auto">
|
|
<option value="1m">1m</option>
|
|
<option value="10m">10m</option>
|
|
<option value="1h" selected>1h</option>
|
|
<option value="3h">3h</option>
|
|
<option value="10h">10h</option>
|
|
</select>
|
|
{% endif %}
|
|
<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>
|
|
<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 %}
|