Finished registry of competitions showing for administrator logins.

6 files changed, 205 insertions, 16 deletions

diff --git a/src/actions/app.js b/src/actions/app.js
index 5a77ae6..c60f6e9 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -49,7 +49,7 @@ const loadPage = (page) => (dispatch) => {
           dispatch(snapshotFourms());
           hasSubscribedPosts  = true;
         }
-      });;
+      });
       break;
     case 'account':
       import('../components/mao-account.js');
diff --git a/src/actions/firebase.js b/src/actions/firebase.js
index 631599f..5f24170 100644
--- a/src/actions/firebase.js
+++ b/src/actions/firebase.js
@@ -165,18 +165,24 @@ export const UPDATE_ADMIN_COMP_LIST           = 'UPDATE_ADMIN_COMP_LIST';
 export const registerComp = (compName) => (dispatch, getState) => {
   var docRef  = firestore.collection('competitions').doc(compName);
   var uid     = getState().firebase.uid;
+  var email   = getState().firebase.userEmail;
 
   docRef.get().then((doc) => {
     if(doc.exists) {
-      var uidArr  = doc.data().uids;
+      var uidArr    = doc.data().uids;
+      var emailArr  = doc.data().emails;
+
       uidArr.push(uid);
+      emailArr.push(email);
 
       docRef.set({
-        uids: uidArr
+        uids:   uidArr,
+        emails: emailArr
       });
     } else {
       docRef.set({
-        uids  : [uid]
+        uids  : [uid],
+        emails: [email]
       });
     }
   });
@@ -208,7 +214,10 @@ export const snapshotAdminCompList = () => (dispatch) => {
   docRef.onSnapshot((querySnapshot) => {
     var compList = [];
     querySnapshot.forEach((doc) => {
-        compList.push(doc.data());
+        compList.push({
+          ...doc.data(),
+          name: doc.id
+        });
     });
     dispatch(updateAdminCompList(compList));
   });
diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js
index 724c0c9..4d8b28e 100644
--- a/src/components/mao-admin.js
+++ b/src/components/mao-admin.js
@@ -37,6 +37,7 @@ import '@polymer/paper-button/paper-button.js';
 
 // Import custom elements
 import './request-element.js';
+import './registry-element.js';
 
 class MaoAdmin extends connect(store)(PageViewElement) {
   _render(props) {
@@ -52,10 +53,9 @@ class MaoAdmin extends connect(store)(PageViewElement) {
 
       paper-button {
         display:  block;
-        width:    50%;
       }
 
-      .requests-grid {
+      .main-grid {
         display:  grid;
         grid-gap: 10px;
 
@@ -64,7 +64,7 @@ class MaoAdmin extends connect(store)(PageViewElement) {
 
 
       @media (min-width: 460px) {
-        .requests-grid {
+        .main-grid {
           grid-template-columns: 1fr 1fr;
         }
       }
@@ -77,14 +77,27 @@ class MaoAdmin extends connect(store)(PageViewElement) {
 
       <h2 class="underline">Hello Admin!</h2>
 
-      <paper-button raised class="info" id="toggleRequestsBtn" on-tap="${() => this.toggleRequests()}">Show Hours Requests</paper-button>
+      <div class="main-grid">
+        <paper-button raised class="info" id="toggleRequestsBtn" on-tap="${() => this.toggleRequests()}">Show Hours Requests</paper-button>
+        <paper-button raised class="success" id="toggleRegistryBtn" on-tap="${() => this.toggleRegistry()}">Show Competitions And Registry</paper-button>
+      </div>
 
       <br/>
 
       <div hidden="${props.requestsHidden}">
-        <div id="requests-grid" class="requests-grid"></div>
+        <div id="requests-grid" class="main-grid"></div>
+      </div>
+
+      <div hidden="${props.registryHidden || props.requestsHidden}">
+        <br/>
+        <hr/>
+        <br/>
       </div>
-      
+
+      <div hidden="${props.registryHidden}">
+        <div id="registry-grid" class="main-grid"></div>
+      </div>
+
       </section>
     `;
   }
@@ -95,9 +108,10 @@ class MaoAdmin extends connect(store)(PageViewElement) {
     isAdmin:  Boolean,
 
     requests: Array,
-    compList: Array,
+    registry: Array,
 
-    requestsHidden: Boolean
+    requestsHidden: Boolean,
+    registryHidden: Boolean
   }}
 
   _stateChanged(state) {
@@ -105,10 +119,12 @@ class MaoAdmin extends connect(store)(PageViewElement) {
     this.isAdmin  = state.firebase.isAdmin;
 
     this.requests = state.firebase.requests;
-    this.compList = state.firebase.compList;
-    this.updateInformation();
+    this.registry = state.firebase.compList;
 
     this.requestsHidden = true;
+    this.registryHidden = true;
+
+    this.updateInformation();
   }
 
   toggleRequests() {
@@ -118,12 +134,27 @@ class MaoAdmin extends connect(store)(PageViewElement) {
       var btn = this.shadowRoot.getElementById('toggleRequestsBtn');
       if(this.requestsHidden) {
         btn.innerHTML = "Show Hours Requests";
+        this.updateInformation();
       } else {
         btn.innerHTML = "Hide Hours Requests";
       }
     }
   }
 
+  toggleRegistry() {
+    this.registryHidden = !this.registryHidden;
+
+    if(this.shadowRoot) {
+      var btn = this.shadowRoot.getElementById('toggleRegistryBtn');
+      if(this.registryHidden) {
+        btn.innerHTML = "Show Comps & Registry";
+        this.updateInformation();
+      } else {
+        btn.innerHTML = "Hide Comps & Registry";
+      }
+    }
+  }
+
   updateInformation() {
     if(this.shadowRoot) {
       //update requests
@@ -142,6 +173,19 @@ class MaoAdmin extends connect(store)(PageViewElement) {
 
         requestGrid.appendChild(requestElement);
       }
+
+      //update registry
+      var registryGrid        = this.shadowRoot.getElementById('registry-grid');
+      registryGrid.innerHTML  = "";
+
+      for(var i = 0; i<this.registry.length; i++) {
+        var registryElement   = document.createElement('registry-element');
+
+        registryElement.name    = this.registry[i].name;
+        registryElement.emails  = this.registry[i].emails;
+
+        registryGrid.appendChild(registryElement);
+      }
     }
   }
 
diff --git a/src/components/mao-fourms.js b/src/components/mao-fourms.js
index 4aa9873..0672da4 100644
--- a/src/components/mao-fourms.js
+++ b/src/components/mao-fourms.js
@@ -176,7 +176,7 @@ class MaoFourms extends connect(store)(PageViewElement) {
         var fourmAuthor   = document.createElement('h4');
         var fourmSubject  = document.createElement('h3');
         var fourmContent  = document.createElement('p');
-        
+
         fourmAuthor.innerHTML   = this.fourmPosts[i].email  .replace('@communityschoolnaples.org', '');
         fourmSubject.innerHTML  = this.fourmPosts[i].subject;
         fourmContent.innerHTML  = this.fourmPosts[i].content;
diff --git a/src/components/registry-element.js b/src/components/registry-element.js
new file mode 100644
index 0000000..a5ce075
--- /dev/null
+++ b/src/components/registry-element.js
@@ -0,0 +1,135 @@
+/**
+@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 { LitElement, html } from '@polymer/lit-element';
+
+// Import button styles
+import { ButtonSharedStyles } from './button-shared-styles.js';
+
+// Import paper elements
+import '@polymer/paper-card/paper-card.js';
+import '@polymer/paper-button/paper-button.js';
+
+class RegistryElement extends LitElement {
+  _render(props) {
+    return html`
+      ${ButtonSharedStyles}
+
+      <style>
+
+        paper-card {
+            --paper-card-background-color: #ffffff;
+            width:      100%;
+            text-align: center;
+
+            font-size: 125%;
+        }
+
+        .mus {
+          color: #f09300;
+        }
+
+        .thetas {
+          color: #f09300;
+        }
+
+        .alphas {
+          color: #7baaf7;
+        }
+
+        ol, h4 {
+          text-align: left;
+          word-break: break-all;
+        }
+
+      </style>
+      <paper-card
+      onmouseover   ="${() => this.toggleTabOpen()}"
+      onmouseout    ="${() => this.toggleTabClosed()}">
+        <div class="card-content">
+            <h3>${props.name}</h3>
+            <div class="info-tab" id="name-list" hidden="${!props.infoTabOpen}">
+
+              <h4 class="mus">Mus</h4>
+              <ol class="mus" id="name-list-mu">
+              </ol>
+
+              <h4 class="alphas">Alphas</h4>
+              <ol class="alphas" id="name-list-alpha">
+              </ol>
+
+              <h4 class="thetas">Thetas</h4>
+              <ol class="thetas" id="name-list-theta">
+              </ol>
+
+
+              <!--h4>Stats</h4>
+              <ol id="name-list-stats">
+              </ol-->
+            </div>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() { return {
+    name:   String,
+    emails: Array,
+
+    infoTabOpen:  Boolean
+  }};
+
+  constructor() {
+    super();
+
+    this.name   = "";
+    this.emails = [];
+
+    this.infoTabOpen  = false;
+  }
+
+  toggleTabOpen() {
+    this.sortNames();
+    this.infoTabOpen  = true;
+  }
+
+  toggleTabClosed() {
+    this.infoTabOpen  = false;
+  }
+
+  sortNames() {
+    var thetas  = this.shadowRoot.getElementById('name-list-theta');
+    var alphas  = this.shadowRoot.getElementById('name-list-alpha');
+    var mus     = this.shadowRoot.getElementById('name-list-mu');
+    //var stats   = this.shadowRoot.getElementById('name-list-stats');
+
+    thetas.innerHTML  = "";
+    alphas.innerHTML  = "";
+    mus   .innerHTML  = "";
+
+    for(var i=0; i<this.emails.length; i++) {
+      var listElement       = document        .createElement('li');
+      listElement.innerHTML = this.emails[i]  .replace('@communityschoolnaples.org', '');
+      if        (this.emails[i].includes('2019')) {
+        mus     .appendChild(listElement);
+      } else if (this.emails[i].includes('2020')) {
+        alphas  .appendChild(listElement)
+      } else if (this.emails[i].includes('2019')) {
+        thetas  .appendChild(listElement)
+      } else {
+        thetas  .appendChild(listElement);
+      }
+    }
+
+  }
+
+}
+
+window.customElements.define('registry-element', RegistryElement);
diff --git a/src/components/request-element.js b/src/components/request-element.js
index 55c9588..0e65d0d 100644
--- a/src/components/request-element.js
+++ b/src/components/request-element.js
@@ -15,6 +15,7 @@ import { ButtonSharedStyles } from './button-shared-styles.js';
 
 // Import paper elements
 import '@polymer/paper-card/paper-card.js';
+import '@polymer/paper-button/paper-button.js';
 
 class RequestElement extends LitElement {
   _render(props) {