This project has a collection of web pages where each handles a different part of the project. The main page links to the five pages that I have created. The “drinks” page simply calls the drinks API and lists all of the recipes that are stored in the MongoDB database. The “add-drink” page allows anyone to create a new drink to store to the database. When the station is known, the available ingredients are listed, so the user can just enter how many ounces of each they want in their drink and then save it. The “station” page lists some information about the station from its database entry. The station’s local IP address, all the valves and what they contain, along with the amount left in that container (to be implemented) and a multiplier (necessary for converting ounces in a recipe to time to pour that amount) are all listed.
The “pour” page lists all available recipes. Clicking on one shows the required ingredients. The user can then pour that drink from this page. If any ingredients are unable to be added automatically by the machine, an info box will pop up asking the user to add the remaining ingredients.
The “queuer” (a play on words for queueing a drink and using a QR code) page is the main interface option for patrons. They would scan the QR code on their wristband to open this page. The URL in the QR code will be appended with a unique ID that will behave as the user’s identification. If this is the first time the user has scanned their code, a helpful message will be displayed explaining how it works. Then the user can choose their drink, view the ingredients, and if they wish, store it to their QR code’s ID. The webpage will then update with the selected drink. The user will then go to the station and scan their QR code. The station will parse the ID from the QR code and query the database to find the selected drink. Then it will determine the recipe and pour the drink. The user could scan their QR code at the station again to pour the same drink, or scan it with a phone to choose their next drink.