108 lines
5.0 KiB
HTML
108 lines
5.0 KiB
HTML
{# dashboard/_edit_panels.html — returned by all mutation routes and included by edit.html #}
|
|
<div id="edit-panels" style="display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start;">
|
|
|
|
{# ── Current layout ───────────────────────────────────────────────────── #}
|
|
<div>
|
|
<div class="section-title" style="margin-bottom:0.75rem;">Current Layout</div>
|
|
{% if widgets %}
|
|
<div id="widget-sort-list" data-dash-id="{{ dashboard.id }}" style="display:grid;gap:0.5rem;">
|
|
{% for item in widgets %}
|
|
<div class="card" data-widget-id="{{ item.db.id }}"
|
|
style="margin-bottom:0;display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;">
|
|
|
|
<div class="drag-handle" style="flex-shrink:0;cursor:grab;color:var(--text-muted);
|
|
font-size:1.1rem;line-height:1;user-select:none;"
|
|
title="Drag to reorder">⠿</div>
|
|
|
|
<div style="flex:1;min-width:0;">
|
|
<div style="font-weight:600;font-size:0.9rem;">{{ item.title }}</div>
|
|
<div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.1rem;">{{ item.defn.description }}</div>
|
|
</div>
|
|
|
|
<button hx-post="/d/{{ dashboard.id }}/edit/remove/{{ item.db.id }}"
|
|
hx-target="#edit-panels" hx-swap="outerHTML"
|
|
class="btn btn-danger btn-sm" style="flex-shrink:0;">Remove</button>
|
|
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="card" style="color:var(--text-muted);text-align:center;padding:2rem;font-size:0.9rem;">
|
|
No widgets yet. Draw one from the right to begin.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# ── Available widgets ────────────────────────────────────────────────── #}
|
|
<div>
|
|
<div class="section-title" style="margin-bottom:0.75rem;">Available Widgets</div>
|
|
{% if addable %}
|
|
<div style="display:grid;gap:0.5rem;">
|
|
{% for w in addable %}
|
|
<div class="card" style="margin-bottom:0;padding:0;overflow:hidden;">
|
|
<details>
|
|
<summary style="display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
|
|
padding:0.85rem 1rem;cursor:pointer;list-style:none;user-select:none;">
|
|
<div style="flex:1;min-width:0;">
|
|
<div style="font-weight:600;font-size:0.875rem;">{{ w.label }}</div>
|
|
<div style="font-size:0.77rem;color:var(--text-muted);margin-top:0.1rem;">{{ w.description }}</div>
|
|
</div>
|
|
<span class="btn btn-sm" style="flex-shrink:0;pointer-events:none;">Add ▾</span>
|
|
</summary>
|
|
|
|
<form method="post"
|
|
action="/d/{{ dashboard.id }}/edit/add/{{ w.key }}"
|
|
hx-post="/d/{{ dashboard.id }}/edit/add/{{ w.key }}"
|
|
hx-target="#edit-panels"
|
|
hx-swap="outerHTML"
|
|
style="padding:0.75rem 1rem;padding-top:0;border-top:1px solid var(--border);">
|
|
<div style="display:grid;gap:0.5rem;padding-top:0.75rem;">
|
|
|
|
<div>
|
|
<label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">
|
|
Widget title <span style="color:var(--text-dim);">(optional)</span>
|
|
</label>
|
|
<input type="text" name="title" placeholder="{{ w.label }}"
|
|
style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
|
|
border:1px solid var(--border-mid);border-radius:4px;
|
|
color:var(--text);font-size:0.85rem;">
|
|
</div>
|
|
|
|
{% for p in w.params %}
|
|
<div>
|
|
<label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">
|
|
{{ p.label }}
|
|
</label>
|
|
{% if p.type == "select" %}
|
|
<select name="param_{{ p.key }}"
|
|
style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
|
|
border:1px solid var(--border-mid);border-radius:4px;
|
|
color:var(--text);font-size:0.85rem;">
|
|
{% for opt in p.options %}
|
|
<option value="{{ opt.value }}" {% if opt.value == p.default %}selected{% endif %}>
|
|
{{ opt.label }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<button type="submit" class="btn btn-sm" style="width:100%;margin-top:0.1rem;">
|
|
Add to Dashboard
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</details>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div style="color:var(--text-muted);font-size:0.85rem;padding:1rem 0;">
|
|
No plugin widgets available. Enable plugins in Settings → Plugins.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|