From 63a5fe7906716a98d9b51a3bb30f23f45114ef83 Mon Sep 17 00:00:00 2001
From: Michael Foiani <mfoiani2019@communityschoolnaples.org>
Date: Fri, 27 Jul 2018 01:05:50 -0400
Subject: Created dedicated tutoring page and styled it a little.

---
 src/components/mao-app.js          |   6 +-
 src/components/mao-competitions.js |   6 -
 src/components/mao-home.js         |  31 +----
 src/components/mao-tutoring.js     | 234 +++++++++++++++++++++++++++++++++++++
 src/components/shared-styles.js    |   7 ++
 5 files changed, 245 insertions(+), 39 deletions(-)
 create mode 100644 src/components/mao-tutoring.js

(limited to 'src/components')

diff --git a/src/components/mao-app.js b/src/components/mao-app.js
index 2694950..d346fbc 100644
--- a/src/components/mao-app.js
+++ b/src/components/mao-app.js
@@ -196,7 +196,7 @@ class MaoApp extends connect(store)(LitElement) {
       <!-- This gets hidden on a small screen-->
       <nav class="toolbar-list">
         <a selected?="${_page === 'home'}" href="/home">Home</a>
-        <a selected?="${_page === 'view2'}" href="/view2">View Two</a>
+        <a selected?="${_page === 'tutor'}" href="/tutor">Tutoring</a>
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
       </nav>
     </app-header>
@@ -206,7 +206,7 @@ class MaoApp extends connect(store)(LitElement) {
         on-opened-changed="${e => store.dispatch(updateDrawerState(e.target.opened))}">
       <nav class="drawer-list">
         <a selected?="${_page === 'home'}" href="/home">Home</a>
-        <a selected?="${_page === 'view2'}" href="/view2">View Two</a>
+        <a selected?="${_page === 'tutor'}" href="/tutor">Tutoring</a>
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
       </nav>
     </app-drawer>
@@ -214,7 +214,7 @@ class MaoApp extends connect(store)(LitElement) {
     <!-- Main content -->
     <main role="main" class="main-content">
       <mao-home class="page" active?="${_page === 'home'}"></mao-home>
-      <my-view2 class="page" active?="${_page === 'view2'}"></my-view2>
+      <mao-tutoring class="page" active?="${_page === 'tutor'}"></mao-tutoring>
       <mao-competitions class="page" active?="${_page === 'compete'}"></mao-competitions>
       <my-view404 class="page" active?="${_page === 'view404'}"></my-view404>
     </main>
diff --git a/src/components/mao-competitions.js b/src/components/mao-competitions.js
index 53e0b29..d145c3c 100644
--- a/src/components/mao-competitions.js
+++ b/src/components/mao-competitions.js
@@ -44,12 +44,6 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
       ${SharedStyles}
       ${ButtonSharedStyles}
       <style>
-      .underline {
-        border-bottom: 1px solid var(--app-primary-color);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
 
       .non-mao-test-grid {
         display:  grid;
diff --git a/src/components/mao-home.js b/src/components/mao-home.js
index 6cca2ef..279bac4 100644
--- a/src/components/mao-home.js
+++ b/src/components/mao-home.js
@@ -36,28 +36,11 @@ class MaoHome extends connect(store)(PageViewElement) {
   _render(props) {
     return html`
       ${SharedStyles}
-      <section>
-        <h2>Tutoring</h2>
-        <p hidden="${this.signedIn}"  >You must sign in to see hours</p>
-        <p hidden="${!this.signedIn}" >You have ${props.hours} hours</p>
-
-      </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>
-        <paper-input label="username" id="emailField">
-          <div slot="suffix">@communityschoolnaples.org</div>
-        </paper-input>
-
-        <paper-input label="password" id="passwordField">
-        </paper-input>
-
-        <paper-button disabled="${this.signedIn}"  raised on-tap="${() => this.logIn()}">Sign In</paper-button>
-        <paper-button disabled="${!this.signedIn}" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button>
       </section>
     `;
   }
@@ -70,18 +53,6 @@ class MaoHome extends connect(store)(PageViewElement) {
   }}
 
   _stateChanged(state) {
-    this.hours        = state.firebase.hours;
-
-    this.signedIn     = state.firebase.initialized;
-    this.authMessage  = state.firebase.authMessage;
-  }
-
-  logIn() {
-    const email     = this.shadowRoot.getElementById('emailField')    .value +
-                      '@communityschoolnaples.org';
-    const password  = this.shadowRoot.getElementById('passwordField') .value;
-
-    store.dispatch(signIn(email,password));
   }
 
 }
diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
new file mode 100644
index 0000000..c4d2911
--- /dev/null
+++ b/src/components/mao-tutoring.js
@@ -0,0 +1,234 @@
+/**
+@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 { signIn, signOut } 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-button/paper-button.js';
+
+class MaoTutoring extends connect(store)(PageViewElement) {
+  _render(props) {
+    return html`
+      ${SharedStyles}
+      ${ButtonSharedStyles}
+
+      <style>
+
+      .tutoring-grid {
+        display:  grid;
+        grid-gap: 10px;
+
+        grid-template-areas:
+                        "title"
+                        "card1"
+                        "card2";
+      }
+
+      .title {
+        grid-area: title;
+      }
+
+      .tutorCard, .hoursCard {
+        background-color: #f7f7f7;
+        padding:          1px;
+      }
+
+      .tutorCard {
+        grid-area: card1;
+      }
+
+      .hoursCard {
+        grid-area: card2;
+      }
+
+      .hours-grid {
+        display:  grid;
+        grid-gap: 10px;
+
+        grid-template-areas:
+                        "title"
+                        "item1"
+                        "item2"
+                        "action1";
+      }
+
+      .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 {
+        grid-area:  action1;
+      }
+
+      h3 {
+        text-align: center;
+      }
+
+      @media (min-width: 460px) {
+        .tutoring-grid {
+          grid-template-areas:
+                          "title title"
+                          "card1 card2";
+        }
+
+        .hours-grid {
+          grid-template-areas:
+                          "title    title"
+                          "item1    item2"
+                          "action1  action1";
+        }
+
+        .tutorCard, .hoursCard {
+          padding:  1em;
+        }
+      }
+
+      </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>
+            <paper-button
+            class="info"
+            raised
+            hidden="${props.loginFieldsOpened}"
+            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">
+              </paper-input>
+
+              <paper-button disabled="${props.signedIn}"  raised on-tap="${() => this.logIn()}">Sign In</paper-button>
+              <paper-button disabled="${!props.signedIn}" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button>
+            </div>
+          </div>
+
+          <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 class="hours-grid">
+
+              <div class="title">
+                <h2 class="underline">Summmary</h2>
+              </div>
+
+              <div class="approved-card">
+                <h3>Approved Hours</h3>
+                <div 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>
+
+              <div class="sumbit-hours">
+                <paper-button class="info" id="submit-hours-btn" raised>Submit Hours</paper-button>
+              </div>
+
+            </div>
+
+          </div>
+
+        </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>
+    `;
+  }
+
+  static get properties() { return {
+    // This is the data from the store.
+    signedIn:     Boolean,
+    authMessage:  String,
+    hours:        Number,
+
+    loginFieldsOpened: Boolean
+  }}
+
+  _stateChanged(state) {
+    this.hours        = state.firebase.hours;
+    this.signedIn     = state.firebase.initialized;
+    this.authMessage  = state.firebase.authMessage;
+
+    this.loginFieldsOpened = false;
+  }
+
+  logIn() {
+    const email     = this.shadowRoot.getElementById('emailField')    .value +
+                      '@communityschoolnaples.org';
+    const password  = this.shadowRoot.getElementById('passwordField') .value;
+
+    store.dispatch(signIn(email,password));
+  }
+
+  toggleloginFields() {
+    this.loginFieldsOpened = !this.loginFieldsOpened;
+
+    this.shadowRoot.getElementById('tutoring-grid').style = 'grid-template-areas: "title" "card1" "card2";';
+  }
+
+}
+
+window.customElements.define('mao-tutoring', MaoTutoring);
diff --git a/src/components/shared-styles.js b/src/components/shared-styles.js
index 4e938ed..02ea4bf 100644
--- a/src/components/shared-styles.js
+++ b/src/components/shared-styles.js
@@ -56,5 +56,12 @@ export const SharedStyles = html`
     font-size: 30px;
     line-height: 64px;
   }
+
+  .underline {
+    border-bottom: 1px solid var(--app-primary-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>
 `;
-- 
cgit v1.2.3-70-g09d2