1 files changed, 146 insertions, 0 deletions
diff --git a/src/components/mao-fourms.js b/src/components/mao-fourms.js
new file mode 100644
index 0000000..c0fd509
--- /dev/null
+++ b/src/components/mao-fourms.js
@@ -0,0 +1,146 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { html } from '@polymer/lit-element';
+import { PageViewElement } from './page-view-element.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+
+// This element is connected to the Redux store.
+import { store } from '../store.js';
+
+//These are the actions needed by this element.
+import { requestHours } from '../actions/firebase.js';
+
+// We are lazy loading its reducer.
+import firebase from '../reducers/firebase.js';
+
+store.addReducers({
+  firebase
+});
+
+// These are the shared styles needed by this element.
+import { SharedStyles }       from './shared-styles.js';
+import { ButtonSharedStyles } from './button-shared-styles.js'
+
+// Import paper elements
+import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-card/paper-card.js';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-slider/paper-slider.js';
+import '@polymer/paper-button/paper-button.js';
+
+// Import other customElements
+import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
+
+class MaoFourms extends connect(store)(PageViewElement) {
+  _render(props) {
+    return html`
+      ${SharedStyles}
+      ${ButtonSharedStyles}
+
+      <style>
+      .title {
+        grid-area: title;
+      }
+
+      .tutorCard, .hoursCard {
+        background-color: #f7f7f7;
+        padding:          1px;
+      }
+
+      .hours-grid {
+        display:  grid;
+        grid-gap: 10px;
+
+        grid-template-areas:
+                        "title"
+                        "item1"
+                        "item2";
+      }
+
+      .approved-card {
+        grid-area:  item1;
+
+        background-color: #b7e1cd;
+        margin:           1px;
+        padding:          0 10px 15px 10px;
+      }
+
+      .unapproved-card {
+        grid-area:  item2;
+
+        background-color: #fce8b2;
+        margin:           1px;
+        padding:          0 10px 15px 10px;
+      }
+
+      .submit-hours {
+        width: 100%;
+      }
+
+      paper-card {
+        --paper-card-background-color: #f7f7f7;
+        display: block;
+      }
+
+      paper-button {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+      }
+
+      h3 {
+        text-align: center;
+      }
+
+      #datePicker {
+        margin-top: 10px;
+      }
+
+      @media (min-width: 460px) {
+        .hours-grid {
+          grid-template-areas:
+                          "title    title"
+                          "item1    item2";
+        }
+
+        .tutorCard, .hoursCard {
+          padding:  1em;
+        }
+      }
+
+      </style>
+
+      <section>
+      </section>
+    `;
+  }
+
+  static get properties() { return {
+    // This is the data from the store.
+    signedIn:           Boolean,
+    authMessage:        String,
+    hours:              Number,
+    requestedHours:     Number
+  }}
+
+  _stateChanged(state) {
+    this.hours          = state.firebase.hours;
+    this.requestedHours = state.firebase.requestedHours;
+    this.signedIn       = state.firebase.initialized;
+    this.authMessage    = state.firebase.authMessage;
+
+    this.sumbitFieldsOpened = false;
+  }
+
+}
+
+window.customElements.define('mao-fourms', MaoFourms);