andrew
/
RailSignalAPI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Switch dialog, and link token creation.

This commit is contained in:
Andrew Lalis 2022-05-24 00:32:40 +02:00
parent 2cc3c2259a
commit c0c036d223
9 changed files with 525 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quasar-app/src/api/linkTokens.js
View File

@ -30,7 +30,7 @@ export function getLinkTokens(rs) {
/**
* Creates a new link token.
* @param {RailSystem} rs
* @param {LinkToken} data
* @param {{label: String, componentIds: Number[]}} data
* @return {Promise<string>} A promise that resolves to the token that was created.
*/
export function createLinkToken(rs, data) {

1
quasar-app/src/components/RailSystemLink.vue
View File

@ -5,7 +5,6 @@
>
<q-item-section>
<q-item-label>{{railSystem.name}}</q-item-label>
<q-item-label caption>Id: {{railSystem.id}}</q-item-label>
</q-item-section>
</q-item>
</template>

338
quasar-app/src/components/rs/MapView.vue
View File

@ -16,19 +16,19 @@
</div>
<q-page-sticky position="bottom-right" :offset="[25, 25]">
<q-fab icon="add" direction="up" color="accent">
<q-fab-action @click="addSignalDialog = true">
<q-fab-action @click="addSignalData.toggle = true">
<q-icon><img src="~assets/icons/signal_icon.svg"/></q-icon>
<q-tooltip>Add Signal</q-tooltip>
</q-fab-action>
<q-fab-action @click="addSegmentBoundaryDialog = true">
<q-fab-action @click="addSegmentBoundaryData.toggle = true">
<q-icon><img src="~assets/icons/segment-boundary_icon.svg"/></q-icon>
<q-tooltip>Add Segment Boundary</q-tooltip>
</q-fab-action>
<q-fab-action @click="addSwitchDialog = true">
<q-fab-action @click="addSwitchData.toggle = true">
<q-icon><img src="~assets/icons/switch_icon.svg"/></q-icon>
<q-tooltip>Add Switch</q-tooltip>
</q-fab-action>
<q-fab-action @click="addLabelDialog = true">
<q-fab-action @click="addLabelData.toggle = true">
<q-icon><img src="~assets/icons/label_icon.svg"/></q-icon>
<q-tooltip>Add Label</q-tooltip>
</q-fab-action>
@ -36,42 +36,19 @@
</q-page-sticky>
<!-- Add Signal Dialog -->
<q-dialog v-model="addSignalDialog" style="min-width: 400px" @hide="resetAll">
<q-card>
<q-form @submit="onAddSignalSubmit" @reset="resetAll">
<q-card-section>
<div class="text-h6">Add Signal</div>
<add-component-dialog
v-model="addSignalData"
type="SIGNAL"
:rail-system="railSystem"
title="Add Signal"
success-message="Signal added."
>
<template #subtitle>
<p>
Add a signal to the rail system.
</p>
</q-card-section>
<q-card-section>
<q-input
label="Name"
type="text"
v-model="addComponentData.name"
/>
<div class="row">
<q-input
label="X"
type="number"
class="col-sm-4"
v-model="addComponentData.position.x"
/>
<q-input
label="Y"
type="number"
class="col-sm-4"
v-model="addComponentData.position.y"
/>
<q-input
label="Z"
type="number"
class="col-sm-4"
v-model="addComponentData.position.z"
/>
</div>
</q-card-section>
</template>
<template #default>
<q-card-section>
<q-select
v-model="addSignalData.segment"
@ -81,115 +58,114 @@
label="Segment"
/>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" type="reset" @click="addSignalDialog = false"/>
<q-btn flat label="Add Signal" type="submit"/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
</add-component-dialog>
<!-- Add Segment boundary -->
<q-dialog v-model="addSegmentBoundaryDialog" style="min-width: 400px" @hide="resetAll">
<q-card>
<q-form @submit="onAddSegmentBoundarySubmit" @reset="resetAll">
<q-card-section>
<div class="text-h6">Add Segment Boundary</div>
<add-component-dialog
title="Add Segment Boundary"
success-message="Segment boundary added."
:rail-system="railSystem"
type="SEGMENT_BOUNDARY"
v-model="addSegmentBoundaryData"
>
<template #subtitle>
<p>
Add a segment boundary to the rail system. A segment boundary is a
point where a train can cross between two segments, or "blocks" in
the system. For example, a train may move from a junction segment to
a main line. This boundary is a place where a detector component can
update the system as trains pass.
Add a segment boundary to the rail system.
</p>
</q-card-section>
<q-card-section>
<q-input
label="Name"
type="text"
v-model="addComponentData.name"
/>
<div class="row">
<q-input
label="X"
type="number"
class="col-sm-4"
v-model="addComponentData.position.x"
/>
<q-input
label="Y"
type="number"
class="col-sm-4"
v-model="addComponentData.position.y"
/>
<q-input
label="Z"
type="number"
class="col-sm-4"
v-model="addComponentData.position.z"
/>
</div>
</q-card-section>
</template>
<template #default>
<q-card-section>
<q-select
v-model="addSegmentBoundaryData.segments"
:options="railSystem.segments"
multiple
option-value="id"
option-label="name"
:option-value="segment => segment"
:option-label="segment => segment.name"
label="Segments"
/>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" type="reset" @click="addSegmentBoundaryDialog = false"/>
<q-btn flat label="Add Segment Boundary" type="submit"/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
</add-component-dialog>
<!-- Add Switch dialog -->
<q-dialog v-model="addSwitchDialog" @hide="resetAll"></q-dialog>
<add-component-dialog
title="Add Switch"
success-message="Switch added."
:rail-system="railSystem"
type="SWITCH"
v-model="addSwitchData"
>
<template #subtitle>
<p>
Add a switch to the rail system.
</p>
</template>
<template #default>
<q-card-section>
<div class="row">
<q-list>
<q-item
v-for="config in addSwitchData.possibleConfigurations"
:key="config.key"
>
<q-item-section>
<q-item-label>
<q-chip
v-for="node in config.nodes"
:key="node.id"
:label="node.name"
/>
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
<div class="row">
<div class="col-sm-6">
<q-select
v-model="addSwitchData.pathNode1"
:options="getEligibleSwitchNodes()"
:option-value="segment => segment"
:option-label="segment => segment.name"
label="First Path Node"
/>
</div>
<div class="col-sm-6">
<q-select
v-model="addSwitchData.pathNode2"
:options="getEligibleSwitchNodes()"
:option-value="segment => segment"
:option-label="segment => segment.name"
label="Second Path Node"
/>
</div>
</div>
<div class="row">
<q-btn label="Add Configuration" color="primary" @click="addSwitchConfiguration"/>
</div>
</q-card-section>
</template>
</add-component-dialog>
<!-- Add Label dialog -->
<q-dialog v-model="addLabelDialog" style="min-width: 400px" @hide="resetAll">
<q-card>
<q-form @submit="onAddLabelSubmit" @reset="resetAll">
<q-card-section>
<div class="text-h6">Add Label</div>
<add-component-dialog
title="Add Label"
success-message="Added label."
:rail-system="railSystem"
type="LABEL"
v-model="addLabelData"
>
<template #subtitle>
<p>
Add a label to the rail system as a piece of text on the map. Labels
are purely a visual component, and do not interact with the system
in any way, besides being a helpful point of reference for users.
</p>
</q-card-section>
<q-card-section>
<q-input
label="Name"
type="text"
v-model="addComponentData.name"
/>
<div class="row">
<q-input
label="X"
type="number"
class="col-sm-4"
v-model="addComponentData.position.x"
/>
<q-input
label="Y"
type="number"
class="col-sm-4"
v-model="addComponentData.position.y"
/>
<q-input
label="Z"
type="number"
class="col-sm-4"
v-model="addComponentData.position.z"
/>
</div>
</q-card-section>
</template>
<template #default>
<q-card-section>
<q-input
label="Label Text"
@ -197,13 +173,8 @@
v-model="addLabelData.text"
/>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" type="reset" @click="addLabelDialog = false"/>
<q-btn flat label="Add Label" type="submit"/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
</add-component-dialog>
</template>
<script>
@ -212,10 +183,11 @@ import { draw, initMap } from "src/render/mapRenderer";
import SelectedComponentView from "components/rs/SelectedComponentView.vue";
import { useQuasar } from "quasar";
import { createComponent } from "src/api/components";
import AddComponentDialog from "components/rs/add_component/AddComponentDialog.vue";
export default {
name: "MapView",
components: { SelectedComponentView },
components: { AddComponentDialog, SelectedComponentView },
setup() {
const quasar = useQuasar();
return {quasar};
@ -228,23 +200,39 @@ export default {
},
data() {
return {
addSignalDialog: false,
addSegmentBoundaryDialog: false,
addSwitchDialog: false,
addLabelDialog: false,
addComponentData: {
addSignalData: {
name: "",
position: {
x: 0, y: 0, z: 0
}
},
addSignalData: {
segment: null
segment: null,
toggle: false
},
addSegmentBoundaryData: {
segments: []
name: "",
position: {
x: 0, y: 0, z: 0
},
toggle: false,
segments: [],
connectedNodes: []
},
addSwitchData: {
name: "",
position: {
x: 0, y: 0, z: 0
},
toggle: false,
possibleConfigurations: [],
// Utility properties for the UI for adding configurations.
pathNode1: null,
pathNode2: null
},
addLabelData: {
position: {
x: 0, y: 0, z: 0
},
toggle: false,
text: ""
}
}
@ -264,49 +252,37 @@ export default {
}
},
methods: {
onAddSignalSubmit() {
const data = {...this.addComponentData, ...this.addSignalData};
data.type = "SIGNAL";
this.attemptCreateComponent(data, "Signal added.", () => this.addSignalDialog = false);
},
onAddSegmentBoundarySubmit() {
const data = {...this.addComponentData, ...this.addSegmentBoundaryData};
data.type = "SEGMENT_BOUNDARY";
this.attemptCreateComponent(data, "Segment boundary added.", () => this.addSegmentBoundaryDialog = false);
},
segmentBoundarySegmentsValid() {
const set = new Set(this.addSegmentBoundaryData.segments);
return set.size === 2 && set.size === this.addSegmentBoundaryData.segments.length;
},
onAddLabelSubmit() {
const data = {...this.addComponentData, ...this.addLabelData};
data.type = "LABEL";
this.attemptCreateComponent(data, "Label added.", () => this.addLabelDialog = false);
},
resetAll() {
this.addComponentData.name = "";
this.addComponentData.position.x = 0;
this.addComponentData.position.y = 0;
this.addComponentData.position.z = 0;
this.addSignalDialog.segment = null;
this.addSegmentBoundaryData.segments = [];
this.addLabelData.text = "";
},
attemptCreateComponent(data, successMessage, successHandler) {
createComponent(this.railSystem, data)
.then(() => {
this.quasar.notify({
color: "positive",
message: successMessage
getEligibleSwitchNodes() {
return this.railSystem.components.filter(component => {
return component.connectedNodes !== undefined && component.connectedNodes !== null;
});
successHandler();
},
addSwitchConfiguration() {
if (
this.addSwitchData.pathNode1 === null ||
this.addSwitchData.pathNode2 === null ||
this.addSwitchData.pathNode1.id === this.addSwitchData.pathNode2.id ||
this.addSwitchData.possibleConfigurations.some(config => {
// Check if there's already a configuration containing both of these nodes.
return config.nodes.every(node =>
node.id === this.addSwitchData.pathNode1.id ||
node.id === this.addSwitchData.pathNode2.id);
})
.catch(error => {
console.log(error);
) {
this.quasar.notify({
color: "negative",
message: "An error occurred: " + error.response.data.message
color: "warning",
message: "Invalid switch configuration."
});
return;
}
// All good!
this.addSwitchData.possibleConfigurations.push({
nodes: [
this.addSwitchData.pathNode1,
this.addSwitchData.pathNode2
],
// A unique key, just for the frontend to use. This is not used by the API.
key: this.addSwitchData.pathNode1.id + "_" + this.addSwitchData.pathNode2.id
});
}
}

14
quasar-app/src/components/rs/SelectedComponentView.vue
View File

@ -25,7 +25,7 @@
id="signalInfo"
label="Signal Information"
v-if="component.type === 'SIGNAL'"
content-inset-level="0.5"
:content-inset-level="0.5"
switch-toggle-side
expand-separator
>
@ -38,7 +38,7 @@
<q-expansion-item
label="Connected Nodes"
v-if="component.connectedNodes !== undefined && component.connectedNodes !== null"
content-inset-level="0.5"
:content-inset-level="0.5"
switch-toggle-side
expand-separator
class="q-gutter-md"
@ -63,7 +63,7 @@
<q-expansion-item
label="Connected Segments"
v-if="component.type === 'SEGMENT_BOUNDARY'"
content-inset-level="0.5"
:content-inset-level="0.5"
switch-toggle-side
expand-separator
>
@ -76,7 +76,7 @@
<q-expansion-item
label="Switch Information"
v-if="component.type === 'SWITCH'"
content-inset-level="0.5"
:content-inset-level="0.5"
switch-toggle-side
expand-separator
>
@ -86,14 +86,16 @@
:key="config.id"
>
<q-item-section>
<q-item-label class="q-gutter-md">
<q-btn
<q-item-label class="q-gutter-sm">
<q-chip
v-for="node in config.nodes"
:key="node.id"
dense
size="sm"
:label="node.name"
:color="component.activeConfiguration && component.activeConfiguration.id === config.id ? 'primary' : 'secondary'"
:text-color="'white'"
clickable
@click="select(node)"
/>
</q-item-label>

6
quasar-app/src/components/rs/SettingsView.vue
View File

@ -1,12 +1,6 @@
<template>
<q-list>
<q-expansion-item
expand-separator
label="Component Links"
caption="Link components to your system."
>
<link-tokens-view :rail-system="railSystem"/>
</q-expansion-item>
</q-list>
</template>

120
quasar-app/src/components/rs/add_component/AddComponentDialog.vue Normal file
View File

@ -0,0 +1,120 @@
<template>
<q-dialog v-model="componentData.toggle" style="min-width: 400px" @hide="onReset">
<q-card>
<q-form @submit="onSubmit" @reset="onReset" @change="onChange">
<q-card-section>
<div class="text-h6">{{title}}</div>
<slot name="subtitle"></slot>
</q-card-section>
<q-card-section>
<q-input
label="Name"
type="text"
v-model="componentData.name"
autofocus
/>
<div class="row">
<q-input
label="X"
type="number"
class="col-sm-4"
v-model="componentData.position.x"
/>
<q-input
label="Y"
type="number"
class="col-sm-4"
v-model="componentData.position.y"
/>
<q-input
label="Z"
type="number"
class="col-sm-4"
v-model="componentData.position.z"
/>
</div>
</q-card-section>
<slot :component-data="componentData"></slot>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" type="reset" @click="componentData.toggle = false"/>
<q-btn flat label="Add" type="submit"/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script>
import { createComponent } from "src/api/components";
import { useQuasar } from "quasar";
import { RailSystem } from "src/api/railSystems";
export default {
name: "AddComponentDialog",
props: {
modelValue: {
type: Object,
required: true
},
type: {
type: String,
required: true
},
railSystem: {
type: RailSystem,
required: true
},
title: {
type: String,
required: true
},
successMessage: {
type: String,
required: true
}
},
setup() {
const quasar = useQuasar();
return {quasar};
},
data() {
return {
componentData: this.modelValue
}
},
methods: {
onSubmit() {
const postData = {type: this.type, ...this.componentData};
createComponent(this.railSystem, postData)
.then(() => {
this.quasar.notify({
color: "positive",
message: this.successMessage
});
this.componentData.toggle = false;
})
.catch(error => {
console.log(error);
this.quasar.notify({
color: "negative",
message: "An error occurred: " + error.response.data.message
});
});
},
onReset() {
this.componentData.name = "";
this.componentData.position.x = 0;
this.componentData.position.y = 0;
this.componentData.position.z = 0;
this.$emit("reset");
},
onChange() {
this.$emit("update:modelValue", this.componentData);
}
}
};
</script>
<style scoped>
</style>

68
quasar-app/src/components/rs/add_component/AddSignalDialog.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<add-component-dialog
v-model="addSignalData"
type="SIGNAL"
:rail-system="railSystem"
title="Add Signal"
success-message="Signal added."
@reset="onReset"
>
<template #subtitle>
<p>
Add a signal to the rail system.
</p>
</template>
<template #default>
<q-card-section>
<q-select
v-model="addSignalData.segment"
:options="railSystem.segments"
option-value="id"
option-label="name"
label="Segment"
/>
</q-card-section>
</template>
</add-component-dialog>
</template>
<script>
import { RailSystem } from "src/api/railSystems";
import AddComponentDialog from "components/rs/add_component/AddComponentDialog.vue";
export default {
name: "AddSignalDialog",
components: {AddComponentDialog},
props: {
railSystem: {
type: RailSystem,
required: true
},
modelValue: {
type: Boolean,
required: true
}
},
data() {
return {
addSignalData: {
name: "",
position: {
x: 0, y: 0, z: 0
},
segment: null,
toggle: this.modelValue
}
}
},
methods: {
onReset() {
this.addSignalData.segment = null;
}
}
};
</script>
<style scoped>
</style>

132
quasar-app/src/components/rs/settings/LinkTokensView.vue
View File

@ -1,26 +1,98 @@
<template>
<q-expansion-item
expand-separator
label="Component Links"
caption="Link components to your system."
@before-show="refreshLinkTokens"
switch-toggle-side
:content-inset-level="0.5"
>
<q-list>
<q-item>
<q-item-section side>
<q-btn label="Add Link" color="positive" />
</q-item-section>
</q-item>
<q-item
v-for="token in linkTokens"
:key="token.id"
>
<q-item-section>
<q-item-label>{{token.name}}</q-item-label>
<q-item-label>{{token.label}}</q-item-label>
<q-item-label caption>{{token.id}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-item v-if="linkTokens.length === 0">
<q-item-section>
<q-item-label caption>There are no link tokens. Add one via the <em>Add Link</em> button below.</q-item-label>
</q-item-section>
</q-item>
<q-separator/>
<q-item>
<q-item-section side>
<q-btn label="Add Link" color="primary" @click="addTokenDialog = true" />
</q-item-section>
</q-item>
</q-list>
</q-expansion-item>
<q-dialog v-model="addTokenDialog" style="min-width: 400px;" @hide="onReset">
<q-card>
<q-form @submit="onSubmit" @reset="onReset">
<q-card-section>
<div class="text-h6">Add Link Token</div>
<p>
Create a new link token that gives external components access to
this rail system's live data streams. Use a link token to let signals
in your system get real-time updates, and to let segment boundaries
send real-time status updates as trains move.
</p>
<p>
You will be shown the link token <strong>only once</strong> when the
token is first created. If you lose it, you will need to delete the
token and create a new one.
</p>
</q-card-section>
<q-card-section>
<q-input
label="Label"
type="text"
v-model="addTokenData.label"
autofocus
/>
<q-select
label="Components"
multiple
v-model="addTokenData.selectedComponents"
:options="getEligibleComponents()"
:option-value="component => component.id"
:option-label="component => component.name"
use-chips
stack-label
/>
</q-card-section>
<q-card-section v-if="token">
<q-banner class="bg-primary text-white">
<p>
Link token created: <code class="text-bold">{{token}}</code>
</p>
<p>
Copy this token now; it won't be shown again.
</p>
</q-banner>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Close" type="reset" @click="addTokenDialog = false"/>
<q-btn flat label="Add" type="submit" v-if="!token"/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script>
import { RailSystem } from "src/api/railSystems";
import { getLinkTokens } from "src/api/linkTokens";
import { createLinkToken, getLinkTokens } from "src/api/linkTokens";
import { useQuasar } from "quasar";
export default {
name: "LinkTokensView",
@ -30,15 +102,53 @@ export default {
required: true
}
},
setup() {
const quasar = useQuasar();
return {quasar};
},
data() {
return {
linkTokens: [],
addTokenDialog: false
addTokenDialog: false,
addTokenData: {
label: "",
selectedComponents: [],
componentIds: []
},
token: null
};
},
mounted() {
methods: {
refreshLinkTokens() {
getLinkTokens(this.railSystem)
.then(tokens => this.linkTokens = tokens);
.then(tokens => {
this.linkTokens = tokens;
});
},
getEligibleComponents() {
return this.railSystem.components.filter(component => {
return component.type === "SIGNAL" || component.type === "SEGMENT_BOUNDARY" || component.type === "SWITCH";
});
},
onSubmit() {
this.addTokenData.componentIds = this.addTokenData.selectedComponents.map(c => c.id);
createLinkToken(this.railSystem, this.addTokenData)
.then(token => {
this.token = token;
})
.catch(error => {
this.quasar.notify({
color: "negative",
message: "An error occurred: " + error.response.data.message
});
});
},
onReset() {
this.addTokenData.name = "";
this.addTokenData.selectedComponents.length = 0;
this.addTokenData.componentIds.length = 0;
this.token = null;
}
}
};
</script>

4
quasar-app/src/pages/RailSystem.vue
View File

@ -40,7 +40,9 @@ export default {
data() {
return {
panel: "map",
railSystem: null
railSystem: null,
linkTokens: []
}
},
async beforeRouteEnter(to, from, next) {