147 lines
4.1 KiB
Vue
147 lines
4.1 KiB
Vue
<template>
|
|
<div class="flex">
|
|
<div class="row full-width">
|
|
<div class="col-md-6">
|
|
<q-list>
|
|
<q-item
|
|
v-for="segment in railSystem.segments"
|
|
:key="segment.id"
|
|
clickable
|
|
v-ripple
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>{{segment.name}}</q-item-label>
|
|
<q-item-label caption>Id: {{segment.id}}</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-menu touch-position context-menu>
|
|
<q-list dense style="min-width: 100px">
|
|
<q-item clickable v-close-popup @click="remove(segment)">
|
|
<q-item-section>Delete</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col-md-6">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
|
<q-btn fab icon="add" color="accent" @click="openAddSegmentDialog"></q-btn>
|
|
</q-page-sticky>
|
|
<q-dialog v-model="showAddSegmentDialog" persistent>
|
|
<q-card style="min-width: 400px">
|
|
<q-form @submit="onSubmit" @reset="onReset">
|
|
<q-card-section>
|
|
<div class="text-h6">Add Segment</div>
|
|
<p>
|
|
Add a new segment to the rail system. A segment can be thought of as
|
|
the basic building block of any rail system, and segments define a
|
|
section of rails that trains can travel in and out of, usually one at
|
|
a time.
|
|
</p>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-input
|
|
v-model="segmentName"
|
|
autofocus
|
|
label="Segment Name"
|
|
:rules="[value => value && value.length > 0]"
|
|
lazy-rules
|
|
type="text"
|
|
/>
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="text-primary">
|
|
<q-btn flat label="Cancel" type="reset" @click="showAddSegmentDialog = false"/>
|
|
<q-btn flat label="Add Segment" type="submit"/>
|
|
</q-card-actions>
|
|
</q-form>
|
|
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { useRailSystemsStore } from "stores/railSystemsStore";
|
|
import { RailSystem } from "src/api/railSystems";
|
|
import { useQuasar } from "quasar";
|
|
import { createSegment, removeSegment } from "src/api/segments";
|
|
import { ref } from "vue";
|
|
|
|
export default {
|
|
name: "SegmentsView",
|
|
setup() {
|
|
const rsStore = useRailSystemsStore();
|
|
const quasar = useQuasar();
|
|
return {rsStore, quasar};
|
|
},
|
|
props: {
|
|
railSystem: {
|
|
type: RailSystem,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showAddSegmentDialog: false,
|
|
segmentName: ""
|
|
}
|
|
},
|
|
methods: {
|
|
openAddSegmentDialog() {
|
|
this.showAddSegmentDialog = true;
|
|
},
|
|
onSubmit() {
|
|
createSegment(this.railSystem, this.segmentName)
|
|
.then(() => {
|
|
this.quasar.notify({
|
|
color: "positive",
|
|
message: "Segment created."
|
|
});
|
|
this.onReset();
|
|
this.showAddSegmentDialog = false;
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
this.quasar.notify({
|
|
color: "negative",
|
|
message: "An error occurred: " + error.response.data.message
|
|
});
|
|
});
|
|
},
|
|
onReset() {
|
|
this.segmentName = "";
|
|
},
|
|
remove(segment) {
|
|
this.quasar.dialog({
|
|
title: "Confirm",
|
|
message: "Are you sure you want to remove this segment? This will remove any connected components, and it cannot be undone.",
|
|
cancel: true,
|
|
persistent: true
|
|
}).onOk(() => {
|
|
removeSegment(this.railSystem, segment.id)
|
|
.then(() => {
|
|
this.quasar.notify({
|
|
color: "positive",
|
|
message: "Segment " + segment.name + " has been removed."
|
|
});
|
|
})
|
|
.catch(error => {
|
|
this.quasar.notify({
|
|
color: "negative",
|
|
message: "An error occurred: " + error.response.data.message
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|