added preliminary emergency stop modal that pops up if user clicks on emergency stop button
This commit is contained in:
chillwafflez
parent
9d47cf4a06
commit
cc9c0db9bc
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -30,11 +30,6 @@
|
|||
padding-left: 6%;
|
||||
}
|
||||
|
||||
/* .vehicle-name-div {
|
||||
position: relative;
|
||||
font-size: 2.3em;
|
||||
} */
|
||||
|
||||
.vehicle-name-div {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue