From 991cdd14e8e7b112a9894d8ad5146d9793dde644 Mon Sep 17 00:00:00 2001
From: Michael Foiani <mfoiani2019@communiyschoolnaples.org>
Date: Wed, 1 Aug 2018 19:14:39 -0400
Subject: Successfully added admin page and connected it to main app.

---
 src/components/mao-admin.js | 88 +++++++++++++++++++++++++++++++++++++++++++--
 src/components/mao-app.js   |  7 ++--
 2 files changed, 89 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js
index 8cc93ca..3bcc4c9 100644
--- a/src/components/mao-admin.js
+++ b/src/components/mao-admin.js
@@ -43,13 +43,42 @@ class MaoAdmin extends connect(store)(PageViewElement) {
 
       <style>
 
+      paper-card {
+        display: block;
+      }
+
+      paper-button {
+        display:  block;
+        width:    50%;
+      }
+
+      .requests-grid {
+        display:  grid;
+        grid-gap: 10px;
+
+        grid-template-columns: 1fr;
+      }
+
+
+      @media (min-width: 460px) {
+        .requests-grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+
       </style>
 
 
 
       <section hidden="${!props.isAdmin}">
 
-      Admin Stuff
+      <h2 class="underline">Hello Admin!</h2>
+
+      <paper-button raised class="info" id="toggleRequestsBtn" on-tap="${() => this.toggleRequests()}">Show Hours Requests</paper-button>
+
+      <div id="requests-grid" hidden="${props.requestsHidden}">
+        Requests
+      </div>
 
       </section>
     `;
@@ -58,12 +87,67 @@ class MaoAdmin extends connect(store)(PageViewElement) {
   static get properties() { return {
     // This is the data from the store.
     signedIn: Boolean,
-    isAdmin:  Boolean
+    isAdmin:  Boolean,
+
+    requests: Array,
+    compList: Array,
+
+    requestsHidden: Boolean
   }}
 
   _stateChanged(state) {
     this.signedIn = state.firebase.initialized;
     this.isAdmin  = state.firebase.isAdmin;
+
+    this.requests = state.firebase.requests;
+    this.compList = state.firebase.compList;
+    this.updateInformation();
+
+    this.requestsHidden = true;
+  }
+
+  toggleRequests() {
+    this.requestsHidden = !this.requestsHidden;
+
+    if(this.shadowRoot) {
+      var btn = this.shadowRoot.getElementById('toogleRequestsBtn');
+      if(this.requestsHidden) {
+        btn.innerHTML = "Show Hours Requests";
+      } else {
+        btn.innerHTML = "Hide Hours Requests";
+      }
+    }
+  }
+
+  updateInformation() {
+    if(this.shadowRoot) {
+      /*
+      var requestsGrid       = this.shadowRoot.getElementById('requests-grid');
+      postsGrid.innerHTML = "";
+
+      for(var i = 0; i < this.requests.length; i++) {
+        var paperCard     = document.createElement('paper-card');
+        var cardContent   = document.createElement('div');
+        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;
+
+        cardContent.classList.add('card-content');
+        cardContent.appendChild(  fourmAuthor);
+        cardContent.appendChild(  fourmSubject);
+        cardContent.appendChild(  fourmContent);
+
+        paperCard.elevation     = 0;
+        paperCard.appendChild(  cardContent);
+
+        postsGrid.appendChild(paperCard);
+        */
+      }
+    }
   }
 
 
diff --git a/src/components/mao-app.js b/src/components/mao-app.js
index 5101ab7..530d460 100644
--- a/src/components/mao-app.js
+++ b/src/components/mao-app.js
@@ -207,7 +207,7 @@ class MaoApp extends connect(store)(LitElement) {
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
         <a selected?="${_page === 'fourms'}" href="/fourms">Fourms</a>
         <a selected?="${_page === 'account'}" href="/account">Account</a>
-        <a hidden="${!_isAdmin}"
+        <a style="display: ${_isAdmin ? 'inline-block' : 'none'};"
            selected?="${_page === 'admin'}" href="/admin">Admin</a>
       </nav>
     </app-header>
@@ -221,7 +221,7 @@ class MaoApp extends connect(store)(LitElement) {
         <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
         <a selected?="${_page === 'fourms'}" href="/fourms">Fourms</a>
         <a selected?="${_page === 'account'}" href="/account">Account</a>
-        <a hidden="${!_isAdmin}"
+        <a style="display: ${_isAdmin ? 'inline-block' : 'none'};"
            selected?="${_page === 'admin'}" href="/admin">Admin</a>
       </nav>
     </app-drawer>
@@ -233,8 +233,7 @@ class MaoApp extends connect(store)(LitElement) {
       <mao-competitions class="page" active?="${_page === 'compete'}"></mao-competitions>
       <mao-account class="page" active?="${_page === 'account'}"></mao-account>
       <mao-fourms class="page" active?="${_page === 'fourms'}"></mao-fourms>
-      <mao-admin hidden="${!_isAdmin}"
-                  class="page" active?="${_page === 'admin'}"></mao-admin>
+      <mao-admin class="page" active?="${_page === 'admin'}"></mao-admin>
       <my-view404 class="page" active?="${_page === 'view404'}"></my-view404>
     </main>
 
-- 
cgit v1.2.3-70-g09d2