Merge branch 'geo' of https://git.xpub.nl/XPUB/XPPL into geo

app/__init__.py

@@ -24,7 +24,7 @@ app.config['SECRET_KEY'] = 'super secret key'
 #app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/mydatabase.db'
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 #app.config['SQLALCHEMY_DATABASE_URI'] = 'rqlite+pyrqlite://localhost:4001/'
-app.config['DEBUG'] = True
+app.config['DEBUG'] = False
 app.config['PORT'] = 80
 
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'mydatabase.db')

app/static/css/style.css

@@ -91,9 +91,7 @@ ul em{
   width: 10%;
 }
 
-.locations_list .row div:last-of-type{
+.locations_list .row div:last-of-type {}
-  
-}
 
 .locations_list .row div {
   width: 20%;
@@ -289,7 +287,8 @@ margin: 4em 0;
 }
 
 
-#button_group button, #button_group select{
+#button_group button,
+#button_group select {
   background-color: grey;
   color: white;
   font-size: 0.9em;

app/templates/home.html

@@ -6,8 +6,23 @@
 
 
   <div class="compass">
-  <div id="arrow" class="arrow"><svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path class="st0" d="M13,2.6l6.2,7.5L20,9.5l-7.5-9L5,9.5l0.8,0.6L12,2.6v21.9h1C13,24.5,13,2.6,13,2.6z"/></svg></div>
+    <div id="arrow" class="arrow"><svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
-  <div id="goal" class="compass-goal"><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.94 21.94"><defs><style>.cls-1{fill:#3fb800;opacity:.3;}</style></defs><g id="Layer_1-2"><circle class="cls-1" cx="10.97" cy="10.97" r="10.97"/></g></svg></div>
+        clip-rule="evenodd">
+        <path class="st0" d="M13,2.6l6.2,7.5L20,9.5l-7.5-9L5,9.5l0.8,0.6L12,2.6v21.9h1C13,24.5,13,2.6,13,2.6z" /></svg>
+    </div>
+    <div id="goal" class="compass-goal"><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.94 21.94">
+        <defs>
+          <style>
+            .cls-1 {
+              fill: #3fb800;
+              opacity: .3;
+            }
+          </style>
+        </defs>
+        <g id="Layer_1-2">
+          <circle class="cls-1" cx="10.97" cy="10.97" r="10.97" />
+        </g>
+      </svg></div>
     <div class="my-point"></div>
   </div>
 
@@ -16,8 +31,10 @@
   <!-- <h1 class="header" id="title">GEO</h1> -->
   <div id="button_group">
     <div id="distance_close">(distance to mosquito)</div>
-    <button id="store_location" onclick="store_location()"><img src="/static/img/hangout.png" alt="">add hangout</button>
+    <button id="store_location" onclick="store_location()"><img src="/static/img/hangout.png" alt="">add
-    <button id="store_location_mosquito" onclick="store_location_mosquito()"><img src="/static/img/mosquito.png" alt="">add mosquito</button>
+      hangout</button>
+    <button id="store_location_mosquito" onclick="store_location_mosquito()"><img src="/static/img/mosquito.png"
+        alt="">add mosquito</button>
     <button id="add_text" onclick="add_text()"><img src="/static/img/text.png" alt="">add message</button>
     <button id="add_audio" onclick="add_audio()"><img src="/static/img/audio.png" alt=""> add audio</button>
 
@@ -33,9 +50,6 @@
   </div>
 </div>
 
-
-
-
 <!-- HEADING DIRECTION https://stackoverflow.com/questions/46033649/heading-javascript-geolocation -->
 <!-- COMPASS CROSS DEVICE https://stackoverflow.com/questions/16048514/can-i-use-javascript-to-get-the-compass-heading-for-ios-and-android-->
 
@@ -64,14 +78,18 @@
   var markerArray = [];
   var circleArray = [];
   var mosquitoArray = [];
-    var view="closest";
+  var view = "me";
   var workingCompass = false;
   var map_view = false;
 
   function assign_data(data) {
     locations = data;
   }
-    assign_data({{ data_locations|tojson }});
+  assign_data({
+    {
+      data_locations | tojson
+    }
+  });
 
   var map = L.map('map', {
     attributionControl: false,
@@ -90,18 +108,27 @@
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
   })
 
