Working on displaying the requests with custom element request-grid.

1 files changed, 93 insertions, 0 deletions

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);