From b90ccb2fd2a0675982dbf1125169095dd06caa4c Mon Sep 17 00:00:00 2001 From: user Date: Tue, 13 Oct 2020 20:51:29 +0200 Subject: [PATCH] realtime api fetching and mapping curl.php --- website/curl.php | 147 +++++++++++++++++++++-------------------------- 1 file changed, 66 insertions(+), 81 deletions(-) diff --git a/website/curl.php b/website/curl.php index a91daff..a6347ca 100644 --- a/website/curl.php +++ b/website/curl.php @@ -4,54 +4,72 @@ // Below is the static html to generate the map, it can also be done more dynamically using https://github.com/LuminFire/leaflet-php but that might be overkill -// array of scooters +// array of scooters, artist, title, description +global $scooters; + $scooters = array( -//'https://platform.tier-services.io/v1/vehicle/fbd739d6-554f-4eaf-bd9c-afe3d501c94b', -'https://opencoil.show/test-json.php?scooterID=1', -'https://opencoil.show/test-json.php?scooterID=2' + array('https://opencoil.show/test-json.php?scooterID=1', 'artist name 0', 'title 0', 'desciption 0' ), + array('https://opencoil.show/test-json.php?scooterID=2', 'artist name 1', 'title 1', 'desciption 1' ), + array('https://opencoil.show/test-json.php?scooterID=3', 'artist name 2', 'title 2', 'desciption 2' ), + //array('https://platform.tier-services.io/v1/vehicle/fbd739d6-554f-4eaf-bd9c-afe3d501c94b', 'artist name 1', 'title', 'desciption'), + ); -//make it like this -//$scooters = array( -//'https://opencoil.show/test-json.php?scooterID=1', name of artist, title, desc -//); +// for each scooter in array get the json (TODO, for each, safe to file/database?) $scooters is a multidimensional array: $scooter[0][0] = the first data (api url) of the first scooter, $scooter[1][0] = the first data (api url) of the second scooter, $scooter[0][1] = the artist name of the first scooter etcetc. + +$id = 0; //get the first scooter for now -// for each scooter in array get the json (TODO, for each, safe to file/database?) -$getJSON = callAPI($scooters[0]); -// decode JSON data to PHP associative array -$arr = json_decode($getJSON, true); -// access values from the associative array -$lat = $arr["data"]["attributes"]["lat"]; // get lattitude -$lng = $arr["data"]["attributes"]["lng"]; // get longitude -$lst = $arr["data"]["attributes"]["lastLocationUpdate"]; // get time of last position -$rnt = $arr["data"]["attributes"]["isRentable"]; // check if scooter is rentable, -$act = $arr["data"]["attributes"]["state"]; // check if scooter is ACTIVE or MAINTAINANCE -//check if scooter is rentable -// if($rnt == true){ -// echo "rentable"; -// } else { -// echo "gallery not available"; -// }; +function makeMarker(int $id){ + global $scooters; //"import" the global variable into the function's scope + $getJSON = callAPI($scooters[$id][0]); //abstract callAPI for neater reuse + $arr = json_decode($getJSON, true); // decode JSON data to PHP associative array + // access values from the associative array + $lat = $arr["data"]["attributes"]["lat"]; // get lattitude + $lng = $arr["data"]["attributes"]["lng"]; // get longitude + $pos = $lat.', '.$lng; // construct lat/lon for use in leafet + $lst = $arr["data"]["attributes"]["lastLocationUpdate"]; // get time of last position + $rnt = $arr["data"]["attributes"]["isRentable"]; // check if scooter is rentable, + $act = $arr["data"]["attributes"]["state"]; // check if scooter is ACTIVE or MAINTAINANCE + // access values from the multidimensional $scooters array + $nam = $scooters[$id][1]; // get the artist name + $tit = $scooters[$id][2]; // get the works title + $des = $scooters[$id][3]; // get the works description -//check if scooter status (if ACTIVE) -// if($act === "ACTIVE"){ -// echo "scooter is active"; -// } else { -// echo "scooter is in repair"; -// }; + //check scooter status and construct marker with corresponding icon + + //check if scooter is rentable + if($rnt == true && $act === 'ACTIVE'){ + $marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map) + .bindPopup("'.$tit.'
'.$des.'
Last updated: '.$lst.'
Status: Rentable, Gallery Offline") + .bindTooltip("'.$nam.'").setIcon(availableIcon);'; + + } elseif ($rnt == false && $act === 'ACTIVE') { + $marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map) + .bindPopup("'.$tit.'
'.$des.'
Last updated: '.$lst.'
Status: Rented Out, Gallery Online") + .bindTooltip("'.$nam.'").setIcon(isRentedIcon);'; + + }; + //check if scooter is in maintenace + if($act !== "ACTIVE"){ + $marker = 'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map) + .bindPopup("'.$tit.'
'.$des.'
Last updated: '.$lst.'") + .bindTooltip("'.$nam.'").setIcon(isMaintenanceIcon);'; + }; + + return $marker; +} //// make date time file------ -// construct lat/lon for use in leafet -$pos = $lat.', '.$lng; + // TODO save json to file?...mmm one big one? seperate ones, timestamped ones? // 60 second update interval @@ -70,8 +88,9 @@ $pos = $lat.', '.$lng; // check if lastlocation is different...if update > latest file (map file..) // check if is rentable -// 2 json files: is retantable, latlong, id, status -// historical: every 60 sec needs update..even tho no state changes +// TODO make two files +// 1: current position and state of scooter, latlong, id, status +// 2: historical json file, contains all scooters, updated everytime php file is loaded (or every 60 sec). No state changes, only lat long and time. even if time does not change @@ -150,10 +169,10 @@ function callAPI($url){ // prefix: glyphicon = bootstrap, list can be found here: https://getbootstrap.com/docs/3.3/components/ // prefix: fa = fontawesome, list is here: https://fontawesome.com/v4.7.0/cheatsheet/ var availableIcon = L.AwesomeMarkers.icon( - {"icon": "wifi", "iconColor": "white", "markerColor": "purple", "spin": "true", "prefix": "fa"} + {"icon": "wifi", "iconColor": "white", "markerColor": "purple", "prefix": "fa"} ); var isRentedIcon = L.AwesomeMarkers.icon( - {"icon": "hourglass-half", "iconColor": "white", "markerColor": "pink", "prefix": "fa"} + {"icon": "hourglass-half", "iconColor": "white", "spin": "true", "markerColor": "pink", "prefix": "fa"} ); var isMaintenanceIcon = L.AwesomeMarkers.icon( {"icon": "wrench", "iconColor": "white", "markerColor": "black", "prefix": "fa"} @@ -171,51 +190,17 @@ function callAPI($url){ }); map.addLayer(Stamen_Toner); - //for each... - var scooter1 = L.marker([], - {time: "2020-10-09T08:00:29Z"}, - {icon: availableIcon}).addTo(map) - .bindPopup('Last updated ') - .bindTooltip('artist name') - .setIcon(availableIcon); // scooter is available - //.setIcon(isRentedIcon); // scooter is rented - //.setIcon(isMaintenanceIcon); // scooter is rented - //.openPopup(); - - - - var scooter2 = L.marker([52.508926, 13.355061], - {time: "2020-10-09T08:00:29Z"}, - {icon: availableIcon}).addTo(map) - .bindPopup('Last updated ') - .bindTooltip('artist name') - //.setIcon(availableIcon); // scooter is available - .setIcon(isRentedIcon); // scooter is rented - //.setIcon(isMaintenanceIcon); // scooter is rented - //.openPopup(); - - - var scooter3 = L.marker([52.506926, 13.348061], - {time: "2020-10-09T08:00:29Z"}, - {icon: availableIcon}).addTo(map) - .bindPopup('Last updated ') - .bindTooltip('artist name') - //.setIcon(availableIcon); // scooter is available - //.setIcon(isRentedIcon); // scooter is rented - .setIcon(isMaintenanceIcon); // scooter is rented - //.openPopup(); - - //scooter 3 different time and poss - var scooter3 = L.marker([52.509926, 13.348061], - {time: "2020-10-09T09:00:29Z"}, - {icon: availableIcon}).addTo(map) - .bindPopup('Last updated ') - .bindTooltip('artist name') - //.setIcon(availableIcon); // scooter is available - //.setIcon(isRentedIcon); // scooter is rented - .setIcon(isMaintenanceIcon); // scooter is rented - //.openPopup(); + //for each scooter in $scooters array, request status and construct marker + // time slider @@ -226,7 +211,7 @@ function callAPI($url){ // var map = marker1; // layerGroup = L.layerGroup([marker_e7a96a6d6b08479ba6d17d42769e5202]); - layerGroup = L.layerGroup([scooter1, scooter3]); + layerGroup = L.layerGroup([scooter0, scooter1, scooter2]); //make this dynamic var sliderControl = L.control.sliderControl({layer:layerGroup}); map.addControl(sliderControl); sliderControl.startSlider();