-    
-
   function toggle_map() {
     if (map_view) {
       map.removeLayer(backgroundLayer)
-      }
+    } else {
-      else{
       map.addLayer(backgroundLayer)
     }
     map_view = !map_view
   }
 
+  var myIcon = L.icon({
+    iconUrl: '/static/img/me.png',
+    iconSize: [30, 30],
+    iconAnchor: [15, 15],
+    popupAnchor: [-3, -76],
+  });
+
+  var myPositionCircle = L.marker([50.505, 30.57], {
+    icon: myIcon
+  }).addTo(map);
+
+  circleArray.push(myPositionCircle);
 
   locations.forEach(function (item, index) {
     try {
@@ -113,24 +140,21 @@
           iconAnchor: [25, 25],
           popupAnchor: [-3, -76],
         });
-            }
+      } else if (item.loc_type == "audio") {
-            else if(item.loc_type=="audio"){
         icon = L.icon({
           iconUrl: '/static/img/audio.png',
           iconSize: [50, 50],
           iconAnchor: [25, 25],
           popupAnchor: [-3, -76],
         });
-            }
+      } else if (item.loc_type == "mosquito") {
-            else if(item.loc_type=="mosquito"){
         icon = L.icon({
           iconUrl: '/static/img/mosquito.png',
           iconSize: [50, 50],
           iconAnchor: [25, 25],
           popupAnchor: [-3, -76],
         });
-            }
+      } else if (item.loc_type == "hangout") {
-            else if(item.loc_type=="hangout"){
         icon = L.icon({
           iconUrl: '/static/img/hangout.png',
           iconSize: [50, 50],
@@ -138,7 +162,9 @@
           popupAnchor: [-3, -76],
         });
       }
-            var circle = L.marker([item.latitude, item.longitude], {icon: icon}).addTo(map).on("click", e => circleClick(e));
+      var circle = L.marker([item.latitude, item.longitude], {
+        icon: icon
+      }).addTo(map).on("click", e => circleClick(e));
       circle.id = item.id;
       circleArray.push(circle);
 
@@ -151,36 +177,16 @@
     }
   });
 
-    // var myPositionCircle = L.circle([48.172934, 9.01236], {
-    //     color: 'red',
-    //     stroke:false,
-    //     fillColor: 'red',
-    //     fillOpacity: 0.5,
-    //     radius: 10
-    // }).addTo(map);
-
-    var myIcon = L.icon({
-    iconUrl: '/static/img/me.png',
-    iconSize: [50, 50],
-    iconAnchor: [25, 25],
-    popupAnchor: [-3, -76],
-    });
-
-    var myPositionCircle = L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
-
-    circleArray.push(myPositionCircle);
-
-    
   var x = document.getElementById("position");
 
   let id;
   let target;
   let options;
 
-    //first: latitude, second: longitude
+  //first: latitude, second: longitude 51.915528423609125, 4.477065873620031
   target = {
-      latitude : 48.172934,
+    latitude: 51.915528423609125,
-      longitude: 9.01236
+    longitude: 4.477065873620031
   };
 
   var my_location = {
@@ -193,9 +199,7 @@
     my_location.longitude = crd.longitude;
     my_location.latitude = crd.latitude;
 
-      if(view == "closest") updateView()
+    updateView()
-
-      console.log("updated")
 
     x.innerHTML = "Latitude: " + crd.latitude +
       "<br>Longitude: " + crd.longitude +
@@ -216,7 +220,6 @@
     // id = navigator.geolocation.watchPosition(success, error, options);
   }
 
