Initial commit

templates/portal.html

@@ -0,0 +1,106 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="space-y-8 max-w-6xl mx-auto px-4">
+  <h2 class="text-3xl font-semibold mb-6">Welkom, {{ current_user.username }}!</h2>
+  <div class="overflow-x-auto rounded-lg border border-gray-300">
+    <table class="min-w-full divide-y divide-gray-200 bg-white">
+      <thead class="bg-gray-100">
+        <tr>
+          <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Naam</th>
+          <th class="px-6 py-3 text-sm font-semibold text-gray-700">URL</th>
+          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700">Bewerken</th>
+          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700">Weergeven</th>
+          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700">Verwijderen</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200">
+        {% for board in boards %}
+        <tr>
+          <td class="whitespace-nowrap px-6 py-4 text-gray-900">{{ board.name }}</td>
+          <td class="px-6 py-4 text-blue-600 break-words">
+            {% if board.church.is_active %}
+            <a href="{{ url_for('display_board_unique', unique_id=board.unique_id) }}" target="_blank" class="underline hover:text-blue-800 transition">display/{{ board.unique_id }}</a>
+            {% else %}
+            <em>Geen actieve licentie voor dit scherm</em>
+            {% endif %}
+          </td>
+          <td class="text-center px-6 py-4">
+            <a href="{{ url_for('edit_board', board_id=board.id) }}" class="bg-[#f7d91a] text-black text-xs px-2 py-1 rounded hover:bg-yellow-300 transition">Bewerken</a>
+          </td>
+          <td class="relative text-center px-6 py-4">
+            {% if board.church.is_active %}
+            <a href="{{ url_for('display_board_unique', unique_id=board.unique_id) }}" class="bg-black text-white text-xs px-2 py-1 rounded border border-black hover:bg-gray-800 transition show-iframe-preview" target="_blank" data-url="{{ url_for('display_board_unique', unique_id=board.unique_id) }}">Weergeven</a>
+            <div class="iframe-preview-popup" style="display:none; position:absolute; top:0; left:100%; margin-left:8px; width:400px; height:225px; border:1px solid #ccc; box-shadow:0 2px 8px rgba(0,0,0,0.2); z-index:50;">
+              <iframe src="" frameborder="0" style="width:100%; height:100%; transform-origin: top left; transform: scale(0.2);"></iframe>
+            </div>
+            {% endif %}
+          </td>
+          <td class="text-center px-6 py-4">
+            <form method="post" action="{{ url_for('delete_board', board_id=board.id) }}" style="display:inline;">
+              <button type="submit" class="bg-white text-black text-xs px-2 py-1 rounded border border-black hover:bg-gray-100 transition" onclick="return confirm('Weet je zeker dat je dit bord wilt verwijderen?');">Verwijderen</button>
+            </form>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  <a href="{{ url_for('add_board') }}" class="bg-[#f7d91a] text-black px-6 py-3 rounded-md font-semibold shadow hover:bg-yellow-300 inline-block mb-6 transition">Nieuw liturgiebord toevoegen</a>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const showIframeLinks = document.querySelectorAll('.show-iframe-preview');
+
+  // Create a single popup container to be reused
+  const popup = document.createElement('div');
+  popup.style.position = 'absolute';
+  popup.style.width = '1080px';
+  popup.style.height = '1920px';
+  popup.style.border = '1px solid #ccc';
+  popup.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
+  popup.style.zIndex = '9999';
+  popup.style.display = 'none';
+  popup.style.background = 'white';
+  popup.style.transformOrigin = 'top left';
+  popup.style.transform = 'scale(0.2)';
+
+  // iframe inside popup
+  const iframe = document.createElement('iframe');
+  iframe.frameBorder = 0;
+  iframe.style.width = '100%';
+  iframe.style.height = '100%';
+  iframe.style.transform = '';
+  iframe.style.transformOrigin = 'top left';
+  popup.appendChild(iframe);
+
+  document.body.appendChild(popup);
+
+  showIframeLinks.forEach(link => {
+    link.addEventListener('mouseenter', (event) => {
+      const url = link.getAttribute('data-url');
+      iframe.src = url;
+      const rect = link.getBoundingClientRect();
+
+      // Position popup to the right and vertically aligned with the link
+      popup.style.left = (window.scrollX + rect.right + 8) + 'px';
+      popup.style.top = (window.scrollY + rect.top) + 'px';
+      popup.style.display = 'block';
+    });
+
+    link.addEventListener('mouseleave', () => {
+      popup.style.display = 'none';
+      iframe.src = '';
+    });
+  });
+
+  // Also hide popup if mouse moves out of popup itself
+  popup.addEventListener('mouseleave', () => {
+    popup.style.display = 'none';
+    iframe.src = '';
+  });
+});
+</script>
+
+{% endblock %}