feat: ✨ added broken map for supporting multiple tracks (will likely get removed) and added colorless rendering for tracks in point cloud

web/src/views/vehicle.vue

@@ -4,6 +4,7 @@ import {defineComponent, Ref, ref, SetupContext} from 'vue';
 type vehicle = {
   id:number
   name:string
+  licenseplate: string
 }
 
 export default defineComponent({
@@ -11,7 +12,8 @@ export default defineComponent({
   setup(_, { emit }: SetupContext) {
 
     const vehicleName:Ref<string> = ref("")
-    const vehicleList:Ref<vehicle[]> = ref([{id:1,name:"Bike"}])
+    const licensePlate:Ref<string> = ref("")
+    const vehicleList:Ref<vehicle[]> = ref([])
 
     // handles getting all existing drivers
     const getVehicles = async () => {
@@ -31,7 +33,13 @@ export default defineComponent({
 
         // convert vehicles from json response to processable data
         for(let i = 0; i < jsonBody.length; i++) {
-          vehicleList.value.push({id: jsonBody[i]["id"], name: jsonBody[i]["name"]})
+          let plate = "N/A"
+          let vehicle = jsonBody[i]
+          if (vehicle["licensePlate"] != undefined) {
+            plate = vehicle["licensePlate"];
+          }
+
+          vehicleList.value.push({id: vehicle["id"], name: vehicle["name"], licenseplate: plate})
         }
       } else {
         console.log(await response.text())
@@ -45,7 +53,7 @@ export default defineComponent({
       headers.set('Content-Type', 'application/json')
       headers.set('Accept', 'application/json')
 
-      const requestBody = JSON.stringify({ name: vehicleName.value });
+      const requestBody = JSON.stringify({ name: vehicleName.value, licensePlate: licensePlate.value });
 
       const request: RequestInfo = new Request("http://localhost:5000/vehicle", {
         method:"POST", 
@@ -57,7 +65,7 @@ export default defineComponent({
       // make sure the request was successfull
       if (response.ok){
         var jsonBody = await response.json()
-        vehicleList.value.push({id: jsonBody["body"], name: vehicleName.value})
+        vehicleList.value.push({id: jsonBody["body"], name: vehicleName.value, licenseplate: "N/A"})
       } else {
         console.log(await response.text())
       }
@@ -67,6 +75,7 @@ export default defineComponent({
     return { 
       createVehicle,
       vehicleName,
+      licensePlate,
       vehicleList
     };
   },
@@ -89,12 +98,14 @@ export default defineComponent({
         <tr>
           <td></td>
           <td><input type="text" placeholder="Vehicle Name" class="input input-bordered w-full max-w-xs" v-model="vehicleName"/></td>
+          <td><input type="text" placeholder="License Plate" class="input input-bordered w-full max-w-xs" v-model="licensePlate"/></td>
           <td><a class="btn btn-success" v-on:click="createVehicle">Create Vehicle</a></td>
         </tr>
         <tr v-for="vehicle in vehicleList">
           <th>{{ vehicle.id }}</th>
           <td>{{ vehicle.name }}</td>
-          <td><a class="btn btn-warning">Open Editor</a></td>
+          <td>{{ vehicle.licenseplate }}</td>
+          <td></td>
         </tr>
       </tbody>
     </table>