Merge pull request #18 from aloxe/jsonlists

use geojson list and files, not gpx
aloxe · Jul 14, 2024 · 85d5d94 · 85d5d94
2 parents 7bf70e9 + fd40c12
commit 85d5d94
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 38 deletions.
diff --git a/public/datavelo/tracklist.json.php b/public/datavelo/tracklist.json.php
@@ -1,18 +1,18 @@
 <?php
-$velotracks = "gpx";
+$velotracks = "json";
 $year = $_REQUEST['y'];
 /* make sure country is iso 3166 */
 if ($_REQUEST['c']) $country = ".".$_REQUEST['c'];
 
-// An array of the gpx file names
+// An array of the json file names
 $tracks = array();
 
 //Open images directory
 $dir = opendir($velotracks);
 
 //List files in tracks directory
 while (($file = readdir($dir)) !== false) {
-    if (substr($file, -3, 3)=="gpx") {
+    if (substr($file, -4, 4)=="json") {
         // if no selection we display all tracks
         if (!$year && !$country) {
             $tracks[] = $file;
@@ -43,7 +43,7 @@
             // convert iso 3166 letter to flag
             $lettred = mb_convert_encoding('&#' . (ord(substr($v, 0, 1)) + 127462 - 97) . ';', 'UTF-8', 'HTML-ENTITIES');
             $lettref = mb_convert_encoding('&#' . (ord(substr($v, 1, 2)) + 127462 - 97) . ';', 'UTF-8', 'HTML-ENTITIES');
-            $flag = $flag."<C2><A0>".$lettred.$lettref;
+            $flag = $flag." ".$lettred.$lettref;
         }
         $trackobject = (object) ['id' => $i, 'date' => $date, 'name' => $name, 'url' => $val, 'cc' => $cc, 'flag' => $flag];
         array_push($trackliste, $trackobject);

diff --git a/public/datavelo/velotraces.json.php b/public/datavelo/velotraces.json.php
@@ -0,0 +1,30 @@
+<?php
+$velotracks = "json";
+
+// An array of the json file names
+$tracks = array();
+
+//Open images directory
+$dir = opendir($velotracks);
+
+//List files in tracks directory
+while (($file = readdir($dir)) !== false) {
+  $geojson = json_decode(file_get_contents(__DIR__."/".$velotracks."/".$file));
+
+  if (isset($geojson->slug)) {
+    $date = $geojson->date;
+    $title = $geojson->title;
+    $slug = $geojson->slug;
+    $countries = $geojson->countries;
+    array_push($tracks,[
+	'date' => $geojson->date,
+	'title' => $geojson->title,
+	'slug' => $geojson->slug,
+	'countries' => $geojson->countries,
+    ]);
+  }
+}
+closedir($dir);
+// asort($tracks);
+echo json_encode($tracks); //, JSON_PRETTY_PRINT);
+?>
diff --git a/src/components/MainMap.jsx b/src/components/MainMap.jsx
@@ -29,15 +29,15 @@ const MainMap = ({geojsonList, tileName, handleClickPopup, currentGeoJson}) => {
     if (!geojson)  return null;
     return (
       <GeoJson
-      className={geojson.url === currentGeoJson?.url && "CURRENT"}
+      className={geojson.slug === currentGeoJson?.slug && "CURRENT"}
         key={key}
         data={geojson}
         styleCallback={(feature) => {
           if (feature?.geometry?.type === "Point") {
             // removing display for points.
             return { strokeWidth: "0", stroke: "black", r: '0', };
           }
-        if (geojson.url === currentGeoJson?.url) { // sellected path
+        if (geojson.slug && geojson.slug === currentGeoJson?.slug) { // sellected path
           if (geojson.features.length > 1) { // rainbow colours for multi paths geojson
             return {
               strokeWidth: "4",

diff --git a/src/components/Wrapper.jsx b/src/components/Wrapper.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { getCountryInParams, getYearInParams } from "../helpers/routerUtils";
-import { filterGpxList, getGpxList, getYear, loadGeoJsonFromGpx } from "../helpers/gpxUtil";
+import { filterGeojsonList, getGeoJsonList, getYear, loadFullGeoJsonFromSlug } from "../helpers/gpxUtil";
 import { flagToCountryCode } from "../helpers/countryUtil";
 import SideBar from "./SideBar";
 import MainMap from "./MainMap";
@@ -17,10 +17,9 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
   const country = getCountryInParams(params) || ''
 
   const [step, setStep] = useState(0);
-  const [allGpxList, setAllGpxList] = useState([]);
-  const [gpxList, setGpxList] = useState([]);
+  const [allTrackList, setAllTrackList] = useState([]);
+  const [trackList, setTrackList] = useState([]);
   const [geojsonList, setGeojsonList] = useState([]);
-  const [allGeojsonList, setAllGeojsonList] = useState([]);
   const [currentYear, setCurrentYear] = useState(year);
   const [currentCountry, setCurrentCountry] = useState(country);
   const [currentTile, setCurrentTile] = useState('CartoDBVoyager');
@@ -35,58 +34,53 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
 
   useEffect(() => {
     if (step===1) {
-      // load list of gpx files
-      const getGpxListAwaited = async () => {
-        const gpxList = await getGpxList()
-        gpxList.length && setAllGpxList(gpxList)
+      // load list of all geojson files
+      const getGeojsonListAwaited = async () => {
+        const trackList = await getGeoJsonList()
+        trackList.length && setAllTrackList(trackList)
         setStep(2) // > filter list
       }
-      getGpxListAwaited()
+      getGeojsonListAwaited()
     }
   }, [step]);
 
   useEffect(() => {
     if (step===2) {
-      // filter list of gpx files
-      const gpxListFiltered = filterGpxList(currentYear, currentCountry, allGpxList)
-      if (gpxListFiltered.length) {
+      // filter list of geojson files
+      const trackListFiltered = filterGeojsonList(currentYear, currentCountry, allTrackList)
+      if (trackListFiltered.length) {
         setStep(3) // > load GeoJsonLists to map
-        setGpxList(gpxListFiltered)
+        setTrackList(trackListFiltered)
       } else {
-        setGeojsonList([])
-        setStep(4) // done TOD: set message for empty map
+        setTrackList([])
+        setStep(4) // done TODO: set message for empty map
       }
     }
-  }, [step, currentYear, currentCountry, allGpxList, gpxList, allGeojsonList]);
+  }, [step, currentYear, currentCountry, allTrackList]);
 
   useEffect(() => {
     if (step===3) {
       // load geojson from a list of gpx files
-      const setGeoJsonListAwaited = async (gpxList) => {
+      const setGeoJsonListAwaited = async (trackList) => {
         const geojsonList = []
-        const requests = gpxList.map( async (url, i) => {
-          if (i < gpxList.length) {
-            const geojson = allGeojsonList.find(json => json.url === url) || await loadGeoJsonFromGpx(url)
-            if (!allGeojsonList.find(json => json.url === url)) {
-              geojson["url"] = url;
-              if (url === track) {
-                setCurrentGeoJson(geojson)
-                handleClickPopup("open", geojson)
+        const requests = trackList.map( async (json, i) => {
+          if (i < trackList.length) {
+            const fullGeojson = await loadFullGeoJsonFromSlug(json.slug)
+            if (json.slug === track) {
+                setCurrentGeoJson(fullGeojson)
+                handleClickPopup("open", fullGeojson)
               }
-              allGeojsonList.push(geojson)
-            }
-            geojsonList.push(geojson)
+            geojsonList.push(fullGeojson)
           }
         })
         Promise.all(requests).then(() => {
-          setAllGeojsonList(allGeojsonList)
           setGeojsonList(geojsonList)
           setStep(4) // done
         })
       }
-      setGeoJsonListAwaited(gpxList)
+      setGeoJsonListAwaited(trackList)
     }
-  }, [step, gpxList, allGeojsonList, track]);
+  }, [step, trackList, track, currentGeoJson]);
 
   const handleClickTile = (e) => {
     setCurrentTile(e.target.alt)
@@ -124,7 +118,7 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
       setCurrentGeoJson(null)
     } else {
       setCurrentGeoJson(geoJsonClick)
-      history(`/t/${geoJsonClick.url}`)
+      history(`/t/${geoJsonClick.slug}`)
     }
   }
 

diff --git a/src/helpers/gpxUtil.js b/src/helpers/gpxUtil.js
@@ -11,6 +11,31 @@ export const getGpxList = async () => {
   }
 }
 
+export const getGeoJsonList = async () => {
+  try {
+    const response = await axios.get('https://alix.guillard.fr/data/velo/velotraces.json.php');
+    return response.data
+  } catch (error) {
+    console.error('oups Error fetching data:', error.message);
+    return([])
+  }
+}
+
+export const filterGeojsonList = (currentYear, currentCountry, allGeojsonList) => {
+  const loadCountry = currentCountry === 'xx' ? '' : currentCountry;
+  const loadYear = currentYear === 'all' ? '' : currentYear;
+  const geojsonList = allGeojsonList.filter(json => {
+    if (!loadCountry) {
+      return json.date.substr(0, 4) === loadYear
+    }
+    if (!loadYear) {
+      return json.countries.includes(loadCountry)
+    }
+    return json.date.substr(0, 4) === loadYear && json.countries.includes(loadCountry)
+  })
+  return geojsonList
+}
+
 export const filterGpxList = (currentYear, currentCountry, allGpxList) => {
   const loadCountry = currentCountry === 'xx' ? '' : currentCountry;
   const loadYear = currentYear === 'all' ? '' : currentYear;
@@ -28,6 +53,17 @@ export const filterGpxList = (currentYear, currentCountry, allGpxList) => {
   return gpxList
 }
 
+export const loadFullGeoJsonFromSlug = async (slug) => {
+  try {
+    const response = await axios.get('https://alix.guillard.fr/data/velo/json/'+slug+'.json');
+
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching gpx data:', error.message);
+    return
+  }
+}
+
 export const loadGeoJsonFromGpx = async (url) => {
   try {
     const response = await axios.get('https://alix.guillard.fr/data/velo/gpx/'+url);
@@ -54,6 +90,17 @@ export const loadGeoJsonFromGpx = async (url) => {
   }
 }
 
+export const loadGeoJsonFromSlug = async (slug) => {
+  try {
+    const response = await axios.get(`https://alix.guillard.fr/data/velo/json/${slug}`);
+    const geojson = response.data
+    return geojson;
+  } catch (error) {
+    console.error('Error fetching geojson data:', error.message);
+    return
+  }
+}
+
 export const uploadJson = async (geodata) => {
   console.log("upload", geodata);
   const body = JSON.stringify(geodata)