|
|
<!DOCTYPE html> |
|
|
<html lang="nl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Tankstation Planner</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.draggable { |
|
|
cursor: move; |
|
|
user-select: none; |
|
|
} |
|
|
.dropzone { |
|
|
min-height: 60px; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
.dropzone.highlight { |
|
|
background-color: rgba(147, 197, 253, 0.3); |
|
|
} |
|
|
.shift-card { |
|
|
transition: transform 0.2s, box-shadow 0.2s; |
|
|
} |
|
|
.shift-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
@media (max-width: 640px) { |
|
|
.mobile-scroll { |
|
|
overflow-x: auto; |
|
|
white-space: nowrap; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<header class="flex flex-col md:flex-row justify-between items-center mb-8"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<i class="fas fa-gas-pump text-blue-600 text-3xl mr-3"></i> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Tankstation Planner</h1> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="dashboardBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-chart-pie mr-2"></i>Dashboard |
|
|
</button> |
|
|
<button id="planningBtn" class="px-4 py-2 bg-white border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition"> |
|
|
<i class="fas fa-calendar-alt mr-2"></i>Planning |
|
|
</button> |
|
|
<button id="settingsBtn" class="px-4 py-2 bg-white border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-100 transition"> |
|
|
<i class="fas fa-cog mr-2"></i>Instellingen |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main> |
|
|
|
|
|
<div id="dashboardView" class="hidden bg-white rounded-lg shadow-md p-6 mb-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Dashboard Overzicht</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-md text-sm hover:bg-blue-200"> |
|
|
<i class="fas fa-file-pdf mr-1"></i>PDF |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-green-100 text-green-600 rounded-md text-sm hover:bg-green-200"> |
|
|
<i class="fas fa-file-excel mr-1"></i>Excel |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Totaal medewerkers</p> |
|
|
<p class="text-2xl font-bold" id="totalEmployees">12</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> |
|
|
<i class="fas fa-gas-pump text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Actieve tankstations</p> |
|
|
<p class="text-2xl font-bold" id="totalStations">8</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> |
|
|
<i class="fas fa-clock text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Uren deze week</p> |
|
|
<p class="text-2xl font-bold" id="totalHours">156</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Uren per medewerker</h3> |
|
|
<div class="h-64"> |
|
|
<canvas id="hoursChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Bezetting tankstations</h3> |
|
|
<div class="h-64"> |
|
|
<canvas id="occupancyChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Open shiften</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Datum</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tankstation</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shift</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actie</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ma 12 Jun</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Shell Rotterdam Centrum</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">08:00 - 16:00 (8u)</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900">Toewijzen</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Di 13 Jun</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">BP Amsterdam West</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14:00 - 22:00 (8u)</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900">Toewijzen</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="planningView"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Weekplanning</h2> |
|
|
<p class="text-gray-600">Week 24 - 12 t/m 18 juni 2023</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-white border border-gray-300 text-gray-600 rounded-md hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-left mr-1"></i>Vorige |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700"> |
|
|
Deze week |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-white border border-gray-300 text-gray-600 rounded-md hover:bg-gray-100"> |
|
|
Volgende<i class="fas fa-chevron-right ml-1"></i> |
|
|
</button> |
|
|
<button id="addShiftBtn" class="px-3 py-1 bg-green-600 text-white rounded-md hover:bg-green-700"> |
|
|
<i class="fas fa-plus mr-1"></i>Shift |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden bg-white rounded-lg shadow-sm p-3 mb-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-left text-gray-600"></i> |
|
|
</button> |
|
|
<span class="text-sm font-medium">12 - 18 juni</span> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-right text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-6"> |
|
|
<div class="mobile-scroll"> |
|
|
<div class="min-w-full"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-8 border-b border-gray-200"> |
|
|
<div class="hidden md:block md:col-span-1 p-3 bg-gray-50 font-medium text-gray-500"> |
|
|
Medewerkers |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 bg-blue-50 border-l border-gray-200 text-center font-medium text-blue-700"> |
|
|
Ma 12/6 |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 bg-blue-50 border-l border-gray-200 text-center font-medium text-blue-700"> |
|
|
Di 13/6 |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 bg-blue-50 border-l border-gray-200 text-center font-medium text-blue-700"> |
|
|
Wo 14/6 |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 bg-blue-50 border-l border-gray-200 text-center font-medium text-blue-700"> |
|
|
Do 15/6 |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 bg-blue-50 border-l border-gray-200 text-center font-medium text-blue-700"> |
|
|
Vr 16/6 |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 bg-blue-50 border-l border-gray-200 text-center font-medium text-blue-700"> |
|
|
Za 17/6 |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 bg-blue-50 border-l border-gray-200 text-center font-medium text-blue-700"> |
|
|
Zo 18/6 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="planningGrid" class="divide-y divide-gray-200"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-8"> |
|
|
<div class="md:col-span-1 p-3 bg-gray-50 border-r border-gray-200 flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium mr-3">JD</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">Jan de Vries</p> |
|
|
<p class="text-xs text-gray-500">32u deze week</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="ma"> |
|
|
<div class="draggable shift-card bg-green-100 border border-green-200 rounded p-2 mb-2" data-employee="1" data-shift="1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-green-800">Shell Rotterdam</p> |
|
|
<p class="text-xs text-green-600">08:00 - 16:00</p> |
|
|
</div> |
|
|
<button class="text-green-600 hover:text-green-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="di"></div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="wo"> |
|
|
<div class="draggable shift-card bg-green-100 border border-green-200 rounded p-2 mb-2" data-employee="1" data-shift="2"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-green-800">BP Amsterdam</p> |
|
|
<p class="text-xs text-green-600">14:00 - 22:00</p> |
|
|
</div> |
|
|
<button class="text-green-600 hover:text-green-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="do"></div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="vr"></div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="za"></div> |
|
|
<div class="md:col-span-1 p-3 dropzone" data-day="zo"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-8"> |
|
|
<div class="md:col-span-1 p-3 bg-gray-50 border-r border-gray-200 flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-medium mr-3">MS</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">Marie Stevens</p> |
|
|
<p class="text-xs text-gray-500">24u deze week</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="ma"></div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="di"> |
|
|
<div class="draggable shift-card bg-purple-100 border border-purple-200 rounded p-2 mb-2" data-employee="2" data-shift="3"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-purple-800">Esso Den Haag</p> |
|
|
<p class="text-xs text-purple-600">09:00 - 17:00</p> |
|
|
</div> |
|
|
<button class="text-purple-600 hover:text-purple-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="wo"></div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="do"> |
|
|
<div class="draggable shift-card bg-purple-100 border border-purple-200 rounded p-2 mb-2" data-employee="2" data-shift="4"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-purple-800">Shell Utrecht</p> |
|
|
<p class="text-xs text-purple-600">10:00 - 18:00</p> |
|
|
</div> |
|
|
<button class="text-purple-600 hover:text-purple-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="vr"></div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="za"></div> |
|
|
<div class="md:col-span-1 p-3 dropzone" data-day="zo"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-8"> |
|
|
<div class="md:col-span-1 p-3 bg-gray-50 border-r border-gray-200 flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 font-medium mr-3">PV</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">Peter van Dijk</p> |
|
|
<p class="text-xs text-gray-500">40u deze week</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="ma"> |
|
|
<div class="draggable shift-card bg-yellow-100 border border-yellow-200 rounded p-2 mb-2" data-employee="3" data-shift="5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-yellow-800">Total Eindhoven</p> |
|
|
<p class="text-xs text-yellow-600">07:00 - 15:00</p> |
|
|
</div> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="di"> |
|
|
<div class="draggable shift-card bg-yellow-100 border border-yellow-200 rounded p-2 mb-2" data-employee="3" data-shift="6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-yellow-800">BP Rotterdam</p> |
|
|
<p class="text-xs text-yellow-600">15:00 - 23:00</p> |
|
|
</div> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="wo"> |
|
|
<div class="draggable shift-card bg-yellow-100 border border-yellow-200 rounded p-2 mb-2" data-employee="3" data-shift="7"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-yellow-800">Shell Amsterdam</p> |
|
|
<p class="text-xs text-yellow-600">08:00 - 16:00</p> |
|
|
</div> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="do"> |
|
|
<div class="draggable shift-card bg-yellow-100 border border-yellow-200 rounded p-2 mb-2" data-employee="3" data-shift="8"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-yellow-800">Esso Utrecht</p> |
|
|
<p class="text-xs text-yellow-600">12:00 - 20:00</p> |
|
|
</div> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="vr"> |
|
|
<div class="draggable shift-card bg-yellow-100 border border-yellow-200 rounded p-2 mb-2" data-employee="3" data-shift="9"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="font-medium text-yellow-800">BP Den Haag</p> |
|
|
<p class="text-xs text-yellow-600">09:00 - 17:00</p> |
|
|
</div> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 text-xs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-1 p-3 border-r border-gray-200 dropzone" data-day="za"></div> |
|
|
<div class="md:col-span-1 p-3 dropzone" data-day="zo"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-4 mb-6"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Beschikbare medewerkers</h3> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"> |
|
|
<div class="draggable bg-gray-100 border border-gray-200 rounded p-3 flex items-center" data-employee="4"> |
|
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-600 font-medium mr-3">AK</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">Anna Klaassen</p> |
|
|
<p class="text-xs text-gray-500">Niet ingepland</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="draggable bg-gray-100 border border-gray-200 rounded p-3 flex items-center" data-employee="5"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-medium mr-3">TB</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">Thomas Bakker</p> |
|
|
<p class="text-xs text-gray-500">Niet ingepland</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="draggable bg-gray-100 border border-gray-200 rounded p-3 flex items-center" data-employee="6"> |
|
|
<div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 font-medium mr-3">LS</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">Lisa Smit</p> |
|
|
<p class="text-xs text-gray-500">Niet ingepland</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="draggable bg-gray-100 border border-gray-200 rounded p-3 flex items-center" data-employee="7"> |
|
|
<div class="w-8 h-8 rounded-full bg-teal-100 flex items-center justify-center text-teal-600 font-medium mr-3">MV</div> |
|
|
<div> |
|
|
<p class="font-medium text-gray-800">Mark Visser</p> |
|
|
<p class="text-xs text-gray-500">Niet ingepland</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settingsView" class="hidden bg-white rounded-lg shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-6">Instellingen</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<h3 class="font-medium text-gray-700 mb-3 flex justify-between items-center"> |
|
|
<span>Tankstations</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-normal"> |
|
|
<i class="fas fa-plus mr-1"></i>Toevoegen |
|
|
</button> |
|
|
</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between items-center bg-white p-2 rounded border border-gray-200"> |
|
|
<div> |
|
|
<p class="font-medium">Shell Rotterdam Centrum</p> |
|
|
<p class="text-xs text-gray-500">Kruisplein 45, Rotterdam</p> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-between items-center bg-white p-2 rounded border border-gray-200"> |
|
|
<div> |
|
|
<p class="font-medium">BP Amsterdam West</p> |
|
|
<p class="text-xs text-gray-500">Jan van Galenstraat 100, Amsterdam</p> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-between items-center bg-white p-2 rounded border border-gray-200"> |
|
|
<div> |
|
|
<p class="font-medium">Esso Den Haag Centrum</p> |
|
|
<p class="text-xs text-gray-500">Koninginnegracht 15, Den Haag</p> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<h3 class="font-medium text-gray-700 mb-3 flex justify-between items-center"> |
|
|
<span>Medewerkers</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-normal"> |
|
|
<i class="fas fa-plus mr-1"></i>Toevoegen |
|
|
</button> |
|
|
</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between items-center bg-white p-2 rounded border border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium mr-2">JD</div> |
|
|
<div> |
|
|
<p class="font-medium">Jan de Vries</p> |
|
|
<p class="text-xs text-gray-500">32u/week</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-between items-center bg-white p-2 rounded border border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-medium mr-2">MS</div> |
|
|
<div> |
|
|
<p class="font-medium">Marie Stevens</p> |
|
|
<p class="text-xs text-gray-500">24u/week</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-between items-center bg-white p-2 rounded border border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 font-medium mr-2">PV</div> |
|
|
<div> |
|
|
<p class="font-medium">Peter van Dijk</p> |
|
|
<p class="text-xs text-gray-500">40u/week</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-8"> |
|
|
<h3 class="font-medium text-gray-700 mb-3 flex justify-between items-center"> |
|
|
<span>Shift sjablonen</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-normal"> |
|
|
<i class="fas fa-plus mr-1"></i>Toevoegen |
|
|
</button> |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"> |
|
|
<div class="bg-white p-3 rounded border border-gray-200"> |
|
|
<p class="font-medium">Ochtendshift</p> |
|
|
<p class="text-sm text-gray-600">07:00 - 15:00</p> |
|
|
</div> |
|
|
<div class="bg-white p-3 rounded border border-gray-200"> |
|
|
<p class="font-medium">Middagshift</p> |
|
|
<p class="text-sm text-gray-600">15:00 - 23:00</p> |
|
|
</div> |
|
|
<div class="bg-white p-3 rounded border border-gray-200"> |
|
|
<p class="font-medium">Volle dag</p> |
|
|
<p class="text-sm text-gray-600">08:00 - 17:00</p> |
|
|
</div> |
|
|
<div class="bg-white p-3 rounded border border-gray-200"> |
|
|
<p class="font-medium">Weekend</p> |
|
|
<p class="text-sm text-gray-600">09:00 - 18:00</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Exporteer opties</h3> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center"> |
|
|
<i class="fas fa-file-pdf mr-2"></i> PDF Export |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center"> |
|
|
<i class="fas fa-file-excel mr-2"></i> Excel Export |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 flex items-center"> |
|
|
<i class="fas fa-file-csv mr-2"></i> CSV Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="addShiftModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4"> |
|
|
<div class="flex justify-between items-center border-b border-gray-200 p-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Nieuwe shift toevoegen</h3> |
|
|
<button id="closeModalBtn" class="text-gray-400 hover:text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="stationSelect" class="block text-sm font-medium text-gray-700 mb-1">Tankstation</label> |
|
|
<select id="stationSelect" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="">Selecteer tankstation</option> |
|
|
<option value="1">Shell Rotterdam Centrum</option> |
|
|
<option value="2">BP Amsterdam West</option> |
|
|
<option value="3">Esso Den Haag Centrum</option> |
|
|
<option value="4">Shell Utrecht</option> |
|
|
<option value="5">BP Rotterdam</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="employeeSelect" class="block text-sm font-medium text-gray-700 mb-1">Medewerker</label> |
|
|
<select id="employeeSelect" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="">Selecteer medewerker</option> |
|
|
<option value="1">Jan de Vries</option> |
|
|
<option value="2">Marie Stevens</option> |
|
|
<option value="3">Peter van Dijk</option> |
|
|
<option value="4">Anna Klaassen</option> |
|
|
<option value="5">Thomas Bakker</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="shiftDate" class="block text-sm font-medium text-gray-700 mb-1">Datum</label> |
|
|
<input type="date" id="shiftDate" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="shiftTemplate" class="block text-sm font-medium text-gray-700 mb-1">Shift sjabloon</label> |
|
|
<select id="shiftTemplate" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="">Aangepast</option> |
|
|
<option value="1">Ochtendshift (07:00-15:00)</option> |
|
|
<option value="2">Middagshift (15:00-23:00)</option> |
|
|
<option value="3">Volle dag (08:00-17:00)</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label for="startTime" class="block text-sm font-medium text-gray-700 mb-1">Starttijd</label> |
|
|
<input type="time" id="startTime" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="endTime" class="block text-sm font-medium text-gray-700 mb-1">Eindtijd</label> |
|
|
<input type="time" id="endTime" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button type="button" id="cancelShiftBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> |
|
|
Annuleren |
|
|
</button> |
|
|
<button type="button" id="saveShiftBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> |
|
|
Opslaan |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
document.getElementById('dashboardBtn').addEventListener('click', function() { |
|
|
document.getElementById('dashboardView').classList.remove('hidden'); |
|
|
document.getElementById('planningView').classList.add('hidden'); |
|
|
document.getElementById('settingsView').classList.add('hidden'); |
|
|
this.classList.remove('bg-white', 'border', 'border-blue-600', 'text-blue-600'); |
|
|
this.classList.add('bg-blue-600', 'text-white'); |
|
|
document.getElementById('planningBtn').classList.remove('bg-blue-600', 'text-white'); |
|
|
document.getElementById('planningBtn').classList.add('bg-white', 'border', 'border-blue-600', 'text-blue-600'); |
|
|
document.getElementById('settingsBtn').classList.remove('bg-blue-600', 'text-white'); |
|
|
document.getElementById('settingsBtn').classList.add('bg-white', 'border', 'border-gray-300', 'text-gray-600'); |
|
|
|
|
|
|
|
|
if (!window.chartsInitialized) { |
|
|
initCharts(); |
|
|
window.chartsInitialized = true; |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('planningBtn').addEventListener('click', function() { |
|
|
document.getElementById('dashboardView').classList.add('hidden'); |
|
|
document.getElementById('planningView').classList.remove('hidden'); |
|
|
document.getElementById('settingsView').classList.add('hidden'); |
|
|
this.classList.remove('bg-white', 'border', 'border-blue-600', 'text-blue-600'); |
|
|
this.classList.add('bg-blue-600', 'text-white'); |
|
|
document.getElementById('dashboardBtn').classList.remove('bg-blue-600', 'text-white'); |
|
|
document.getElementById('dashboardBtn').classList.add('bg-white', 'border', 'border-blue-600', 'text-blue-600'); |
|
|
document.getElementById('settingsBtn').classList.remove('bg-blue-600', 'text-white'); |
|
|
document.getElementById('settingsBtn').classList.add('bg-white', 'border', 'border-gray-300', 'text-gray-600'); |
|
|
}); |
|
|
|
|
|
document.getElementById('settingsBtn').addEventListener('click', function() { |
|
|
document.getElementById('dashboardView').classList.add('hidden'); |
|
|
document.getElementById('planningView').classList.add('hidden'); |
|
|
document.getElementById('settingsView').classList.remove('hidden'); |
|
|
this.classList.remove('bg-white', 'border', 'border-gray-300', 'text-gray-600'); |
|
|
this.classList.add('bg-blue-600', 'text-white'); |
|
|
document.getElementById('dashboardBtn').classList.remove('bg-blue-600', 'text-white'); |
|
|
document.getElementById('dashboardBtn').classList.add('bg-white', 'border', 'border-blue-600', 'text-blue-600'); |
|
|
document.getElementById('planningBtn').classList.remove('bg-blue-600', 'text-white'); |
|
|
document.getElementById('planningBtn').classList.add('bg-white', 'border', 'border-gray-300', 'text-gray-600'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('addShiftBtn').addEventListener('click', function() { |
|
|
document.getElementById('addShiftModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeModalBtn').addEventListener('click', function() { |
|
|
document.getElementById('addShiftModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancelShiftBtn').addEventListener('click', function() { |
|
|
document.getElementById('addShiftModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('saveShiftBtn').addEventListener('click', function() { |
|
|
|
|
|
alert('Shift opgeslagen!'); |
|
|
document.getElementById('addShiftModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('shiftTemplate').addEventListener('change', function() { |
|
|
const template = this.value; |
|
|
if (template === '1') { |
|
|
document.getElementById('startTime').value = '07:00'; |
|
|
document.getElementById('endTime').value = '15:00'; |
|
|
} else if (template === '2') { |
|
|
document.getElementById('startTime').value = '15:00'; |
|
|
document.getElementById('endTime').value = '23:00'; |
|
|
} else if (template === '3') { |
|
|
document.getElementById('startTime').value = '08:00'; |
|
|
document.getElementById('endTime').value = '17:00'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function setupDragAndDrop() { |
|
|
const draggables = document.querySelectorAll('.draggable'); |
|
|
const dropzones = document.querySelectorAll('.dropzone'); |
|
|
|
|
|
draggables.forEach(draggable => { |
|
|
draggable.addEventListener('dragstart', () => { |
|
|
draggable.classList.add('opacity-50'); |
|
|
}); |
|
|
|
|
|
draggable.addEventListener('dragend', () => { |
|
|
draggable.classList.remove('opacity-50'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
dropzones.forEach(dropzone => { |
|
|
dropzone.addEventListener('dragover', e => { |
|
|
e.preventDefault(); |
|
|
dropzone.classList.add('highlight'); |
|
|
}); |
|
|
|
|
|
dropzone.addEventListener('dragleave', () => { |
|
|
dropzone.classList.remove('highlight'); |
|
|
}); |
|
|
|
|
|
dropzone.addEventListener('drop', e => { |
|
|
e.preventDefault(); |
|
|
dropzone.classList.remove('highlight'); |
|
|
|
|
|
const draggableId = e.dataTransfer.getData('text/plain'); |
|
|
const draggable = document.getElementById(draggableId); |
|
|
|
|
|
if (draggable) { |
|
|
dropzone.appendChild(draggable); |
|
|
|
|
|
|
|
|
checkForConflicts(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
setupDragAndDrop(); |
|
|
|
|
|
|
|
|
function checkForConflicts() { |
|
|
|
|
|
console.log('Checking for conflicts...'); |
|
|
} |
|
|
|
|
|
|
|
|
function initCharts() { |
|
|
|
|
|
const hoursCtx = document.getElementById('hoursChart').getContext('2d'); |
|
|
const hoursChart = new Chart(hoursCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Jan de Vries', 'Marie Stevens', 'Peter van Dijk', 'Anna Klaassen', 'Thomas Bakker'], |
|
|
datasets: [{ |
|
|
label: 'Geplande uren deze week', |
|
|
data: [32, 24, 40, 0, 0], |
|
|
backgroundColor: [ |
|
|
'rgba(59, 130, 246, 0.7)', |
|
|
'rgba(168, 85, 247, 0.7)', |
|
|
'rgba(234, 179, 8, 0.7)', |
|
|
'rgba(239, 68, 68, 0.7)', |
|
|
'rgba(99, 102, 241, 0.7)' |
|
|
], |
|
|
borderColor: [ |
|
|
'rgba(59, 130, 246, 1)', |
|
|
'rgba(168, 85, 247, 1)', |
|
|
'rgba(234, 179, 8, 1)', |
|
|
'rgba(239, 68, 68, 1)', |
|
|
'rgba(99, 102, 241, 1)' |
|
|
], |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Aantal uren' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const occupancyCtx = document.getElementById('occupancyChart').getContext('2d'); |
|
|
const occupancyChart = new Chart(occupancyCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['Bezet', 'Open'], |
|
|
datasets: [{ |
|
|
data: [85, 15], |
|
|
backgroundColor: [ |
|
|
'rgba(16, 185, 129, 0.7)', |
|
|
'rgba(209, 213, 219, 0.7)' |
|
|
], |
|
|
borderColor: [ |
|
|
'rgba(16, 185, 129, 1)', |
|
|
'rgba(209, 213, 219, 1)' |
|
|
], |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'bottom', |
|
|
}, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Bezetting tankstations' |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.shift-card button').forEach(button => { |
|
|
button.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
if (confirm('Weet u zeker dat u deze shift wilt verwijderen?')) { |
|
|
this.closest('.shift-card').remove(); |
|
|
checkForConflicts(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('shiftDate').valueAsDate = new Date(); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jitware/planner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