-    
   options = {
     enableHighAccuracy: true,
     timeout: 1000,
@@ -237,8 +240,7 @@
     var text;
     if (d < 1) {
       text = Math.round(d * 100) / 100 * 1000 + " m";
-      }
+    } else {
-      else{
       text = Math.round(d * 100) / 100 + " km"
     }
     return text;
@@ -252,42 +254,11 @@
   }
 
   function store_location() {
-      // console.log("storing location");
-      // console.log(my_location)
-      // var xhr = new XMLHttpRequest();
-      // xhr.open("POST", "./addlocation", true);
-      // xhr.setRequestHeader('Content-Type', 'application/json');
-      // xhr.send(JSON.stringify({
-      //     longitude: my_location.longitude,
-      //     latitude: my_location.latitude
-      // }));
-    
-      // xhr.onreadystatechange=function(){
-      //      if (xhr.readyState==4 && xhr.status==200){
-      //            location.reload();
-      //      }
-      //   }      
     window.location.href = "addhangout/" + my_location.longitude + "/" + my_location.latitude + "/";
 
   }
 
   function store_location_mosquito() {
-      // console.log("storing location");
-      // console.log(my_location)
-      // var xhr = new XMLHttpRequest();
-      // xhr.open("POST", "./addlocationmosquito", true);
-      // xhr.setRequestHeader('Content-Type', 'application/json');
-      // xhr.send(JSON.stringify({
-      //     longitude: my_location.longitude,
-      //     latitude: my_location.latitude
-      // }));
-    
-      // xhr.onreadystatechange=function(){
-      //      if (xhr.readyState==4 && xhr.status==200){
-      //            location.reload();
-      //      }
-      //   }      
-
     window.location.href = "addmosquito/" + my_location.longitude + "/" + my_location.latitude + "/";
   }
 
@@ -307,22 +278,16 @@
     if (view == "all") {
       var group = new L.featureGroup(circleArray);
       map.fitBounds(group.getBounds().pad(0.4));
-      }
+    } else if (view == "closest") {
-      else if(view == "closest"){
       var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
-        // L.polyline([closest.layer.getLatLng(), myPositionCircle.getLatLng()], {
+      document.getElementById("distance_close").innerHTML = "closest mosquito: " + distance(closest.layer.getLatLng()
-        //   color: 'black',
+        .lng, closest.layer.getLatLng().lat, myPositionCircle.getLatLng().lng, myPositionCircle.getLatLng().lat)
-        //   weight: 1,
-        // }).addTo(map)
-        document.getElementById("distance_close").innerHTML = "closest mosquito: " + distance(closest.layer.getLatLng().lat,closest.layer.getLatLng().lng,myPositionCircle.getLatLng().lat, myPositionCircle.getLatLng().lng)
 
       var group = new L.featureGroup([closest.layer, myPositionCircle]);
       map.fitBounds(group.getBounds().pad(0.4));
-      }
+    } else if (view == "me") {
-      else if(view == "me"){
       map.setView([my_location.latitude, my_location.longitude], zoom_level);
-      }
+    } else if (view == "free") {
-      else if(view == "free"){
 
     }
   }
@@ -399,7 +364,10 @@
 
   function locationHandler(position) {
 
-      const { latitude, longitude } = position.coords;
+    const {
+      latitude,
+      longitude
+    } = position.coords;
     pointDegree = calcDegreeToPoint(latitude, longitude);
 
     if (pointDegree < 0) {
@@ -411,11 +379,11 @@
     // Qibla geolocation
     var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
     if (workingCompass == true) {
-        if(parseFloat(distance(closest.layer.getLatLng().lat,closest.layer.getLatLng().lng,myPositionCircle.getLatLng().lat, myPositionCircle.getLatLng().lng).split(" "))<20){
+      if (parseFloat(distance(closest.layer.getLatLng().lat, closest.layer.getLatLng().lng, myPositionCircle.getLatLng()
+          .lat, myPositionCircle.getLatLng().lng).split(" ")) < 20) {
         document.getElementById("arrow").style.display = "none";
         document.getElementById("goal").style.display = "block";
-          }
+      } else {
-          else{
         document.getElementById("arrow").style.display = "block";
         document.getElementById("goal").style.display = "none";
       }
@@ -442,8 +410,6 @@
 
   init();
   //
-    
-    
 </script>
 
 {% endblock js %}

app/views.py

@@ -117,8 +117,6 @@ def addtext(lng, lat):
     upload_form = UploadText()
     longitude = lng
     latitude = lat
-    print(longitude)
-    print(latitude)
 
     if request.method == 'POST':
         if upload_form.validate_on_submit():
@@ -147,7 +145,6 @@ def addaudio(lng, lat):
             longitude = upload_form.longitude.data
             latitude = upload_form.latitude.data
             file = request.files['file']
-            print(file.filename)
             locations = db.session.query(Location).all()
             id = len(locations)+1
             # Getting the current date and time