From eb948ad14ddd58e483bd8545c1fca64f50ddb648 Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp.lan>
Date: Sat, 28 Jul 2018 23:14:01 -0400
Subject: Adding some basic changes to tutoring frontend.

---
 src/components/mao-competitions.js |   9 +--
 src/components/mao-tutoring.js     | 117 +++++++++++++++++++------------------
 2 files changed, 66 insertions(+), 60 deletions(-)

(limited to 'src')

diff --git a/src/components/mao-competitions.js b/src/components/mao-competitions.js
index d145c3c..ba00a2f 100644
--- a/src/components/mao-competitions.js
+++ b/src/components/mao-competitions.js
@@ -296,6 +296,7 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
         initialized="${props.initialized}"
         isRegistered="${props.registeredComps.includes('fml')}"
         on-register-comp="${() => store.dispatch(registerComp(this.shadowRoot.getElementById('fml-test-element').name))}">
+        </test-element>
       </div>
 
     </section>
@@ -321,15 +322,15 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
   }
 
   registerNationals() {
-    this.nationalRegistered = true;
+    store.dispatch(registerComp('nationals'));
 
-    store.dispatch(registerComp('nationals'))
+    this.nationalRegistered = true;
   }
 
   registerStates() {
-    this.statesRegistered = true;
+    store.dispatch(registerComp('states'));
 
-    store.dispatch(registerComp('states'))
+    this.statesRegistered = true;
   }
 
 }
diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index c9840a0..d55b11f 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.js
@@ -31,6 +31,7 @@ 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';
@@ -81,8 +82,7 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         grid-template-areas:
                         "title"
                         "item1"
-                        "item2"
-                        "action1";
+                        "item2";
       }
 
       .approved-card {
@@ -102,7 +102,11 @@ class MaoTutoring extends connect(store)(PageViewElement) {
       }
 
       .submit-hours {
-        grid-area:  action1;
+        width: 100%;
+      }
+
+      paper-card {
+        --paper-card-background-color: #f7f7f7;
       }
 
       h3 {
@@ -123,8 +127,7 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         .hours-grid {
           grid-template-areas:
                           "title    title"
-                          "item1    item2"
-                          "action1  action1";
+                          "item1    item2";
         }
 
         .tutorCard, .hoursCard {
@@ -148,6 +151,7 @@ class MaoTutoring extends connect(store)(PageViewElement) {
             raised
             hidden="${props.loginFieldsOpened}"
             on-tap="${() => this.toggleloginFields()}">Sign In</paper-button>
+
             <div hidden="${!props.loginFieldsOpened}">
               <paper-input label="username" id="emailField">
               </paper-input>
@@ -166,80 +170,81 @@ class MaoTutoring extends connect(store)(PageViewElement) {
             <p>You must sign in to see hours</p>
           </div>
 
-          <div hidden="${!props.signedIn}" class="hoursCard">
 
-            <div class="hours-grid">
+          <paper-card
+          elevation="0"
+          class="hoursCard"
+          hidden="${!props.signedIn}">
 
-              <div class="title">
-                <h2 class="underline">Summmary</h2>
-              </div>
+            <div class="card-content">
 
-              <div class="approved-card">
-                <h3>Approved Hours</h3>
-                <div
-                hidden= "${props.hours==-1}"
-                class=  "circle"
-                style=  "background-color: #0f9d58;">${props.hours}</div>
-              </div>
+              <div class="hours-grid">
 
-              <div class="unapproved-card">
-                <h3>Requested Hours</h3>
-                <div
-                hidden= "${props.requestedHours==-1}"
-                class=  "circle"
-                style=  "background-color: #f4b400;">${props.requestedHours}</div>
-              </div>
+                <div class="title">
+                  <h2 class="underline">Summmary</h2>
+                </div>
 
-              <div class="sumbit-hours">
-                <paper-button
-                class="info"
-                id="submit-hours-btn"
-                on-tap="${() => this.toggleSubmitFields()}"
-                hidden="${props.submitFieldsOpened}"
-                raised>
-                  Submit Hours
-                </paper-button>
+                <div class="approved-card">
+                  <h3>Approved Hours</h3>
+                  <div
+                  hidden= "${props.hours===-1}"
+                  class=  "circle"
+                  style=  "background-color: #0f9d58;">${props.hours}</div>
+                </div>
+
+                <div class="unapproved-card">
+                  <h3>Requested Hours</h3>
+                  <div
+                  hidden= "${props.requestedHours===-1}"
+                  class=  "circle"
+                  style=  "background-color: #f4b400;">${props.requestedHours}</div>
+                </div>
 
-                <div class="submit-card" hidden="${!props.submitFieldsOpened}">
+              </div>
 
-                  <h3>Fill Fields</h3>
+            </div>
 
-                  <p>How many hours of tutoring?</p>
+            <div class="card-actions">
+              <paper-button
+              class="info"
+              id="submit-hours-btn"
+              on-tap="${() => this.toggleSubmitFields()}"
+              hidden="${props.submitFieldsOpened}"
+              raised>
+                Submit Hours
+              </paper-button>
 
-                  <paper-input id="timeField" label="Time"><span slot="suffix">(in minutes)</span></paper-input>
+              <div class="submit-card" hidden="${!props.submitFieldsOpened}">
 
-                  <paper-input id="traineeField" label="Trainee's Name"></paper-input>
+                <h3>Fill Fields</h3>
 
-                  <vaadin-date-picker id="dateField" placeholder="Choose Date">
-                  </vaadin-date-picker>
+                <p>How many hours of tutoring?</p>
 
-                  <paper-button
-                  class="info"
-                  id="submit-form-btn"
-                  on-tap="${() => this.requestHours()}"
-                  raised>
-                    Submit Form
-                  </paper-button>
+                <paper-input id="timeField" label="Time"><span slot="suffix">(in minutes)</span></paper-input>
 
-                </div>
-              </div>
+                <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>
+          </paper-card>
 
         </div>
-
       </section>
       <section>
-        <h2>Welcome ${props.authMessage}</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare, aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.</p>
 
 
-      </section>
-      <section>
 
       </section>
     `;
@@ -285,7 +290,7 @@ class MaoTutoring extends connect(store)(PageViewElement) {
   }
 
   requestHours() {
-
+    alert(this.shadowRoot.getElementById('dateField').value);
   }
 
 }
-- 
cgit v1.2.3-70-g09d2