From b51622356ca505ae8413c00075c45aa91a1e05be Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp.lan>
Date: Sat, 28 Jul 2018 02:00:07 -0400
Subject: Working on requesting tutoring hours frontend.

---
 src/actions/firebase.js        |  9 +++--
 src/components/mao-tutoring.js | 91 ++++++++++++++++++++++++++++++++++--------
 src/reducers/firebase.js       |  5 ++-
 3 files changed, 83 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/actions/firebase.js b/src/actions/firebase.js
index fe3ddb0..ab2e28e 100644
--- a/src/actions/firebase.js
+++ b/src/actions/firebase.js
@@ -74,17 +74,18 @@ export const getHours = () => (dispatch, getState) => {
   if(currentState.initialized) {
     var docRef  =  firestore.collection('users').doc(currentState.uid);
     docRef.onSnapshot((doc) => {
-      dispatch(updateHours(doc.data().hours));
+      dispatch(updateHours(doc.data().hours, doc.data().requestedHours));
     });
   }
 
 
 }
 
-export const updateHours = (hours) => {
+export const updateHours = (hours, reqHours) => {
   return {
-    type:     'UPDATE_HOURS',
-    payload:  hours
+    type:           'UPDATE_HOURS',
+    approvedHours:  hours,
+    requestedHours: reqHours
   }
 }
 
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);
diff --git a/src/reducers/firebase.js b/src/reducers/firebase.js
index 4b0ed9a..b708dbe 100644
--- a/src/reducers/firebase.js
+++ b/src/reducers/firebase.js
@@ -17,7 +17,7 @@ import {
 }
 from '../actions/firebase.js';
 
-const firebase = (state = {initialized: false, authMessage: "", hours: -1, uid: null, registeredComps: []}, action) => {
+const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: null, registeredComps: []}, action) => {
   switch (action.type) {
     case AUTH_SUCCESS:
       return {
@@ -46,7 +46,8 @@ const firebase = (state = {initialized: false, authMessage: "", hours: -1, uid:
     case UPDATE_HOURS:
       return {
         ...state,
-        hours:  action.payload
+        hours:          action.approvedHours,
+        requestedHours: action.requestedHours
       }
     break;
 
-- 
cgit v1.2.3-70-g09d2