From cc9c0db9bc0869912bd272d9f68ce32f5c1e404b Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Fri, 12 Apr 2024 04:26:20 -0700
Subject: [PATCH] added preliminary emergency stop modal that pops up if user
 clicks on emergency stop button

---
 .../VehicleStatus/EmergencyStop.vue           |  22 ++-
 .../VehicleStatus/EmergencyStopModal.vue      | 163 ++++++++++++++++++
 src/components/VehicleStatus/VehicleTitle.vue |   5 -
 src/components/VehicleStatusComponent.vue     |   2 +-
 4 files changed, 184 insertions(+), 8 deletions(-)
 create mode 100644 src/components/VehicleStatus/EmergencyStopModal.vue

diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
index 977f3c8..3f66e11 100644
--- a/src/components/VehicleStatus/EmergencyStop.vue
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@@ -1,15 +1,33 @@
 <template>
     <div class="emergency-stop-div">
-        <button class="emergency-button"> EMERGENCY STOP </button>
+        <button class="emergency-button" @click="showEmergencyModal"> EMERGENCY STOP </button>
+        <EmergencyStopModal :vehicle-name="vehicleName" v-show="showModal" @close="closeEmergencyModal"></EmergencyStopModal>
     </div>
     
 </template>
     
 <script lang="ts">
+    import EmergencyStopModal from './EmergencyStopModal.vue';
 
     export default {
+        components: {
+            EmergencyStopModal
+        },
         data() {
-            return {};    
+            return {
+                showModal: false
+            };    
+        },
+        props: {
+            vehicleName: { required: true, type: String},
+        },
+        methods: {
+            showEmergencyModal() {
+                this.showModal = true;
+            },
+            closeEmergencyModal() {
+                this.showModal = false;
+            }
         }
     };
 </script>
diff --git a/src/components/VehicleStatus/EmergencyStopModal.vue b/src/components/VehicleStatus/EmergencyStopModal.vue
new file mode 100644
index 0000000..3191c46
--- /dev/null
+++ b/src/components/VehicleStatus/EmergencyStopModal.vue
@@ -0,0 +1,163 @@
+<template>
+  <transition name="modal-fade">
+    <div class="modal-backdrop" @click="closeFromOutside">
+      <div class="modal">
+        <header class="modal-header">
+          <slot name="header">
+            Emergency Stop
+          </slot>
+          <button type="button" class="btn-close" @click="close">x</button>
+        </header>
+        
+        <section class="modal-body">
+          <slot name="body">
+            Send Stop Command to {{ vehicleName }}?
+          </slot>
+         </section>
+  
+        <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>
+        </footer>
+      </div>
+    </div>
+  </transition>
+</template>
+    
+<script lang="ts">
+    export default {
+        data() {
+            return {};    
+        },
+        props: {
+            vehicleName: { required: true, type: String},
+        },
+        methods: {
+            close() {
+                this.$emit('close');
+            },
+            closeFromOutside(event: MouseEvent) {
+                if (!this.$el.querySelector('.modal').contains(event.target)) {
+                    this.close();
+                }
+            }
+        }
+    };
+</script>
+    
+    
+<style scoped>
+  .modal-backdrop {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 999;
+  }
+
+  .modal {
+    background: #FFFFFF;
+    box-shadow: 2px 2px 20px 1px;
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+    height: 22%;
+    border-radius: 2%;
+  }
+
+  .modal-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: 15px;
+
+    font-size: 1.2em;
+    font-weight: 600;
+    border-bottom: 1px solid #d1cece;
+  }
+
+  .modal-body {
+    position: relative;
+    padding: 20px 10px;
+    font-size: 1.8em;
+    font-weight: bold;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20%;
+    padding-top: 5%;
+  }
+
+  .btn-close {
+    position: absolute;
+    top: 2%;
+    right: 2%;
+    border: none;
+    font-size: 20px;
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+    color: rgb(255, 57, 57);
+    background: transparent;
+    transition: color 0.20s;
+  }
+
+  .btn-close:hover {
+    color: rgb(163, 9, 9);
+  }
+
+  .modal-button {
+    display:flex;
+    justify-content: center;
+    color: white;
+    width: 15%;
+    border-radius: 10%;
+    transition: background-color 0.30s;
+    font-size: 1.2em;
+  }
+
+  .no-button {
+    background: rgb(255, 57, 57);
+    border: 1px solid rgb(177, 6, 6);
+  }
+  .no-button:hover {
+    background-color: rgb(192, 40, 40);
+  }
+
+  .yes-button {
+    background: #03b900;    
+    border: 1px solid #059402;
+  }
+  .yes-button:hover {
+    background-color: #027500;
+  }
+  
+/* fade in/out transitions for the modal + modal overlay (screen dimming)*/
+  .modal-fade-enter-from,
+  .modal-fade-leave-to {
+    opacity: 0;
+  }
+  .modal-fade-enter-active, 
+  .modal-fade-leave-active {
+    transition: opacity .3s ease;
+  }
+
+/* slide transitions for modal window */
+  .modal-fade-enter-from .modal,
+  .modal-fade-leave-to .modal {
+    transform: translateY(-40px);
+    transition: transform .3s ease;
+  }
+  /* .modal-fade-enter-active .modal, 
+  .modal-fade-leave-active .modal {
+  } */
+</style>    
\ No newline at end of file
diff --git a/src/components/VehicleStatus/VehicleTitle.vue b/src/components/VehicleStatus/VehicleTitle.vue
index 3b67670..670fee3 100644
--- a/src/components/VehicleStatus/VehicleTitle.vue
+++ b/src/components/VehicleStatus/VehicleTitle.vue
@@ -30,11 +30,6 @@
         padding-left: 6%;
     }
 
-    /* .vehicle-name-div {
-        position: relative;
-        font-size: 2.3em;
-    } */
-
     .vehicle-name-div {
         position: relative;
         display: flex;
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index 4c2174c..c594b59 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -48,7 +48,7 @@
         <div class="right-container">
             <Open class="adjust-open-button"></Open>
             <Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
-            <EmergencyStop class="adjust-emergency-button"/>
+            <EmergencyStop :vehicleName="vehicleName" class="adjust-emergency-button"/>
         </div>
     </div>
 </template>