Fleet Manager

Co-Authored-By: mike8643 <98910897+mike8643@users.noreply.github.com>

selfdrive/frogpilot/fleetmanager/templates/nav_directions.html

@@ -0,0 +1,149 @@
+{% block main %}
+  <div id="destinationHeading" style="font-weight: bold;"></div>
+  <div id="jsonOutput" style="text-align: left;"></div>
+  <style>
+    /* Added CSS styles to display images and text on the same line */
+    #jsonOutput span {
+      display: flex;
+      align-items: center;
+    }
+
+    #jsonOutput img {
+      margin-right: 10px; /* Adjust the margin as needed */
+    }
+  </style>
+  <script>
+    let useMetricUnits = false;
+    let previousNavdirectionsUuid = null;
+    let previousCurrentStepUuid = null;
+    let jsonData = null;
+    let initNav = 0;
+
+    async function loadCurrentStep() {
+      try {
+        const response = await fetch('CurrentStep.json'); // Load CurrentStep.json
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch CurrentStep.json.');
+        }
+
+        const json = await response.json();
+        return json;
+      } catch (error) {
+        console.error('Error fetching or parsing CurrentStep.json:', error);
+        return null;
+      }
+    }
+
+    async function loadNavdirectionsData() {
+      try {
+        const response = await fetch('navdirections.json'); // Load navdirections.json
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch JSON file. Status: ${response.status}`);
+        }
+
+        const json = await response.json();
+
+        // Check if the UUIDs match
+        const match = json.uuid === previousCurrentStepUuid;
+
+        previousNavdirectionsUuid = json.uuid;
+        jsonData = json;
+        initNav = 1;
+        return jsonData;
+      } catch (error) {
+        console.error('Error fetching or parsing JSON data:', error);
+        return jsonData; // Return the existing data on error
+      }
+    }
+
+    async function fetchAndDisplayData() {
+      const currentStepData = await loadCurrentStep();
+
+      if (currentStepData !== null) {
+        // Set the initial value for `currentStep` based on `CurrentStep.json`
+        previousCurrentStepUuid = currentStepData.uuid;
+      }
+
+      if (currentStepData.uuid != previousNavdirectionsUuid) {
+        await loadNavdirectionsData();
+      }
+
+      if (initNav === 0) {
+        await loadNavdirectionsData();
+      }
+
+      // Check if jsonData is available and proceed
+      if (jsonData) {
+        // Access the data you need from the loaded JSON
+        const firstRoute = jsonData.routes[0];
+        const firstLeg = firstRoute.legs[0];
+        const steps = firstLeg.steps;
+        const destination = firstRoute.Destination;
+
+        // Determine whether to use metric or imperial units based on the 'Metric' key
+        useMetricUnits = firstRoute.Metric === true; // Removed `const` to update the global useMetricUnits
+
+        // Display the 'destination' value on the webpage
+        const destinationHeading = document.getElementById('destinationHeading');
+        destinationHeading.textContent = `Destination: ${destination}`;
+
+        // Display values from the steps
+        const jsonOutputDiv = document.getElementById('jsonOutput');
+        jsonOutputDiv.innerHTML = '';
+
+        for (let i = currentStepData.CurrentStep; i < steps.length - 1; i++) {
+          const step = steps[i];
+          const instruction0 = steps[i].maneuver.instruction;
+          const instruction = steps[i + 1].maneuver.instruction;
+          const maneuverType = steps[i + 1].maneuver.type;
+          const modifier = steps[i + 1].maneuver.modifier;
+          let distance = step.distance;
+
+          if (!useMetricUnits) {
+            // Convert distance to miles if using imperial units
+            distance = distance * 0.000621371;
+          } else {
+            distance = distance / 1000; // Convert meters to kilometers
+          }
+          const sanitizedManeuverType = maneuverType.replace(/\s+/g, '_');
+          const sanitizedModifier = modifier ? `_${modifier.replace(/\s+/g, '_')}` : '';
+          const filterStyle = !htmlElement.classList.contains('dark-mode') ? 'filter: invert(100%);' : '';
+          // Display the values on the webpage
+          if (i === 0) {
+            jsonOutputDiv.innerHTML += `
+            <hr>
+            <span>
+            <img src="/navigation/direction_depart.png" alt="${maneuverType} icon" width="25" height="25" style="${filterStyle}">
+            <p>${instruction0}</p>
+            </span>
+            <hr>
+            `;
+          }
+          jsonOutputDiv.innerHTML += `
+          <span>
+          <img src="/navigation/direction_${sanitizedManeuverType}${sanitizedModifier}.png" alt="${maneuverType} icon" width="25" height="25" style="${filterStyle}">
+          <p>In ${distance.toFixed(1)} ${useMetricUnits ? 'km' : 'miles'}: ${instruction}</p>
+          </span>
+          <hr>
+          `;
+        }
+      }
+    }
+
+    // Load `CurrentStep.json` initially
+    loadCurrentStep().then((currentStepData) => {
+      if (currentStepData !== null) {
+        // Set the initial value for `currentStep` based on `CurrentStep.json`
+        previousCurrentStepUuid = currentStepData.uuid;
+        loadNavdirectionsData();
+        // Fetch and display data initially
+        fetchAndDisplayData();
+      }
+    });
+
+    // Periodically fetch `CurrentStep.json` and display data every 5 seconds
+    setInterval(fetchAndDisplayData, 5000); // Adjust the interval as needed (in milliseconds)
+  </script>
+{% endblock %}