Show the available slots in a calendar UI

[johnmckerrell]

No description provided.

[amcewen]

I've updated the select-a-time page to request the next week's-worth of data from the API, and also fixed it to request the correct resource too. Need to work out how the slots work next to then start to pull together a UI for it.

[amcewen]

Made a start on integrating Fullcalendar.io to display the available slots.

On my machine it currently looks like this:

Probably need to modify the API server to give the starts/ends data in the slots as full datetime values, so I don't have to process it in the UI.

It seems that FullCalendar can populate the data from a JSON feed, so it would be nice to hook it up to the API server so that you can page forwards to find slots further in the future than the default 6 days...

Also need to make the slots clickable to select one (and more than one?) and change the colour for non-available slots

[amcewen]

Have added the FullCalendar plugin.

On my dev version I've reworked it to use a javascript function to populate the events. That will let it pull future slots if the user wants to book beyond the initial 6 days that get populated. Next step is to add axios and moments to the client-side Javascript so that we can rewrite the function to make AJAX calls to the api and reprocess the returned JSON to create the arrays of events.

[amcewen]

I've finished the changes for populating the available slots via AJAX, using axios. So now you can flip forwards as far as you like to get a slot.

I had to add the CORS middleware, and haven't done any particular configuring of it, so maybe we should do some configuring of it?

The main things left now are to make the slots clickable to select one (and more than one?) and change the colour for non-available slots

[amcewen]

Haven't pushed the changes yet as they're not finished, but worked out how to make the resource slots selectable. Need to be able to set whether multiple slots can be chosen or not too - for the laser-cutters, for example, you should only be able to choose one slot; whereas for Dinky you'd want to be able to choose a number of slots in one booking

[amcewen]

• A slot can now be chosen, and it shows up in green.
• Past slots are styled to be faded, and can't be chosen.

Remaining issues (possibly covered by other issues):

• It only allows a single slot to be chosen at a time at present
• If you go back or forward a week it loses any slot you've chosen
• There's also nothing in the UI to handle slots that aren't available (styling them differently, not allowing them to be selected, etc.)
• The chosen slot isn't passed on anywhere when you click the "Provide your details" button
• The "Provide your details" button should be greyed-out if you haven't chosen a slot

[johnmckerrell]

New issues #28 and #27 for two of those. I think I'll let you decide whether the others need a new issue or should be done as one of the existing issues.

[johnmckerrell]

Actually I've edited #8 so that it now covers the "pass on the chosen slot to the make a booking screen".

[amcewen]

So the only bit left for this issue is

There's also nothing in the UI to handle slots that aren't available (styling them differently, not allowing them to be selected, etc.)

[amcewen]

I've added the status (booked or available) to the classes of the calendar events, and now the click handler code checks for that too see if the slot can be selected. Probably needs nicer colours 😁

(There's nothing in the API to return anything other than available slots at present. I modified api/routes/calendar.js to randomly set the status to booked for testing, and have spawned #31 to fix that properly)