wintonmj / burger-skeleton Goto Github PK

The template of the BurgerMenu is completed but functionality is missing.

• A bun Ingredient, when clicked on, should switch to the protein tab. The ingredient should highlight in case the user goes back to the buns page so they may see what they previously chose for when they wish to change the bun.
• A protein Ingredient, when clicked on, should switch to the Vegetable tab. The ingredient should highlight in case the user goes back to the protein page so they may see what they previously chose for when they wish to change the protein.
• A Vegetable Ingredient, when clicked on, should highlight for the duration of the creation of this burger. Users should be able to click on multiple veggies and then click a next button or another tab to change tab.
• A Sauce Ingredient, when clicked on, should highlight for the duration of the creation of this burger. Users should be able to click on 2 sauces and then be redirected to the Extras tab. Users may also select only one or no sauces.
• An Extras Ingredient, when clicked on, should highlight for the duration of the creation of this burger. Users should be able to click on multiple Extras and then click a next button or another tab to change tab.
• Finish. A finish button should be available in the BurgerMenu to show the burger is ready to add to the order. This button should be greyed out while a protein and bun have not been selected.

Other things needed for BurgerMenu

• Clear the temporary burger cash after the burger has been added to the order or canceled. This is for when the user creates another burger, the buttons are not highlighted still.

Description:
Bar at the top of each page

• Hide or show text centered
• Hide/show back on the left
• Hide/show component in the middle of the navigation/direction buttons.
• Hide/show next on the right, in line with the component below
• Hide/show cart button on the far right

• Make the website adjust to screen size of a mobile phone.
• Make sure the website fills the screen nicely on a laptop.

Maybe we can make a chart of the frequency of the order items.
For example how many times an order contains a myob, premade burger, drink or side.
Or how often a certain drink / side / burger is ordered.
Maybe we can show this in the kitchen view, or another page

Description:
This defines the VUE (CSS) that will be used for all square buttons with icons in the app.

• Extends (to be used with) the basic button VUE class.
• Displays icon centered in the component.
• Displays text below the icon, centered horizontally.
• Width & height are auto.

• different icons for all burger ingredients.
• different icons for all premade burgers.
• different icons for all drinks.
• different icons for all sides.

Description:
This is the component that holds the information about one menuItem

• Extends (to be used with) the square icon button VUE class.

• Pulls information for the ONE item.

• Displays menuItem icon.

• Displays menuItem name.

• Displays menuItem price if it has an additional cost.

• Displays gluten-free icon if the gluten-free value it true.

• Displays lactose-free icon if the lactose-free value it true.

• Displays vegan icon if the vegan value it true.

• When hovered over for more than a second, will display the menuItem name, cost, gluten-free, lactose-free and vegan values.

This page will contain the current status of the order with drinks, sides, and burgers. Upon finishing, the order will be sent to the kitchen view.

• Shows Burgers in Order
• Shows the price of each burger in Order, next to the name of the burger
• Shows Drinks in Order
• Shows the price of each Drink in Order, next to the name of the Drink
• Shows Sides in Order
• Shows the price of each Side in Order, next to the name of the Side
• Shows the total price of the Order
• Finish button Submits the order to the kitchen
• Allows users to remove a MenuItem from the order + change in Menu page should be visible (counter and background color change)

• Merge StoreIngredients branch into master
• Integrate icon components features from LuluIngredients branch
• Fix all merge conflicts
• Test all features still work

Description:
Loops through given data (Most likely a MenuItem category) and creates appropriate buttons for the MenuItem type.

• for loop through the database for given constraints.
• create a button
• Buttons are displayed in a 3xn grid (all buttons size is the same).

Make the website look a bit nicer and user-friendly
Make sure to keep in mind:

• try to put as much css stuff as possible in the globalCSS file
• take into account that the website has to look nice on a mobile as well
  1. use % for width, padding, margin...
  2. use vw for font-size e.g. font-size: 1.5vw
  3. use media queries
• don't forget the kitchen view

• Pass in the text for the nav component
• enable/disable the back button in the nav component
• hide/show the cart button in the nav component
• Have two VUE components
• Display the VUE components horizontally

Note: Used for the Welcome page, MainMenu page, Item conformation page and Payment page

• Language in the Welcome page is not switching.
• Language in MainMenu page is not switching, except for the NavBar.
• Language of tabs in burgermenu not switching

This is the view all the incoming orders. There are several tabs that display only certain components of an order as defined by their name. Once orders have been finished. The user may click on the order to send it to the finished orders tab

