Fleet Manager

Added functionality to view screen recordings, error logs, routes, and control Navigation settings via the "Fleet Manager" process.

Credit goes to mike8643!

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

selfdrive/frogpilot/fleetmanager/templates/about.html

@@ -0,0 +1,21 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    About
+{% endblock %}
+
+{% block main %}
+    <br>
+    <h1>About</h1>
+    <br>
+    <footer class="small text-center text-muted" style="word-wrap: break-word;">
+        Special thanks to:<br><br>
+        ntegan1<br>
+        royjr<br>
+        AlexandreSato<br>
+        actuallylemoncurd<br>
+        sunnyhaibin<br>
+        dragonpilot<br>
+        chatgpt<br>
+    </footer>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/addr.html

@@ -0,0 +1,11 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Navigation
+{% endblock %}
+
+{% block main %}
+{% with gmap_key=gmap_key, lon=lon, lat=lat, home=home, work=work, fav1=fav1, fav2=fav2, fav3=fav3 %}
+    {% include "addr_input.html" %}
+{% endwith %}
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/addr_input.html

@@ -0,0 +1,64 @@
+{% block main %}
+  <!-- Your form markup -->
+  <form name="searchForm" method="post">
+    <fieldset class="uk-fieldset">
+      <div class="uk-margin">
+        {% if home or work or fav1 or fav2 or fav3 %}
+        <select class="uk-select" name="fav_val">
+          <option value="favorites">Select Saved Destinations</option>
+          {% if home %} <option value="home">Home: {{home}}</option> {% endif %}
+          {% if work %} <option value="work">Work: {{work}}</option> {% endif %}
+          {% if fav1 %} <option value="fav1">Favorite 1: {{fav1}}</option> {% endif %}
+          {% if fav2 %} <option value="fav2">Favorite 2: {{fav2}}</option> {% endif %}
+          {% if fav3 %} <option value="fav3">Favorite 3: {{fav3}}</option> {% endif %}
+        </select>
+        {% endif %}
+        <input class="uk-input" type="text" name="addr_val" id="pac-input" placeholder="Search a place">
+        <input class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="submit" value="Search">
+      </div>
+    </fieldset>
+  </form>
+<!-- Include the Google Maps Places API script conditionally with JavaScript -->
+<script>
+  // attach gmap_key to variable
+  let gmap = "{{gmap_key}}";
+
+  // Check if gmap_key is defined
+  if (gmap && gmap !== "None") {
+    var script = document.createElement('script');
+    script.src = 'https://maps.googleapis.com/maps/api/js?key={{gmap_key}}&libraries=places&callback=initAutocomplete';
+    script.async = true;
+    script.defer = true;
+    document.head.appendChild(script);
+
+    // Define the callback function for place_changed
+    function onPlaceChanged() {
+      var place = autocomplete.getPlace();
+
+      // Check if the place has a formatted address
+      if (place.formatted_address) {
+        // Set the value of the input field to the formatted address
+        document.getElementById('pac-input').value = place.formatted_address;
+      }
+    }
+
+    // Define the autocomplete variable
+    var autocomplete;
+
+    // Define the initAutocomplete function with initial bounds
+    function initAutocomplete() {
+      var center = new google.maps.LatLng({{lat}}, {{lon}});
+      var bounds = new google.maps.Circle({ center: center, radius: 5000 }).getBounds();
+
+      autocomplete = new google.maps.places.Autocomplete(
+        document.getElementById('pac-input'),
+        {
+          bounds: bounds // Set initial bounds here
+        }
+      );
+
+      autocomplete.addListener('place_changed', onPlaceChanged);
+    }
+  }
+</script>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/amap_addr_input.html

