Checklist

Before you submit the final version of your labs, make sure that your project fullfills all of the tasks that will be added to this checklist.

00 Introduction

Your index.html file contains:

A headline
A section to select burgers that contains at least three items. Each item has:
- A name
- An image
- Information about allergies
A section to collect customer information:
- First- and Last Name (in one field)
- E-Mail Address
- Street
- House Number (only allowing numbers in this field)
- Gender (male, female, do not wish to provide as radio buttons)
A button to place the order
Ensure the website loads when opening http://localhost:8080/

The style.css file contains:

A rule to make the allergy information bold
Different text and background color for the two different sections (burger selection and customer information)
Change the cursor when hovering over the order button
Adds margins to the sections and the order button
Add a border to the two sections
Create a header that places an image behind the headline
Use a grid layout for the burger selection section

You have a menu.json file which contains at least three different burgers with respective attributes

Your Home.vue file:

... contains a MenuItem constructor (that is not used)
... loads the information from the menu.json object and inserts the information to the burger selection section
... allows the customer to click in the interactive map to select delivery location
... has an order button that sends the information from the text boxes, the gender, all items on the order, and the delivery location to the server (to be realyed to the dispatcher)

Your Burger.vue component:

... allows adding and removing burgers from the order
... only displays allergy information if relevant (either only if it contains gluten or lactose, or only if it's gluten or lactose free)

Your Dispatcher.vue file:

... shows for every order :
- a location on the map
- the order information
- the customer information

Only allow the order to be sent if all necessary information are provided
Display receipt on the customer page as well
Allow the dispatcher to handle orders by providing buttons next to every order that can switch the order status to "in preparation" and "done"
Display the order status to the customer and update it in the customer view if updated by the dispatcher
Show the order status for the customer as well.
Find a better visualization for what orders belong to which location on the map