PIVOT 1.1.0

templates/scholen.html

@@ -0,0 +1,100 @@
+{% extends "base.html" %}
+
+{% block title %}Scholen{% endblock %}
+
+{% block page_title %}Scholen in PIVOT{% endblock %}
+
+{% block extra_css %}
+<style>
+    tr.groep-kop td { background: var(--surface-muted); padding: 0; }
+    tr.groep-kop button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%;
+                          padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: .82em; letter-spacing: .06em;
+                          text-transform: uppercase; color: var(--text-muted, #475569); }
+    tr.groep-kop button:hover { color: var(--primary-color); }
+    tr.groep-kop button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
+    tr.groep-kop .pijl { display: inline-block; transition: transform .15s; }
+    tbody.dicht tr.groep-kop .pijl { transform: rotate(-90deg); }
+    tbody.dicht tr.school-rij { display: none; }
+    tr.groep-kop .aantal { font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--surface);
+                           border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; }
+    td.school-naam { width: 100%; }
+    td.school-naam .badge { margin-left: 6px; }
+    td.koppelingen { white-space: nowrap; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="card">
+    <div class="page-head">
+        <h2>🏫 Scholen</h2>
+        <div class="actions">
+            <form method="POST" action="{{ url_for('scholen.alles_testen') }}" style="margin:0"
+                  onsubmit="showLoader('Koppelingen van alle scholen testen...')">
+                <button type="submit" class="btn-light" title="Test de koppelingen van alle actieve scholen">🩺 Alle scholen testen</button>
+            </form>
+            <a href="{{ url_for('scholen.nieuw') }}" class="btn btn-success">➕ Nieuwe school</a>
+        </div>
+    </div>
+
+    <div class="table-wrap">
+        <table>
+            {% for g in groepen %}
+            <tbody class="groep" data-groep="{{ g.code }}">
+                <tr class="groep-kop"><td colspan="3">
+                    <button type="button" aria-expanded="true"><span class="pijl">▾</span> {{ g.label }}
+                        <span class="aantal">{{ g.scholen|length }}</span></button>
+                </td></tr>
+            {% for s in g.scholen %}
+                <tr class="school-rij">
+                    <td class="school-naam">
+                        <strong>{{ s.naam }}</strong>
+                        {% if not s.actief %}<span class="badge badge-warning">inactief</span>{% endif %}
+                        {% if school and school.code == s.code %}<span class="badge badge-info">huidige</span>{% endif %}
+                    </td>
+                    <td class="koppelingen">
+                        {% for b in badges[s.code] %}
+                        <span class="badge {{ {'ok': 'badge-success', 'fout': 'badge-danger', 'ongetest': 'badge-warning'}.get(b.toestand, '') }}"
+                              title="{{ b.titel }}">{{ {'ok': '✓', 'fout': '✗', 'ongetest': '?'}.get(b.toestand, '–') }} {{ b.label }}</span>
+                        {% endfor %}
+                    </td>
+                    <td class="actions nowrap">
+                        {% if s.actief %}
+                        <a href="{{ url_for('scholen.wissel', code=s.code) }}" class="btn btn-sm btn-secondary" title="Werken in deze school">↪ Openen</a>
+                        {% endif %}
+                        <a href="{{ url_for('scholen.bewerken', code=s.code) }}" class="btn btn-sm btn-light">✏️ Bewerken</a>
+                        <form method="POST" action="{{ url_for('scholen.test', code=s.code) }}" style="display:inline;margin:0" onsubmit="showLoader('Verbindingen testen...')">
+                            <button type="submit" class="btn-sm btn-light">🩺 Testen</button>
+                        </form>
+                    </td>
+                </tr>
+            {% endfor %}
+            </tbody>
+            {% else %}
+            <tbody>
+                <tr class="empty-row"><td colspan="3">Nog geen scholen. Voeg er een toe, of importeer de oude config.ini met <code>python beheer.py importeer-config</code>.</td></tr>
+            </tbody>
+            {% endfor %}
+        </table>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    // Groepen in- en uitklappen; de keuze wordt in deze browser onthouden
+    document.querySelectorAll('tbody.groep').forEach(tb => {
+        const sleutel = 'pivot.scholen.dicht.' + tb.dataset.groep;
+        const knop = tb.querySelector('tr.groep-kop button');
+        const zet = dicht => {
+            tb.classList.toggle('dicht', dicht);
+            knop.setAttribute('aria-expanded', String(!dicht));
+        };
+        try { zet(localStorage.getItem(sleutel) === '1'); } catch (e) { /* geen opslag */ }
+        knop.addEventListener('click', () => {
+            const dicht = !tb.classList.contains('dicht');
+            zet(dicht);
+            try { localStorage.setItem(sleutel, dicht ? '1' : '0'); } catch (e) { /* negeren */ }
+        });
+    });
+</script>
+{% endblock %}