Java-Classes · alexanderkarpetc · Mar 29, 2018 · Mar 29, 2018 · Mar 29, 2018 · Mar 29, 2018
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -44,10 +44,14 @@
  "globals": {
  "Polymer": false,
  "MealOrderApp": true,
+ "MealOrderAppTest": true,
  "assert": false,
  "test": false,
  "suite": false,
  "fixture": false,
- "setup": false
+ "setup": false,
+ "flush": false,
+ "sinon": false,
+ "mock": true
  }
 }
diff --git a/client/user/bower.json b/client/user/bower.json
@@ -6,8 +6,15 @@
  "polymer": "Polymer/polymer#^2.0.0",
  "app-layout": "PolymerElements/app-layout#^2.0.0",
  "app-route": "PolymerElements/app-route#^2.0.0",
- "iron-form": "PolymerElements/iron-form#^2.0.0",
- "polymer-redux": "^1.0.5"
+ "polymer-redux": "^1.0.5",
+ "iron-pages": "PolymerElements/iron-pages#^2.1.0",
+ "paper-tabs": "PolymerElements/paper-tabs#^2.1.0",
+ "iron-icons": "PolymerElements/iron-icons#^2.1.1",
+ "iron-list": "PolymerElements/iron-list#^2.0.14",
+ "paper-item": "PolymerElements/paper-item#^2.1.1",
+ "paper-button": "PolymerElements/paper-button#^2.1.0",
+ "app-datepicker": "motss/app-datepicker#^2.12.0",
+ "paper-search": "Collaborne/paper-search#^2.0.9"
  },
  "devDependencies": {
  "web-component-tester": "Polymer/web-component-tester#^6.0.0",

diff --git a/client/user/index.html b/client/user/index.html
@@ -1,4 +1,3 @@
-<!doctype html>
 <!--
  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
  ~
@@ -23,14 +22,17 @@
  <meta charset="utf-8">
  <meta name="viewport"
  content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
- <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
- <script src="node_modules/redux/dist/redux.js"></script>
- <link rel="icon" href="images/favicon-16x16.png" type="image/png">
- <link rel=import href="src/mealorder/meal-order-client-app.html">
+ <script src="./bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+ <script src="./node_modules/redux/dist/redux.js"></script>
+ <link rel="icon" href="./images/favicon-16x16.png" type="image/png">
+ <link rel=import href="./src/mealorder/meal-order-client-app.html">
  <title>MealOrder</title>
- <style>
- </style>
 </head>
+<style>
+ body {
+ font-family: 'Roboto', 'Noto', sans-serif;
+ }
+</style>
 <body>
 <meal-order-client-app></meal-order-client-app>
 </body>

diff --git a/client/user/package-lock.json b/client/user/package-lock.json
diff --git a/client/user/src/mealorder/meal-order-client-app.html b/client/user/src/mealorder/meal-order-client-app.html
@@ -17,77 +17,204 @@
  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  -->
-<link rel="import" href="shell/meal-order-app-namespace.html">
-<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/app-route/app-location.html">
-<link rel="import" href="../../bower_components/app-route/app-route.html">
-<link rel="import" href="../../bower_components/app-layout/app-drawer/app-drawer.html">
 <link rel="import"
  href="../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
 <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import"
  href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import"
- href="../../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="shell/redux-store.html">
+ href="../../bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
+<link rel="import" href="../../bower_components/app-layout/app-drawer/app-drawer.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-route/app-location.html">
+<link rel="import" href="../../bower_components/app-route/app-route.html">
+<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
+<link rel="import" href="./shell/meal-order-app-namespace.html">
+<link rel="import" href="./shell/redux-store.html">
+<link rel="import" href="./meal-order-toolbar.html">
+<link rel="import" href="./menu/meal-order-drawer.html">
+<link rel="import" href="./menu/meal-order-menu-container.html">
 
 <dom-module id="meal-order-client-app">
  <template>
  <style>
+ app-header {
+ background-color: var(--google-grey-700);
+ color: var(--paper-grey-50);
+ right: 300px;
+ }
+
+ app-header-layout {
+ background-color: var(--paper-grey-100);
+ }
+
+ app-drawer-layout {
+ background-color: var(--paper-grey-100);
+
+ }
+
+ app-drawer {
+ --app-drawer-content-container: {
+ background-color: var(--paper-grey-50);
+ }
+ }
+
+ app-drawer.wide {
+ --app-drawer-width: 300px;
+ }
  </style>
 
  <app-location route="{{route}}"
  use-hash-as-path></app-location>
 
  <app-route
  route="{{route}}"
- pattern="/:page"
+ pattern="/:page/:date"
  data="{{routeData}}"></app-route>
 
  <app-drawer-layout fullbleed>
-
- <app-drawer slot="drawer" align="right">
- <app-toolbar>
- </app-toolbar>
+ <app-drawer id="drawer" slot="drawer" align="right"
+ class$="[[_getDrawerClass(routeData.page)]]">
+ <meal-order-drawer route-data="{{routeData}}"></meal-order-drawer>
  </app-drawer>
 
  <app-header-layout>
  <app-header slot="header" reveals effects="waterfall">
- <app-toolbar>
- </app-toolbar>
+ <meal-order-toolbar on-toggle-drawer="_toggleDrawer"
+ page="[[routeData.page]]">
+ </meal-order-toolbar>
  </app-header>
+ <iron-pages id="app-header-layout-iron"
+ selected="[[routeData.page]]"
+ attr-for-selected="data-page"
+ fallback-selection="view404"
+ role="main">
+ <meal-order-menu-container
+ data-page="menu"
+ server-time="[[serverTime]]"
+ selected-date="[[routeData.date]]"
+ menus="[[menus]]"
+ on-dish-added="_addDishToOrder">
+ </meal-order-menu-container>
+ <div data-page="history">
+ <!--user history component-->
+ </div>
+ </iron-pages>
  </app-header-layout>
-
  </app-drawer-layout>
  </template>
-
  <script>
- /**
- * Main client meal order component.
- *
- * @customElement
- * @polymer
- * @appliesMixin MealOrderApp.ReduxMixin
- */
- class MealOrderClientApp extends MealOrderApp.ReduxMixin(Polymer.Element) {
- static get is() {
- return 'meal-order-client-app';
- }
+ {
+ /**
+ * Main client meal order component.
+ *
+ * Consists of 2 pages:
+ * 1. A page with the vendor menus and the user's shopping cart.
+ * 2. A page with the user's history.
+ *
+ * @customElement
+ * @polymer
+ * @appliesMixin MealOrderApp.ReduxMixin
+ */
+ class MealOrderClientApp extends MealOrderApp.ReduxMixin(Polymer.Element) {
+ static get is() {
+ return 'meal-order-client-app';
+ }
+
+ static get properties() {
+ return {
+ /**
+ * Menu for a current day.
+ *
+ * @typedef {Object} Menu the menu for the current date
+ *
+ * @property {String} vendor a vendor name
+ *
+ * @typedef {Object} Date contains day, month, year
+ * @property {Number} day
+ * @property {Number} month
+ * @property {Number} year
+ *
+ * @typedef {Array} Categories array contains the category name and dishes
+ * @typedef {Array} Dishes array contains the dish title, price, quantity
+ * @property {String} title
+ * @property {String} price
+ * @property {String} quantity
+ */
+ menus: {
+ type: Array,
+ statePath: 'menus'
+ },
+
+ /**
+ * Route data parsed using `app-route`.
+ *
+ * Used for routing.
+ */
+ routeData: {
+ type: Object,
+ },
+
+ /**
+ * The current server time for the calendar.
+ */
+ serverTime: {
+ type: Date,
+ statePath: 'serverTime'
+ }
+
+ }
+ }
+
+ static get actions() {
+ return {
+ addDishToOrder: order => ({
+ type: MealOrderApp.UserAction.ADD_DISH_TO_ORDER,
+ order
+ })
+ }
+ }
 
- static get properties() {
- return {
- /**
- * Route data parsed using `app-route`.
- *
- * Used for routing.
- */
- routeData: {}
+ static get observers() {
+ return [
+ '_pageChanged(routeData.page)'
+ ];
+ }
+
+ _getDrawerClass(page) {
+ if (page === "history") {
+ return "wide";
+ }
+ }
+
+ _toggleDrawer() {
+ this.$.drawer.toggle();
+ }
+
+ _pageChanged() {
+ const DATE_LENGTH = 10;
+ if (!this.routeData.page || (this.routeData.page.startsWith("menu") && !this.routeData.date)) {
+ this.set('route.path', '/menu/' + this.serverTime.toISOString().slice(0, DATE_LENGTH));
+ }
+ if (this.routeData.page.startsWith("history")) {
+ if (!this.routeData.date) {
+ const newDate = new Date(this.serverTime);
+ newDate.setDate(newDate.getDate() - 1);
+ this.set('routeData.date', newDate.toISOString().slice(0, DATE_LENGTH));
+ }
+ }
+ }
+
+ _addDishToOrder(e) {
+ const order = {};
+ order.dish = e.detail;
+ order.date = new Date(this.routeData.date);
+ this.dispatch('addDishToOrder', order);
  }
  }
- }
 
- window.customElements.define(MealOrderClientApp.is, MealOrderClientApp);
+ window.customElements.define(MealOrderClientApp.is, MealOrderClientApp);
+ }
  </script>
 </dom-module>