Merge branch 'dev' of github.com:mapswipe/python-mapswipe-workers into dev

Author: Matthias-Schaub

manager_dashboard/manager_dashboard/create.html

@@ -99,9 +99,11 @@ <h3>Basic Project Information</h3>
                               <span>Enter the description for your project. (3-5 sentences). </span>
                           </li>
                           <li>
-                              <label for="image">Direct Image Link</label>
-                              <input type="text" name="image" id="image" required>
+                              <label for="image">Upload Project Image</label>
+                              <input type="file" accept="..gif,.jpg,.jpeg,.png" id="image" onchange='openImageFile(event)'>
                               <span>Make sure you have the rights to use this image. It should end with  .jpg or .png.</span>
+                              <p id="imageText"></p>
+                              <img id="imageFile" width="100%"> </img>
                           </li>
                           <li>
                               <label for="verificationNumber">Verification Number</label>
@@ -327,6 +329,7 @@ <h4>Tile Server B</h4>
 <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js"></script>
 <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
 <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>
+<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-storage.js"></script>
 <script src="js/app.js"></script>
 <script src="js/ui.js"></script>
 <script src="js/uploadProjects.js"></script>

manager_dashboard/manager_dashboard/js/forms.js

@@ -82,3 +82,24 @@ function openFile(event) {
     };
     reader.readAsText(input.files[0]);
   };
+
+function openImageFile(event) {
+    var input = event.target;
+    element_id = event.target.id + 'File'
+
+    var reader = new FileReader();
+    reader.onload = function(){
+      try {
+        var dataURL = reader.result;
+        var output = document.getElementById(element_id);
+        output.src = dataURL;
+      }
+      catch(err) {
+          element_id = event.target.id + 'Text'
+          var output = document.getElementById(element_id);
+          output.innerHTML = '<b>Error reading Image file</b><br>' + err;
+        }
+    };
+    reader.readAsDataURL(input.files[0]);
+  };
+

manager_dashboard/manager_dashboard/js/uploadProjects.js

@@ -1,4 +1,42 @@
 var database = firebase.database();
+
+function upload_project_image() {
+    var file = document.getElementById('image').files[0]
+    console.log(file)
+    var filename = file.name
+    console.log(filename)
+    // Create a reference to the image
+    var storageRef = firebase.storage().ref();
+    var projectImageRef = storageRef.child('projectImages/'+filename);
+
+    var uploadImage = projectImageRef.put(file);
+    uploadImage.on('state_changed', function(snapshot){
+      // Observe state change events such as progress, pause, and resume
+      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+      console.log('Upload is ' + progress + '% done');
+      switch (snapshot.state) {
+        case firebase.storage.TaskState.PAUSED: // or 'paused'
+          console.log('Upload is paused');
+          break;
+        case firebase.storage.TaskState.RUNNING: // or 'running'
+          console.log('Upload is running');
+          break;
+      }
+    }, function(error) {
+      // Handle unsuccessful uploads
+    }, function() {
+      // Handle successful uploads on complete
+      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
+      uploadImage.snapshot.ref.getDownloadURL().then(function(downloadURL) {
+        console.log('File available at', downloadURL);
+        return downloadURL
+      });
+    });
+
+}
+
+
 function submitInfo() {
 
     if (currentUid == null) {
@@ -10,7 +48,7 @@ function submitInfo() {
     var lookFor = document.getElementById("lookFor").value;
     var projectDetails = document.getElementById("projectDetails").value;
     var projectType = document.getElementById("projectType").value;
-    var image = document.getElementById("image").value;
+
     var verificationNumber = document.getElementById("verificationNumber").value;
     var createdBy = currentUid;
     var groupSize = document.getElementById("groupSize").value;
@@ -104,7 +142,41 @@ function submitInfo() {
 
     }
 
-    firebase.database().ref('v2/projectDrafts/').push().set(mapswipe_import)
+    var file = document.getElementById('image').files[0]
+    console.log(file)
+    var filename = file.name
+    console.log(filename)
+    // Create a reference to the image
+    var storageRef = firebase.storage().ref();
+    var projectImageRef = storageRef.child('projectImages/'+filename);
+
+    var uploadImage = projectImageRef.put(file);
+    uploadImage.on('state_changed', function(snapshot){
+      // Observe state change events such as progress, pause, and resume
+      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+      console.log('Upload is ' + progress + '% done');
+      switch (snapshot.state) {
+        case firebase.storage.TaskState.PAUSED: // or 'paused'
+          console.log('Upload is paused');
+          break;
+        case firebase.storage.TaskState.RUNNING: // or 'running'
+          console.log('Upload is running');
+          break;
+      }
+    }, function(error) {
+      // Handle unsuccessful uploads
+    }, function() {
+      // Handle successful uploads on complete
+      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
+      uploadImage.snapshot.ref.getDownloadURL().then(function(downloadURL) {
+        console.log('File available at', downloadURL);
+        mapswipe_import.image = downloadURL
+        console.log(mapswipe_import)
+
+        // upload projectDraft to firebase once image has been uploaded
+
+        firebase.database().ref('v2/projectDrafts/').push().set(mapswipe_import)
           .then(function() {
             clear_all_fields();
             displaySuccessMessage();
@@ -113,5 +185,9 @@ function submitInfo() {
             alert('could not upload data: ' + error);
           });
 
+
+
+      });
+    });
   }
 }