@@ -0,0 +1,215 @@
+{% extends "layout.html" %}
+
+{% block title %}
+  amap_addr_input
+{% endblock %}
+{% block main %}
+      <!-- Head section moved into body -->
+      <meta charset="utf-8">
+      <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+      <title>输入提示后查询</title>
+      <!-- UIkit CSS -->
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/css/uikit.min.css" />
+      <!-- UIkit JS -->
+      <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit-icons.min.js"></script>
+  
+      <script type="text/javascript">
+        window._AMapSecurityConfig = {
+            securityJsCode:'{{amap_key_2}}',
+        }
+      </script>
+  
+      <style type="text/css">
+          body {
+              margin: 0;
+              height: 100%;
+              width: 100%;
+              position: absolute;
+          }
+  
+          #mapContainer {
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              width: 100%;
+              height: 400px;
+          }
+
+          #amap-container {
+              height: 400px; /* Adjust height as needed */
+          }
+  
+          .button-group {
+              position: absolute;
+              bottom: 20px;
+              right: 20px;
+              font-size: 12px;
+              padding: 10px;
+          }
+  
+          .button-group .button {
+              height: 28px;
+              line-height: 28px;
+              background-color: #0D9BF2;
+              color: #FFF;
+              border: 0;
+              outline: none;
+              padding-left: 5px;
+              padding-right: 5px;
+              border-radius: 3px;
+              margin-bottom: 4px;
+              cursor: pointer;
+          }
+  
+          .amap-info-content {
+              font-size: 12px;
+          }
+      </style>
+  
+      <script type="text/javascript"
+          src="https://webapi.amap.com/maps?v=1.4.2&key={{amap_key}}"></script>
+  
+      <!-- Rest of the HTML body content -->
+      <div class="uk-grid-match uk-grid-small uk-text-center" uk-grid>
+          <div class="uk-width-1-3@m">
+              <select id="save_type" class="uk-select">
+                  <option value="recent">最近</option>
+                  <option value="home">住家</option>
+                  <option value="work">工作</option>
+              </select>
+          </div>
+          <div class="uk-width-expand@m">
+              <input class="uk-input" type="text" id="keyword" name="keyword"
+                  placeholder="请输入关键字：(选定后搜索)" onfocus='this.value=""' />
+          </div>
+      </div>
+      <input type="hidden" id="longitude" />
+      <input type="hidden" id="latitude" />
+      <div style="height: 600px" id="container"></div>
+      <script type="text/javascript">
+          var windowsArr = [];
+var markers = [];
+var map = new AMap.Map("container", {
+  resizeEnable: true,
+  center: [{{lat}}, {{lon}}], //地图中心点
+  zoom: 13, //地图显示的缩放级别
+  keyboardEnable: false,
+});
+
+var infoWindow;
+function openInfo(name, addr, lng, lat) {
+  //构建信息窗体中显示的内容
+  var info = [];
+  info.push('<div class="uk-card uk-card-default uk-card-body">');
+  info.push('<a class="uk-card-badge uk-label" onClick="javascript:infoWindow.close()" uk-close></a>');
+  info.push("<h3 style=\"padding-top: 10px;\" class=\"uk-card-title\">" + name + "</h3>");
+  info.push("<p>" + addr + "</p>");
+  info.push('<div class="uk-card-footer">');
+  info.push('<form name="navForm" method="post">');
+  info.push('  <input type="hidden" name="lat" value="' + lat + '">');
+  info.push('  <input type="hidden" name="lon" value="' + lng + '">');
+  info.push('  <input type="hidden" name="save_type" value="' + document.getElementById("save_type").value + '">');
+  info.push('  <input type="hidden" name="name" value="' + name + '">');
+  info.push('  <input class="uk-button uk-button-primary" type="submit" value="导航" >');
+  info.push('</form>');
+  info.push('</div>');
+  info.push("</div>");
+
+  var pos = new AMap.LngLat(lng, lat)
+  infoWindow = new AMap.InfoWindow({
+    position: pos,
+    isCustom: true,
+    offset: new AMap.Pixel(0, -30),
+    content: info.join(""), //使用默认信息窗体框样式，显示信息内容
+  });
+
+  infoWindow.open(map, pos);
+}
+AMap.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function () {
+  var autoOptions = {
+    city: "全国", //城市，默认全国
+    input: "keyword", //使用联想输入的input的id
+  };
+  autocomplete = new AMap.Autocomplete(autoOptions);
+  var placeSearch = new AMap.PlaceSearch({
+    map: "",
+  });
+  AMap.event.addListener(autocomplete, "select", function (e) {
+    //TODO 针对选中的poi实现自己的功能
+    //重寫搜尋點及其提示資訊begin=====
+    placeSearch.setCity(e.poi.adcode);
+    if (e.poi && e.poi.location) {
+      map.setZoom(17);
+      map.setCenter(e.poi.location);
+    }
+    placeSearch.search(e.poi.name, check_dest); //關鍵字查詢查詢
+
+    function check_dest(status, result) {
+      if (status === "complete" && result.info === "OK") {
+        for (var h = 0; h < result.poiList.pois.length; h++) {
+          //返回搜尋列表迴圈繫結marker
+          var jy = result.poiList.pois[h]["location"]; //經緯度
+          var name = result.poiList.pois[h]["name"]; //地址
+          marker = new AMap.Marker({
+            //加點
+            map: map,
+            position: jy,
+          });
+          marker.extData = {
+            getLng: jy["lng"],
+            getLat: jy["lat"],
+            name: name,
+            address: result.poiList.pois[h]["address"],
+          }; //自定義想傳入的引數
+
+          marker.on("click", function (e) {
+            var hs = e.target.extData;
+            var content = openInfo(
+              hs["name"],
+              hs["address"],
+              hs["getLng"],
+              hs["getLat"]
+            );
+          });
+          markers.push(marker);
+        }
+      }
+    }
+    //重寫搜尋點及其提示資訊end=====
+  });
+});
+var clickEventListener = map.on('click', function(e)  {
+  map.remove(markers);
+  document.getElementById('longitude').value = e.lnglat.getLng();
+  document.getElementById('latitude').value = e.lnglat.getLat();
+  lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
+  var marker = new AMap.Marker({
+    //加點
+    map: map,
+    position: lnglatXY,
+  });
+  marker.extData = {
+    getLng: e.lnglat.getLng(),
+    getLat: e.lnglat.getLat(),
+  }; //自定義想傳入的引數
+
+  marker.on("click", function (e) {
+    var hs = e.target.extData;
+    var content = openInfo(
+      "",
+      "(" + hs["getLat"] + ", " + hs["getLng"] + ")",
+      hs["getLng"],
+      hs["getLat"]
+    );
+  });
+  markers.push(marker);
+  if (typeof(infoWindow) != "undefined") {
+    infoWindow.close();
+  }
+});
+
+      </script>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/amap_key_input.html

