day of hard work with xkirsch #2

web/static/css/style.css

@@ -4,10 +4,6 @@
   box-sizing: border-box;
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
 /* Body styling */
 body {
   font-family: Arial, sans-serif;
@@ -75,17 +71,7 @@ footer {
   right: 0;
 }
 
-.navbar-users-table {
-  display: flex;
-  justify-content: space-around;
-  background-color: #444;
-  padding: 10px;
-  margin-top: 1.5em;
-  border-top-left-radius: 0.5em;
-  border-top-right-radius: 0.5em;
-}
-
-.navbar-orders-table {
+.table-header {
   display: flex;
   justify-content: space-around;
   background-color: #444;
@@ -564,3 +550,72 @@ option {
   color: white;
   padding: 10px;
 }
+
+/* Graph container styling */
+.graph-container {
+  background-color: #222;
+  border: 1px solid #555;
+  border-radius: 1em;
+  padding: 20px;
+  margin-top: 20px;
+  color: white;
+  text-align: center;
+}
+
+/* Canvas styling */
+canvas {
+  width: 100% !important; /* Make the canvas span the whole container */
+  height: auto;
+  margin: 0 auto;
+  background-color: #333; /* Make the background of the graph darker */
+}
+
+/* Statistics page styling */
+.statistics-container {
+  background-color: #222;
+  border: 1px solid #555;
+  border-radius: 1em;
+  padding: 20px;
+  margin-top: 20px;
+  color: white;
+  text-align: center;
+}
+
+.statistics-header {
+  margin-bottom: 20px;
+}
+
+.statistics-form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.statistics-form label {
+  margin: 0 10px;
+}
+
+.statistics-form input {
+  padding: 10px;
+  margin: 0 10px;
+  border: none;
+  border-radius: 5px;
+  background-color: #555;
+  color: white;
+}
+
+.statistics-form button {
+  background-color: #808080;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.statistics-form button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}

web/static/scripts/reservation.js

@@ -1,6 +1,6 @@
 function openReservationForm() {
   const now = new Date();
-  const formattedDate = now.toLocaleDateString('cs-CZ', { day: '2-digit', month: '2-digit', year: 'numeric' });
+  const formattedDate = now.toISOString().split('T')[0]; // Format date as YYYY-MM-DD
   document.getElementById('date').value = formattedDate;
   document.getElementById('reservationForm').style.display = 'block';
 }

web/static/scripts/statistics.js

@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const ctx = document.getElementById('repairsChart').getContext('2d');
+  const repairsData = JSON.parse(document.getElementById('repairsData').textContent);
+  const labels = repairsData.map(data => data.employee);
+  const data = repairsData.map(data => data.count);
+
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: labels,
+      datasets: [{
+        label: 'Počet Oprav',
+        data: data,
+        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+        borderColor: 'rgba(255, 99, 132, 1)',
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+});
+
+function fetchRepairsByDate() {
+  const startDate = document.getElementById('startDate').value;
+  const endDate = document.getElementById('endDate').value;
+
+  fetch(`/repairs_by_date?start=${startDate}&end=${endDate}`)
+    .then(response => response.json())
+    .then(data => {
+      const ctx = document.getElementById('timeRepairsChart').getContext('2d');
+      const labels = data.map(item => item.date);
+      const counts = data.map(item => item.count);
+
+      new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: labels,
+          datasets: [{
+            label: 'Počet Oprav',
+            data: counts,
+            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+            borderColor: 'rgba(54, 162, 235, 1)',
+            borderWidth: 1
+          }]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+    });
+}