• Complete Order Tab - contains the complete order: Burgers, drinks, and extras
• Hot Kitchen Tab - contains the protein of the order: Category 1 of the data.
• Cold Kitchen Tab - contains the burger's ingredients (including protein) of the order: Categories 1, 2, 3, 4 of the data.
• Sides and Drinks Tab - contains the drinks and sides of the order: Categories 5, and 6 of the data.
• Finished Orders Tab
• Change Language button

This is an intermediate page before an item is submitted to the order. This will be activated when selecting a side, a drink, or a burger (Pre-made or custom). Here users will have the option of finishing the order, submitting the item and continuing with their order, canceling, and adding more of this MenuItem.

• Complete button (Submits the MenuItem to the order and redirects the user to cart)
• Confirm button (Submits the MenuItem to the order and redirects the user to the MainMenu)
• Cancel button (Does not submit the MenuItem to the order and redirects the user to the MainMenu)
• Plus and Minus buttons (Adds the number wanted of this item)

Not urgent:

• Displays the icon for the MenuItem
• Displays the lactose information for the MenuItem
• Displays the gluten information for the MenuItem
• Displays the vegan information for the MenuItem

For Burgers:

• shows the ingredients included

Bugs:

• can't order several different burgers when clicked on 'confirm item'
• can't order several same burgers
• doesn't show anything in burgermenu about unfinished burger when clicked 'back' in popup; should it?
• lactose/gluten/vegan info about burger; should be calculated from ingredients?

Description:
This defines the VUE (CSS) that will be used for all buttons in the app.

• The whole template is clickable.
• When hovered over, instantly highlights very lightly.
• Clicks are associated with the appropriate action. i.e. moves to the next page or just highlights selected menuItem.
• When clicked on, highlights very clearly.

This page will have the same appearance as the drinks and extra pages. It shall list off all of the premade burgers and then allow users to select them. Once a burger is clicked on, the "PopUp" page will come up. This page will have to create a new instance of the popup page and send all of the relevant data.
- If any of the ingredients have lactose, a false value for lactose-free
- If any of the ingredients have lactose or meat, a false value for vegan
- If any of the ingredients have gluten, a false value for gluten
- The ingredients
- The name

Before page creation:

• Premade burgers csv
• Store the data in the sharedviewstuff.js
• Create new burger.vue component
  - This will follow the exact same layout as ingredient with different data and props
• Create the premade burger template
  - This will follow the exact same layout as drinks or side but use the burger.vue component instead of ingredient (This means you will also have to pass in different data that is applicable to your .csv file)

Things that may go wrong:

1. Make sure you are importing all of the components correctly into the script tags:
   i.e.
   import Ingredient from '@/components/Ingredient.vue'

2. Make sure you are including the components in the vue components:
   i.e.
   export default {
   name: "IngredientsSelection",
   components: {
   Ingredient,
   OrderItem
   },
   ...
   ...

3. make sure to pass in the lang to nested components for the langauge to still work

Page stuff:

• Reads and displays all of the premade burgers
• When burger clicked on, redirects to the popup (creates a new page and sends it the data of the burger).

Description:
Cart button.

• Extends the Icon button
• Has a number display that increases with every MenuItem (This appears above the icon with n > 0)
• Displays total cost under (text from Icon button)

Description:
This defines the VUE (CSS) that will be used for all Vertical buttons with icons in the app. Should be held within the Vertical container component

• Extends (to be used with) the basic button VUE class.
• Displays icon center-left in the component.
• Displays text to the right of the icon, centered Vertically.
• Width & height are auto.

Description:
This defines the VUE (CSS) that holds components vertically.

• Formats child components vertically.

Used for the MainMenu page and the side nav in the MakeYourOwnBurgerPage

• Language switch of burger's ingredients in the cart page does not work. (store[i].ingredient_sv)
• In the Vegetable page, "back" and "cart" don't work correctly.
• User can choose multiple Protein if they jump back from Vegetables.
• Ingredients should go into the cart only if the user has clicked "Finish".
• Price are wrong in separate pages. To fix this problem, use addi_cost instead of selling_price.

-----store.js-----

• Change the name "orders" into "currentBurger" in store.js, and code related to this.
• Add currentOrder{}, orders{} in store.js.

-----storing-----

• When a new burger is made, the previous order still existed in the Cart.
• Ingredients of different self-made burger should be displayed separately.