realtime api fetching and mapping curl.php

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',
+    array('https://opencoil.show/test-json.php?scooterID=1', 'artist name 0', 'title 0', 'desciption 0' ),
-'https://opencoil.show/test-json.php?scooterID=1',
+    array('https://opencoil.show/test-json.php?scooterID=2', 'artist name 1', 'title 1', 'desciption 1' ),
-'https://opencoil.show/test-json.php?scooterID=2'
+    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
+function makeMarker(int $id){
-// if($rnt == true){
+    global $scooters; //"import" the global variable into the function's scope
-//     echo "rentable";
+    $getJSON = callAPI($scooters[$id][0]); //abstract callAPI for neater reuse
-// } else { 
+    $arr = json_decode($getJSON, true); // decode JSON data to PHP associative array
-//     echo "gallery not available";
+    // 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)
+    //check scooter status and construct marker with corresponding icon
-// if($act === "ACTIVE"){
+
-//     echo "scooter is active";
+    //check if scooter is rentable
-// } else { 
+    if($rnt == true && $act === 'ACTIVE'){ 
-//     echo "scooter is in repair";
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
-// };
+                .bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst.'<br>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("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst.'<br>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("<b>'.$tit.'</b><br>'.$des.'<br>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
+// TODO make two files
-// historical: every 60 sec needs update..even tho no state changes
+// 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([<?php echo $pos; ?>], 
-                                {time: "2020-10-09T08:00:29Z"},
-                                {icon: availableIcon}).addTo(map)
-          .bindPopup('Last updated <?php echo $lst; ?>')
-          .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 <?php echo $lst; ?>')
-          .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 <?php echo $lst; ?>')
-          .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 <?php echo $lst; ?>')
-          .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
+        <?php 
+        $id = 0; //start id
+            foreach($scooters as $item) {
+               
+                echo makeMarker($id);
+
+                $id++;
+            }
+        ?>
 
         // 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();