1 files changed, 135 insertions, 0 deletions
diff --git a/src/components/registry-element.js b/src/components/registry-element.js
new file mode 100644
index 0000000..a5ce075
--- /dev/null
+++ b/src/components/registry-element.js
@@ -0,0 +1,135 @@
+/**
+@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';
+import '@polymer/paper-button/paper-button.js';
+
+class RegistryElement extends LitElement {
+  _render(props) {
+    return html`
+      ${ButtonSharedStyles}
+
+      <style>
+
+        paper-card {
+            --paper-card-background-color: #ffffff;
+            width:      100%;
+            text-align: center;
+
+            font-size: 125%;
+        }
+
+        .mus {
+          color: #f09300;
+        }
+
+        .thetas {
+          color: #f09300;
+        }
+
+        .alphas {
+          color: #7baaf7;
+        }
+
+        ol, h4 {
+          text-align: left;
+          word-break: break-all;
+        }
+
+      </style>
+      <paper-card
+      onmouseover   ="${() => this.toggleTabOpen()}"
+      onmouseout    ="${() => this.toggleTabClosed()}">
+        <div class="card-content">
+            <h3>${props.name}</h3>
+            <div class="info-tab" id="name-list" hidden="${!props.infoTabOpen}">
+
+              <h4 class="mus">Mus</h4>
+              <ol class="mus" id="name-list-mu">
+              </ol>
+
+              <h4 class="alphas">Alphas</h4>
+              <ol class="alphas" id="name-list-alpha">
+              </ol>
+
+              <h4 class="thetas">Thetas</h4>
+              <ol class="thetas" id="name-list-theta">
+              </ol>
+
+
+              <!--h4>Stats</h4>
+              <ol id="name-list-stats">
+              </ol-->
+            </div>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() { return {
+    name:   String,
+    emails: Array,
+
+    infoTabOpen:  Boolean
+  }};
+
+  constructor() {
+    super();
+
+    this.name   = "";
+    this.emails = [];
+
+    this.infoTabOpen  = false;
+  }
+
+  toggleTabOpen() {
+    this.sortNames();
+    this.infoTabOpen  = true;
+  }
+
+  toggleTabClosed() {
+    this.infoTabOpen  = false;
+  }
+
+  sortNames() {
+    var thetas  = this.shadowRoot.getElementById('name-list-theta');
+    var alphas  = this.shadowRoot.getElementById('name-list-alpha');
+    var mus     = this.shadowRoot.getElementById('name-list-mu');
+    //var stats   = this.shadowRoot.getElementById('name-list-stats');
+
+    thetas.innerHTML  = "";
+    alphas.innerHTML  = "";
+    mus   .innerHTML  = "";
+
+    for(var i=0; i<this.emails.length; i++) {
+      var listElement       = document        .createElement('li');
+      listElement.innerHTML = this.emails[i]  .replace('@communityschoolnaples.org', '');
+      if        (this.emails[i].includes('2019')) {
+        mus     .appendChild(listElement);
+      } else if (this.emails[i].includes('2020')) {
+        alphas  .appendChild(listElement)
+      } else if (this.emails[i].includes('2019')) {
+        thetas  .appendChild(listElement)
+      } else {
+        thetas  .appendChild(listElement);
+      }
+    }
+
+  }
+
+}
+
+window.customElements.define('registry-element', RegistryElement);