From 01f7cf44d47ac1fa48068cfb7d7e5f8acc94c59c Mon Sep 17 00:00:00 2001
From: Michael Foiani <mfoiani2019@communiyschoolnaples.org>
Date: Mon, 30 Jul 2018 11:57:23 -0400
Subject: Now clears fields on sumbit buttons and fixed some formatting isuues
 with two cards.

---
 src/components/mao-tutoring.js | 99 +++++++++++++-----------------------------
 1 file changed, 31 insertions(+), 68 deletions(-)

(limited to 'src')

diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index 85aac99..04b7b1d 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.js
@@ -47,17 +47,6 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       ${ButtonSharedStyles}
 
       <style>
-
-      .tutoring-grid {
-        display:  grid;
-        grid-gap: 10px;
-
-        grid-template-areas:
-                        "title"
-                        "card1"
-                        "card2";
-      }
-
       .title {
         grid-area: title;
       }
@@ -67,14 +56,6 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         padding:          1px;
       }
 
-      .tutorCard {
-        grid-area: card1;
-      }
-
-      .hoursCard {
-        grid-area: card2;
-      }
-
       .hours-grid {
         display:  grid;
         grid-gap: 10px;
@@ -107,6 +88,7 @@ class MaoTutoring extends connect(store)(PageViewElement) {
 
       paper-card {
         --paper-card-background-color: #f7f7f7;
+        display: block;
       }
 
       paper-button {
@@ -124,12 +106,6 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       }
 
       @media (min-width: 460px) {
-        .tutoring-grid {
-          grid-template-areas:
-                          "title title"
-                          "card1 card2";
-        }
-
         .hours-grid {
           grid-template-areas:
                           "title    title"
@@ -144,18 +120,12 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       </style>
 
       <section>
-        <div class="tutoring-grid" id="tutoring-grid">
 
           <div class="title">
             <h2 class="underline">Tutoring</h2>
           </div>
 
-          <div class="tutorCard" hidden="${props.signedIn}">
-            <h3>Need to see or document hours?</h3>
-            <p> Sign in on account page... </p>
-          </div>
-
-          <div hidden="${props.signedIn}" class="hoursCard">
+          <div hidden="${props.signedIn}">
             <h3>Hours</h3>
             <p>Every national society member must have at least 5 hours.</p>
             <p>You must sign in to see hours</p>
@@ -226,6 +196,8 @@ class MaoTutoring extends connect(store)(PageViewElement) {
                 <vaadin-date-picker id="dateField" placeholder="Choose Date">
                 </vaadin-date-picker>
 
+                <br/>
+
                 <paper-button
                 class="info"
                 id="submit-form-btn"
@@ -238,23 +210,16 @@ class MaoTutoring extends connect(store)(PageViewElement) {
             </div>
 
           </paper-card>
-
-        </div>
-      </section>
-      <section>
-
-
-
       </section>
     `;
   }
 
   static get properties() { return {
     // This is the data from the store.
-    signedIn:       Boolean,
-    authMessage:    String,
-    hours:          Number,
-    requestedHours: Number,
+    signedIn:           Boolean,
+    authMessage:        String,
+    hours:              Number,
+    requestedHours:     Number,
     submitFieldsOpened: Boolean
   }}
 
@@ -265,23 +230,6 @@ class MaoTutoring extends connect(store)(PageViewElement) {
     this.authMessage    = state.firebase.authMessage;
 
     this.sumbitFieldsOpened = false;
-
-    if(this.signedIn) {
-      this.toggleShowingCard();
-    }
-  }
-
-  logIn() {
-    const email     = this.shadowRoot.getElementById('emailField')    .value +
-                      '@communityschoolnaples.org';
-    const password  = this.shadowRoot.getElementById('passwordField') .value;
-
-    store.dispatch(signIn(email,password));
-  }
-
-  toggleShowingCard() {
-
-    this.shadowRoot.getElementById('tutoring-grid').style = 'grid-template-areas: "title" "card2";';
   }
 
   toggleSubmitFields() {
@@ -289,14 +237,29 @@ class MaoTutoring extends connect(store)(PageViewElement) {
   }
 
   requestHours() {
-
-    if(confirm('Are you sure that you want to send this request for hours?')) {
-      const timeHours   = (this.shadowRoot.getElementById('timeField')  .value)
-                          /60;
-      const traineeName = this.shadowRoot.getElementById('traineeField').value;
-      const date        = this.shadowRoot.getElementById('dateField')   .value;
-
-      store.dispatch(requestHours(timeHours, traineeName, date));
+    if(this.shadowRoot) {
+      var timeElement     = this.shadowRoot.getElementById('timeField');
+      var traineeElement  = this.shadowRoot.getElementById('traineeField');
+      var dateElement     = this.shadowRoot.getElementById('dateField')
+
+      if( timeElement     .value.trim()  === "" ||
+          traineeElement  .value.trim()  === "" ||
+          dateElement     .value         === "") {
+            alert("Please fill out all fields when making hours request.");
+          } else {
+            if(confirm('Are you sure that you want to send this request for hours?')) {
+              const timeHours   = (timeElement  .value)
+                                  /60;
+              const traineeName = traineeElement.value;
+              const date        = dateElement   .value;
+
+              store.dispatch(requestHours(timeHours, traineeName, date));
+
+              timeElement     .value = "";
+              traineeElement  .value = "";
+              dateElement     .value = "";
+            }
+        }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2