change logic

Author: dcxhzyl

BookingPage.css

@@ -187,88 +187,25 @@ th, td {
     margin-top: 10px;
 }
 
-/* Main container styles */
-#soundbox-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2%; /* Space between blocks */
-    justify-content: center;
-    padding: 2%;
-}
-
-/* Soundbox block styles */
-.soundbox-block {
-    width: 22%; /* Adjust block size (responsive) */
-    aspect-ratio: 3/4; /* Maintain consistent proportions */
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background-color: var(--block-bg-color, lightblue);
-    border: 2px solid #ddd;
-    border-radius: 10px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s, background-color 0.2s;
-}
-
-/* Hover effect for active blocks */
-.soundbox-block:hover {
-    transform: translateY(-5px);
-    background-color: #add8e6; /* Slightly darker blue */
-}
-
-/* Header styles */
-.block-header {
-    font-size: 1.2em;
-    font-weight: bold;
-    text-align: center;
-    padding: 5%;
-    background-color: var(--header-bg-color, #f4f4f4);
-    border-bottom: 1px solid #ddd;
-    border-radius: 10px 10px 0 0;
-}
-
-/* Body styles */
-.block-body {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1em;
-    font-weight: normal;
-    color: #333;
-}
-
-/* Footer styles */
-.block-footer {
-    padding: 5%;
-    text-align: center;
-    background-color: var(--footer-bg-color, #f9f9f9);
-    border-radius: 0 0 10px 10px;
-}
-
-/* Delete button */
 .delete-btn {
-    padding: 5px 10px;
-    font-size: 0.9em;
-    background-color: #ff4d4f;
+    background-color: #f44336;
     color: white;
     border: none;
     border-radius: 5px;
+    padding: 5px 10px;
     cursor: pointer;
-    transition: background-color 0.2s;
 }
 
 .delete-btn:hover {
-    background-color: #e63946;
+    background-color: #d32f2f;
 }
 
-/* No data block styles */
+/* No Data block styles */
 .no-data {
-    background-color: #efefef;
-    color: #aaa;
+    background-color: lightgrey;
     display: flex;
-    justify-content: center;
     align-items: center;
-    font-size: 1em;
-    border: 2px dashed #ccc;
+    justify-content: center;
+    color: #777;
+    font-size: 14px;
 }

registedSoundBox.js

@@ -13,11 +13,16 @@ const timetable = [
 ];
 
 const container = document.getElementById('soundbox-container');
+function processSoundboxData(data) {
+    return data
+        .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)) // Sort by time (descending)
+        .slice(0, 6); // Select only the latest 6 entries
+}
 
 function fetchData() {
     fetch('https://soundbox.v1an.xyz/getBookedSoundbox', { credentials: 'include' })
         .then(response => response.json())
-        .then(data => renderSoundboxes(data))
+        .then(data => renderSoundboxes(processSoundboxData(data)))
         .catch(error => console.error('Error fetching soundboxes:', error));
 }
 
@@ -105,6 +110,7 @@ function handleDelete(soundboxID, date, block) {
             fetchData(); // Refresh data after deletion
         })
         .catch(error => console.error('Error unbooking soundbox:', error));
+    location.reload();
 }
 
 // Fetch and render data on page load