Creating picture upload field for tutoring hours.

3 files changed, 37 insertions, 3 deletions

diff --git a/package.json b/package.json
index e50a98a..def051e 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@polymer/paper-icon-button": "^3.0.0-pre.21",
     "@polymer/paper-input": "^3.0.0-pre.21",
     "@polymer/paper-item": "^3.0.0-pre.21",
+    "@polymer/paper-progress": "^3.0.0-pre.21",
     "@polymer/paper-slider": "^3.0.0-pre.21",
     "@vaadin/vaadin-date-picker": "^3.2.0-beta2",
     "@webcomponents/webcomponentsjs": "^2.0.0",
diff --git a/src/components/mao-app.js b/src/components/mao-app.js
index 456f772..820322d 100644
--- a/src/components/mao-app.js
+++ b/src/components/mao-app.js
@@ -231,7 +231,7 @@ class MaoApp extends connect(store)(LitElement) {
     </main>
 
     <footer>
-      <p>Made with &hearts; by the Polymer team.</p>
+      <p>Designed with &hearts; by Lucy Wood.</p>
     </footer>
 
     <snack-bar active?="${_snackbarOpened}">
diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index 6e9bbaf..8acac5b 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.js
@@ -27,6 +27,7 @@ import '@polymer/iron-icons/communication-icons.js';
 
 // Import paper elements
 import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-progress/paper-progress.js';
 import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-item/paper-item.js';
 import '@polymer/paper-item/paper-icon-item.js';
@@ -138,6 +139,17 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         }
       }
 
+      .picture-upload {
+        display:  flex;
+        width:    100%;
+        flex-direction: column;
+      }
+
+      #uploader {
+        appearance: none;
+        width: 100%;
+        margin: 10px;
+      }
       </style>
 
       <section class="img-section">
@@ -211,6 +223,11 @@ class MaoTutoring extends connect(store)(PageViewElement) {
               <vaadin-date-picker id="dateField" placeholder="Choose Date">
               </vaadin-date-picker>
 
+              <div class="picture-upload">
+                <paper-input onchange="${() => this.uploadFile()}" id="pictureField" value="" label="Upload Picture With Trainee" type="file"></paper-input>
+                <paper-progress value="0" max="100" id="uploader"></paper-progress>
+              </div>
+              
               <br/>
 
               <paper-button
@@ -279,7 +296,8 @@ class MaoTutoring extends connect(store)(PageViewElement) {
     hours:              Number,
     requestedHours:     Number,
 
-    submitFieldsOpened: Boolean
+    submitFieldsOpened: Boolean,
+    isUploaded:         Boolean
   }}
 
   _stateChanged(state) {
@@ -288,6 +306,7 @@ class MaoTutoring extends connect(store)(PageViewElement) {
     this.signedIn       = state.firebaseAuth      .signedIn;
 
     this.sumbitFieldsOpened = false;
+    this.isUploaded         = false;
   }
 
   toggleSubmitFields() {
@@ -295,7 +314,7 @@ class MaoTutoring extends connect(store)(PageViewElement) {
   }
 
   requestHours() {
-    if(this.shadowRoot) {
+    if(this.shadowRoot && !this.isUploaded) {
       var timeElement     = this.shadowRoot.getElementById('timeField');
       var traineeElement  = this.shadowRoot.getElementById('traineeField');
       var locationElement = this.shadowRoot.getElementById('locationField');
@@ -322,9 +341,23 @@ class MaoTutoring extends connect(store)(PageViewElement) {
               dateElement     .value  = "";
             }
         }
+    } else {
+      alert("You must upload an image.")
     }
   }
 
+  uploadFile() {
+    if(this.shadowRoot) {
+      var uploader  = this.shadowRoot.getElementById('uploader');
+      var file      = this.shadowRoot.getElementById('pictureField').files[0];
+
+      uploader.value = 100;
+      console.log(file);
+    }
+  }
+
+
+
 }
 
 window.customElements.define('mao-tutoring', MaoTutoring);