@@ -0,0 +1,20 @@
+{% extends "layout.html" %}
+
+{% block title %}
+  amap_key_input
+{% endblock %}
+
+{% block main %}
+<form name="setAmapTokenForm" method="post">
+    <fieldset class="uk-fieldset">
+        <legend class="uk-legend">请输入您的高德地图 API KEY</legend>
+        <div style="color: red">因系统升级，若于 2021/12/02 前申请 key 的人请重新申请新的「<b>key</b>」和「<b>安全密钥</b>」配对。</div>
+        <div class="uk-margin">
+            <input class="uk-input" type="text" name="amap_key_val" placeholder="KEY">
+            <input class="uk-input" type="text" name="amap_key_val_2" placeholder="安全密钥">
+            <input class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="submit" value="设置">
+        </div>
+    </fieldset>
+</form>
+
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/app_token_input.html

@@ -0,0 +1,19 @@
+{% extends "layout.html" %}
+
+{% block title %}
+  MapBox key input
+{% endblock %}
+
+{% block main %}
+<form name="setSkTokenForm" method="post">
+    <fieldset class="uk-fieldset">
+        <legend class="uk-legend">Set your Mapbox <b>Secret Token</b></legend>
+        <div style="padding: 5px; color: red; font-weight: bold;">{{msg}}</div>
+        <div class="uk-margin">
+            <input class="uk-input" type="text" name="sk_token_val" placeholder="sk.xxxxxxx...">
+            <input class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="submit" value="Set">
+        </div>
+    </fieldset>
+</form>
+
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/error.html

@@ -0,0 +1,11 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Error
+{% endblock %}
+
+{% block main %}
+    <br> Oops
+    <br><br><br><br>
+    {{ error | safe }}
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/error_log.html

@@ -0,0 +1,16 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Error Log
+{% endblock %}
+
+{% block main %}
+    <br>
+    <h1>Error Log of<br>{{ file_name }}</h1>
+    <br>
+{% endblock %}
+
+{% block unformated %}
+    <pre style="font-size: x-small; margin: 20px;">{{ file_content }}</pre>
+    <br><br>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/error_logs.html

@@ -0,0 +1,14 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Error Logs
+{% endblock %}
+
+{% block main %}
+    <br>
+    <h1>Error Logs</h1>
+    <br>
+    {% for row in rows %}
+        <a href="/error_logs/{{ row }}">{{ row }}</a><br>
+    {% endfor %}
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/footage.html

