diff options
| -rw-r--r-- | src/components/mao-tutoring.js | 99 |
1 files changed, 31 insertions, 68 deletions
diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js index 85aac99..04b7b1d 100644 --- a/src/components/mao-tutoring.js +++ b/src/components/mao-tutoring.js @@ -47,17 +47,6 @@ class MaoTutoring extends connect(store)(PageViewElement) { ${ButtonSharedStyles} <style> - - .tutoring-grid { - display: grid; - grid-gap: 10px; - - grid-template-areas: - "title" - "card1" - "card2"; - } - .title { grid-area: title; } @@ -67,14 +56,6 @@ class MaoTutoring extends connect(store)(PageViewElement) { padding: 1px; } - .tutorCard { - grid-area: card1; - } - - .hoursCard { - grid-area: card2; - } - .hours-grid { display: grid; grid-gap: 10px; @@ -107,6 +88,7 @@ class MaoTutoring extends connect(store)(PageViewElement) { paper-card { --paper-card-background-color: #f7f7f7; + display: block; } paper-button { @@ -124,12 +106,6 @@ class MaoTutoring extends connect(store)(PageViewElement) { } @media (min-width: 460px) { - .tutoring-grid { - grid-template-areas: - "title title" - "card1 card2"; - } - .hours-grid { grid-template-areas: "title title" @@ -144,18 +120,12 @@ class MaoTutoring extends connect(store)(PageViewElement) { </style> <section> - <div class="tutoring-grid" id="tutoring-grid"> <div class="title"> <h2 class="underline">Tutoring</h2> </div> - <div class="tutorCard" hidden="${props.signedIn}"> - <h3>Need to see or document hours?</h3> - <p> Sign in on account page... </p> - </div> - - <div hidden="${props.signedIn}" class="hoursCard"> + <div hidden="${props.signedIn}"> <h3>Hours</h3> <p>Every national society member must have at least 5 hours.</p> <p>You must sign in to see hours</p> @@ -226,6 +196,8 @@ class MaoTutoring extends connect(store)(PageViewElement) { <vaadin-date-picker id="dateField" placeholder="Choose Date"> </vaadin-date-picker> + <br/> + <paper-button class="info" id="submit-form-btn" @@ -238,23 +210,16 @@ class MaoTutoring extends connect(store)(PageViewElement) { </div> </paper-card> - - </div> - </section> - <section> - - - </section> `; } static get properties() { return { // This is the data from the store. - signedIn: Boolean, - authMessage: String, - hours: Number, - requestedHours: Number, + signedIn: Boolean, + authMessage: String, + hours: Number, + requestedHours: Number, submitFieldsOpened: Boolean }} @@ -265,23 +230,6 @@ class MaoTutoring extends connect(store)(PageViewElement) { this.authMessage = state.firebase.authMessage; this.sumbitFieldsOpened = false; - - if(this.signedIn) { - this.toggleShowingCard(); - } - } - - logIn() { - const email = this.shadowRoot.getElementById('emailField') .value + - '@communityschoolnaples.org'; - const password = this.shadowRoot.getElementById('passwordField') .value; - - store.dispatch(signIn(email,password)); - } - - toggleShowingCard() { - - this.shadowRoot.getElementById('tutoring-grid').style = 'grid-template-areas: "title" "card2";'; } toggleSubmitFields() { @@ -289,14 +237,29 @@ class MaoTutoring extends connect(store)(PageViewElement) { } requestHours() { - - if(confirm('Are you sure that you want to send this request for hours?')) { - const timeHours = (this.shadowRoot.getElementById('timeField') .value) - /60; - const traineeName = this.shadowRoot.getElementById('traineeField').value; - const date = this.shadowRoot.getElementById('dateField') .value; - - store.dispatch(requestHours(timeHours, traineeName, date)); + if(this.shadowRoot) { + var timeElement = this.shadowRoot.getElementById('timeField'); + var traineeElement = this.shadowRoot.getElementById('traineeField'); + var dateElement = this.shadowRoot.getElementById('dateField') + + if( timeElement .value.trim() === "" || + traineeElement .value.trim() === "" || + dateElement .value === "") { + alert("Please fill out all fields when making hours request."); + } else { + if(confirm('Are you sure that you want to send this request for hours?')) { + const timeHours = (timeElement .value) + /60; + const traineeName = traineeElement.value; + const date = dateElement .value; + + store.dispatch(requestHours(timeHours, traineeName, date)); + + timeElement .value = ""; + traineeElement .value = ""; + dateElement .value = ""; + } + } } } |