From 294ffead44b9df8f6850130ef0ae62d8837eb6e9 Mon Sep 17 00:00:00 2001
From: Justin Nguyen <ju5t1n.nguy3n284@gmail.com>
Date: Tue, 19 Mar 2024 01:43:54 -0700
Subject: [PATCH] added Open button for Vehicle Status widget. Adjusted sizing
 of other components in Status widget

---
 .../VehicleStatus/EmergencyStop.vue           | 64 +++++++------------
 src/components/VehicleStatus/Open.vue         | 50 +++++++++++++++
 src/components/VehicleStatus/VehicleTitle.vue | 19 ++++--
 src/components/VehicleStatusComponent.vue     | 31 ++++++---
 4 files changed, 109 insertions(+), 55 deletions(-)
 create mode 100644 src/components/VehicleStatus/Open.vue

diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
index 5947a9d..639905e 100644
--- a/src/components/VehicleStatus/EmergencyStop.vue
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="outer_div">
-   
+    <div class="emergency-stop-div">
+        <button class="emergency-button"> EMERGENCY STOP </button>
     </div>
     
-    </template>
+</template>
     
 <script lang="ts">
 
@@ -11,53 +11,33 @@
         data() {
             return {};    
         },
-        props: {
-            latency: { required: true, type: Number},
-        },
-        computed: {
-        }
+        // props: {
+        // },
+        // computed: {
+        // }
     };
 </script>
     
     
 <style scoped>
-    .outer_div {
-        display: flex;
+    .emergency-stop-div {
         position: relative;
-        height: 25%;
-        width: 10%;  
+        display: flex;
+        height: 20%;
+        width: 70%;  
+        text-align: center;
     }
-    .connection-container {
+
+    .emergency-button {
         position: relative;
-        justify-content: center;
-        display: flex;
-        gap: 0.05em;
-        height: 100%;
+        display: inline-block;
         width: 100%;
-        border-radius: 12%;
-        /* background-color: white; */
+        height: 100%;
+        background-color: rgb(255, 57, 57);
+        font-size: 1em;
+    } 
+
+    .emergency-button:hover {
+        background-color: rgb(192, 40, 40);
     }
-    .bar {
-        width:100%;
-        background-color: white;
-        border: 0.1em solid black;
-        margin-top: auto;
-        border-radius: 20%;
-    }
-    .grayed_bar {
-        width:100%;
-        background-color: rgb(136, 135, 135);
-        border: 0.1em solid black;
-        margin-top: auto;
-        opacity: 0.2;
-        border-radius: 20%;
-    }
-    .connection_number {
-        position: absolute;
-        left: 110%;
-        bottom: 0%;
-        width: 180%;
-        font-size:0.8em;
-    }
-    
 </style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/Open.vue b/src/components/VehicleStatus/Open.vue
new file mode 100644
index 0000000..c04c32b
--- /dev/null
+++ b/src/components/VehicleStatus/Open.vue
@@ -0,0 +1,50 @@
+<template>
+    <!-- <div class="open-button-div">
+        <button class="open-button">OPEN</button>
+    </div> -->
+    <button class="test-open-button">OPEN</button>
+</template>
+    
+<script lang="ts">
+
+    export default {
+        data() {
+            return {};    
+        },
+        // props: {
+        // },
+        // computed: {
+        // }
+    };
+</script>
+    
+    
+<style scoped>
+    .open-button-div {
+        position: relative;
+        height: 25%;
+        width: 35%;  
+    }
+
+    .open-button {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: #011949;
+        font-size: 1.3em;
+    } 
+
+    .test-open-button {
+        position: relative;
+        display: inline-block;
+        width: 30%;
+        height: 20%;
+        background-color: #011949;
+        font-size: 1em;
+    } 
+
+    .test-open-button:hover {
+        background-color: #03369b;
+    }
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/VehicleTitle.vue b/src/components/VehicleStatus/VehicleTitle.vue
index 51733c5..ec9c7ab 100644
--- a/src/components/VehicleStatus/VehicleTitle.vue
+++ b/src/components/VehicleStatus/VehicleTitle.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="vehicle-title-container">
-        <div class="vehicle-name-div"> {{ vehicleName }}</div>
+        <div class="vehicle-name-div"> {{ vehicleName }} </div>
+
         <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
     </div>
     
@@ -11,7 +12,8 @@
     export default {
         props: {
             vehicleName: { required: true, type: String },
-            vehicleStatus: { required: true, type: String }
+            vehicleStatus: { required: true, type: String },
+            vehicleIcon: { type: Object }
         }
     };
 </script>
@@ -28,13 +30,20 @@
 
     .vehicle-name-div {
         position: relative;
-        font-size: 2.5em;
+        font-size: 2.3em;
     }
 
     .vehicle-status-div {
         position: relative;
-        font-size: 1.5em;  
-        margin-top: 5%;;
+        font-size: 1.6em;  
+        margin-top: 5%;
+    }
+
+    .vehicle-icon {
+        position: relative;
+        width: 12%;
+        height: 12%;
+        /* vertical-align: middle; */
     }
 
 </style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index 52dc902..98fed8c 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -2,6 +2,8 @@
     import Battery from './VehicleStatus/Battery.vue';
     import Connection from './VehicleStatus/Connection.vue';
     import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
+    import EmergencyStop from './VehicleStatus/EmergencyStop.vue';
+    import Open from './VehicleStatus/Open.vue';
 
     export default {
         props: {
@@ -12,7 +14,9 @@
         components: {
             VehicleTitle,
             Battery,
-            Connection
+            Connection,
+            EmergencyStop,
+            Open
         },
         // computed: {
         //     batteryPercentage(): number {
@@ -33,7 +37,8 @@
         </div>
 
         <div class="right-container">
-
+            <Open class="adjust-open-button"></Open>
+            <EmergencyStop class="adjust-emergency-button"/>
         </div>
     </div>
 </template>
@@ -70,19 +75,29 @@
     }
 
     .adjust-battery {
-        height: 19%;
-        width: 36%;
+        height: 17%;
+        width: 34.5%;
         margin-top: auto;
         margin-left: 8%;
     }
 
     .adjust-connection {
-        height: 30%;
-        width: 28%; 
-        margin-top: 1%;
+        height: 28%;
+        width: 26%; 
+        margin-top: 2%;
         margin-bottom: 4%;  
         margin-left: 10%; 
     }
- 
 
+    .adjust-emergency-button {
+        margin-top: auto;
+        margin-bottom: 4%;  
+        margin-left: 20%;
+    }
+
+    .adjust-open-button {
+        margin-top: 4%;
+        margin-left: 60%;
+    }
+ 
 </style> 
\ No newline at end of file