Tidak Dapat Mengambil Slot Pemesanan yang Tersedia

Deskripsi Masalah

Seorang pengguna membuat formulir pemesanan untuk situs pemesanan di Wix. Mereka mencoba mengambil semua slot yang tersedia untuk hari tertentu menggunakan input kalender. Namun, mereka tidak berhasil mempopulasi slot tersebut. Kode awal yang digunakan adalah sebagai berikut:

// For full API documentation, including code examples, visit wix wixWindow from 'wix-window';import wixBookings from 'wix-bookings';import wixData from 'wix-data';import wixWindow1 from 'wix-window';const manandvan = '21d8b748-b342-43b4-b16e-63049bb8e0fb';const twomenvan = '51d09f78-39f9-424c-8456-91450c43db78';let slotMap = {};let servicedata = lightboxtext();let date = 0;const daysOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];let mainservice = null;let subservice = null;$wy(function () { $w("#repeatersvc").value = servicedataename; $w('#Amount').value = "Delivery cost " + servicedataeprice; $w("#slotPicker").options = []; selectDate();});export function datePicker_change(event, $w) { const selectedDate = $w("#datePicker").valuetring(); console("Selected Date = " + selectedDate); findAvailableslots(selectedDate); $w("#submitButton").onClick(() => validateandSubmitform());}export function submitButton_click(event) { validateandSubmitform()}export function selectDate() { const selectedDate = $w("#datePicker").valuetring() findAvailableslots(selectedDate); $w("#submitButton").onClick(() => validateandSubmitform()); return}async function findAvailableslots(date) { console("Date in Find Available slot function = " + date); slotMap = {}; const startdatetime = getmidnight(date); const enddatetime = getnextmidnight(date); const options = { startdatetime, enddatetime }; console(options) let servicename = ($w("#repeatersvc").value).split("/") mainservice = servicename[0]; subservice = servicename[1]; console("mainservice = " + servicename[0]) console("subservice = " + servicename[1]) if (mainservice === "Two Men and a Van Service") { let serviceid = twomenvan; } else if (mainservice === "One Man and a Van Service") { let serviceid = manandvan; } const availableslots = await getNonPendingAvailableSlots(mainservice, options); console("Service name to check available slot = " + $w("#repeatersvc").value); if (availableslots === 0) { $w("#slotPicker").options = []; $w("#slotPicker").placeholder = "No slots available for " + date; $w("#slotPicker").selectedIndex = undefined; $w("#slotPicker").disable(); } else { console("Slots available for Two Men Service"); $w("#slotPicker").options = availableslots(slot => { const uniqueId = new Date().getUTCMilliseconds().toString() slotMap[uniqueId] = slot; let starttime = slotatetime console("Start Time is = " + starttime) let timestring = getTimeOfDay(starttime); return { label: timestring, value: uniqueId } }); $w("#slotPicker").placeholder = "Pick a time for " + date; $w("#slotPicker").selectedIndex = undefined; $w("#slotPicker").enable(); }}function getTimeOfDay(Date) { console("we are in getTimeOfDay " + Date) return DateleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }).toLowerCase();}async function validateandSubmitform() { $w("#errormsg").hide(); $w("#submitButton").disable(); if ($w("#name").valid && $w("#email").valid && $w("#phoneNumber").valid && $w("#datePicker").valid && $w("#slotPicker").valid && $w("#TnCcheck").valid) { const slot = slotMap[$w("#slotPicker").value]; const newRequest = { name: $w("#name").value, email: $w("#email").value, phoneNumber: $w("#phoneNumber").value, requestedSlot: slot, status: "PENDING", mainService: mainservice, subService: subservice } await wixData("newAppoinments", newRequest) $w("#bookinggroup").hide(); $w("#thankyouMsg").show(); } else { $w("#errormsg").show; $w("#submitButton").enable(); }}function getmidnight(dateval) { let midnight = new Date(dateval); midnightrs(0, 0, 0, 0); return midnight;}function getnextmidnight(dateval1) { let midnight = new Date(dateval1); midnightrs(24, 0, 0, 0); return midnight;}async function getNonPendingAvailableSlots(serviceid, options = {}) { console("we are in find available slots") console(serviceid) const pending = (await getPendingAppointments()).map(appointment => appointmenttedSlot._id); let availableSlots = (await wixBookingsviceAvailability(serviceid, options)).slots; availableSlots = availableSlots(slot => !pendinges(slot._id)) console(availableSlots) return availableSlots;}async function getPendingAppointments() { console("we are in findpendingappointments") return (await wixData("newAppointements").find()).items(item => item === "PENDING");}

Setelah beberapa penyesuaian, pengguna berhasil mempopulasi pemilih slot, tetapi hanya slot hingga siang hari yang muncul. Berikut pembaruan kode:

