Hilfetexte ergänzt

templates/admin.html

@@ -5,6 +5,7 @@
 <title>CANCOM Simple Signage Admin</title>
 <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
 
+<!-- ─── Dark Mode: Theme vor dem Rendern setzen ─── -->
 <script>
 (() => {
   const stored = window.localStorage.getItem("signage-theme");
@@ -13,6 +14,7 @@
 })();
 </script>
 
+<!-- ─── Externe Bibliotheken (Tabler CSS/JS, SortableJS) ─── -->
 <link rel="stylesheet"
       href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
 <link rel="stylesheet"
@@ -25,7 +27,7 @@
 {% include "_styles.html" %}
 
 <style>
-  /* Tooltip Styling */
+  /* ─── Tooltip-Styling (CANCOM-rot) ─── */
   .tooltip {
     --bs-tooltip-border-color: var(--ccm-primary);
   }
@@ -41,7 +43,7 @@
     background-color: #ffffff;
   }
 
-  /* Playlist als Grid */
+  /* ─── Playlist-Zeile als Grid (Checkbox | Name | Typ | Größe | Löschen | Drag) ─── */
   .playlist-row {
     display: grid;
     grid-template-columns:
@@ -62,6 +64,7 @@
     font-size: 0.9em;
   }
 
+  /* ─── Player-URL im Screen-Header als Link (grau, rot bei Hover) ─── */
   .page-subtitle a {
     color: inherit;
     text-decoration: none;
@@ -70,6 +73,7 @@
     color: var(--ccm-primary);
   }
 
+  /* ─── Drag-Handle für SortableJS ─── */
   .drag-handle {
     cursor: grab;
     font-size: 1.2em;
@@ -80,6 +84,7 @@
     cursor: grabbing;
   }
 
