diff options
| -rw-r--r-- | src/actions/firebase.js | 10 | ||||
| -rw-r--r-- | src/components/mao-admin.js | 50 | ||||
| -rw-r--r-- | src/components/request-element.js | 93 |
3 files changed, 123 insertions, 30 deletions
diff --git a/src/actions/firebase.js b/src/actions/firebase.js index 610a60f..8dea81b 100644 --- a/src/actions/firebase.js +++ b/src/actions/firebase.js @@ -216,14 +216,16 @@ export const FETCH_ADMIN_REQUESTS = 'FETCH_ADMIN_REQUESTS'; export const UPDATE_ADMIN_REQUESTS = 'UPDATE_ADMIN_REQUESTS'; export const requestHours = (_time, _trainee, _date) => (dispatch, getState) => { - var docRef = firestore.collection('requests'); - var _uid = getState().firebase.uid; + var docRef = firestore.collection('requests'); + const _uid = getState().firebase.uid; + const _email = getState().firebase.email; docRef.add({ time: _time, trainee: _trainee, date: _date, - uid: _uid + uid: _uid, + email: _email }); docRef = firestore.collection('users').doc(_uid); @@ -246,7 +248,7 @@ export const fetchAdminRequests = () => (dispatch) => { query.forEach((doc) => { requests.push(doc.data()); }); - console.log(requests); + dispatch(fetchAdminRequests(requests)); }); } diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js index 3bcc4c9..c63f952 100644 --- a/src/components/mao-admin.js +++ b/src/components/mao-admin.js @@ -16,7 +16,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js'; import { store } from '../store.js'; //These are the actions needed by this element. -import {} from '../actions/firebase.js'; +import { approveHours } from '../actions/firebase.js'; // We are lazy loading its reducer. import firebase from '../reducers/firebase.js'; @@ -35,6 +35,9 @@ import '@polymer/paper-card/paper-card.js'; import '@polymer/paper-slider/paper-slider.js'; import '@polymer/paper-button/paper-button.js'; +// Import custom elements +import './request-element.js'; + class MaoAdmin extends connect(store)(PageViewElement) { _render(props) { return html` @@ -121,35 +124,30 @@ class MaoAdmin extends connect(store)(PageViewElement) { 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); - */ + //update requests + var requestGrid = this.shadowRoot.getElementById('request-grid'); + requestGrid.innerHTML = ""; + + for(var i = 0; i<this.requests.length; i++) { + var requestElement = document.createElement('request-element'); + + requestElement.email = this.requests[i].email + .replace('@communityschoolnaples.org', ''); + requestElement.time = this.requests[i].time; + requestElement.trainee = this.requests[i].trainee; + requestElement.uid = this.requests[i].uid; + + requestElement.on-approve-hours = "${() => this.approveHours()}" + + requestGrid.appendChild(requestElement); } } } + approveHours() { + alert("Approve hours") + } + } diff --git a/src/components/request-element.js b/src/components/request-element.js new file mode 100644 index 0000000..d5aca82 --- /dev/null +++ b/src/components/request-element.js @@ -0,0 +1,93 @@ +/** +@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'; + +class RequestElement extends LitElement { + _render(props) { + return html` + ${ButtonSharedStyles} + + <style> + + paper-card { + --paper-card-background-color: #ffffff; + width: 100%; + text-align: center; + } + + .info-tab > p { + word-break: break-all; + } + + </style> + <paper-card + onmouseover ="${() => this.toggleTab()}" + onmouseout ="${() => this.toggleTab()}"> + <div class="card-content"> + <h3>From: ${'\t' + props.email.replace('@communityschoolnaples.org', '')}</h3> + <h4>Date: ${'\t' + props.date}</h4> + <div class="info-tab" hidden="${!props.infoTabOpen}"> + <p>Time: ${'\t' + this.time}</p> + <p>Trainee: ${'\t' + this.trainee}</p> + </div> + </div> + <div hidden="${!props.infoTabOpen}" class="card-actions"> + <paper-button + class="info" + raised + on-tap= "${() => this.approveHours()}"> + </paper-button> + </div> + </paper-card> + `; + } + + static get properties() { return { + email: String, + time: Number, + trainee: String, + uid: String, + + infoTabOpen: Boolean + }}; + + constructor() { + super(); + + this.email = "Unknown email"; + this.time = -1; + this.trainee = "Unknown trainee"; + this.uid = "Unknown uid"; + + this.infoTabOpen = false; + } + + toggleTab() { + this.infoTabOpen = !this.infoTabOpen; + } + + approveHours() { + if(confirm('Are you sure you want to approve' + this.time + 'hours for + ' + this.email +'?')) { + this.dispatchEvent(new CustomEvent('approve-hours')); + } + + } + + +} + +window.customElements.define('request-element', RequestElement); |