diff options
| -rw-r--r-- | src/components/mao-admin.js | 88 | ||||
| -rw-r--r-- | src/components/mao-app.js | 7 |
2 files changed, 89 insertions, 6 deletions
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> |