From 9e32d21b598d67e19396eec1afe14f9e608e8445 Mon Sep 17 00:00:00 2001
From: Alexander Roidl <alexander.roidl@hs-mainz.de>
Date: Wed, 30 Nov 2022 16:52:05 +0100
Subject: [PATCH] minor fixes

---
 app/__init__.py          |   2 +-
 app/static/css/style.css | 135 ++++----
 app/templates/home.html  | 726 +++++++++++++++++++--------------------
 app/views.py             |   3 -
 4 files changed, 414 insertions(+), 452 deletions(-)

diff --git a/app/__init__.py b/app/__init__.py
index 8c6f89e..c4ba15f 100755
--- a/app/__init__.py
+++ b/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')
diff --git a/app/static/css/style.css b/app/static/css/style.css
index bf3e93e..0f5cae9 100755
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -1,18 +1,18 @@
 @font-face {
   font-family: 'metaaccanthisalternaalternate';
   src: url('../fonts/metaaccanthisalternate-webfont.woff2') format('woff2'),
-       url('../fonts/metaaccanthisalternate-webfont.woff') format('woff');
+    url('../fonts/metaaccanthisalternate-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 
 }
 
-*{
-font-family: "metaaccanthisalternaalternate";
-box-sizing: border-box;
+* {
+  font-family: "metaaccanthisalternaalternate";
+  box-sizing: border-box;
 }
 
-body{
+body {
   background-color: #f1f1f1;
   font-size: clamp(12px, 1.2vw, 25px);
   box-sizing: border-box;
@@ -20,36 +20,36 @@ body{
   padding: 0;
 }
 
-p{
+p {
   font-size: 1.5em;
 }
 
-a{
+a {
   text-decoration: underline;
   color: inherit;
 }
 
-a:hover{
+a:hover {
   text-decoration: inherit;
   color: inherit;
 }
 
-audio{
+audio {
   width: 100%;
 }
 
-.navigation ul{
+.navigation ul {
   list-style-type: none;
   padding: 0;
   display: flex;
   justify-content: right;
 }
 
-.navigation ul li{
+.navigation ul li {
   padding: 0.5em;
 }
 
-#map { 
+#map {
   position: absolute;
   top: 0;
   left: 0;
@@ -58,17 +58,17 @@ audio{
   z-index: -1;
 }
 
-.locations_list{
+.locations_list {
   width: 100%;
 }
 
-.locations_list .row{
+.locations_list .row {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid black;
 }
 
-.locations_list .row img{
+.locations_list .row img {
   max-height: 2em;
 }
 
@@ -81,11 +81,9 @@ audio{
   width: 10%;
 }
 
-.locations_list .row div:last-of-type{
-  
-}
+.locations_list .row div:last-of-type {}
 
-.locations_list .row div{
+.locations_list .row div {
   width: 20%;
   padding: 1em;
   white-space: wrap;
@@ -93,11 +91,11 @@ audio{
   text-overflow: ellipsis;
 }
 
-.locations_list .row div audio{
+.locations_list .row div audio {
   width: 100%;
 }
 
-.locations_list .row .delete_btn{
+.locations_list .row .delete_btn {
   text-decoration: none;
   background-color: black;
   color: white;
@@ -106,29 +104,29 @@ audio{
 }
 
 
-.content_container{
+.content_container {
   padding: 1em;
 }
 
 
 /* FROM */
 
-.form-control{
+.form-control {
   width: 100%;
   height: 20vh;
   box-sizing: border-box;
 }
 
-#audio{
-margin: 4em 0;
+#audio {
+  margin: 4em 0;
 }
 
-.record_controls{
+.record_controls {
   display: flex;
   justify-content: space-between;
 }
 
-.audio_btn{
+.audio_btn {
   font-size: 2em;
   padding: 0.5em;
   text-decoration: none;
@@ -141,16 +139,16 @@ margin: 4em 0;
   min-width: 25%;
 }
 
-.audio_btn:hover{
+.audio_btn:hover {
   color: white;
 }
 
-.stop_btn{
+.stop_btn {
   display: none;
-  flex-grow:1;
+  flex-grow: 1;
 }
 
-.record_btn .icon{
+.record_btn .icon {
   display: inline-block;
   background-color: white;
   width: 0.5em;
@@ -159,7 +157,7 @@ margin: 4em 0;
   margin-right: 0.5em;
 }
 
-.stop_btn .icon{
+.stop_btn .icon {
   display: inline-block;
   background-color: white;
   width: 0.5em;
@@ -167,19 +165,19 @@ margin: 4em 0;
   margin-right: 0.5em;
 }
 
-.record_btn{
+.record_btn {
   background-color: red;
-  flex-grow:1;
+  flex-grow: 1;
 }
 
-.play_btn{
+.play_btn {
   display: none;
   flex-grow: 1;
   position: relative;
   overflow: hidden;
 }
 
-.play_btn .icon_p{
+.play_btn .icon_p {
   display: inline-block;
   position: relative;
   top: 0px;
@@ -193,26 +191,26 @@ margin: 4em 0;
 }
 
 
-.play_btn .icon_b{
+.play_btn .icon_b {
   box-sizing: border-box;
-    position: relative;
-    display: inline-block;
-    /* transform: scale(var(--ggs,1)); */
-    width: 0.5em;
-    height: 0.5em;
-    border-left: 0.15em solid;
-    border-right: 0.15em solid;
-    margin-right: 0.5em;
-    z-index: 99;
-}
-
-.play_btn .text{
+  position: relative;
+  display: inline-block;
+  /* transform: scale(var(--ggs,1)); */
+  width: 0.5em;
+  height: 0.5em;
+  border-left: 0.15em solid;
+  border-right: 0.15em solid;
+  margin-right: 0.5em;
+  z-index: 99;
+}
+
+.play_btn .text {
   display: inline-block;
   position: relative;
   z-index: 99;
 }
 
-.play_btn .progress_bar{
+.play_btn .progress_bar {
   display: block;
   background-color: rgb(115, 115, 115);
   position: absolute;
@@ -224,24 +222,24 @@ margin: 4em 0;
   z-index: 0;
 }
 
-.redo_btn{
+.redo_btn {
   display: none;
 }
 
 /* POPUP ON FRONTSCREEN */
-.close{
-  float:right;
+.close {
+  float: right;
   font-size: 2em;
   padding: 0;
   cursor: pointer;
 }
 
-.locations_popup .row div:nth-of-type(2){
+.locations_popup .row div:nth-of-type(2) {
   margin-bottom: 2em;
   font-size: 2em;
 }
 
-.locations_popup .row{
+.locations_popup .row {
   position: fixed;
   bottom: 0;
   background-color: black;
@@ -256,7 +254,7 @@ margin: 4em 0;
   padding-bottom: 2em;
 }
 
-#position{
+#position {
   position: fixed;
   display: inline-block;
   top: 0;
@@ -265,7 +263,7 @@ margin: 4em 0;
   margin: 1em;
 }
 
-#button_group{
+#button_group {
   position: fixed;
   display: inline-block;
   bottom: 0;
@@ -273,13 +271,14 @@ margin: 4em 0;
   box-sizing: border-box;
 }
 
-#distance_close{
+#distance_close {
   font-family: "metaaccanthisalternaalternate";
 
 }
 
 
-#button_group button, #button_group select{
+#button_group button,
+#button_group select {
   background-color: grey;
   color: white;
   font-size: 0.9em;
@@ -291,28 +290,28 @@ margin: 4em 0;
   cursor: pointer;
 }
 
-#button_group select{
-  height:2.8em;
+#button_group select {
+  height: 2.8em;
   margin: 0;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 
-#button_group select option{
+#button_group select option {
   vertical-align: middle;
   margin: 0;
   padding-top: 0;
   padding-bottom: 0;
 }
 
-#button_group img{
+#button_group img {
   width: 1em;
   margin-right: 0.2em;
   vertical-align: middle;
 }
 
-button[type="submit"]{
+button[type="submit"] {
   background-color: grey;
   color: white;
   font-size: 1em;
@@ -340,9 +339,9 @@ button[type="submit"]{
 
 
 
-.compass > .compass-circle,
-.compass > .arrow,
-.compass > .compass-goal {
+.compass>.compass-circle,
+.compass>.arrow,
+.compass>.compass-goal {
   position: absolute;
   width: 90%;
   height: 90%;
@@ -354,7 +353,7 @@ button[type="submit"]{
   pointer-events: none;
 }
 
-.compass > .compass-circle svg{
+.compass>.compass-circle svg {
   width: 100%;
   height: 100%;
   pointer-events: none;
diff --git a/app/templates/home.html b/app/templates/home.html
index a1ae83d..b34622b 100755
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -2,56 +2,70 @@
 
 {% block main %}
 <div id="home_content">
-<p id="position"></p>
+  <p id="position"></p>
 
 
-<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="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>
+  <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="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>
 
 
 
-<!-- <h1 class="header" id="title">GEO</h1> -->
+  <!-- <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_mosquito" onclick="store_location_mosquito()"><img src="/static/img/mosquito.png" alt="">add mosquito</button>
+    <button id="store_location" onclick="store_location()"><img src="/static/img/hangout.png" alt="">add
+      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>
 
-    <select id="viewSelector" onchange="changeViewSelect()" >  
-      <option>Choose view</option>  
-      <option value="all">show all entries</option>  
-      <option value="closest">show closest mosquito</option>  
-      <option value="me">my position</option>  
-    </select> 
+    <select id="viewSelector" onchange="changeViewSelect()">
+      <option>Choose view</option>
+      <option value="all">show all entries</option>
+      <option value="closest">show closest mosquito</option>
+      <option value="me">my position</option>
+    </select>
 
     <button class="start-btn">compass</button>
     <button id="map_view" onclick="toggle_map()">map</button>
   </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-->
 
 
 <div class="locations_popup">
   {% for location in locations %}
-    <div class="row" id={{location.id}}>
-      <div onclick="closeLocation()" class="close">×</div>
-      <div>{{location.longitude}}, {{location.latitude}}</div>
-      <div>{{location.message if location.loc_type == "message"}}</div>
-      <div>
-        {% if location.loc_type == "audio" %}
-        <audio id="audio-player" controls="" src="uploads/{{location.audio}}"></audio>
-        {% endif %}
-      </div>
+  <div class="row" id={{location.id}}>
+    <div onclick="closeLocation()" class="close">×</div>
+    <div>{{location.longitude}}, {{location.latitude}}</div>
+    <div>{{location.message if location.loc_type == "message"}}</div>
+    <div>
+      {% if location.loc_type == "audio" %}
+      <audio id="audio-player" controls="" src="uploads/{{location.audio}}"></audio>
+      {% endif %}
     </div>
+  </div>
   {% endfor %}
 </div>
 
@@ -59,391 +73,343 @@
 {% block js %}
 
 <script>
-    var locations;
-    var zoom_level = 18;
-    var markerArray = [];
-    var circleArray = [];
-    var mosquitoArray = [];
-    var view="closest";
-    var workingCompass = false;
-    var map_view = false;
-
-    function assign_data(data) {
-      locations = data;
+  var locations;
+  var zoom_level = 18;
+  var markerArray = [];
+  var circleArray = [];
+  var mosquitoArray = [];
+  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,
-                            zoomControl:false,
-                            zoom: 2000,
-                            zoomSnap: 0.5,
-                            animate: true,
-                            maxZoom: 19,
-                            //dragging: false,
-                            //scrollWheelZoom: false,
-                          }).setView([48.505, 1.09], zoom_level);
-    
-    var backgroundLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        zoom:2,
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    })
-    
-    
-
-    function toggle_map(){
-      if(map_view){
-        map.removeLayer(backgroundLayer)
-      }
-      else{
-        map.addLayer(backgroundLayer)
-      }
-      map_view = !map_view
+  });
+
+  var map = L.map('map', {
+    attributionControl: false,
+    zoomControl: false,
+    zoom: 2000,
+    zoomSnap: 0.5,
+    animate: true,
+    maxZoom: 19,
+    //dragging: false,
+    //scrollWheelZoom: false,
+  }).setView([48.505, 1.09], zoom_level);
+
+  var backgroundLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    zoom: 2,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  })
+
+  function toggle_map() {
+    if (map_view) {
+      map.removeLayer(backgroundLayer)
+    } else {
+      map.addLayer(backgroundLayer)
     }
+    map_view = !map_view
+  }
 
-    
-    locations.forEach(function (item, index) {
-        try {
-            var icon;
-            if(item.loc_type=="message"){
-              icon = L.icon({
-              iconUrl: '/static/img/text.png',
-              iconSize: [50, 50],
-              iconAnchor: [25, 25],
-              popupAnchor: [-3, -76],
-              });
-            }
-            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"){
-              icon = L.icon({
-              iconUrl: '/static/img/mosquito.png',
-              iconSize: [50, 50],
-              iconAnchor: [25, 25],
-              popupAnchor: [-3, -76],
-              });
-            }
-            else if(item.loc_type=="hangout"){
-              icon = L.icon({
-              iconUrl: '/static/img/hangout.png',
-              iconSize: [50, 50],
-              iconAnchor: [25, 25],
-              popupAnchor: [-3, -76],
-              });
-            }
-            var circle = L.marker([item.latitude, item.longitude], {icon: icon}).addTo(map).on("click", e => circleClick(e));
-            circle.id = item.id;
-            circleArray.push(circle);
-
-            markerArray.push(L.marker([item.latitude, item.longitude]));
-
-            if(item.loc_type=="mosquito") mosquitoArray.push(L.marker([item.latitude, item.longitude]));
-
-        } catch (error) {
-            console.error(error);
-        }
-    });
-    
-    // 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({
+  var myIcon = L.icon({
     iconUrl: '/static/img/me.png',
-    iconSize: [50, 50],
-    iconAnchor: [25, 25],
+    iconSize: [30, 30],
+    iconAnchor: [15, 15],
     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
-    target = {
-      latitude : 48.172934,
-      longitude: 9.01236
-    };
-    
-    var my_location = {
-      latitude : 0,
-      longitude: 0
-    };
-    
-    function success(pos) {
-      const crd = pos.coords;
-      my_location.longitude = crd.longitude;
-      my_location.latitude = crd.latitude;
-    
-      if(view == "closest") updateView()
-
-      console.log("updated")
-    
-      x.innerHTML = "Latitude: " + crd.latitude +
-      "<br>Longitude: " + crd.longitude +
-      "<br>Distance to TENT: " + distance(target.longitude, target.latitude, crd.longitude, crd.latitude);
-    
-      locationHandler(pos);
-
-      // if we want to clear the watch
-      // if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
-      //   console.log('Congratulations, you reached the target');
-      //   navigator.geolocation.clearWatch(id);
-      // }
-    }
-    
-    function error(err) {
-      console.error(`ERROR(${err.code}): ${err.message}`);
-      console.log("trying again")
-      // id = navigator.geolocation.watchPosition(success, error, options);
-    }
-    
-    
-    options = {
-      enableHighAccuracy: true,
-      timeout: 1000,
-      maximumAge: 1000
-    };
-    
-    id = navigator.geolocation.watchPosition(success, error, options);
-    
-    function distance(lon1, lat1, lon2, lat2) {
-      var R = 6371; // Radius of the earth in km
-      var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
-      var dLon = (lon2-lon1).toRad(); 
-      var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
-              Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
-              Math.sin(dLon/2) * Math.sin(dLon/2); 
-      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
-      var d = R * c; // Distance in km
-      var text;
-      if(d < 1){
-        text = Math.round(d * 100) / 100*1000+" m";
-      }
-      else{
-        text = Math.round(d * 100) / 100+" km"
+  });
+
+  var myPositionCircle = L.marker([50.505, 30.57], {
+    icon: myIcon
+  }).addTo(map);
+
+  circleArray.push(myPositionCircle);
+
+  locations.forEach(function (item, index) {
+    try {
+      var icon;
+      if (item.loc_type == "message") {
+        icon = L.icon({
+          iconUrl: '/static/img/text.png',
+          iconSize: [50, 50],
+          iconAnchor: [25, 25],
+          popupAnchor: [-3, -76],
+        });
+      } 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") {
+        icon = L.icon({
+          iconUrl: '/static/img/mosquito.png',
+          iconSize: [50, 50],
+          iconAnchor: [25, 25],
+          popupAnchor: [-3, -76],
+        });
+      } else if (item.loc_type == "hangout") {
+        icon = L.icon({
+          iconUrl: '/static/img/hangout.png',
+          iconSize: [50, 50],
+          iconAnchor: [25, 25],
+          popupAnchor: [-3, -76],
+        });
       }
-      return text;
-    }
-    
-    /** Converts numeric degrees to radians */
-    if (typeof(Number.prototype.toRad) === "undefined") {
-      Number.prototype.toRad = function() {
-        return this * Math.PI / 180;
-      }
-    }
-    
-    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+"/";
+      var circle = L.marker([item.latitude, item.longitude], {
+        icon: icon
+      }).addTo(map).on("click", e => circleClick(e));
+      circle.id = item.id;
+      circleArray.push(circle);
 
-    }
+      markerArray.push(L.marker([item.latitude, item.longitude]));
 
-    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+"/";
+      if (item.loc_type == "mosquito") mosquitoArray.push(L.marker([item.latitude, item.longitude]));
+
+    } catch (error) {
+      console.error(error);
     }
+  });
+
+  var x = document.getElementById("position");
+
+  let id;
+  let target;
+  let options;
+
+  //first: latitude, second: longitude 51.915528423609125, 4.477065873620031
+  target = {
+    latitude: 51.915528423609125,
+    longitude: 4.477065873620031
+  };
 
+  var my_location = {
+    latitude: 0,
+    longitude: 0
+  };
 
-    function add_text(){
-        window.location.href = "addtext/"+my_location.longitude +"/"+my_location.latitude+"/";
+  function success(pos) {
+    const crd = pos.coords;
+    my_location.longitude = crd.longitude;
+    my_location.latitude = crd.latitude;
+
+    updateView()
+
+    x.innerHTML = "Latitude: " + crd.latitude +
+      "<br>Longitude: " + crd.longitude +
+      "<br>Distance to TENT: " + distance(target.longitude, target.latitude, crd.longitude, crd.latitude);
+
+    locationHandler(pos);
+
+    // if we want to clear the watch
+    // if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    //   console.log('Congratulations, you reached the target');
+    //   navigator.geolocation.clearWatch(id);
+    // }
+  }
+
+  function error(err) {
+    console.error(`ERROR(${err.code}): ${err.message}`);
+    console.log("trying again")
+    // id = navigator.geolocation.watchPosition(success, error, options);
+  }
+
+  options = {
+    enableHighAccuracy: true,
+    timeout: 1000,
+    maximumAge: 1000
+  };
+
+  id = navigator.geolocation.watchPosition(success, error, options);
+
+  function distance(lon1, lat1, lon2, lat2) {
+    var R = 6371; // Radius of the earth in km
+    var dLat = (lat2 - lat1).toRad(); // Javascript functions in radians
+    var dLon = (lon2 - lon1).toRad();
+    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+      Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
+      Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    var d = R * c; // Distance in km
+    var text;
+    if (d < 1) {
+      text = Math.round(d * 100) / 100 * 1000 + " m";
+    } else {
+      text = Math.round(d * 100) / 100 + " km"
     }
+    return text;
+  }
 
-    function add_audio(){
-        window.location.href = "addaudio/"+my_location.longitude +"/"+my_location.latitude+"/";
+  /** Converts numeric degrees to radians */
+  if (typeof (Number.prototype.toRad) === "undefined") {
+    Number.prototype.toRad = function () {
+      return this * Math.PI / 180;
     }
+  }
 
-    function updateView(){
-       //update position on map
-      // map.setView([my_location.latitude, my_location.longitude], zoom_level);
-      myPositionCircle.setLatLng([my_location.latitude, my_location.longitude]);
-      if(view == "all"){
-        var group = new L.featureGroup(circleArray);
-        map.fitBounds(group.getBounds().pad(0.4));
-      }
-      else if(view == "closest"){
-        var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
-        // L.polyline([closest.layer.getLatLng(), myPositionCircle.getLatLng()], {
-        //   color: 'black',
-        //   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"){
-        map.setView([my_location.latitude, my_location.longitude], zoom_level);
-      }
-      else if(view == "free"){
+  function store_location() {
+    window.location.href = "addhangout/" + my_location.longitude + "/" + my_location.latitude + "/";
 
-      }
-    }
+  }
 
-    function changeViewSelect() {  
-      var mylist = document.getElementById("viewSelector");  
-      view = mylist.options[mylist.selectedIndex].value;  
-      updateView();
-    }  
-
-    function circleClick(e){
-      var id = e.target.id
-      var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array
-      for(var i = 0; i < divsToHide.length; i++){
-          divsToHide[i].style.display = "none"; // depending on what you're doing
-      }
-      document.getElementById(id).style.display = "block";
+  function store_location_mosquito() {
+    window.location.href = "addmosquito/" + my_location.longitude + "/" + my_location.latitude + "/";
+  }
+
+
+  function add_text() {
+    window.location.href = "addtext/" + my_location.longitude + "/" + my_location.latitude + "/";
+  }
+
+  function add_audio() {
+    window.location.href = "addaudio/" + my_location.longitude + "/" + my_location.latitude + "/";
+  }
+
+  function updateView() {
+    //update position on map
+    // map.setView([my_location.latitude, my_location.longitude], zoom_level);
+    myPositionCircle.setLatLng([my_location.latitude, my_location.longitude]);
+    if (view == "all") {
+      var group = new L.featureGroup(circleArray);
+      map.fitBounds(group.getBounds().pad(0.4));
+    } else if (view == "closest") {
+      var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
+      document.getElementById("distance_close").innerHTML = "closest mosquito: " + distance(closest.layer.getLatLng()
+        .lng, closest.layer.getLatLng().lat, myPositionCircle.getLatLng().lng, myPositionCircle.getLatLng().lat)
+
+      var group = new L.featureGroup([closest.layer, myPositionCircle]);
+      map.fitBounds(group.getBounds().pad(0.4));
+    } else if (view == "me") {
+      map.setView([my_location.latitude, my_location.longitude], zoom_level);
+    } else if (view == "free") {
+
+    }
+  }
+
+  function changeViewSelect() {
+    var mylist = document.getElementById("viewSelector");
+    view = mylist.options[mylist.selectedIndex].value;
+    updateView();
+  }
+
+  function circleClick(e) {
+    var id = e.target.id
+    var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array
+    for (var i = 0; i < divsToHide.length; i++) {
+      divsToHide[i].style.display = "none"; // depending on what you're doing
     }
+    document.getElementById(id).style.display = "block";
+  }
 
-    function closeLocation(){
-      var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array
-      for(var i = 0; i < divsToHide.length; i++){
-          divsToHide[i].style.display = "none"; // depending on what you're doing
-      }
+  function closeLocation() {
+    var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array
+    for (var i = 0; i < divsToHide.length; i++) {
+      divsToHide[i].style.display = "none"; // depending on what you're doing
+    }
+  }
+
+  window.addEventListener('resize', function (event) {
+    updateView()
+  }, true);
+
+  // COMPASS
+  const compassCircle = document.querySelector(".arrow");
+  const myPoint = document.querySelector(".my-point");
+  const startBtn = document.querySelector(".start-btn");
+  var compass;
+  var pointDegree;
+  const isIOS =
+    navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
+    navigator.userAgent.match(/AppleWebKit/);
+
+  function init() {
+    startBtn.addEventListener("click", startCompass);
+    // navigator.geolocation.getCurrentPosition(locationHandler);
+
+    if (!isIOS) {
+      window.addEventListener("deviceorientationabsolute", handler, true);
     }
 
-    window.addEventListener('resize', function(event) {
-      updateView()
-}, true);
-
-    // COMPASS
-    const compassCircle = document.querySelector(".arrow");
-    const myPoint = document.querySelector(".my-point");
-    const startBtn = document.querySelector(".start-btn");
-    var compass;
-    var pointDegree;
-    const isIOS =
-      navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
-      navigator.userAgent.match(/AppleWebKit/);
-
-    function init() {
-      startBtn.addEventListener("click", startCompass);
-      // navigator.geolocation.getCurrentPosition(locationHandler);
-
-      if (!isIOS) {
-        window.addEventListener("deviceorientationabsolute", handler, true);
-      }
+  }
 
+  function startCompass() {
+    if (isIOS) {
+      DeviceOrientationEvent.requestPermission()
+        .then((response) => {
+          if (response === "granted") {
+            window.addEventListener("deviceorientation", handler, true);
+          } else {
+            alert("has to be allowed!");
+          }
+        })
+        .catch(() => alert("not supported"));
     }
+  }
 
-    function startCompass() {
-      if (isIOS) {
-        DeviceOrientationEvent.requestPermission()
-          .then((response) => {
-            if (response === "granted") {
-              window.addEventListener("deviceorientation", handler, true);
-            } else {
-              alert("has to be allowed!");
-            }
-          })
-          .catch(() => alert("not supported"));
-      }
+  function handler(e) {
+    workingCompass = true;
+    if (workingCompass) {
+      document.getElementById("arrow").style.display = "block";
     }
+    compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
+    compassCircle.style.transform = `translate(-50%, -50%) rotate(${pointDegree-compass}deg)`;
 
-    function handler(e) {
-      workingCompass = true;
-      if(workingCompass){
-        document.getElementById("arrow").style.display = "block";
-      }
-      compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
-      compassCircle.style.transform = `translate(-50%, -50%) rotate(${pointDegree-compass}deg)`;
+  }
 
-    }
+  function locationHandler(position) {
 
-    function locationHandler(position) {
-      
-      const { latitude, longitude } = position.coords;
-      pointDegree = calcDegreeToPoint(latitude, longitude);
+    const {
+      latitude,
+      longitude
+    } = position.coords;
+    pointDegree = calcDegreeToPoint(latitude, longitude);
 
-      if (pointDegree < 0) {
-        pointDegree = pointDegree + 360;
-      }
+    if (pointDegree < 0) {
+      pointDegree = pointDegree + 360;
     }
-
-    function calcDegreeToPoint(latitude, longitude) {
-      // 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){
-            document.getElementById("arrow").style.display = "none";
-            document.getElementById("goal").style.display = "block";
-          }
-          else{
-            document.getElementById("arrow").style.display = "block";
-            document.getElementById("goal").style.display = "none";
-          }
+  }
+
+  function calcDegreeToPoint(latitude, longitude) {
+    // 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) {
+        document.getElementById("arrow").style.display = "none";
+        document.getElementById("goal").style.display = "block";
+      } else {
+        document.getElementById("arrow").style.display = "block";
+        document.getElementById("goal").style.display = "none";
       }
-
-      const point = {
-        lat: closest.layer.getLatLng().lat,
-        lng: closest.layer.getLatLng().lng
-      };
-
-      const phiK = (point.lat * Math.PI) / 180.0;
-      const lambdaK = (point.lng * Math.PI) / 180.0;
-      const phi = (latitude * Math.PI) / 180.0;
-      const lambda = (longitude * Math.PI) / 180.0;
-      const psi =
-        (180.0 / Math.PI) *
-        Math.atan2(
-          Math.sin(lambdaK - lambda),
-          Math.cos(phi) * Math.tan(phiK) -
-            Math.sin(phi) * Math.cos(lambdaK - lambda)
-        );
-      return Math.round(psi);
     }
 
-    init();
-    //
-    
-    
-    </script>
+    const point = {
+      lat: closest.layer.getLatLng().lat,
+      lng: closest.layer.getLatLng().lng
+    };
+
+    const phiK = (point.lat * Math.PI) / 180.0;
+    const lambdaK = (point.lng * Math.PI) / 180.0;
+    const phi = (latitude * Math.PI) / 180.0;
+    const lambda = (longitude * Math.PI) / 180.0;
+    const psi =
+      (180.0 / Math.PI) *
+      Math.atan2(
+        Math.sin(lambdaK - lambda),
+        Math.cos(phi) * Math.tan(phiK) -
+        Math.sin(phi) * Math.cos(lambdaK - lambda)
+      );
+    return Math.round(psi);
+  }
+
+  init();
+  //
+</script>
 
 {% endblock js %}
\ No newline at end of file
diff --git a/app/views.py b/app/views.py
index 9b1990a..caec8fa 100755
--- a/app/views.py
+++ b/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