Merge pull request #515 from mapswipe/dev

Prepare new production release 2.3.1

.github/workflows/actions.yml

@@ -59,6 +59,7 @@ jobs:
         POSTGRES_PASSWORD: test
         POSTGRES_USER: test
         POSTGRES_DB: test
+        OSMCHA_API_KEY: ${{ secrets.OSMCHA_API_KEY }}
       run: |
         docker-compose run mapswipe_workers_creation python -m unittest discover --verbose --start-directory tests/unittests/
         docker-compose run mapswipe_workers_creation python -m unittest discover --verbose --start-directory tests/integration/

api/index.html

@@ -8,7 +8,7 @@
         <h1>Welcome to Mapswipe API</h1>
         <a href="https://mapswipe-workers.readthedocs.io/en/benni.new-project-types/api.html">Read the Documentation</a> 
 
-        <h2>Directory Tree</h1>
+        <h2>Directory Tree</h2>
         <a href="./stats.json">stats.json</a><br>
         <a href="./projects.json">projects.json</a><br>
         <a href="./users.json">users.json</a><br>

docker-compose.development.yaml

@@ -0,0 +1,44 @@
+version: '3'
+networks:
+    mapswipe_network:
+        driver: bridge
+        ipam:
+            config: [{subnet: 172.21.0.0/16}]
+    api:
+    manager_dashboard:
+    mapswipe_workers:
+    postgres:
+
+services:
+    manager_dashboard:
+        container_name: manager_dashboard
+        build:
+            context: manager_dashboard/
+        restart: unless-stopped
+        ports:
+            - '5000:80'
+        expose:
+            - "80"
+        volumes:
+            - ./manager_dashboard/manager_dashboard:/usr/share/nginx/html/manager_dashboard
+        networks:
+            - manager_dashboard
+
+    postgres:
+        container_name: postgres
+        build:
+            context: postgres/
+            dockerfile: Dockerfile-dev
+        environment:
+            POSTGRES_PASSWORD: '${POSTGRES_PASSWORD}'
+            POSTGRES_USER: '${POSTGRES_USER}'
+            POSTGRES_DB: '${POSTGRES_DB}'
+            PGDATA: '/var/lib/postgresql/mapswipe'
+        command: postgres
+        volumes:
+          - ./postgres-data:/var/lib/postgresql/mapswipe
+        restart: unless-stopped
+        ports:
+          - "5431:5432"
+        networks:
+            - postgres

docker-compose.yaml

@@ -73,6 +73,7 @@ services:
             SLACK_TOKEN: '${SLACK_TOKEN}'
             SLACK_CHANNEL: '${SLACK_CHANNEL}'
             SENTRY_DSN: '${SENTRY_DSN}'
+            OSMCHA_API_KEY: '${OSMCHA_API_KEY}'
         depends_on:
             - postgres
         command: mapswipe_workers --verbose run --analysis_type=creation --schedule --time_interval=5
@@ -107,6 +108,7 @@ services:
             SLACK_TOKEN: '${SLACK_TOKEN}'
             SLACK_CHANNEL: '${SLACK_CHANNEL}'
             SENTRY_DSN: '${SENTRY_DSN}'
+            OSMCHA_API_KEY: '${OSMCHA_API_KEY}'
         depends_on:
             - postgres
         command: mapswipe_workers --verbose run --analysis_type=generate-stats --schedule --time_interval=60
@@ -141,6 +143,7 @@ services:
             SLACK_TOKEN: '${SLACK_TOKEN}'
             SLACK_CHANNEL: '${SLACK_CHANNEL}'
             SENTRY_DSN: '${SENTRY_DSN}'
+            OSMCHA_API_KEY: '${OSMCHA_API_KEY}'
         depends_on:
             - postgres
         command: mapswipe_workers --verbose run --analysis_type=firebase-to-postgres --schedule --time_interval=2
@@ -197,4 +200,4 @@ services:
             FIREBASE_DB: '${FIREBASE_DB}'
         command: sh -c "firebase use $FIREBASE_DB && firebase deploy --token $FIREBASE_TOKEN --only functions,database:rules"
         volumes:
-            - ./firebase:/firebase
+            - ./firebase:/firebase

example.env

@@ -28,3 +28,6 @@ SLACK_CHANNEL=
 
 # sentry configuration
 SENTRY_DSN=
+
+# osmcha configuration
+OSMCHA_API_KEY=

manager_dashboard/manager_dashboard/css/mapswipe.css

@@ -64,7 +64,6 @@
 	padding: 2px 5px 2px 5px;
 	color: #B9B9B9;
 	font-size: 20px;
-	overflow: hidden;
 	font-family: Arial, Helvetica, sans-serif;
 }
 .form-style-7 input[type="text"],
