mirror of
https://github.com/Alvin-Zilverstand/narrow_casting_system.git
synced 2026-03-06 02:57:17 +01:00
371 lines
16 KiB
HTML
371 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SnowWorld - Narrowcasting Admin Dashboard</title>
|
|
<link rel="icon" type="image/svg+xml" href="http://localhost:3000/favicon.svg">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<i class="fas fa-snowflake"></i>
|
|
<h1>SnowWorld Narrowcasting</h1>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="refreshBtn" class="btn btn-secondary">
|
|
<i class="fas fa-sync-alt"></i> Verversen
|
|
</button>
|
|
<div class="status-indicator">
|
|
<span id="connectionStatus" class="status-dot"></span>
|
|
<span id="connectionText">Verbonden</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav-tabs">
|
|
<button class="nav-tab active" data-tab="content">
|
|
<i class="fas fa-photo-video"></i> Content Beheer
|
|
</button>
|
|
<button class="nav-tab" data-tab="schedule">
|
|
<i class="fas fa-calendar-alt"></i> Planning
|
|
</button>
|
|
<button class="nav-tab" data-tab="zones">
|
|
<i class="fas fa-map-marked-alt"></i> Zones
|
|
</button>
|
|
<button class="nav-tab" data-tab="analytics">
|
|
<i class="fas fa-chart-bar"></i> Analytics
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Content Management Tab -->
|
|
<div id="content-tab" class="tab-content active">
|
|
<div class="section-header">
|
|
<h2>Content Beheer</h2>
|
|
<button id="addContentBtn" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> Content Toevoegen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Filter Controls -->
|
|
<div class="filter-controls">
|
|
<select id="zoneFilter" class="form-select">
|
|
<option value="">Alle Zones</option>
|
|
</select>
|
|
<select id="typeFilter" class="form-select">
|
|
<option value="">Alle Types</option>
|
|
<option value="image">Afbeeldingen</option>
|
|
<option value="video">Video's</option>
|
|
<option value="livestream">Livestreams</option>
|
|
<option value="text">Tekst</option>
|
|
</select>
|
|
<button id="applyFilters" class="btn btn-secondary">Toepassen</button>
|
|
</div>
|
|
|
|
<!-- Content Grid -->
|
|
<div id="contentGrid" class="content-grid">
|
|
<!-- Content items will be dynamically loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schedule Tab -->
|
|
<div id="schedule-tab" class="tab-content">
|
|
<div class="section-header">
|
|
<h2>Content Planning</h2>
|
|
<button id="addScheduleBtn" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> Planning Toevoegen
|
|
</button>
|
|
</div>
|
|
|
|
<div class="schedule-container">
|
|
<div class="zone-selector">
|
|
<h3>Kies Zone:</h3>
|
|
<select id="scheduleZoneSelect" class="form-select">
|
|
<!-- Zones will be loaded dynamically -->
|
|
</select>
|
|
</div>
|
|
|
|
<div id="scheduleTimeline" class="schedule-timeline">
|
|
<!-- Schedule items will be displayed here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zones Tab -->
|
|
<div id="zones-tab" class="tab-content">
|
|
<div class="section-header">
|
|
<h2>Zone Overzicht</h2>
|
|
<button id="addZoneBtn" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> Zone Toevoegen
|
|
</button>
|
|
</div>
|
|
|
|
<div id="zonesGrid" class="zones-grid">
|
|
<!-- Zone information will be displayed here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analytics Tab -->
|
|
<div id="analytics-tab" class="tab-content">
|
|
<div class="section-header">
|
|
<h2>Analytics Dashboard</h2>
|
|
</div>
|
|
|
|
<div class="analytics-grid">
|
|
<div class="analytics-card">
|
|
<h3>Content Statistieken</h3>
|
|
<div id="contentStats" class="stats-container">
|
|
<!-- Content stats will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analytics-card">
|
|
<h3>Planning Statistieken</h3>
|
|
<div id="scheduleStats" class="stats-container">
|
|
<!-- Schedule stats will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analytics-card">
|
|
<h3>Zone Overzicht</h3>
|
|
<div id="zoneStats" class="stats-container">
|
|
<!-- Zone stats will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Content Upload Modal -->
|
|
<div id="contentModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Content Toevoegen</h3>
|
|
<button class="close-btn">×</button>
|
|
</div>
|
|
<form id="contentUploadForm" class="modal-body">
|
|
<div class="form-group">
|
|
<label for="contentTitle">Titel:</label>
|
|
<input type="text" id="contentTitle" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contentType">Type:</label>
|
|
<select id="contentType" class="form-control" required>
|
|
<option value="">Kies type...</option>
|
|
<option value="image">Afbeelding</option>
|
|
<option value="video">Video</option>
|
|
<option value="livestream">Livestream</option>
|
|
<option value="text">Tekst</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contentZone">Zone:</label>
|
|
<select id="contentZone" class="form-control" required>
|
|
<!-- Zones will be loaded dynamically -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="contentDuration">Weergave Duur (seconden):</label>
|
|
<input type="number" id="contentDuration" class="form-control" min="5" max="300" value="10">
|
|
</div>
|
|
|
|
<!-- File upload field (shown for image/video) -->
|
|
<div id="fileUploadGroup" class="form-group">
|
|
<label for="contentFile">Bestand:</label>
|
|
<input type="file" id="contentFile" class="form-control" accept="image/*,video/*">
|
|
<div id="fileInfo" class="file-info"></div>
|
|
</div>
|
|
|
|
<!-- Text content field (shown for text type) -->
|
|
<div id="textContentGroup" class="form-group" style="display: none;">
|
|
<label for="textContent">Tekst:</label>
|
|
<textarea id="textContent" class="form-control" rows="6" placeholder="Voer hier uw tekst in..."></textarea>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
|
|
<button type="submit" class="btn btn-primary">Uploaden</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schedule Modal -->
|
|
<div id="scheduleModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Planning Toevoegen</h3>
|
|
<button class="close-btn">×</button>
|
|
</div>
|
|
<form id="scheduleForm" class="modal-body">
|
|
<div class="form-group">
|
|
<label for="scheduleContent">Content:</label>
|
|
<select id="scheduleContent" class="form-control" required>
|
|
<!-- Available content will be loaded dynamically -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="scheduleZone">Zone:</label>
|
|
<select id="scheduleZone" class="form-control" required>
|
|
<!-- Zones will be loaded dynamically -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="scheduleStart">Start Tijd:</label>
|
|
<input type="datetime-local" id="scheduleStart" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="scheduleEnd">Eind Tijd:</label>
|
|
<input type="datetime-local" id="scheduleEnd" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="schedulePriority">Prioriteit:</label>
|
|
<select id="schedulePriority" class="form-control">
|
|
<option value="1">Laag</option>
|
|
<option value="2">Normaal</option>
|
|
<option value="3">Hoog</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeScheduleModal()">Annuleren</button>
|
|
<button type="submit" class="btn btn-primary">Plannen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zone Modal -->
|
|
<div id="zoneModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Zone Toevoegen</h3>
|
|
<button class="close-btn">×</button>
|
|
</div>
|
|
<form id="zoneForm" class="modal-body">
|
|
<div class="form-group">
|
|
<label for="zoneId">Zone ID (uniek):</label>
|
|
<input type="text" id="zoneId" class="form-control" placeholder="bijv. nieuwe-zone" required>
|
|
<small>Alleen kleine letters, cijfers en streepjes. Gebruikt in URLs.</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="zoneName">Zone Naam:</label>
|
|
<input type="text" id="zoneName" class="form-control" placeholder="bijv. Nieuwe Zone" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="zoneDescription">Beschrijving:</label>
|
|
<textarea id="zoneDescription" class="form-control" rows="3" placeholder="Optionele beschrijving van de zone..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="zoneDisplayOrder">Weergave Volgorde:</label>
|
|
<input type="number" id="zoneDisplayOrder" class="form-control" min="0" value="0">
|
|
<small>Lager nummer = eerder in de lijst</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Zone Icoon:</label>
|
|
<input type="hidden" id="zoneIcon" value="fa-map-marker-alt">
|
|
<div class="icon-selector">
|
|
<div class="icon-option selected" data-icon="fa-map-marker-alt" title="Standaard">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-door-open" title="Ingang">
|
|
<i class="fas fa-door-open"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-utensils" title="Restaurant">
|
|
<i class="fas fa-utensils"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-skiing" title="Ski">
|
|
<i class="fas fa-skiing"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-snowflake" title="Sneeuw">
|
|
<i class="fas fa-snowflake"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-locker" title="Kluisjes">
|
|
<i class="fas fa-locker"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-shopping-bag" title="Winkel">
|
|
<i class="fas fa-shopping-bag"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-globe" title="Wereld">
|
|
<i class="fas fa-globe"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-home" title="Thuis">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-building" title="Gebouw">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-mountain" title="Berg">
|
|
<i class="fas fa-mountain"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-tree" title="Boom">
|
|
<i class="fas fa-tree"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-sun" title="Zon">
|
|
<i class="fas fa-sun"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-moon" title="Maan">
|
|
<i class="fas fa-moon"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-star" title="Ster">
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-heart" title="Hart">
|
|
<i class="fas fa-heart"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-info-circle" title="Info">
|
|
<i class="fas fa-info-circle"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-exclamation-circle" title="Waarschuwing">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-check-circle" title="Goed">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<div class="icon-option" data-icon="fa-users" title="Mensen">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeZoneModal()">Annuleren</button>
|
|
<button type="submit" class="btn btn-primary">Toevoegen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notifications -->
|
|
<div id="toastContainer" class="toast-container">
|
|
<!-- Toast notifications will appear here -->
|
|
</div>
|
|
|
|
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/websocket.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |