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

1 files changed, 84 insertions, 0 deletions

diff --git a/src/components/test-element.js b/src/components/test-element.js
new file mode 100644
index 0000000..ec4797b
--- /dev/null
+++ b/src/components/test-element.js
@@ -0,0 +1,84 @@
+/**
+@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 TestElement extends LitElement {
+  _render(props) {
+    return html`
+      ${ButtonSharedStyles}
+
+      <style>
+
+        paper-card {
+            --paper-card-background-color: #ffffff;
+            width:  100%;
+        }
+
+      </style>
+      <paper-card
+      image     = "${props.image}"
+      elevation = "0">
+        <div class="card-content">
+            <p>${props.information}</p>
+        </div>
+        <div 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>
+    `;
+  }
+
+  static get properties() { return {
+    name:           String,
+    information:    String,
+    image:          String,
+    initialized:    Boolean,
+    isRegistered:   Boolean
+  }};
+
+  constructor() {
+    super();
+
+    this.name           =   "Competition";
+    this.information    =   "Competition Information";
+    this.image          =   "Image Path";
+    this.initialized    =   false;
+    this.isRegistered   =   false;
+  }
+
+  registerComp() {
+    this.dispatchEvent(new CustomEvent('register-comp'));
+    this.isRegistered = true;
+  }
+
+
+}
+
+window.customElements.define('test-element', TestElement);