Developed more styling and backend for account page.

1 files changed, 66 insertions, 13 deletions

diff --git a/src/components/mao-account.js b/src/components/mao-account.js
index 6fb1d3d..f6f32c6 100644
--- a/src/components/mao-account.js
+++ b/src/components/mao-account.js
@@ -32,14 +32,9 @@ 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';
 import '@polymer/paper-button/paper-button.js';
 
-// Import other customElements
-import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
-
 class MaoAccount extends connect(store)(PageViewElement) {
   _render(props) {
     return html`
@@ -48,7 +43,7 @@ class MaoAccount extends connect(store)(PageViewElement) {
 
       <style>
 
-      .sign-in-card {
+      .sign-in-card, .acc-info-card {
         display: block;
       }
 
@@ -57,15 +52,23 @@ class MaoAccount extends connect(store)(PageViewElement) {
         margin-right: auto;
         display: block;
         width: 50%;
-        }
       }
+
+      .account-email {
+        word-break: break-all;
+      }
+
+      .center {
+        text-align: center;
+      }
+
       </style>
 
 
 
       <section>
 
-        <paper-card class="sign-in-card" elevation="0">
+        <paper-card class="sign-in-card" elevation="0" hidden="${props.signedIn}">
 
           <div class="card-content">
             <h2 class="underline">Sign In</h2>
@@ -79,7 +82,32 @@ class MaoAccount extends connect(store)(PageViewElement) {
 
           <div class="card-actions">
             <paper-button class="info" hidden="${props.signedIn}"  raised on-tap="${() => this.logIn()}">Sign In</paper-button>
-            <paper-button class="info" hidden="${!props.signedIn}" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button>
+          </div>
+
+        </paper-card>
+
+        <paper-card class="acc-info-card" elevation="0" hidden="${!props.signedIn}">
+
+          <div class="card-content">
+            <h2 class="underline">Account</h2>
+
+            <div class="center">
+              <h3>Email</h3>
+              <p class="account-email">${props.userEmail}</p>
+
+              <h3>Username</h3>
+              <p>${props.userEmail.replace("@communityschoolnaples.org", "")}</p>
+
+              <h3>Divison</h3>
+              <p>Mu</p>
+
+              <h3 hidden="${props.registeredComps.length<1}">Registered Competitions</h3>
+              <div id="competition-list"></div>
+            </div>
+          </div>
+
+          <div class="card-actions">
+            <paper-button class="info" raised on-tap="${() => store.dispatch(signOut())}">Sign Out</paper-button>
           </div>
 
         </paper-card>
@@ -90,13 +118,19 @@ class MaoAccount extends connect(store)(PageViewElement) {
 
   static get properties() { return {
     // This is the data from the store.
-    signedIn:       Boolean,
-    authMessage:    String
+    signedIn:         Boolean,
+    authMessage:      String,
+    userEmail:        String,
+    registeredComps:  Array
   }}
 
   _stateChanged(state) {
-    this.signedIn       = state.firebase.initialized;
-    this.authMessage    = state.firebase.authMessage;
+    this.signedIn     = state.firebase.initialized;
+    this.authMessage  = state.firebase.authMessage;
+    this.userEmail    = state.firebase.userEmail;
+
+    this.registeredComps  =     state.firebase.registeredComps;
+    this.createCompetitionList( this.registeredComps);
   }
 
   logIn() {
@@ -113,6 +147,25 @@ class MaoAccount extends connect(store)(PageViewElement) {
     passwordElement.value = "";
   }
 
+  createCompetitionList(comps) {
+    if(this.shadowRoot) {
+      var listArea        = this.shadowRoot.getElementById('competition-list');
+      listArea.innerHTML  = "";
+
+      var mainDiv   = document.createElement('div');
+      mainDiv.role  = "listbox";
+
+      for(var i = 0; i < comps.length; i++) {
+        var competitionElement        = document.createElement('p');
+        competitionElement.innerHTML  = comps[i];
+        competitionElement.class      = "center";
+        mainDiv.appendChild(            competitionElement);
+      }
+
+      listArea.appendChild(mainDiv);
+    }
+  }
+
 }
 
 window.customElements.define('mao-account', MaoAccount);