// For full API documentation, including code examples, visit wix wixWindow from 'wix-window';import wixBookings from 'wix-bookings';import wixData from 'wix-data';import wixWindow1 from 'wix-window';const manandvan = '21d8b748-b342-43b4-b16e-63049bb8e0fb';const twomenvan = '51d09f78-39f9-424c-8456-91450c43db78';let slotMap = {};let servicedata = lightboxtext();let date = 0;const daysOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];let mainservice = null;let subservice = null;$wy(function () { $w("#repeatersvc").value = servicedataename; $w('#Amount').value = "Delivery cost " + servicedataeprice; $w("#slotPicker").options = []; selectDate();});export function datePicker_change(event, $w) { const selectedDate = $w("#datePicker").value; console("Selected Date = " + selectedDate); findAvailableslots(selectedDate); $w("#submitButton").onClick(() => validateandSubmitform());}export function submitButton_click(event) { validateandSubmitform()}export function selectDate() { const selectedDate = $w("#datePicker").value findAvailableslots(selectedDate); $w("#submitButton").onClick(() => validateandSubmitform()); return}async function findAvailableslots(date) { console("Date in Find Available slot function = " + date); slotMap = {}; const startDateTime = getServicestartTime(date); const endDateTime = getServiceendTime(date); const options = { startDateTime, endDateTime }; console(options) let servicename = ($w("#repeatersvc").value).split("/") mainservice = servicename[0]; subservice = servicename[1]; var serviceid = null; if (mainservice === "Two Men and a Van Service") { serviceid = twomenvan; } else if (mainservice === "One Man and a Van Service") { serviceid = manandvan; } const availableslots = await getNonPendingAvailableSlots(serviceid, options); if (availableslots === 0) { let onlydate = dateString() $w("#slotPicker").options = []; $w("#slotPicker").placeholder = "No slots available for " + onlydate; $w("#slotPicker").selectedIndex = undefined; $w("#slotPicker").disable(); } else { console("Slots available for Two Men Service"); $w("#slotPicker").options = availableslots(slot => { const uniqueId = new Date().getUTCMilliseconds().toString() slotMap[uniqueId] = slot; let starttime = slotateTime console("Start Time is = " + starttime) let timestring = getTimeOfDay(starttime); return { label: timestring, value: uniqueId } }); $w("#slotPicker").placeholder = "Pick a time for " + dateString(); $w("#slotPicker").selectedIndex = undefined; $w("#slotPicker").enable(); }}function getTimeOfDay(Date) { console("we are in getTimeOfDay " + Date) return DateleTimeString("en-NZ", { hour: "2-digit", minute: "2-digit" }).toLowerCase();}async function validateandSubmitform() { $w("#errormsg").hide(); $w("#submitButton").disable(); if ($w("#name").valid && $w("#email").valid && $w("#phoneNumber").valid && $w("#datePicker").valid && $w("#slotPicker").valid && $w("#TnCcheck").valid) { const slot = slotMap[$w("#slotPicker").value]; const newRequest = { name: $w("#name").value, email: $w("#email").value, phoneNumber: $w("#phoneNumber").value, requestedSlot: slot, status: "PENDING", mainService: mainservice, subService: subservice } await wixData("newAppoinments", newRequest) $w("#bookinggroup").hide(); $w("#thankyouMsg").show(); } else { $w("#errormsg").show; $w("#submitButton").enable(); }}function getServicestartTime(dateval) { let midnight = new Date(datevalleDateString()); midnightrs(7); console("Service start time", midnight) return midnight;}function getServiceendTime(dateval1) { let midnight = new Date(dateval1leDateString()); midnightrs(23) console("Service end time", midnight) return midnight;}async function getNonPendingAvailableSlots(serviceid, options = {}) { console("we are in find available slots") console("Service Id ", serviceid) var pending = []; await getPendingAppointments().then(PA => { pending = PA(appointment => appointmenttedSlot._id) }); console("Pending Appointements details", pending) let availableSlots = []; await wixBookingsviceAvailability(serviceid, options).then(results => { availableSlots = results; }); availableSlots = availableSlots(slot => !pendinges(slot._id)) console(availableSlots) return availableSlots;}async function getPendingAppointments() { console("we are in findpendingappointments") var pendingAppointments = []; await wixData("NewAppointments").find().then((results) => { pendingAppointments = items(item => item === "PENDING") }); console("new appointment collection ", pendingAppointments) return pendingAppointments;}

Pengguna juga menambahkan tangkapan layar dari konsol, yang menunjukkan bahwa slot yang muncul hanya hingga siang hari. Meskipun demikian, masalah ini dilaporkan telah teratasi setelah penyesuaian lebih lanjut.