@@ -105,7 +104,7 @@
 .form-style-7 select:focus
 {
 }
-.form-style-7 li > span{
+.form-style-7 li > span, .ownspan{
 	background: #F3F3F3;
 	display: block;
 	padding: 3px;
@@ -133,7 +132,7 @@
 	color:#fff;
 }
 
-#geometryMap { height: 300px; width: 100%}
+#geometryMap { height: 300px; width: 100%; z-index: 0;}
 #geometryChangeDetectionMap { height: 300px; width: 100%}
 #geometryCompletenessMap { height: 300px; width: 100%}
 
@@ -200,4 +199,29 @@ th.sorting_desc::after{
   color: black;
   text-decoration: none;
   cursor: pointer;
+}
+
+.button {
+  padding: 3px;
+  border-radius: 3px;
+  background-color: #6B9FFF;
+  border-bottom: 3px solid #5994FF;
+  color: white;
+  width: fit-content;
+  margin-bottom: 0px;
+}
+
+.button:hover {
+    background-color: #5994FF;
+    cursor: pointer;
+}
+
+.button:active {
+    color: #b3cdff;
+}
+
+.flex-inline-div{
+    display: inline-flex;
+    align-items: center;
+    width:100%;"
 }

manager_dashboard/manager_dashboard/js/forms.js

@@ -117,6 +117,7 @@ function displayProjectTypeForm(projectType) {
     }
 }
 