@@ -0,0 +1,28 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Dashcam Routes
+{% endblock %}
+
+{% block main %}
+    <br>
+    <h1>Dashcam Routes</h1>
+    <br>
+    <div class="row">
+        {% for row, gif in zipped %}
+        <div class="col-xs-6 col-sm-4 col-md-3">
+            <div class="card mb-4 shadow-sm" style="background-color: #212529; color: white;">
+                <img src="/previewgif/{{ gif }}" class="card-img-top" alt="GIF">
+                <div class="card-body">
+                    <p class="card-text">{{ row }}</p>
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div class="btn-group">
+                            <a href="/footage/{{ row }}" class="btn btn-sm btn-outline-secondary">View Footage</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/gmap_key_input.html

@@ -0,0 +1,18 @@
+{% extends "layout.html" %}
+
+{% block title %}
+  GMap key input
+{% endblock %}
+
+{% block main %}
+<form name="setGmapTokenForm" method="post">
+    <fieldset class="uk-fieldset">
+        <legend class="uk-legend">Set your Google Map API Key</legend>
+        <div class="uk-margin">
+            <input class="uk-input" type="text" name="gmap_key_val" placeholder="Google Map API KEY">
+            <input class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="submit" value="Submit">
+        </div>
+    </fieldset>
+</form>
+
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/index.html

@@ -0,0 +1,16 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Home
+{% endblock %}
+
+{% block main %}
+    <br>
+    <h1>Fleet Manager</h1>
+    <br>
+    <a href='/footage'>View Dashcam Footage</a><br>
+    <br><a href='/preserved'>Access Preserved Footage</a><br>
+    <br><a href='/screenrecords'>View Screen Recordings</a><br>
+    <br><a href='/error_logs'>Access Error Logs</a><br>
+    <br><a href='/about'>About Fleet Manager</a><br>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/layout.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en" id="htmlElement">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1, width=device-width">
+  <link href="/static/favicon.ico" rel="icon">
+  <!-- http://getbootstrap.com/docs/5.3/ -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+  <style>
+    .navbar-brand {
+      display: flex;
+      align-items: center;
+    }
+    .navbar-brand img {
+      width: 80px;
+      height: 80px;
+    }
+  </style>
+    <!-- UIkit CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/css/uikit.min.css" />
+
+    <!-- UIkit JS -->
+    <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit-icons.min.js"></script>
+
+  <style>
+  /* Dark mode styles */
+  #htmlElement.dark-mode,
+  #htmlElement.dark-mode input,
+  #htmlElement.dark-mode select,
+  #htmlElement.dark-mode body,
+  #htmlElement.dark-mode h1 {
+    background-color: #121212; /* Dark background color */
+    color: #ffffff; /* Light text color */
+  }
+  .nav-link {
+    display: inline-block;
+    padding: 0 15px;
+    text-align: center;
+  }
+</style>
+  <title>FrogPilot: {% block title %}{% endblock %}</title>
+</head>
+<body>
+  <nav class="navbar navbar-fixed-top navbar-expand-sm navbar-dark bg-dark">
+    <div class="container">
+      <a href="/" class="navbar-brand mb-0 h1">
+        <img class="d-inline-block align-top mr-2" src="/static/frog.png" /> FrogPilot </a>
+      <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" arial-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse ml-auto" id="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item active">
+            <a href="/footage" class="nav-link">Dashcam Routes</a>
+          </li>
+          <li class="nav-item active">
+            <a href="/screenrecords" class="nav-link">Screen Recordings</a>
+          </li>
+          <li class="nav-item active">
+            <a href="/error_logs" class="nav-link">Error Logs</a>
+          </li>
+          <li class="nav-item active">
+            <a href="/addr_input" class="nav-link">Navigation</a>
+          </li>
+          <li class="nav-item active">
+            <a href="/tools" class="nav-link">Tools</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <main class="container-fluid p-7 text-center"> {% block main %}{% endblock %} </main>
+  {% block unformated %}{% endblock %}
+
+  <button class="uk-button uk-button-default uk-margin-small-right" onclick="toggleDarkMode()">Toggle Dark Mode</button>
+
+  <script>
+    function setCookie(name, value, days) {
+      const date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
+    }
+    function getCookie(name) {
+      return document.cookie.split('; ')
+        .find(row => row.startsWith(name))
+        ?.split('=')[1] || null;
+    }
+    function toggleDarkMode() {
+      console.log('Toggle Dark Mode function called');
+      const htmlElement = document.documentElement;
+      htmlElement.classList.toggle('dark-mode');
+      setCookie('darkMode', htmlElement.classList.contains('dark-mode'), 365);
+    }
+    document.addEventListener('DOMContentLoaded', function () {
+      const htmlElement = document.documentElement;
+      htmlElement.classList.toggle('dark-mode', getCookie('darkMode') === 'true');
+    });
+  </script>
+
+</body>
+</html>

