added method in Stop Modal when user clicks yes

src/components/VehicleStatus/EmergencyStopModal.vue

@@ -3,6 +3,7 @@
     <div class="modal-backdrop" @click="closeFromOutside">
       <div class="modal">
         <header class="modal-header">
+          <img src="../../assets/stop-symbol.png" class="stop-icon"></img> 
           <slot name="header">
             Emergency Stop
           </slot>
@@ -17,7 +18,7 @@
   
         <footer class="modal-footer">
           <button type="button" class="modal-button no-button" @click="close"> No </button>
-          <button type="button" class="modal-button yes-button" @click="close"> Yes </button>
+          <button type="button" class="modal-button yes-button" @click="sendStopCommand"> Yes </button>
         </footer>
       </div>
     </div>
@@ -33,6 +34,10 @@
             vehicleName: { required: true, type: String},
         },
         methods: {
+            sendStopCommand() {
+              console.log("Pressed yes to send stop command for " + this.vehicleName);
+              this.close();
+            },
             close() {
                 this.$emit('close');
             },
@@ -74,7 +79,9 @@
   .modal-header {
     position: relative;
     display: flex;
-    justify-content: space-between;
+    /* justify-content: space-between; */
+    gap: 2%;
+    /* padding: 15px; */
     padding: 15px;
 
     font-size: 1.2em;
@@ -157,7 +164,8 @@
     transform: translateY(-40px);
     transition: transform .3s ease;
   }
-  /* .modal-fade-enter-active .modal, 
-  .modal-fade-leave-active .modal {
-  } */
+
+  .stop-icon {
+    width: 5%;
+  }
 </style>    

src/views/CamFocus.vue

@@ -8,6 +8,7 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
 </script>
 
 <template>
+  <div class="cam-focus-screen-div">
     <div class="camera-container">
         <div class="camera-wrapper">
             <router-link to="/" class="back">Back</router-link>
@@ -15,11 +16,21 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
             <!-- Back button -->
         </div>
     </div>
+
+    <div class="vehicle-info-container"></div>
+</div>
 </template>
   
 <style scoped>
+.cam-focus-screen-div {
+    display:flex;
+    height: 90vh; 
+    width: 100%;
+}
+
 .camera-container {
-    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    /* height: 90vh;  */
+    height: 100%; 
     width: 75%;
     display: flex; /* Use flexbox to align items vertically */
     justify-content: center; /* Center the child element horizontally */
@@ -40,4 +51,9 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
     color: black;
     cursor: pointer;
   }
+  .vehicle-info-container {
+    height: 100%; 
+    width: 25%;
+    /* background-color: pink; */
+}
 </style>