From e65a993dede342ea2fa4a39af15c162e7bf52dc0 Mon Sep 17 00:00:00 2001
From: Patrick <patrick.wuerstle@gmx.de>
Date: Tue, 1 Jun 2021 17:14:30 +0200
Subject: [PATCH] Add Favorite Place functionality (only on local)
---
server.js | 17 +++-
serveralternative.js | 140 +++++++++++++++++++++++++++++-
vcm/config.json | 73 ++++++++++++++++
vcm/css/dragable.css | 8 ++
vcm/index.html | 5 +-
vcm/js/DragnDrop.js | 2 +-
vcm/js/ServerorLocal.js | 5 +-
vcm/js/favoriteplaces.js | 110 +++++++++++++++++++++++
vcm/templates/locationSMgreen.png | Bin 0 -> 1869 bytes
9 files changed, 355 insertions(+), 5 deletions(-)
create mode 100644 vcm/js/favoriteplaces.js
create mode 100644 vcm/templates/locationSMgreen.png
diff --git a/server.js b/server.js
index e873a1402..035722b6c 100644
--- a/server.js
+++ b/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
diff --git a/serveralternative.js b/serveralternative.js
index a64227b95..324871e37 100644
--- a/serveralternative.js
+++ b/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
diff --git a/vcm/config.json b/vcm/config.json
index eb0ead06b..d0c6c5554 100644
--- a/vcm/config.json
+++ b/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'>",
diff --git a/vcm/css/dragable.css b/vcm/css/dragable.css
index e69de29bb..cc52fc0e5 100644
--- a/vcm/css/dragable.css
+++ b/vcm/css/dragable.css
@@ -0,0 +1,8 @@
+.Disabled {
+ background-color: #afafaf !important;
+ color: white !important;
+}
+.Disabled:hover {
+ background-color: #afafaf !important;
+ color: #121212 !important;
+}
\ No newline at end of file
diff --git a/vcm/index.html b/vcm/index.html
index 32946210c..a19300d89 100644
--- a/vcm/index.html
+++ b/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>
diff --git a/vcm/js/DragnDrop.js b/vcm/js/DragnDrop.js
index 1ba24ff72..252013452 100644
--- a/vcm/js/DragnDrop.js
+++ b/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);
}
}
diff --git a/vcm/js/ServerorLocal.js b/vcm/js/ServerorLocal.js
index e2549216e..c4c777323 100644
--- a/vcm/js/ServerorLocal.js
+++ b/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
diff --git a/vcm/js/favoriteplaces.js b/vcm/js/favoriteplaces.js
new file mode 100644
index 000000000..ba3ac05ed
--- /dev/null
+++ b/vcm/js/favoriteplaces.js
@@ -0,0 +1,110 @@
+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");
+}
diff --git a/vcm/templates/locationSMgreen.png b/vcm/templates/locationSMgreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f5e8a554205ce01ab50535824f56836713d6bb9
GIT binary patch
literal 1869
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
Hu0mjfhZAWz
literal 0
HcmV?d00001
--
GitLab