+  /* ─── Tab-Styling (extend to card edges, unified background) ─── */
   .card-body .nav-tabs {
     margin-left: -1rem;
     margin-right: -1rem;
@@ -108,7 +113,10 @@
 {% set site_dropdown_url_prefix = "/admin/" %}
 {% include "_header.html" %}
 
-<!-- Second Nav -->
+<!-- ═══════════════════════════════════════════════════
+     Navigation (zweite Zeile)
+     Übersicht | Priority | Willkommensseite | Screens-Dropdown | +
+     ═══════════════════════════════════════════════════ -->
 <div class="navbar-expand-md">
   <div class="collapse navbar-collapse show">
     <div class="navbar navbar-dark nav-surface">
@@ -127,6 +135,7 @@
               {% endfor %}
             </div>
           </div>
+          <!-- + Button: Neuen Screen anlegen (prompt → /admin/<site>/add-screen?name=...) -->
           <a class="btn btn-white" href="javascript:void(0)"
              onclick="var n=prompt('Name des neuen Screens:'); if(n&&n.trim()) location.href='/admin/{{ current_site }}/add-screen?name='+encodeURIComponent(n.trim().toLowerCase());"
              title="Neuen Screen anlegen"><i class="ti ti-plus"></i></a>
@@ -136,13 +145,13 @@
   </div>
 </div>
 
-<!-- Content -->
+<!-- ═══════════════════════════════════════════════════
+     CONTENT
+     ═══════════════════════════════════════════════════ -->
   <div class="page-wrapper">
     <div class="container-xl mt-4">
 
-      <!-- ========================= -->
-      <!-- STANDORT VERWALTUNG      -->
-      <!-- ========================= -->
+      <!-- ─── Standort löschen (Button oben rechts) ─── -->
       <div class="d-flex justify-content-end mb-3">
         <form action="/admin/{{ current_site }}/delete-site" method="post"
               onsubmit="return confirm('Standort »{{ current_site }}« wirklich löschen? Alle Screens und Medien werden gelöscht.')">
@@ -151,13 +160,13 @@
       </div>
 
       <!-- ========================= -->
-      <!-- SCREENS                   -->
+      <!-- SCREEN-CARDS              -->
       <!-- ========================= -->
 
       {% for screen, cfg in screens.items() %}
       <div class="card mb-6" id="screen-{{ screen }}">
 
-        <!-- Card Header -->
+        <!-- Card-Header: Screen-Name, Status-Badge, Player-URL, Löschen -->
         <div class="card-header d-flex justify-content-between align-items-center">
           <span>
             <div class="page-title">{{ current_site | capitalize }}:&nbsp;<span class="fw-normal">Screen</span>&nbsp;<span class="text-uppercase">- {{ screen }}</span></div>
@@ -177,6 +186,7 @@
           </div>
         </div>
 
+        <!-- Card-Body: Tabs (Playlist | Einstellungen | Medien) -->
         <div class="card-body">
 
           <ul class="nav nav-tabs" data-bs-toggle="tabs" role="tablist">
@@ -199,18 +209,20 @@
 
           <div class="tab-content mt-3">
 
-            <!-- Tab: Playlist -->
+            <!-- ═══ Tab: Playlist ═══ -->
             <div class="tab-pane active" id="tab-playlist-{{ screen }}" role="tabpanel">
               <ul class="list-group mb-3" id="playlist-{{ screen }}">
                 {% for file in media_files[screen] %}
                 <li class="list-group-item playlist-row"
                     data-file="{{ file.name }}">
 
+                  <!-- Aktiv-Checkbox -->
                   <input class="form-check-input playlist-enabled"
                          type="checkbox"
                          {% if file.enabled %}checked{% endif %}
                          title="Element aktivieren">
 
+                  <!-- Dateiname (mit Tooltip-Vorschau) -->
                   <span class="playlist-name"
                         {% if file.type == "image" %}
                           data-bs-toggle="tooltip"
@@ -223,6 +235,7 @@
                     {{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
                   </span>
 
+                  <!-- Typ-Badge -->
                   {% if file.type == "image" %}
                     <span class="badge bg-purple text-purple-fg">Bild</span>
                   {% elif file.type == "url" or file.type == "html" %}
@@ -231,6 +244,7 @@
                     <span class="badge bg-orange text-orange-fg">Video</span>
                   {% endif %}
 
+                  <!-- Größe -->
                   <span class="playlist-size">
                     {% if file.type == "url" %}
                       {{ file.size }}
@@ -239,7 +253,7 @@
                     {% endif %}
                   </span>
 
-                  <!-- Delete -->
+                  <!-- Löschen -->
                   <form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
                         method="post">
                     <button type="submit"
@@ -249,7 +263,7 @@
                     </button>
                   </form>
 
-                  <!-- Drag -->
+                  <!-- Drag-Handle (SortableJS) -->
                   <span class="drag-handle" title="Reihenfolge ändern">⇅</span>
                 </li>
                 {% endfor %}
@@ -261,7 +275,7 @@
               </button>
             </div>
 
-            <!-- Tab: Einstellungen -->
+            <!-- ═══ Tab: Einstellungen ═══ -->
             <div class="tab-pane" id="settings-{{ screen }}" role="tabpanel">
               <form action="/admin/{{ current_site }}/update/{{ screen }}" method="post">
                 <div class="mb-2">
@@ -328,7 +342,7 @@
               </form>
             </div>
 
-            <!-- Tab: Medien -->
+            <!-- ═══ Tab: Medien ═══ -->
             <div class="tab-pane" id="media-{{ screen }}" role="tabpanel">
               <h3>Medien hochladen</h3>
               <form action="/admin/{{ current_site }}/upload/{{ screen }}"
@@ -355,23 +369,24 @@
               </form>
             </div>
 
-          </div>
+          </div> <!-- /tab-content -->
 
-        </div>
-      </div>
+        </div> <!-- /card-body -->
+      </div> <!-- /card -->
       {% endfor %}
 
-    </div>
-  </div>
+    </div> <!-- /container -->
+  </div> <!-- /page-wrapper -->
 
   <!-- Footer -->
   {% include "_footer.html" %}
 
-</div>
+</div> <!-- /page -->
 
 <script>
 document.addEventListener("DOMContentLoaded", function () {
 
+  /* ─── SortableJS Drag & Drop initialisieren ─── */
   function initSortable(name) {
     const el = document.getElementById("playlist-" + name);
     if (!el || typeof Sortable === "undefined") return;
@@ -384,11 +399,13 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
-  // ✅ Normale Screens
+  // Für jeden Screen eine Sortable-Instanz
   {% for screen in screens.keys() %}
     initSortable("{{ screen }}");
   {% endfor %}
 
+  /* ─── Playlist-Reihenfolge speichern ───
+       Sendet die aktuelle Sortierung als JSON an /admin/<site>/playlist/<screen> */
   function savePlaylist(site, screen) {
     const items = document.querySelectorAll(
       "#playlist-" + screen + " li"
@@ -415,13 +432,13 @@ document.addEventListener("DOMContentLoaded", function () {
 
   window.savePlaylist = savePlaylist;
 
-  // Initialize tooltips
+  /* ─── Bootstrap Tooltips initialisieren ─── */
   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
   var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new bootstrap.Tooltip(tooltipTriggerEl);
   });
 
-  // Dark Mode Toggle
+  /* ─── Dark Mode Toggle (persistiert in localStorage) ─── */
   const themeToggle = document.getElementById("theme-toggle");
   const root = document.documentElement;