review how we save json + gpx and rainbow

aloxe · Jun 20, 2024 · 171ca8e · 171ca8e
1 parent 1857f50
commit 171ca8e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import Dropzone from "react-dropzone";
 import {getDistance, loadGeoJsonFromGpx, renameGpx, uploadFile, uploadJson } from "../helpers/gpxUtil";
-import { calcColor, toSlug } from "../helpers/strings";
+import { toSlug } from "../helpers/strings";
 import Login from "./Login";
 import './FileUpload.css'
 
@@ -16,13 +16,18 @@ const FileUpload = ({ isLogged, setIsLogged, setGeojsonList }) => {
       title: '',
       countries: [],
     });
-
+
+    const calcColor = (length, val) => {
+      var minHue=320, maxHue=0;
+      var curPercent = (val-1)/(length-1);
+      return `hsl(${Math.round((curPercent*(maxHue-minHue))+minHue)},100%,50%)`;
+  }
+
     useEffect(() => {
       const getGeoJsonAwaited = async (name) => {
         const geojson = await loadGeoJsonFromGpx(name);
-        const l = geojson.features;
+        const l = geojson.features.length;
         geojson.features.map((feature, i) => feature.properties.color = calcColor(l,i));
-        geojson.color = "rainbow";
         setCurrentGeoJson(geojson);
         setGeojsonList([geojson]);
       }
@@ -71,8 +76,9 @@ const FileUpload = ({ isLogged, setIsLogged, setGeojsonList }) => {
         currentGeoJson.title = form.title;
         currentGeoJson.countries = form.countries;
         currentGeoJson.distance = getDistance(currentGeoJson)
-        currentGeoJson.slug = `${currentGeoJson.date}-${toSlug(currentGeoJson.title)}.${currentGeoJson.countries.toString().replace(',','.')}`
-        await renameGpx(currentName, currentGeoJson.slug)
+        currentGeoJson.slug = `${currentGeoJson.date}-${toSlug(currentGeoJson.title)}`
+        const geoslug = `${currentGeoJson.slug}.${currentGeoJson.countries.toString().replace(',','.')}`
+        await renameGpx(currentName, geoslug)
         const saved = await uploadJson(currentGeoJson)
         if (saved.status === 201) {
           setMessage(`💾 ${saved.filename}`)

diff --git a/src/components/MainMap.jsx b/src/components/MainMap.jsx
@@ -39,7 +39,7 @@ const MainMap = ({geojsonList, tileName, handleClickPopup, currentGeoJson}) => {
             // use patch-package to update pigeon-maps 
             return { strokeWidth: "0", stroke: "black", r: '0', };
           }
-        if (geojson.color === "rainbow") {
+        if (geojson.features.length > 1) { // rainbow colours for multi paths geojson
           return {
             strokeWidth: "2",
             stroke: feature.properties.color,

diff --git a/src/helpers/gpxUtil.js b/src/helpers/gpxUtil.js
@@ -55,6 +55,7 @@ export const loadGeoJsonFromGpx = async (url) => {
 }
 
 export const uploadJson = async (geodata) => {
+  console.log("upload", geodata);
   const body = JSON.stringify(geodata)
   const response = await axios.post('https://alix.guillard.fr/data/velo/api/uploadjson.php', body, {
     headers: { 'Content-Type': 'application/json' }

diff --git a/src/helpers/strings.js b/src/helpers/strings.js
@@ -18,9 +18,4 @@ export const toSlug = (str) => {
     .replace(/-[-]+/g, "-");
 }
 
-export const calcColor = (length, val) => {
-    var minHue=240, maxHue=0;
-    var curPercent = (val)/(length);
-    return `hsl(${((curPercent*(maxHue-minHue))+minHue).parseInt()},100%,50%)`;
-}