Add Favorite Place functionality (only on local)

server.js

@@ -928,4 +928,19 @@ app.get('/TrafficFlow', async (req, res) => {
 		  reject(error);
 		});
 	});
-  }
\ No newline at end of file
+  }
+
+  const connectionFav = {
+  
+	user: 'postgres', 																		// name of the user account
+	database: 'FavoritPlaces', 																	// name of the database
+	password: 'ahpk94meteor', 																	// env var: PGPASSWORD 
+	host: '193.196.38.112', 				// Server hosting the postgres database (host: '35.187.21.114')
+	port: 5432, 																				// env var: PGPORT 
+	max: 10, 																					// max number of clients in the pool
+	idleTimeoutMillis: 30000 																	// how long a client is allowed to remain idle before being closed
+  
+  }
+
+  const dbFav = pgp(connectionFav);
+  console.log('successful connected to DB: FavoritPlaces!')
\ No newline at end of file

serveralternative.js

@@ -441,7 +441,9 @@ function CON_buildTFLOWJson(inputData,type){
 // - receive coordinates and return a geojson
 app.get('/addPoint', async (req, res) => {
   try {
+
     var data = req.query;
+    console.log(data)
     var Punktadd = {
       "type":"FeatureCollection",
       "name":"data_point",
@@ -910,4 +912,140 @@ function STA_getApiResponse(url) {
         reject(error);
       });
   });
-}
\ No newline at end of file
+}
+
+
+const connectionFav = {
+  
+	user: 'postgres', 																		// name of the user account
+	database: 'FavoritPlaces', 																	// name of the database
+	password: 'ahpk94meteor', 																	// env var: PGPASSWORD 
+	host: '193.196.38.112', 				// Server hosting the postgres database (host: '35.187.21.114')
+	port: 5432, 																				// env var: PGPORT 
+	max: 10, 																					// max number of clients in the pool
+	idleTimeoutMillis: 30000 																	// how long a client is allowed to remain idle before being closed
+  
+  }
+
+  const dbFav = pgp(connectionFav);
+  console.log('successful connected to DB: FavoritPlaces!')
+
+
+
+  // ---- Accidents ----
+// - 3Parts -
+// - get request from the html page
+app.get('/FavPlacesDB', async (req, res) => {
+  console.log('FavPlacesDB angekommen!')
+try{
+  let APIout = await getDBResult('');
+  console.log(APIout)
+  let json_con = await buildFavJson(APIout,"CONSTRUCTION");
+  // console.log(json_con)
+  var json_cons = {
+    "name":"FavouritePlaces" + "01",
+    "type":"FeatureCollection",
+    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+    "features": json_con
+    
+  };
+  res.json(json_cons)
+}catch (error) {
+  console.log(error)
+}
+       
+});
+// - request from the here API
+function getDBResult(url) {
+  return new Promise(function (resolve, reject) {
+    
+    let query_string = " SELECT id, lat, lon, contenttext, approved, timestamp FROM public.places WHERE approved = true;"
+    // query_string += "from noisesensor;"; 
+  
+    console.log(query_string)
+    // request the data rsr
+    dbFav.result(query_string)
+    .then(result => {
+      // res.json(result.rows);
+      console.log((result.rows));
+      resolve((result.rows));
+    })
+    .catch(function (error) {
+      // handle error
+      // console.log(error);
+      reject(error);
+    });
+  });
+}
+// - build geojson from response 
+function buildFavJson(inputData,type){
+  return new Promise(function (resolve, reject) {
+  try {
+    var JsonFeature = [];
+    var json_acc = inputData
+    var length = json_acc.length;
+    // console.log(length)
+    for (var i = 0; i <= length - 1; i++){
+  
+       //console.log(json_acc.TRAFFIC_ITEMS.TRAFFIC_ITEM[i])
+      var lat = json_acc[i].lat;
+      var lon = json_acc[i].lon;
+      //  var type = json_acc.TRAFFIC_ITEMS.TRAFFIC_ITEM[i].TRAFFIC_ITEM_TYPE_DESC;
+      var id = json_acc[i].id;
+      var contenttext = json_acc[i].contenttext;
+      var timestamp = json_acc[i].timestamp;
+
+
+        // console.log(i)
+  
+    
+
+         JsonFeature.push({
+          "type":"Feature",
+          "properties": { "id": id, "name": "datapoint" , "contenttext": contenttext, "timestamp": timestamp, "lat":lat, "lon":lon},
+          "geometry":{
+              "type":"MultiPoint",
+              "coordinates": [ [parseFloat(lon), parseFloat(lat)]]
+            }
+          }) 
+
+        
+  
+
+  
+    }
+  resolve(JsonFeature)
+  }catch(error){ reject(error)}
+
+ 
+
+  });
+
+};
+
+app.post('/saveFavPoint', function (req, res) {
+ 
+  try {
+  
+      const data = req.body;
+  // = "select sensor_id from public.noisesensor;"
+
+  let query_string = " INSERT INTO public.places(    lat, lon, contenttext, approved, timestamp)     VALUES (" + data.lat + ", " + data.lon + ", '" + data.contentext + "',  'false' , NOW()); "
+	// query_string += "from noisesensor;"; 
+
+  console.log(query_string)
+  // request the data rsr
+  dbFav.result(query_string)
+  .then(result => {
+    res.json(result.rows);
+  })
+  .catch(error => {
+    console.log('ERROR:', error);
+  });			
+  console.log('.../saveFavPoint successful!');
+  }
+
+  catch (err) {
+      console.log('.../saveFavPoint failed!\n' + err);
+  }
+});
\ No newline at end of file

