107 lines
4.8 KiB
HTML
107 lines
4.8 KiB
HTML
{% 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 %}
|