<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Sidebar Navigation</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<style>
body {
display: flex;
}
#sidebar {
width: 250px;
}
#content {
flex-grow: 1;
padding: 20px;
}
.schedule-table {
width: 100%;
table-layout: fixed;
}
.schedule-table th, .schedule-table td {
text-align: center;
vertical-align: middle;
border: 1px solid #dee2e6;
}
.schedule-table th {
background-color: #f8f9fa;
}
.schedule-table td {
height: 50px; /* Adjust the height as needed */
}
</style>
</head>
<body>
<!-- Left Sidebar -->
<nav id="sidebar" class="bg-light">
<ul class="list-unstyled">
<li><a href="#" class="nav-link" data-target="#home">Home</a></li>
<li><a href="#" class="nav-link" data-target="#about">About</a></li>
<li><a href="#" class="nav-link" data-target="#contact">Contact</a></li>
</ul>
</nav>
<!-- Content Area -->
<div id="content">
<div id="home" class="content-section">
<div class="container mt-5">
<h1>Weekly Schedule</h1>
<table class="table table-bordered schedule-table">
<thead>
<tr>
<th>时间</th>
<th id="header-0"></th>
<th id="header-1"></th>
<th id="header-2"></th>
<th id="header-3"></th>
<th id="header-4"></th>
<th id="header-5"></th>
<th id="header-6"></th>
</tr>
</thead>
<tbody id="schedule-body">
<!-- Time slots will be dynamically generated here -->
</tbody>
</table>
</div>
</div>
<div id="about" class="content-section" style="display: none;">
<h1>About Page</h1>
<p>This is the About page.</p>
<p>Here you can provide information about your website or organization.</p>
<p>Aliquam erat volutpat. Curabitur a magna vel est facilisis tempor.</p>
</div>
<div id="contact" class="content-section" style="display: none;">
<h1>Contact Page</h1>
<p>Feel free to contact us.</p>
<p>You can put your contact information here.</p>
<p>Phasellus non ligula aliquet, fermentum leo non, mollis ligula.</p>
</div>
</div>
<script>
$(document).ready(function() {
$('.nav-link').click(function(e) {
e.preventDefault();
$('.content-section').hide();
$($(this).data('target')).show();
});
function getNext7Days() {
const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const dates = [];
const currentDate = new Date();
for (let i = 0; i < 7; i++) {
const date = new Date(currentDate);
date.setDate(currentDate.getDate() + i);
const day = daysOfWeek[date.getDay()];
const formattedDate = `${day} ${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
dates.push({ formattedDate, fullDate: date });
}
return dates;
}
// Populate schedule header with dates
const dates = getNext7Days();
dates.forEach((date, index) => {
$(`#header-${index}`).text(date.formattedDate);
});
// Function to create time slots from 08:00 to 21:00
function createTimeSlots() {
const timeSlots = [];
for (let hour = 8; hour <= 21; hour++) {
const time = ('0' + hour).slice(-2) + ':00';
timeSlots.push(time);
}
return timeSlots;
}
// Populate schedule body with time slots
const timeSlots = createTimeSlots();
timeSlots.forEach(time => {
const row = $('<tr>');
row.append(`<th>${time}</th>`);
for (let day = 0; day < 7; day++) {
row.append(`<td id="${day}-${time}"></td>`);
}
$('#schedule-body').append(row);
});
// Fill the schedule with booked slots from backend
function fetchBookedSlots() {
$.ajax({
url: 'http://localhost:9090/api/booked-slots', // Replace with your actual endpoint
method: 'GET',
success: function(bookedSlots) {
bookedSlots.forEach(slot => {
const slotDate = new Date(slot.date);
const dayIndex = dates.findIndex(date =>
date.fullDate.getDate() === slotDate.getDate() &&
date.fullDate.getMonth() === slotDate.getMonth() &&
date.fullDate.getFullYear() === slotDate.getFullYear()
);
const startHour = parseInt(slot.startTime.split(':')[0]);
const endHour = parseInt(slot.endTime.split(':')[0]);
for (let hour = startHour; hour < endHour; hour++) {
const cellId = `#${dayIndex}-${('0' + hour).slice(-2)}:00`;
$(cellId).text(slot.event);
}
});
}
});
}
fetchBookedSlots();
// // Simulate AJAX call to backend to get booked slots
// $.ajax({
// url: '/api/booked-slots', // Replace with your actual endpoint
// method: 'GET',
// success: function(bookedSlots) {
// bookedSlots.forEach(slot => {
// const startHour = parseInt(slot.startTime.split(':')[0]);
// const endHour = parseInt(slot.endTime.split(':')[0]);
// for (let hour = startHour; hour < endHour; hour++) {
// const cellId = `#${slot.day}-${('0' + hour).slice(-2)}:00`;
// $(cellId).text(slot.event);
// }
// });
// }
// });
});
</script>
</body>
</html>