vcm/config.json

@@ -146,6 +146,79 @@
       "type": "vcs.vcm.widgets.BalloonInfo",
       "name": "Balloon Info",
       "balloonTypes": [
+        {
+          "template": [
+            "<div class='balloon' id='myBalloon'>",
+            "<div class='balloon-content'>",
+            "<h1 class='balloon-title'>Balloon header</h1>",
+            "<% for (var key in obj) { %>",
+            "<% if (obj[key] instanceof Object){%>",
+            "<% for (var key2 in obj[key]) { %>",
+            "<p class='balloon-text'><span class='balloon-street'> <strong> <%=key%>.<%=key2%> </strong> : <%=obj[key][key2]%></span><br></p>",
+            "<% } %>",
+            "<% } else{ %>",
+            "<p class='balloon-text'>",
+            "<span class='balloon-street'> <strong> <%=key%> </strong> : <%=obj[key]%></span><br>",
+            "</p>",
+            "<% } %>",
+            "<% } %>",
+            "</div>",
+            "<div class='balloon-close-col'>",
+            "<button class='close-balloon'><i class='fa fa-times fa-lg'></i></button>",
+            "</div>",
+            "<div class='dialog-image-balloon'></div>",
+            "<div class='balloon-left-edge'></div>",
+            "</div>"
+          ],
+          "layerTypes": [
+            null
+          ],
+          "layerNames": [
+            "FavPlaces"
+          ],
+          "minTop": "balloonHeight + 30",
+          "minLeft": "70",
+          "allAvailable": true,
+          "properties": [],
+          "balloonHeader": "Balloon header"
+        },{
+          "template": [
+            "<div class='balloon' id='myBalloon'>",
+            "<div class='balloon-content'>",
+            "<h1 class='balloon-title'>Write your Comment here:</h1>",
+            "<% for (var key in obj) { %>",
+            "<% if (obj[key] instanceof Object){%>",
+            "<% for (var key2 in obj[key]) { %>",
+            "<p class='balloon-text'><span class='balloon-street'> <strong> <%=key%>.<%=key2%> </strong> : <%=obj[key][key2]%></span><br></p>",
+            "<% } %>",
+            "<% } else{ %>",
+            "<p class='balloon-text'>",
+            "<span class='balloon-street'> <strong> <%=key%> </strong> : <%=obj[key]%></span><br>",
+            "</p>",
+            "<% } %>",
+            "<% } %>",
+            "</div>",
+            "<div><textarea id='favoritText' rows='4' cols='50' maxlength='250'>Bitte geben Sie hier Ihre Gedanken ein.</textarea></div>",
+            "<button id='FavSaveButton' type='button' onclick='this.disabled=true;disableButton();saveFavPoint();' class='top-nav buttonset one btn_home btn_size' style='text-decoration: none;'>Speichern</button>",
+            "<div class='balloon-close-col'>",
+            "<button class='close-balloon'><i class='fa fa-times fa-lg'></i></button>",
+            "</div>",
+            "<div class='dialog-image-balloon'></div>",
+            "<div class='balloon-left-edge'></div>",
+            "</div>"
+          ],
+          "layerTypes": [
+            null
+          ],
+          "layerNames": [
+            "favpoint"
+          ],
+          "minTop": "balloonHeight + 30",
+          "minLeft": "70",
+          "allAvailable": true,
+          "properties": [],
+          "balloonHeader": "Balloon header"
+        },
         {
           "template": [
             "<div class='balloon' id='myBalloon'>",

vcm/css/dragable.css

+.Disabled {
+    background-color: #afafaf !important;
+    color: white !important;
+}
+.Disabled:hover {
+    background-color: #afafaf !important;
+    color: #121212 !important;
+}
\ No newline at end of file

vcm/index.html

@@ -226,6 +226,7 @@
                             </p><br> 
                             <img id="dragFrom" onmouseover="setPointStartEnd('fav')" ondragstart="dragstart_handler(event);" draggable=true src="templates/locationSM.png" style="height:30px;height: 30px; display: inline-block; position: absolute;cursor: -webkit-grab; cursor: grab;">
                       </div><br><br>
+                      <a onclick="getFavoritePlaces()">Welche Orte sind für andere interessant? Finden Sie es hier heraus.</a>
                 </div>
 
             </div>
@@ -824,6 +825,7 @@
     <script src="js/STAnoise.js"></script>
     <link href="templates/sliders.css" rel="stylesheet">
     <link rel="stylesheet" href="css/menu.css">
+    
 
 	<script>
       var startVCM = function() {
@@ -835,7 +837,7 @@
         }
       }
     </script>
-
+<link rel="stylesheet" href="css/dragable.css">
     <!--script>
       vcs.vcm.Framework.activateLogging();
       vcs.vcm.Framework.loadConfig('config.json');
@@ -845,6 +847,7 @@
     <script src='lib/vcm_ui.js'></script>
     <script src="js/SimStadtApi_stud.js"></script>
     <script src="js/here.js"></script>
+    <script src="js/favoriteplaces.js"></script>
     <script src="js/codepoly.js"></script>
     <script src="templates/custom.js"></script>
     <script src="templates/newDevBahn.js"></script>

vcm/js/DragnDrop.js

@@ -108,7 +108,7 @@ function dragDrop(e) {
           // var text = document.getElementById('Epunktlon');
           // text.value = ballonContent.lon;
           // visualize a Point at the clicked location
-          setPoint("fav", pointd);
+          setPointFav("fav", pointd);
       }
 }
 

vcm/js/ServerorLocal.js

@@ -20,6 +20,7 @@
 // var RoutecalcUrl = '/partizipation/Routecalc'
 // var navPublicTUrl = '/partizipation/navPublicT'
 // var NoiseRealTimeUrl = '/partizipation/NoiseRealTime'
+// var FavortiePlacesUrl = '/partizipation/getFavPlaces'
 // var getNoiseHistUrl = '/partizipation/getNoiseHist'
 // var getSTANoiseHistUrl = '/partizipation/getSTANoiseHist'
 
@@ -48,5 +49,7 @@ var navPointUrl = '/navPoint'
 var RoutecalcUrl = '/Routecalc'
 var navPublicTUrl = '/navPublicT'
 var NoiseRealTimeUrl = '/NoiseRealTime'
+var FavoritePlacesUrl = 'http://localhost:8083/FavPlacesDB'
 var getNoiseHistUrl = '/getNoiseHist'
-var getSTANoiseHistUrl = '/getSTANoiseHist'
\ No newline at end of file
+var getSTANoiseHistUrl = '/getSTANoiseHist'
+var saveFavPOINT = '/saveFavPoint'
\ No newline at end of file

vcm/js/favoriteplaces.js

+function getFavoritePlaces() {
+    // console.log("arrive")
+    //   Sensor.id = sensorid
+      // console.log(Sensor.id)
+
+      var favplaces = new vcs.vcm.layer.GeoJSON({
+        name: "FavPlaces",
+        url: FavoritePlacesUrl,
+        data: geojson,
+        projection: {
+            epsg: 4326
+        },
+        altitudeMode : "relativeToGround",
+        style: {
+        image: {
+          icon: {
+            src: "./templates/locationSMgreen.png",
+            scale: 0.5
+          }
+        }
+      },
+      heightAboveGround: 0
+    })
+    framework.addLayer(favplaces)
+    favplaces.activate(true);
+ }
+
+ var favdatapoint = {
+  slat:"",
+  slon:"",
+  sloc:"",
+  }
+
+  //-- Set point in the map
+function setPointFav(location, pointd){
+
+    
+  
+      favdatapoint.slat = pointd.lat
+      favdatapoint.slon = pointd.lon
+      favdatapoint.sloc = location
+  
+      var layern = [location + "point"]
+      var layers = framework.getLayers();
+      // hide layer if it already exists
+      for (var i = 0; i< layers.length; i++) {
+        var layer = layers[i];
+        if(layern.indexOf(layer.name) >= 0){
+          layer.activate(false);
+          
+        } 
+      }
+      // delete layer if it already exists
+     framework.removeLayerByName(location + "point")
+      // visualizing with vcs GeoJson function
+      pointlayer = new vcs.vcm.layer.GeoJSON({
+          name: location + "point",
+          url: addPointurl + "?slat=" + pointd.lat + "&slon=" + pointd.lon + "&sloc=" + location,
+          data: geojson,
+          projection: {
+              epsg: 4326
+          },
+          altitudeMode : "relativeToGround",
+          style: {
+          image: {
+            icon: {
+              src: "./templates/locationSM.png",
+              scale: 0.5
+            }
+          }
+        },
+        heightAboveGround: 0
+      })
+      framework.addLayer(pointlayer)
+      pointlayer.activate(true);
+  }
+
+
+function saveFavPoint(){
+ var favdatapoint2 = {
+    lat:"",
+    lon:"",
+    contentext: document.getElementById("favoritText").value
+    }
+    favdatapoint2.lat  = favdatapoint.slat;
+    favdatapoint2.lon = favdatapoint.slon;
+    // var incidents = getTraffic()
+    try {
+      $.ajax({
+          type: "POST",
+          url: saveFavPOINT,
+          data: favdatapoint2,
+      }).done(function (newdata) {
+          convertdata(newdata);
+      });
+      function convertdata(data) {
+          navcardata = data;
+          console.log(navcardata)
+      }
+      return navcardata
+  }
+  catch (err) {
+      console.log('loading Gas Values from DB failed!');
+  }
+}
+
+function disableButton(){
+  var element = document.getElementById("FavSaveButton");
+  element.classList.add("Disabled");
+}