Created styling and backend for users to sign up for competitions.

1 files changed, 35 insertions, 3 deletions

diff --git a/src/components/competition-element.js b/src/components/competition-element.js
index 072f654..17381c9 100644
--- a/src/components/competition-element.js
+++ b/src/components/competition-element.js
@@ -10,12 +10,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 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 CompetitionElement extends LitElement {
   _render(props) {
     return html`
+      ${ButtonSharedStyles}
+
       <style>
 
         paper-card {
@@ -31,7 +36,23 @@ class CompetitionElement extends LitElement {
         <div class="card-content">
             <h3>${props.name}</h3>
             <h4>${props.location}</h4>
-            <p hidden="${!this.infoTabOpen}"> ${props.information}</p>
+            <p hidden="${!props.infoTabOpen}"> ${props.information}</p>
+        </div>
+        <div hidden="${!props.infoTabOpen}" class="card-actions">
+          <paper-button
+          class="info"
+          hidden="${props.isRegistered}"
+          raised
+          disabled= "${!props.initialized}"
+          on-tap=   "${() => this.registerComp()}">
+          ${props.initialized? "Register" : "Sign In"}
+          </paper-button>
+
+          <paper-button class="success"
+          disabled
+          hidden="${!props.isRegistered}">
+          Already Registered
+          </paper-button>
         </div>
       </paper-card>
     `;
@@ -41,7 +62,9 @@ class CompetitionElement extends LitElement {
     name:           String,
     information:    String,
     location:       String,
-    infoTabOpen:    Boolean
+    infoTabOpen:    Boolean,
+    initialized:    Boolean,
+    isRegistered:   Boolean
   }};
 
   constructor() {
@@ -51,11 +74,20 @@ class CompetitionElement extends LitElement {
     this.information    =   "Competition Information";
     this.location       =   "Competition Location";
     this.infoTabOpen    =   false;
+    this.initialized    =   false;
+    this.isRegistered   =   false;
   }
 
   toggleTab() {
-      this.infoTabOpen  =   !this.infoTabOpen;
+    this.infoTabOpen  =   !this.infoTabOpen;
   }
+
+  registerComp() {
+    this.dispatchEvent(new CustomEvent('register-comp'));
+    this.isRegistered = true;
+  }
+
+
 }
 
 window.customElements.define('competition-element', CompetitionElement);