selfdrive/frogpilot/fleetmanager/templates/nav_confirmation.html

@@ -0,0 +1,28 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Nav Search Confirmation
+{% endblock %}
+
+{% block main %}
+<div><img src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-l+000({{lon}},{{lat}})/{{lon}},{{lat}},14/300x300?access_token={{token}}" /></div>
+<div style="padding: 5px; font-size: 10px;">{{addr}}</div>
+<form name="navForm" method="post">
+    <fieldset class="uk-fieldset">
+        <div class="uk-margin">
+          <input type="hidden" name="name" value="{{addr}}">
+          <input type="hidden" name="lat" value="{{lat}}">
+          <input type="hidden" name="lon" value="{{lon}}">
+          <select id="save_type" name="save_type" class="uk-select">
+            <option value="recent">Recent</option>
+            <option value="home">Set Home</option>
+            <option value="work">Set Work</option>
+            <option value="fav1">Set Favorite 1</option>
+            <option value="fav2">Set Favorite 2</option>
+            <option value="fav3">Set Favorite 3</option>
+          </select>
+          <input class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="submit" value="Start Navigation">
+        </div>
+    </fieldset>
+</form>
+{% endblock %}

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 %}

selfdrive/frogpilot/fleetmanager/templates/nonprime.html

@@ -0,0 +1,13 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Nav Driving Directions
+{% endblock %}
+
+{% block main %}
+{% with gmap_key=gmap_key, lon=lon, lat=lat, home=home, work=work, fav1=fav1, fav2=fav2, fav3=fav3 %}
+    {% include "addr_input.html" %}
+{% endwith %}
+
+{% include "nav_directions.html" %}
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/preserved.html

@@ -0,0 +1,30 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Preserved Routes
+{% endblock %}
+
+{% block main %}
+    <br>
+    <h1>Preserved Routes</h1>
+    <br>
+    <div class="row">
+        {% for route_path, gif_path, segment in zipped %}
+        <div class="col-xs-6 col-sm-4 col-md-3">
+            <div class="card mb-4 shadow-sm" style="background-color: #212529; color: white;">
+                <div class="gif-container">
+                    <img src="/previewgif/{{ gif_path }}" class="card-img-top static-gif" alt="GIF">
+                </div>
+                <div class="card-body">
+                    <p class="card-text">{{ segment }}</p>
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div class="btn-group">
+                            <a href="/footage/{{ route_path }}" class="btn btn-sm btn-outline-secondary">View Footage</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/prime.html

@@ -0,0 +1,9 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Driving Directions
+{% endblock %}
+
+{% block main %}
+{% include "nav_directions.html" %}
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/public_token_input.html

@@ -0,0 +1,19 @@
+{% extends "layout.html" %}
+
+{% block title %}
+  addr_input
+{% endblock %}
+
+{% block main %}
+<form name="setPkTokenForm" method="post">
+    <fieldset class="uk-fieldset">
+        <legend class="uk-legend">Set your Mapbox <b>Public Token</b></legend>
+        <div style="padding: 5px; color: red; font-weight: bold;">{{msg}}</div>
+        <div class="uk-margin">
+            <input class="uk-input" type="text" name="pk_token_val" placeholder="pk.xxxxxxx...">
+            <input class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="submit" value="Set">
+        </div>
+    </fieldset>
+</form>
+
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/route.html

