diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/actions/firebase.js | 9 | ||||
| -rw-r--r-- | src/components/mao-tutoring.js | 91 | ||||
| -rw-r--r-- | src/reducers/firebase.js | 5 |
3 files changed, 83 insertions, 22 deletions
diff --git a/src/actions/firebase.js b/src/actions/firebase.js index fe3ddb0..ab2e28e 100644 --- a/src/actions/firebase.js +++ b/src/actions/firebase.js @@ -74,17 +74,18 @@ export const getHours = () => (dispatch, getState) => { if(currentState.initialized) { var docRef = firestore.collection('users').doc(currentState.uid); docRef.onSnapshot((doc) => { - dispatch(updateHours(doc.data().hours)); + dispatch(updateHours(doc.data().hours, doc.data().requestedHours)); }); } } -export const updateHours = (hours) => { +export const updateHours = (hours, reqHours) => { return { - type: 'UPDATE_HOURS', - payload: hours + type: 'UPDATE_HOURS', + approvedHours: hours, + requestedHours: reqHours } } diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js index c4d2911..c9840a0 100644 --- a/src/components/mao-tutoring.js +++ b/src/components/mao-tutoring.js @@ -31,8 +31,14 @@ import { ButtonSharedStyles } from './button-shared-styles.js' // Import paper elements import '@polymer/paper-input/paper-input.js'; +import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js'; +import '@polymer/paper-item/paper-item.js'; +import '@polymer/paper-slider/paper-slider.js'; import '@polymer/paper-button/paper-button.js'; +// Import other customElements +import '@vaadin/vaadin-date-picker/vaadin-date-picker.js'; + class MaoTutoring extends connect(store)(PageViewElement) { _render(props) { return html` @@ -103,6 +109,10 @@ class MaoTutoring extends connect(store)(PageViewElement) { text-align: center; } + #datePicker { + margin-top: 10px; + } + @media (min-width: 460px) { .tutoring-grid { grid-template-areas: @@ -125,13 +135,13 @@ class MaoTutoring extends connect(store)(PageViewElement) { </style> <section> - <div class="tutoring-grid" id="tutoring-grid"> + <div class="tutoring-grid" id="tutoring-grid" hidden="${props.signedIn}"> <div class="title"> <h2 class="underline">Tutoring</h2> </div> - <div class="tutorCard" hidden="${props.signedIn}"> + <div class="tutorCard"> <h3>Need to see or document hours?</h3> <paper-button class="info" @@ -140,7 +150,6 @@ class MaoTutoring extends connect(store)(PageViewElement) { on-tap="${() => this.toggleloginFields()}">Sign In</paper-button> <div hidden="${!props.loginFieldsOpened}"> <paper-input label="username" id="emailField"> - <div slot="suffix">@communityschoolnaples.org</div> </paper-input> <paper-input type="password" label="password" id="passwordField"> @@ -151,13 +160,13 @@ class MaoTutoring extends connect(store)(PageViewElement) { </div> </div> - <div hidden="${!props.signedIn}" class="hoursCard"> + <div hidden="${props.signedIn}" class="hoursCard"> <h3>Hours</h3> <p>Every national society member must have at least 5 hours.</p> <p>You must sign in to see hours</p> </div> - <div hidden="${props.signedIn}" class="hoursCard"> + <div hidden="${!props.signedIn}" class="hoursCard"> <div class="hours-grid"> @@ -167,18 +176,56 @@ class MaoTutoring extends connect(store)(PageViewElement) { <div class="approved-card"> <h3>Approved Hours</h3> - <div class="circle" style="background-color: #0f9d58;">${props.hours}</div> + <div + hidden= "${props.hours==-1}" + class= "circle" + style= "background-color: #0f9d58;">${props.hours}</div> </div> <div class="unapproved-card"> <h3>Requested Hours</h3> - <div class="circle" style="background-color: #f4b400;">${5-props.hours}</div> + <div + hidden= "${props.requestedHours==-1}" + class= "circle" + style= "background-color: #f4b400;">${props.requestedHours}</div> </div> <div class="sumbit-hours"> - <paper-button class="info" id="submit-hours-btn" raised>Submit Hours</paper-button> + <paper-button + class="info" + id="submit-hours-btn" + on-tap="${() => this.toggleSubmitFields()}" + hidden="${props.submitFieldsOpened}" + raised> + Submit Hours + </paper-button> + + <div class="submit-card" hidden="${!props.submitFieldsOpened}"> + + <h3>Fill Fields</h3> + + <p>How many hours of tutoring?</p> + + <paper-input id="timeField" label="Time"><span slot="suffix">(in minutes)</span></paper-input> + + <paper-input id="traineeField" label="Trainee's Name"></paper-input> + + <vaadin-date-picker id="dateField" placeholder="Choose Date"> + </vaadin-date-picker> + + <paper-button + class="info" + id="submit-form-btn" + on-tap="${() => this.requestHours()}" + raised> + Submit Form + </paper-button> + + </div> </div> + + </div> </div> @@ -200,19 +247,23 @@ class MaoTutoring extends connect(store)(PageViewElement) { static get properties() { return { // This is the data from the store. - signedIn: Boolean, - authMessage: String, - hours: Number, + signedIn: Boolean, + authMessage: String, + hours: Number, + requestedHours: Number, - loginFieldsOpened: Boolean + loginFieldsOpened: Boolean, + submitFieldsOpened: Boolean }} _stateChanged(state) { - this.hours = state.firebase.hours; - this.signedIn = state.firebase.initialized; - this.authMessage = state.firebase.authMessage; + this.hours = state.firebase.hours; + this.requestedHours = state.firebase.requestedHours; + this.signedIn = state.firebase.initialized; + this.authMessage = state.firebase.authMessage; - this.loginFieldsOpened = false; + this.loginFieldsOpened = false; + this.sumbitFieldsOpened = false; } logIn() { @@ -229,6 +280,14 @@ class MaoTutoring extends connect(store)(PageViewElement) { this.shadowRoot.getElementById('tutoring-grid').style = 'grid-template-areas: "title" "card1" "card2";'; } + toggleSubmitFields() { + this.submitFieldsOpened = !this.submitFieldsOpened; + } + + requestHours() { + + } + } window.customElements.define('mao-tutoring', MaoTutoring); diff --git a/src/reducers/firebase.js b/src/reducers/firebase.js index 4b0ed9a..b708dbe 100644 --- a/src/reducers/firebase.js +++ b/src/reducers/firebase.js @@ -17,7 +17,7 @@ import { } from '../actions/firebase.js'; -const firebase = (state = {initialized: false, authMessage: "", hours: -1, uid: null, registeredComps: []}, action) => { +const firebase = (state = {initialized: false, authMessage: "", hours: -1, requestedHours: -1, uid: null, registeredComps: []}, action) => { switch (action.type) { case AUTH_SUCCESS: return { @@ -46,7 +46,8 @@ const firebase = (state = {initialized: false, authMessage: "", hours: -1, uid: case UPDATE_HOURS: return { ...state, - hours: action.payload + hours: action.approvedHours, + requestedHours: action.requestedHours } break; |