Created basic way to pass through dates unto test elements.

3 files changed, 47 insertions, 6 deletions

diff --git a/src/components/competition-element.js b/src/components/competition-element.js
index dddd441..67cc668 100644
--- a/src/components/competition-element.js
+++ b/src/components/competition-element.js
@@ -23,7 +23,7 @@ class CompetitionElement extends LitElement {
 
       <style>
         paper-card {
-            --paper-card-background-color: #f7f7f7;
+            --paper-card-background-color: #e1f5fe;
             width:      100%;
             text-align: center;
         }
diff --git a/src/components/mao-competitions.js b/src/components/mao-competitions.js
index e0df8df..ce43002 100644
--- a/src/components/mao-competitions.js
+++ b/src/components/mao-competitions.js
@@ -44,7 +44,8 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
         grid-template-areas:
                         "title"
                         "test1"
-                        "test2";
+                        "test2"
+                        "test3";
       }
 
       .amcComp {
@@ -56,6 +57,10 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
         grid-area:  test2;
       }
 
+      .logsComp {
+        grid-area:  test3;
+      }
+
       .regional-competition-grid {
         display:  grid;
         grid-gap: 10px;
@@ -119,8 +124,8 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
       @media (min-width: 460px) {
         .non-mao-test-grid {
           grid-template-areas:
-                          "title title"
-                          "test1 test2";
+                          "title title title"
+                          "test1 test2 test3";
         }
 
         .regional-competition-grid {
@@ -138,6 +143,12 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
           }
         }
       }
+
+      .footer-comp {
+        text-align: center;
+        font-style: italic;
+        color:      gray;
+      }
       </style>
 
       <section>
@@ -149,6 +160,7 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
 
           <div class="card-content">
             <h2 class="underline">Nationals</h2>
+            <p  class="footer-comp">July</p>
             <p>This competition includes schools from many different states.
             filler filler filler filler filler filler filler filler filler</p>
           </div>
@@ -185,6 +197,7 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
 
           <div class="card-content">
             <h2 class="underline">States</h2>
+            <p  class="footer-comp">April 11-14</p>
             <p>This competition includes schools from many different regions in Florida.
             filler filler filler filler filler filler filler filler filler</p>
           </div>
@@ -309,6 +322,8 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
                       it is a 25 multiple-choice question,
                       40 minute test for middle schoolers designed to promote the development and enhancement of problem solving skills."
 
+        dates = ${["February 7th", "February 13th"]}
+
         signedIn="${props.signedIn}"
         isRegistered="${props.registeredComps.includes('amc')}"
         on-register-comp="${() => store.dispatch(registerComp('amc'))}">
@@ -326,16 +341,30 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
         information =  "The Florida Math Leauge is a state-wide exam.
                         It has three parts, each being 30 minutes long."
 
+        dates = ${["October 16th", "November 13th", "December 11th", "January 8th", "February 12th", "March 19th"]}
         signedIn="${props.signedIn}"
         isRegistered="${props.registeredComps.includes('fml')}"
         on-register-comp="${() => store.dispatch(registerComp('fml'))}">
         </test-element>
+        
+        <test-element
+        id="logs-test-element"
+
+        class="logsComp"
+        image="https://images-na.ssl-images-amazon.com/images/I/51-tddiU8KL._SX425_.jpg"
+        elevation="0"
+
+        name        = "logs"
+        information = "The LOGS test is a 2 part exam that compares your statewide and nationally based on your math subject. With registration, you must be able to attend all test dates."
+        dates = ${["To Be Determined"]}
+        signedIn="${props.signedIn}"
+        isRegistered="${props.registeredComps.includes('logs')}"
+        on-register-comp="${() => store.dispatch(registerComp('logs'))}">
       </div>
 
     </section>
     `;
   }
-
   static get properties() { return {
     // This is the data from the store.
     registeredComps :   Array,
@@ -345,6 +374,8 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
     statesRegistered    : Boolean
   }}
 
+
+
   _stateChanged(state) {
     this.signedIn         = state.firebaseAuth      .signedIn;
     this.registeredComps  = state.firebaseFirestore .registeredComps;
diff --git a/src/components/test-element.js b/src/components/test-element.js
index e2ccdf9..bbe1499 100644
--- a/src/components/test-element.js
+++ b/src/components/test-element.js
@@ -34,6 +34,14 @@ class TestElement extends LitElement {
       elevation = "0">
         <div class="card-content">
             <p>${props.information}</p>
+            <ol>
+              <li hidden="${!props.dates[0]}">${props.dates[0]}</li>
+              <li hidden="${!props.dates[1]}">${props.dates[1]}</li>
+              <li hidden="${!props.dates[2]}">${props.dates[2]}</li>
+              <li hidden="${!props.dates[3]}">${props.dates[3]}</li>
+              <li hidden="${!props.dates[4]}">${props.dates[4]}</li>
+              <li hidden="${!props.dates[5]}">${props.dates[5]}</li>  
+            </ol>
         </div>
         <div class="card-actions" hidden="${!props.signedIn}">
           <paper-button
@@ -58,6 +66,7 @@ class TestElement extends LitElement {
   static get properties() { return {
     name:         String,
     information:  String,
+    dates:        Array,
     image:        String,
     signedIn:     Boolean,
     isRegistered: Boolean
@@ -68,8 +77,9 @@ class TestElement extends LitElement {
 
     this.name           =   "Competition";
     this.information    =   "Competition Information";
+    this.dates          =   ["Date 0", "Date 1", "Date 2", "Date 3", "Date 4", "Date 5"];
     this.image          =   "Image Path";
-    this.signedIn    =   false;
+    this.signedIn       =   false;
     this.isRegistered   =   false;
   }