diff options
Diffstat (limited to 'src/components/mao-admin.js')
-rw-r--r-- | src/components/mao-admin.js | 125 |
1 files changed, 104 insertions, 21 deletions
diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js index 1ce85e7..be04fb2 100644 --- a/src/components/mao-admin.js +++ b/src/components/mao-admin.js @@ -52,10 +52,14 @@ class MaoAdmin extends connect(store)(PageViewElement) { grid-template-columns: 1fr; } + tbody { + text-aliign: center; + } + @media (min-width: 460px) { .main-grid { - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } } @@ -65,29 +69,50 @@ class MaoAdmin extends connect(store)(PageViewElement) { <section hidden="${!props.isAdmin}"> - <h2 class="underline">Hello Admin!</h2> + <h2 class="underline">Hello Admin!</h2> - <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> + <div class="main-grid"> + <paper-button raised class="info" id="toggleRequestsBtn" on-tap="${() => this.toggleRequests()}">Show Hours Requests</paper-button> + <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => this.toggleRegistry()}">Show Competitions And Registry</paper-button> + <paper-button raised class="info" id="toggleRegistryBtn" on-tap="${() => this.usersHidden = !this.usersHidden}">Show User Data</paper-button> + </div> + + <br/> - <br/> + <div hidden="${props.requestsHidden}"> + <div id="requests-grid" class="main-grid"></div> + </div> - <div hidden="${props.requestsHidden}"> - <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> - <div hidden="${props.registryHidden || props.requestsHidden}"> + <div hidden="${props.usersHidden}"> <br/> <hr/> <br/> </div> - <div hidden="${props.registryHidden}"> - <div id="registry-grid" class="main-grid"></div> - </div> - + <section hidden="${!props.isAdmin || props.usersHidden}"> + <table> + <thead> + <tr> + <th>Username</th> + <th>Hours</th> + <th>Divison</th> + </tr> + <thead> + <tbody id="users-table-body"> + </tbody> + </table> </section> `; } @@ -97,6 +122,7 @@ class MaoAdmin extends connect(store)(PageViewElement) { this.requestsHidden = true; this.registryHidden = true; + this.usersHidden = true; } static get properties() { return { @@ -106,9 +132,11 @@ class MaoAdmin extends connect(store)(PageViewElement) { requests: Array, registry: Array, adminImgs: String, + users: Array, requestsHidden: Boolean, - registryHidden: Boolean + registryHidden: Boolean, + usersHidden: Boolean }} _firstRendered() { @@ -120,7 +148,7 @@ class MaoAdmin extends connect(store)(PageViewElement) { this.isAdmin = state.firebaseAdmin .isAdmin; this.requests = state.firebaseAdmin .requests; this.registry = state.firebaseAdmin .compList; - + this.users = state.firebaseAdmin .userList; this.adminImgs = state.firebaseAdmin.adminImgs; this.updateInformation(); @@ -194,11 +222,66 @@ class MaoAdmin extends connect(store)(PageViewElement) { registryGrid.appendChild(registryElement); } - } - } - approveHours() { - alert("Approve hours"); + //update users + var tableBody = this.shadowRoot.getElementById('users-table-body'); + tableBody.innerHTML = ""; + + this.users.forEach((user) => { + user = user.data(); + + var tableRow = document.createElement('tr'); + + var userEle = document.createElement('td'); + userEle.innerHTML = "Username"; + + + var hoursEle = document.createElement('td'); + hoursEle.innerHTML = user['hours']; + + if(user['hours'] <= 1.0) { + hoursEle.style.color = 'red'; + } + + else if (user['hours'] < 5.0) { + hoursEle.style.color = 'yellow'; + } + + else { + hoursEle.style.color = 'green'; + } + + + var divisonEle = document .createElement('td'); + divisonEle.innerHTML = user['divison']; + switch (user['divison']) { + case 'Mu': + divisonEle.style.color = "#f09300"; + break; + + case 'Alpha': + divisonEle.style.color = "#7baaf7"; + break; + + case 'Theta': + divisonEle.style.color = "green"; + break; + + case 'Stats': + divisonEle.style.color = "red"; + break; + + default: + divisonEle.style.color = "black"; + } + + + tableRow .appendChild(userEle); + tableRow .appendChild(hoursEle); + tableRow .appendChild(divisonEle); + tableBody .appendChild(tableRow); + }); + } } |