- Delivereat app
+
+
+
+
+ {menuHasItems ? menuComponent : Sorry. Closed for business!
}
+
+
+ Your Basket
+ {currentOrderHasItems ? (
+ currentOrderComponent
+ ) : (
+ Your basket is empty
+ )}
+
+
+ {ordersExist ? orderAdminComponent : No Orders
}
+
- )
+ );
}
}
diff --git a/src/components/Basket.js b/src/components/Basket.js
new file mode 100644
index 0000000..7c568f7
--- /dev/null
+++ b/src/components/Basket.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import BasketItem from './BasketItem';
+import '../styles/components/basket.scss';
+
+function Basket({ menu, currentOrder, sendOrderToApi}) {
+
+ const orderItems = [];
+ const orderValues = Object.values(currentOrder);
+
+ orderValues.map(val => {
+ const menuId = val.id;
+ const name = menu[menuId].name;
+ const quantity = val.quantity;
+ const price = menu[menuId].price;
+
+ orderItems.push({
+ id: val.id,
+ name: name,
+ price: price,
+ quantity: quantity,
+ subtotal: price * quantity
+ });
+ })
+
+ /* delivery and calculations */
+ const totalPrice = orderItems.reduce((acc, item) => acc + item.subtotal, 0);
+ const deliveryCharge = (totalPrice >= 10) ? 0 : 2.95;
+ const deliveryText = (totalPrice >= 10) ? 'YAY! Free delivery' : 'Delivery charge';
+
+ const ordersRendered = Object.values(orderItems).map(orderItem => {
+ return
+ })
+
+ return (
+
+ )
+ }
+export default Basket;
+
+// onChange={(event)=>getPhoneNumber(event.target.value)}
\ No newline at end of file
diff --git a/src/components/BasketItem.js b/src/components/BasketItem.js
new file mode 100644
index 0000000..0824442
--- /dev/null
+++ b/src/components/BasketItem.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+function BasketItem({orderItem}) {
+
+ return (
+
+ {orderItem.name} * {orderItem.quantity} @ £{orderItem.price}
+ Subtotal: £{(orderItem.subtotal).toFixed(2)}
+
+
+ )
+ }
+
+export default BasketItem;
\ No newline at end of file
diff --git a/src/components/Menu.js b/src/components/Menu.js
new file mode 100644
index 0000000..1a7c151
--- /dev/null
+++ b/src/components/Menu.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import MenuItem from './MenuItem';
+
+function Menu({menu, receiveItemOrder, removeItemFromOrder}) {
+
+ function getMenuItem() {
+ const menuArr = Object.values(menu)
+ return menuArr.map(menuitem => {
+ return
+ })
+ };
+
+ return (
+
+ Menu
+ {getMenuItem()}
+
+ )
+}
+
+export default Menu;
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
new file mode 100644
index 0000000..6739010
--- /dev/null
+++ b/src/components/MenuItem.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import '../styles/components/menuitem.scss';
+import cx from 'classnames';
+
+class MenuItem extends React.Component {
+ constructor(){
+ super();
+
+ this.state = {
+ quantity: 0,
+ added: false,
+ error: false
+ };
+
+ this.handleClick = this.handleClick.bind(this)
+ this.handleSubmit = this.handleSubmit.bind(this)
+ this.itemOrder = this.itemOrder.bind(this)
+ }
+
+ handleSubmit(event) {
+ event.preventDefault();
+ if (this.state.quantity <= 0) {
+ this.setState({
+ error: !this.state.error
+ });
+ } else {
+ if (this.state.added === false) {
+ this.itemOrder();
+ this.setState({
+ added: !this.state.added
+ });
+ } else {
+ this.props.removeItemFromOrder(this.props.menuitem.id);
+ this.setState({
+ added: !this.state.added,
+ quantity: 0
+ });
+ }
+ }
+ }
+
+ handleClick(event) {
+ if (event.target.value === "-" && this.state.quantity > 0) {
+ this.setState({
+ quantity: this.state.quantity - 1
+ });
+ } else if (event.target.value === "+") {
+ this.setState({
+ quantity: this.state.quantity + 1
+ });
+ if (this.state.error === true) {
+ this.setState({
+ error: false
+ });
+ }
+ }
+ }
+
+ /* -- package menuitem object --*/
+ itemOrder() {
+ const menuitem = {
+ id: this.props.menuitem.id,
+ quantity: this.state.quantity
+ };
+ this.props.receiveItemOrder(menuitem);
+ }
+
+ render(){
+
+ const buttonclasses = cx('menuitem__submit', {
+ 'added': this.state.added
+ });
+ const errorclasses = cx('menuitem__error', {
+ 'show--error': this.state.error
+ });
+ const priceDisplay = this.props.menuitem.price;
+
+ return (
+
+
+
+ )
+ }
+}
+
+export default MenuItem;
+
diff --git a/src/components/OrderAdmin.js b/src/components/OrderAdmin.js
new file mode 100644
index 0000000..bc4a202
--- /dev/null
+++ b/src/components/OrderAdmin.js
@@ -0,0 +1,50 @@
+import React from "react";
+import OrderAdminItem from "./OrderAdminItem";
+import '../styles/components/orderadmin.scss';
+
+
+function OrderAdmin({ order, menu }) {
+ const results = Object.values(order).map(orderItem => ({
+ orderId: orderItem.order_id,
+ name: menu[orderItem.menu_id].name,
+ price: menu[orderItem.menu_id].price,
+ quantity: orderItem.quantity,
+ subtotal: orderItem.quantity * menu[orderItem.menu_id].price
+ }));
+
+ // IN PROGRESS
+ // const newOrder = Object.values(order).reduce((acc, orderItem) => {
+ // const val = orderItem.order_id
+ // acc[val] = acc[val] || []
+ // acc[val].push({
+ // orderId: orderItem.order_id,
+ // name: menu[orderItem.menu_id].name,
+ // price: menu[orderItem.menu_id].price,
+ // quantity: orderItem.quantity,
+ // })
+ // return acc
+ // }, {})
+
+ {/* { Object.values(newOrder).map(array => {
+ return array.map(obj => {
+ return Object.keys(obj).map(item => {
+ // console.log(`${item} -> ${obj[item]}`);
+ return
{`${item} -> ${obj[item]}`}
+ })
+ })
+ })} */}
+
+
+ return (
+
+
+ Orders
+ {results.map((order, i) => (
+
+ ))}
+
+
+ );
+}
+
+export default OrderAdmin;
diff --git a/src/components/OrderAdminItem.js b/src/components/OrderAdminItem.js
new file mode 100644
index 0000000..54a477e
--- /dev/null
+++ b/src/components/OrderAdminItem.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import '../styles/components/orderadminitem.scss';
+
+function OrderAdminItem({order}) {
+
+ return (
+
Order {order.orderId} –
+ {order.quantity} * {order.name}, £{(order.subtotal).toFixed(2)}
+ )
+ }
+
+export default OrderAdminItem;
\ No newline at end of file
diff --git a/src/styles/base/_normalize.scss b/src/styles/base/_normalize.scss
new file mode 100644
index 0000000..aba238f
--- /dev/null
+++ b/src/styles/base/_normalize.scss
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ }
+
+ /* Sections
+ ========================================================================== */
+
+ /**
+ * Remove the margin in all browsers.
+ */
+
+ body {
+ margin: 0;
+ }
+
+ /**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+ h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+ }
+
+ /* Grouping content
+ ========================================================================== */
+
+ /**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+ hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+ }
+
+ /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+ pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+ }
+
+ /* Text-level semantics
+ ========================================================================== */
+
+ /**
+ * Remove the gray background on active links in IE 10.
+ */
+
+ a {
+ background-color: transparent;
+ }
+
+ /**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+ abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+ }
+
+ /**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+ b,
+ strong {
+ font-weight: bolder;
+ }
+
+ /**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+ code,
+ kbd,
+ samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+ }
+
+ /**
+ * Add the correct font size in all browsers.
+ */
+
+ small {
+ font-size: 80%;
+ }
+
+ /**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+ sub,
+ sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ }
+
+ sub {
+ bottom: -0.25em;
+ }
+
+ sup {
+ top: -0.5em;
+ }
+
+ /* Embedded content
+ ========================================================================== */
+
+ /**
+ * Remove the border on images inside links in IE 10.
+ */
+
+ img {
+ border-style: none;
+ }
+
+ /* Forms
+ ========================================================================== */
+
+ /**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+ button,
+ input,
+ optgroup,
+ select,
+ textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+ }
+
+ /**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+ button,
+ input { /* 1 */
+ overflow: visible;
+ }
+
+ /**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+ button,
+ select { /* 1 */
+ text-transform: none;
+ }
+
+ /**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+ button,
+ [type="button"],
+ [type="reset"],
+ [type="submit"] {
+ -webkit-appearance: button;
+ }
+
+ /**
+ * Remove the inner border and padding in Firefox.
+ */
+
+ button::-moz-focus-inner,
+ [type="button"]::-moz-focus-inner,
+ [type="reset"]::-moz-focus-inner,
+ [type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+ }
+
+ /**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+ button:-moz-focusring,
+ [type="button"]:-moz-focusring,
+ [type="reset"]:-moz-focusring,
+ [type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+ }
+
+ /**
+ * Correct the padding in Firefox.
+ */
+
+ fieldset {
+ padding: 0.35em 0.75em 0.625em;
+ }
+
+ /**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+ legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+ }
+
+ /**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+ progress {
+ vertical-align: baseline;
+ }
+
+ /**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+ textarea {
+ overflow: auto;
+ }
+
+ /**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+ [type="checkbox"],
+ [type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+ }
+
+ /**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+ [type="number"]::-webkit-inner-spin-button,
+ [type="number"]::-webkit-outer-spin-button {
+ height: auto;
+ }
+
+ /**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+ [type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+ }
+
+ /**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+ [type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+
+ /**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+ ::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+ }
+
+ /* Interactive
+ ========================================================================== */
+
+ /*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+ details {
+ display: block;
+ }
+
+ /*
+ * Add the correct display in all browsers.
+ */
+
+ summary {
+ display: list-item;
+ }
+
+ /* Misc
+ ========================================================================== */
+
+ /**
+ * Add the correct display in IE 10+.
+ */
+
+ template {
+ display: none;
+ }
+
+ /**
+ * Add the correct display in IE 10.
+ */
+
+ [hidden] {
+ display: none;
+ }
\ No newline at end of file
diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss
new file mode 100644
index 0000000..f285a3d
--- /dev/null
+++ b/src/styles/base/_variables.scss
@@ -0,0 +1,9 @@
+// Variables
+
+// Color
+$text-color: #E0DBD4;
+$background-color: #272516;
+$primary-color: #C09517;
+
+// Padding
+$main-padding: 1rem;
\ No newline at end of file
diff --git a/src/styles/base/base.scss b/src/styles/base/base.scss
new file mode 100644
index 0000000..3c9b5bb
--- /dev/null
+++ b/src/styles/base/base.scss
@@ -0,0 +1,62 @@
+@import '_normalize';
+@import 'variables';
+
+/* ==== BASE ==== */
+body {
+font-family: "parisine-std",sans-serif;
+ margin: 0;
+ padding: 0;
+ background: $background-color;
+ line-height: 1.5;
+ color: $text-color;
+ -webkit-font-smoothing: antialiased;
+}
+.container {
+ padding-left: $main-padding *1.5;
+ padding-right: $main-padding *1.5;
+ margin: 0 auto;
+}
+.menu--settings {
+ list-style-type: none;
+ padding-left: 0;
+ padding-right: 0;
+ margin: 0;
+}
+img {
+max-width: 100%;
+height: auto;
+border-style: none;
+}
+h1, h2, h3 {color: $primary-color;}
+.fas {color: $primary-color;}
+
+/* ==== LAYOUT ==== */
+
+.sitehead {
+ padding: $main-padding*2;
+}
+.masthead__title {color: $primary-color;}
+
+.main {
+ display: flex;
+ flex-flow: row wrap;
+ padding-bottom: $main-padding*5
+}
+
+// MEDIA QUERIES
+@media (min-width: 768px) {
+}
+
+@media (min-width: 960px) {
+ .container {max-width: 930px}
+}
+
+@media (min-width: 1200px) {
+ .container {max-width: 1170px}
+}
+
+@media (min-width: 1440px) {
+ .container {
+ max-width: 1410px
+ }
+}
\ No newline at end of file
diff --git a/src/styles/components/app.scss b/src/styles/components/app.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/components/basket.scss b/src/styles/components/basket.scss
new file mode 100644
index 0000000..bbbbadd
--- /dev/null
+++ b/src/styles/components/basket.scss
@@ -0,0 +1,56 @@
+@import '../base/_variables.scss';
+.customerOrder {
+ margin: $main-padding *2 0;
+ padding: $main-padding;
+ background-color: $primary-color;
+ color: $background-color;
+ border: 3px solid darken($primary-color, 10% );
+ &__title, &__order {
+ color: $background-color;
+ margin-top: 0;
+ }
+ &__phone {
+ color: $background-color;
+ margin: $main-padding * 1.5 0 $main-padding;
+ input {
+ width: 80%;
+ border: none;
+ padding: $main-padding * 0.8;
+ background-color: lighten($primary-color, 40% );
+ }
+ }
+
+ &__submit {
+ color: $text-color;
+ background-color: green;
+ text-transform: uppercase;
+ font-size: 1.2rem;
+ padding: $main-padding *0.5 $main-padding * 0.8;
+ display: inline-block;
+ border: none;
+ margin: $main-padding 0;
+ text-decoration: none;
+ border: 3px solid darken(green, 10% );
+ cursor: pointer;
+ text-align: center;
+ transition: background-color 250ms ease-in-out,
+ transform 150ms ease;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ &::after {
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ content: "\f0a9";
+ margin-left: 5px;
+ }
+ &:hover {
+ text-decoration: none;
+ background-color: darken(green, 10% );
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/components/menuitem.scss b/src/styles/components/menuitem.scss
new file mode 100644
index 0000000..60c4092
--- /dev/null
+++ b/src/styles/components/menuitem.scss
@@ -0,0 +1,107 @@
+@import '../base/_variables.scss';
+
+.menuitem {
+ border-bottom: 2px dotted lighten($background-color, 30% );
+ padding-top: $main-padding *1;
+ padding-bottom: $main-padding *1;
+
+ &__form {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
+ align-items: center;
+ }
+ &__details {
+ text-align: right;
+ }
+
+ &__item {
+ text-transform: uppercase;
+ }
+
+ &__price {
+ color: lighten($background-color, 30% );
+ }
+
+}
+h2 + li.menuitem {
+ border-top: 2px dotted lighten($background-color, 30% );
+}
+
+
+// quantity changer
+.quantity {
+ &__label {
+ display: block;
+ color: lighten($background-color, 30% );
+ text-transform: uppercase;
+ }
+
+ &__change, &__display {
+ border: none;
+ width: 25px;
+ padding: 5px 0;
+ text-decoration: none;
+ cursor: pointer;
+ text-align: center;
+ }
+ &__display {
+ background-color: lighten($background-color, 30% );
+ }
+ &__change {
+ background-color: lighten($background-color, 10% );
+ color: white;
+ }
+}
+// submit button
+.menuitem__submit {
+ color: $primary-color;
+ display: inline-block;
+ border: none;
+ margin: 0;
+ text-decoration: none;
+ background: transparent;
+ cursor: pointer;
+ text-align: center;
+ transition: color 250ms ease-in-out,
+ transform 150ms ease;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ &::before {
+ font-size: 1.33em;
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ content: "\f055";
+ margin-left: 5px;
+ }
+ &.added{
+ color: green;
+ &::before {
+ // content: "\f058"; // tick - if additional remove menuitem button
+ content: "\f056";
+ }
+ }
+}
+.menuitem__error {
+ transition: color 250ms ease-in-out,
+ transform 150ms ease;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ display: none;
+ &.show--error {
+ color: red;
+ display: block;
+ }
+}
+
+// MEDIA QUERIES
+@media (min-width: 768px) {
+ .menuitem__submit:hover {
+ color: $text-color;
+ }
+}
diff --git a/src/styles/components/orderadmin.scss b/src/styles/components/orderadmin.scss
new file mode 100644
index 0000000..4318812
--- /dev/null
+++ b/src/styles/components/orderadmin.scss
@@ -0,0 +1,7 @@
+@import '../base/_variables.scss';
+
+.admin {
+ border: 2px dotted lighten($background-color, 30% );
+ padding: 0 $main-padding *1 $main-padding *1;
+ margin-bottom: $main-padding *3;
+}
diff --git a/src/styles/components/orderadminitem.scss b/src/styles/components/orderadminitem.scss
new file mode 100644
index 0000000..484d60b
--- /dev/null
+++ b/src/styles/components/orderadminitem.scss
@@ -0,0 +1,15 @@
+@import '../base/_variables.scss';
+.admin__menu li {
+ padding: $main-padding * 0.5;
+ background-color: lighten($background-color, 20% )
+}
+
+@for $i from 1 through 100 {
+ @if $i % 2 == 0 {
+ li[class="#{$i}"] {
+ background-color: lighten($background-color, 10% )
+ }
+ }
+}
+
+
diff --git a/static/images/coffee_screenshots.png b/static/images/coffee_screenshots.png
new file mode 100644
index 0000000..02de44c
Binary files /dev/null and b/static/images/coffee_screenshots.png differ
diff --git a/views/index.hbs b/views/index.hbs
index 8fdb420..8922f6d 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,8 +1,11 @@
-
Let's get some food
+
+
+
+
!Lemons
diff --git a/webpack.config.js b/webpack.config.js
index 6125d8a..ecfdfbd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,27 +1,30 @@
-const path = require('path');
+const path = require("path");
module.exports = {
- entry: './src/index.js',
- devtool: 'source-map',
+ // mode: "production",
+ entry: "./src/index.js",
+ devtool: "source-map",
output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'static')
+ filename: "bundle.js",
+ path: path.resolve(__dirname, "static")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
- loader: require.resolve('babel-loader')
+ loader: require.resolve("babel-loader")
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
- }, {
+ },
+ {
loader: "css-loader"
- }, {
+ },
+ {
loader: "sass-loader"
}
]