@@ -0,0 +1,68 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Dashcam Segments
+{% endblock %}
+
+
+{% block main %}
+{% autoescape false %}
+    <br>
+    <h1>Dashcam Segments (one per minute)</h1>
+    <br>
+    <video id="video" width="320" height="240" controls autoplay="autoplay" style="background:black">
+    </video>
+    <br><br>
+    current segment: <span id="currentsegment"></span>
+    <br>
+    current view: <span id="currentview"></span>
+    <br>
+    <a download="{{ route }}-{{ query_type }}.mp4" href="/footage/full/{{ query_type }}/{{ route }}">download full route {{ query_type }}</a>
+    <br><br>
+    <a href="{{ route }}?{{ query_segment }},qcamera">qcamera</a> -
+    <a href="{{ route }}?{{ query_segment }},fcamera">fcamera</a> -
+    <a href="{{ route }}?{{ query_segment }},dcamera">dcamera</a> -
+    <a href="{{ route }}?{{ query_segment }},ecamera">ecamera</a>
+    <br><br>
+    {{ links }}
+    <script>
+    var video = document.getElementById('video');
+    var segments = [{{ segments  }}];
+    var q_segment = {{ query_segment }};
+    var q_index = 0;
+    for (var i = 0; i < segments.length; i++) {
+          var segment = segments[i];
+          var q_val = segment.split('--').slice(2).join('--');
+          if (parseInt(q_val) === q_segment) {
+            q_index = i;
+            break
+          }
+        }
+    var tracks = {
+      list: segments,
+      index: q_index,
+      next: function() {
+        if (this.index == this.list.length - 1) this.index = 0;
+        else {
+            this.index += 1;
+        }
+      },
+      play: function() {
+        return ( "{{ query_type }}/" + this.list[this.index] );
+      }
+    }
+    video.addEventListener('ended', function(e) {
+      tracks.next();
+      video.src = tracks.play();
+      document.getElementById("currentsegment").textContent=video.src.split("/")[5];
+      document.getElementById("currentview").textContent=video.src.split("/")[4];
+      video.load();
+      video.play();
+    });
+    video.src = tracks.play();
+    document.getElementById("currentsegment").textContent=video.src.split("/")[5];
+    document.getElementById("currentview").textContent=video.src.split("/")[4];
+    </script>
+{% endautoescape %}
+    <br><br>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/screenrecords.html

@@ -0,0 +1,31 @@
+{% extends "layout.html" %}
+
+{% block title %}
+    Screen Recordings
+{% endblock %}
+
+{% block main %}
+    <br>
+    <h1>Screen Recordings</h1>
+    <br>
+    <video id="video" width="320" height="240" controls autoplay="autoplay" style="background:black">
+    </video>
+    <br><br>
+    current view: <span id="mycurrentview"></span>
+    <br>
+    <a href="/screenrecords/download/{{ clip }}">download: {{ clip }}</a><br><br>
+    <script>
+    var video = document.getElementById("video");
+    var track = {
+        play: function() {
+        return ( "/screenrecords/play/pipe/" + '{{ clip }}' );
+        }
+    }
+    video.src = track.play();
+    document.getElementById("mycurrentview").textContent=video.src.split("/")[6];
+    </script>
+    {% for row in rows %}
+        <a href="/screenrecords/{{ row }}">{{ row }}</a><br>
+    {% endfor %}
+    <br><br>
+{% endblock %}

selfdrive/frogpilot/fleetmanager/templates/tools.html

@@ -0,0 +1,78 @@
+{% extends "layout.html" %}
+
+{% block title %}
+Tools
+{% endblock %}
+
+{% block main %}
+<style>
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+  .textarea-container {
+    width: 80%;
+    margin-top: 20px;
+  }
+  textarea {
+    width: 100%;
+    height: 200px;
+  }
+  button {
+    margin-top: 10px;
+  }
+</style>
+
+<div class="center">
+  <h1>Toggle Values</h1>
+  <div class="textarea-container">
+    <textarea id="toggleValuesBox" placeholder='Paste new values or retrieve current...'></textarea>
+    <button type="button" id="retrieveButton">Retrieve Toggle Values</button>
+    <button type="button" id="submitButton">Submit New Values</button>
+  </div>
+</div>
+
+<script>
+  const toggleValuesBox = document.getElementById('toggleValuesBox');
+  const retrieveButton = document.getElementById('retrieveButton');
+  const submitButton = document.getElementById('submitButton');
+
+  retrieveButton.addEventListener('click', function() {
+    fetch('/get_toggle_values')
+      .then(response => response.json())
+      .then(data => {
+        toggleValuesBox.value = JSON.stringify(data, null, 2);
+      })
+      .catch(error => console.error('Error fetching toggle values:', error));
+  });
+
+  submitButton.addEventListener('click', function() {
+    let inputData;
+    try {
+      inputData = JSON.parse(toggleValuesBox.value);
+    } catch (error) {
+      alert('Invalid JSON format');
+      console.error('Error parsing JSON input:', error);
+      return;
+    }
+
+    fetch('/store_toggle_values', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(inputData),
+    })
+    .then(response => response.json().then(data => ({ status: response.status, body: data })))
+    .then(result => {
+      if (result.status === 200) {
+        alert('Values stored successfully.');
+      } else {
+        alert('Error storing values: ' + result.body.error);
+      }
+    })
+    .catch(error => console.error('Error storing toggle values:', error));
+  });
+</script>
+{% endblock %}