priyatham
/
gcs-user-interface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added method in Stop Modal when user clicks yes

This commit is contained in:
chillwafflez 2024-04-14 05:25:14 -07:00
parent 95e667a3cc
commit b199c227da
3 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/stop-symbol.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 B

18
src/components/VehicleStatus/EmergencyStopModal.vue
View File

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

18
src/views/CamFocus.vue
View File

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