I’m working on an application using nodejs, mysql and express currently and I have run into an issue with fetching data from my database.
I have a POST form in the client side for booking and I want to implement a feature for the client to only be able to see non-booked times for the date which they have selected. But the problem is that once they select a date the request gets stuck in pending.
ps. this is a school project so i’m very new to nodejs and programming any help would be greatly appreciated
Heres my router.js file:
const express = require('express');
const router = express.Router();
const pool = require('../config/database.js')
router.get('/', (req, res) => {
res.render('home.ejs');
});
router.get('/book', function(req, res){
res.render('book.ejs')
});
router.get('/book/:date', function(req, res) {
const date = req.params.date;
console.log('Start of route handler');
// Fetch all bookings for the given date
pool.query('SELECT time FROM bookings WHERE date = ?', [date], function(err, bookings) {
if (err) {
console.error(err);
return res.status(500).send({ error: 'Something went wrong on the server' });
}
console.log('SQL query success');
// Get all available times for the given date
try {
const availableTimes = getAvailableTimes(date, bookings);
console.log('Successfully retrieved available times');
res.json(availableTimes);
} catch (error) {
console.error(error);
res.status(500).send({ error: 'Something went wrong on the server' });
}
});
});
// Function to get all available times for a given date
function getAvailableTimes(date, bookings) {
const allTimes = ['09:00:00', '10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00'];
const bookedTimes = bookings.map(function(booking) {
return booking.time;
});
const availableTimes = allTimes.filter(function(time) {
return !bookedTimes.includes(time);
});
return availableTimes;
}
module.exports = router;
client-side file:
<!DOCTYPE html>
<html lang="en">
<%- include("./partial/head.ejs"); -%>
<body>
<%- include("./partial/header.ejs"); -%>
<h1 id="bookHeader">Book an Appointment</h1>
<form method="post" action="/Bokning" class="bookForm">
<div class="bookFirstForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone" required />
</div>
<div class="bookSecondForm">
<label for="tjänst">Tjänst:</label>
<select name="tjänst" id="tjänst">
<option value="Klippning">Klippning</option>
<option value="Skägg">Skägg</option>
<option value="Behandling">Behandling</option>
</select>
<label for="barber">barber:</label>
<select name="barber" id="barber">
<option value="Mushtaq">Mushtaq</option>
<option value="Viggo">Viggo</option>
<option value="Kacper">Kacper</option>
</select>
</div>
<div class="bookThirdForm">
<label for="date">Datum:</label>
<input type="date" id="date" name="date" required />
<label for="time">Tid:</label>
<select id="time" name="time">
</select>
</div>
<button type="submit">Boka Nu!</button>
</form>
<%- include("./partial/footer.ejs"); -%>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
const dateInput = document.getElementById('date');
const timeInput = document.getElementById('time');
// Listen for changes to the date input
dateInput.addEventListener('change', function() {
// Get the selected date
const selectedDate = this.value;
// Make an API call to the server to fetch the booked times for the selected date
fetch(`/book/${selectedDate}`)
.then(response => response.json())
.then(availableTimes => {
// Clear the time input
timeInput.innerHTML = '';
// Populate the time input with the available times
availableTimes.forEach(function(time) {
const option = document.createElement('option');
option.value = time;
option.textContent = time;
timeInput.appendChild(option);
});
})
.catch(error => console.error(error));
});
</script>
</body>
</html>
I have tried putting console logs in my code but I get nothing in response