PIVOT 1.1.0

templates/nieuw_schooljaar_toestellen.html

@@ -0,0 +1,93 @@
+{% extends "base.html" %}
+
+{% block title %}Nieuw schooljaar – toestellen{% endblock %}
+{% block page_title %}Nieuw schooljaar – toestellen{% endblock %}
+{% block main_class %}medium{% endblock %}
+{% block loader_text %}Bezig met verwerken... Even geduld.{% endblock %}
+
+{% block extra_css %}
+<style>
+    .form-section { display: flex; flex-direction: column; gap: 22px; max-width: 640px; margin: 8px auto 0; }
+    .ou-selector-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; }
+    .ou-selector-row.single { grid-template-columns: 1fr; }
+    .ou-selector-row label { display: block; margin-bottom: 6px; }
+    .arrow { font-size: 22px; color: var(--text-muted); padding-bottom: 8px; }
+    .button-row { display: flex; flex-wrap: wrap; gap: 10px; }
+    .tab-intro { color: var(--text-muted); margin-bottom: 4px; }
+    @media (max-width: 640px) { .ou-selector-row { grid-template-columns: 1fr; } .arrow { transform: rotate(90deg); justify-self: center; } }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="tabs">
+    <button class="tab-link {% if active_tab == 'verplaatsen' %}active{% endif %}" onclick="openTab(event, 'verplaatsen-tab')">➡️ Verplaatsen</button>
+    <button class="tab-link {% if active_tab == 'blokkeren' %}active{% endif %}" onclick="openTab(event, 'blokkeren-tab')">🔒 Blokkeren</button>
+</div>
+
+<section id="verplaatsen-tab" class="tab-content {% if active_tab == 'verplaatsen' %}active{% endif %}" style="display: {% if active_tab == 'verplaatsen' %}block{% else %}none{% endif %};">
+    <h2>Chromebooks van OU verplaatsen</h2>
+    <form class="form-section" method="POST" action="{{ url_for('toestellen_verplaatsen.move_toestellen') }}" onsubmit="showLoader('Toestellen verplaatsen...')">
+        <div class="ou-selector-row">
+            <div>
+                <label>Huidige OU (bron)</label>
+                <select name="huidige_ou" required>
+                    <option value="" disabled selected>Kies bron-OU</option>
+                    {% for ou in org_units %}<option value="{{ ou.orgUnitPath }}">{{ ou.orgUnitPath }}</option>{% endfor %}
+                </select>
+            </div>
+            <span class="arrow">⟶</span>
+            <div>
+                <label>Nieuwe OU (doel)</label>
+                <select name="nieuwe_ou" required>
+                    <option value="" disabled selected>Kies doel-OU</option>
+                    {% for ou in org_units %}<option value="{{ ou.orgUnitPath }}">{{ ou.orgUnitPath }}</option>{% endfor %}
+                </select>
+            </div>
+        </div>
+        <div><button type="submit" class="btn-lg">Uitvoeren</button></div>
+    </form>
+</section>
+
+<section id="blokkeren-tab" class="tab-content {% if active_tab == 'blokkeren' %}active{% endif %}" style="display: {% if active_tab == 'blokkeren' %}block{% else %}none{% endif %};">
+    <h2>Chromebooks blokkeren of deblokkeren</h2>
+    <p class="tab-intro">Selecteer een OU om de status van alle aanwezige Chromebooks te wijzigen.</p>
+    <form class="form-section" method="POST" action="{{ url_for('toestellen_verplaatsen.blokkeer_toestellen') }}" onsubmit="return handleBlokkeerSubmit()">
+        <div class="ou-selector-row single">
+            <div>
+                <label for="ou_select_blokkeer">Doel-OU</label>
+                <select id="ou_select_blokkeer" name="ou_select_blokkeer" required>
+                    <option value="" disabled selected>Selecteer de doel-OU</option>
+                    {% for ou in org_units %}<option value="{{ ou.orgUnitPath }}">{{ ou.orgUnitPath }}</option>{% endfor %}
+                </select>
+            </div>
+        </div>
+        <div class="button-row">
+            <button type="submit" name="actie" value="blokkeer" class="btn-lg btn-danger" onclick="setLastAction('blokkeer')">🔒 Alles blokkeren</button>
+            <button type="submit" name="actie" value="deblokkeer" class="btn-lg btn-secondary" onclick="setLastAction('deblokkeer')">🔓 Alles deblokkeren</button>
+        </div>
+    </form>
+</section>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    let lastAction = '';
+    function setLastAction(action) { lastAction = action; }
+
+    function handleBlokkeerSubmit() {
+        const msg = lastAction === 'blokkeer'
+            ? 'Weet je zeker dat je ALLE toestellen in deze OU wilt BLOKKEREN?'
+            : 'Weet je zeker dat je ALLE toestellen in deze OU wilt DEBLOKKEREN?';
+        if (confirm(msg)) { showLoader('Status wijzigen... Even geduld.'); return true; }
+        return false;
+    }
+
+    function openTab(evt, tabName) {
+        document.querySelectorAll('.tab-content').forEach(t => { t.style.display = 'none'; t.classList.remove('active'); });
+        document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
+        document.getElementById(tabName).style.display = 'block';
+        document.getElementById(tabName).classList.add('active');
+        evt.currentTarget.classList.add('active');
+    }
+</script>
+{% endblock %}