+
 function addTileServerCredits (tileServerName, which) {
     var credits = {
         "bing": "© 2019 Microsoft Corporation, Earthstar Geographics SIO",
@@ -159,45 +160,51 @@ function displayTileServer (tileServerName, which) {
     addTileServerCredits(tileServerName, which)
 }
 
+
 function clear_fields() {
     console.log('clear fields.')
     document.getElementById('projectNumber').value = 1
     document.getElementById('inputAoi').value = null
-    document.getElementById('geometryInfo').innerHTML = ''
+    $(".inputInfo").each(()=>{$(this).text('')})
     document.getElementById('geometryContent').innerHTML = ''
     aoiLayer.clearLayers()
     displayProjectTypeForm("build_area")
   }
 
+
 function displaySuccessMessage() {
   //document.getElementById("import-formular").style.display = "None";
   alert('Your project has been uploaded. It can take up to one hour for the project to appear in the dashboard.')
 }
 
+
 function displayImportForm() {
   document.getElementById("import-formular").style.display = "block";
 }
 
+
 function openFile(event) {
     var input = event.target;
+    let maxFilesize = 1 * 1024 * 1024
+    let maxFeatures = 10
 
     // clear info field
-    var info_output = document.getElementById("geometryInfo");
-    info_output.innerHTML = '';
-    info_output.style.display = 'block'
+    var infoOutput = $(input).siblings(".inputInfo")[0];
+    infoOutput.innerHTML = '';
+    infoOutput.style.display = 'block'
 
     // clear map layers
     aoiLayer.clearLayers()
 
     // Check file size before loading
     var filesize = input.files[0].size;
-    if (filesize > 1 * 1024 * 1024) {
-      var err='filesize is too big (max 1MB): ' + filesize/(1000*1000)
-      info_output.innerHTML = '<b>Error reading GeoJSON file</b><br>' + err;
-      info_output.style.display = 'block'
+    if (filesize > maxFilesize) {
+      var err=`filesize is too big (max ${maxFilesize}MB): ${filesize/(1024*1024)}`
+      infoOutput.innerHTML = '<b>Error reading GeoJSON file</b><br>' + err;
+      infoOutput.style.display = 'block'
     } else {
-      info_output.innerHTML += 'File Size is valid <br>';
-      info_output.style.display = 'block'
+      infoOutput.innerHTML += 'File Size is valid <br>';
+      infoOutput.style.display = 'block'
 
       var reader = new FileReader();
       reader.onload = function(){
@@ -209,11 +216,11 @@ function openFile(event) {
               numberOfFeatures = geojsonData['features'].length
 
               console.log('number of features: ' + numberOfFeatures)
-              if (numberOfFeatures > 10) {
+              if (numberOfFeatures > maxFeatures) {
                 throw 'too many features: ' + numberOfFeatures
               }
-              info_output.innerHTML += 'Number of Features: ' + numberOfFeatures + '<br>';
-              info_output.style.display = 'block'
+              infoOutput.innerHTML += 'Number of Features: ' + numberOfFeatures + '<br>';
+              infoOutput.style.display = 'block'
 
               sumArea = 0
               // check input geometry type
@@ -225,9 +232,8 @@ function openFile(event) {
                 if (type !== 'Polygon' & type !== 'MultiPolygon') {
                     throw 'GeoJson contains one or more wrong geometry type(s): ' + type
                 }
-
-                info_output.innerHTML += 'Feature Type: ' + type + '<br>';
-                info_output.style.display = 'block'
+                infoOutput.innerHTML += 'Feature Type: ' + type + '<br>';
+                infoOutput.style.display = 'block'
                 sumArea += turf.area(feature)/1000000 // area in square kilometers
                }
 
@@ -243,53 +249,89 @@ function openFile(event) {
                 throw 'project is to large: ' + sumArea + ' sqkm; ' + 'max allowed size for this zoom level: ' + maxArea + ' sqkm'
               }
 
-              info_output.innerHTML += 'Project Size: ' + sumArea + ' sqkm<br>';
-              info_output.style.display = 'block'
+              infoOutput.innerHTML += 'Project Size: ' + sumArea + ' sqkm<br>';
+              infoOutput.style.display = 'block'
 
               // add feature to map
               aoiLayer.addData(geojsonData);
               ProjectAoiMap.fitBounds(aoiLayer.getBounds());
               console.log('added input geojson feature')
 
               // add text to html object
-              info_output.innerHTML += 'Project seems to be valid :)';
-              info_output.style.display = 'block'
+              infoOutput.innerHTML += 'Project seems to be valid :)';
+              infoOutput.style.display = 'block'
 
               // set project aoi geometry
               projectAoiGeometry = text
             }
             catch(err) {
-              info_output.innerHTML = '<b>Error reading GeoJSON file</b><br>' + err;
-              info_output.style.display = 'block'
+              infoOutput.innerHTML = '<b>Error reading GeoJSON file</b><br>' + err;
+              infoOutput.style.display = 'block'
             }
         };
     reader.readAsText(input.files[0]);
     }
   };
 
+
 function openImageFile(event) {
     var input = event.target;
-    element_id = event.target.id + 'File'
+    elementId = event.target.id + 'File'
 
     var reader = new FileReader();
     reader.onload = function(){
       try {
         var dataURL = reader.result;
-        var output = document.getElementById(element_id);
+        var output = document.getElementById(elementId);
         output.src = dataURL;
       }
       catch(err) {
-          element_id = event.target.id + 'Text'
-          var output = document.getElementById(element_id);
+          elementId = event.target.id + 'Text'
+          var output = document.getElementById(elementId);
           output.innerHTML = '<b>Error reading Image file</b><br>' + err;
         }
     };
     reader.readAsDataURL(input.files[0]);
   };
 
+
 function closeModal() {
     var modal = document.getElementById("uploadModal");
     modal.style.display = "none";
     var modalSuccess = document.getElementById("modalSuccess");
     modalSuccess.style.display = "none";
 }
+
+
+function toggleFilterText(select){
+    $("#inputFilterDiv").toggle();
+}
+
+
+function showInput(select){
+    let linkDiv = $("#inputTaskGeometries_Link");
+    let aoi_fileDiv = $("#inputTaskGeometries_File");
+    let idDiv = $("#inputTaskGeometries_TMId");
+    let filterDiv = $("#inputFilterLi");
+
+    switch(select.value){
+        case "link":
+            linkDiv.css("display", "block");
+            aoi_fileDiv.css("display", "none");
+            idDiv.css("display", "none");
+            filterDiv.css("display", "none");
+            break;
+        case "aoi_file":
+            linkDiv.css("display", "none");
+            aoi_fileDiv.css("display", "block");
+            idDiv.css("display", "none");
+            filterDiv.css("display", "block");
+            break;
+        case "id":
+            linkDiv.css("display", "none");
+            aoi_fileDiv.css("display", "none");
+            idDiv.css("display", "block");
+            filterDiv.css("display", "block");
+            break;
+    }
+}

manager_dashboard/manager_dashboard/js/upload-tutorial.js

@@ -52,15 +52,14 @@ function getFormInput() {
             };
             break;
     }
-
     form_data.screens = JSON.parse(screens)
     form_data.tutorialTasks = JSON.parse(tutorialTasks)
 
     return form_data
 }
 
-function upload_project_image(id) {
 
+function uploadProjectImage(id) {
     var file = document.getElementById(id).files[0]
     console.log(file)
     var filename = file.name
@@ -98,11 +97,10 @@ function upload_project_image(id) {
         }
       });
     });
-
-
 }
 
-function upload_to_firebase() {
+
+function uploadToFirebase() {
     switch (currentUid) {
         case null:
             alert("You are not logged in.");
@@ -119,9 +117,8 @@ function upload_to_firebase() {
             // TODO: add checks if all input values are valid, e.g. image available
             mapswipe_import = getFormInput()
 
-            upload_project_image("image1")
-            upload_project_image("image2")
-
+            uploadProjectImage("image1")
+            uploadProjectImage("image2")
 
             // TODO: this should be implemented better...
             setTimeout(function() {