1 files changed, 75 insertions, 16 deletions

diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index c4d2911..c9840a0 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.js
@@ -31,8 +31,14 @@ import { ButtonSharedStyles } from './button-shared-styles.js'
 
 // Import paper elements
 import '@polymer/paper-input/paper-input.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 MaoTutoring extends connect(store)(PageViewElement) {
   _render(props) {
     return html`
@@ -103,6 +109,10 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         text-align: center;
       }
 
+      #datePicker {
+        margin-top: 10px;
+      }
+
       @media (min-width: 460px) {
         .tutoring-grid {
           grid-template-areas:
@@ -125,13 +135,13 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       </style>
 
       <section>
-        <div class="tutoring-grid" id="tutoring-grid">
+        <div class="tutoring-grid" id="tutoring-grid" hidden="${props.signedIn}">
 
           <div class="title">
             <h2 class="underline">Tutoring</h2>
           </div>
 
-          <div class="tutorCard" hidden="${props.signedIn}">
+          <div class="tutorCard">
             <h3>Need to see or document hours?</h3>
             <paper-button
             class="info"
@@ -140,7 +150,6 @@ class MaoTutoring extends connect(store)(PageViewElement) {
             on-tap="${() => this.toggleloginFields()}">Sign In</paper-button>
             <div hidden="${!props.loginFieldsOpened}">
               <paper-input label="username" id="emailField">
-                <div slot="suffix">@communityschoolnaples.org</div>
               </paper-input>
 
               <paper-input type="password" label="password" id="passwordField">
@@ -151,13 +160,13 @@ class MaoTutoring extends connect(store)(PageViewElement) {
             </div>
           </div>
 
-          <div hidden="${!props.signedIn}" class="hoursCard">
+          <div hidden="${props.signedIn}" class="hoursCard">
             <h3>Hours</h3>
             <p>Every national society member must have at least 5 hours.</p>
             <p>You must sign in to see hours</p>
           </div>
 
-          <div hidden="${props.signedIn}" class="hoursCard">
+          <div hidden="${!props.signedIn}" class="hoursCard">
 
             <div class="hours-grid">
 
@@ -167,18 +176,56 @@ class MaoTutoring extends connect(store)(PageViewElement) {
 
               <div class="approved-card">
                 <h3>Approved Hours</h3>
-                <div class="circle" style="background-color: #0f9d58;">${props.hours}</div>
+                <div
+                hidden= "${props.hours==-1}"
+                class=  "circle"
+                style=  "background-color: #0f9d58;">${props.hours}</div>
               </div>
 
               <div class="unapproved-card">
                 <h3>Requested Hours</h3>
-                <div class="circle" style="background-color: #f4b400;">${5-props.hours}</div>
+                <div
+                hidden= "${props.requestedHours==-1}"
+                class=  "circle"
+                style=  "background-color: #f4b400;">${props.requestedHours}</div>
               </div>
 
               <div class="sumbit-hours">
-                <paper-button class="info" id="submit-hours-btn" raised>Submit Hours</paper-button>
+                <paper-button
+                class="info"
+                id="submit-hours-btn"
+                on-tap="${() => this.toggleSubmitFields()}"
+                hidden="${props.submitFieldsOpened}"
+                raised>
+                  Submit Hours
+                </paper-button>
+
+                <div class="submit-card" hidden="${!props.submitFieldsOpened}">
+
+                  <h3>Fill Fields</h3>
+
+                  <p>How many hours of tutoring?</p>
+
+                  <paper-input id="timeField" label="Time"><span slot="suffix">(in minutes)</span></paper-input>
+
+                  <paper-input id="traineeField" label="Trainee's Name"></paper-input>
+
+                  <vaadin-date-picker id="dateField" placeholder="Choose Date">
+                  </vaadin-date-picker>
+
+                  <paper-button
+                  class="info"
+                  id="submit-form-btn"
+                  on-tap="${() => this.requestHours()}"
+                  raised>
+                    Submit Form
+                  </paper-button>
+
+                </div>
               </div>
 
+
+
             </div>
 
           </div>
@@ -200,19 +247,23 @@ class MaoTutoring extends connect(store)(PageViewElement) {
 
   static get properties() { return {
     // This is the data from the store.
-    signedIn:     Boolean,
-    authMessage:  String,
-    hours:        Number,
+    signedIn:       Boolean,
+    authMessage:    String,
+    hours:          Number,
+    requestedHours: Number,
 
-    loginFieldsOpened: Boolean
+    loginFieldsOpened:  Boolean,
+    submitFieldsOpened: Boolean
   }}
 
   _stateChanged(state) {
-    this.hours        = state.firebase.hours;
-    this.signedIn     = state.firebase.initialized;
-    this.authMessage  = state.firebase.authMessage;
+    this.hours          = state.firebase.hours;
+    this.requestedHours = state.firebase.requestedHours;
+    this.signedIn       = state.firebase.initialized;
+    this.authMessage    = state.firebase.authMessage;
 
-    this.loginFieldsOpened = false;
+    this.loginFieldsOpened  = false;
+    this.sumbitFieldsOpened = false;
   }
 
   logIn() {
@@ -229,6 +280,14 @@ class MaoTutoring extends connect(store)(PageViewElement) {
     this.shadowRoot.getElementById('tutoring-grid').style = 'grid-template-areas: "title" "card1" "card2";';
   }
 
+  toggleSubmitFields() {
+    this.submitFieldsOpened = !this.submitFieldsOpened;
+  }
+
+  requestHours() {
+
+  }
+
 }
 
 window.customElements.define('mao-tutoring', MaoTutoring);