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

Improved UI a bit.

This commit is contained in:
Andrew Lalis 2021-11-25 11:58:09 +01:00
parent fd2cf357dd
commit e7274cb6d0
2 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/main/resources/static/js/main.js
View File

@ -145,8 +145,8 @@ function railSystemChanged() {
}); });
} }
// Updates the current rail system's information from the API.
function railSystemUpdated() { function railSystemUpdated() {
console.log("Refreshing...");
$.get("/api/railSystems/" + railSystem.id + "/signals") $.get("/api/railSystems/" + railSystem.id + "/signals")
.done(signals => { .done(signals => {
railSystem.signals = signals; railSystem.signals = signals;
@ -280,11 +280,12 @@ function addNewSignal() {
data: JSON.stringify(data), data: JSON.stringify(data),
contentType: "application/json" contentType: "application/json"
}) })
.done((response) => { .done(() => {
form.trigger("reset"); form.trigger("reset");
railSystemChanged(); railSystemUpdated();
}) })
.fail((response) => { .fail((response) => {
console.error(response);
$('#addSignalAlertsContainer').append($('<div class="alert alert-danger">An error occurred.</div>')); $('#addSignalAlertsContainer').append($('<div class="alert alert-danger">An error occurred.</div>'));
modal.show(); modal.show();
}); });
@ -295,6 +296,22 @@ function addNewSignal() {
}); });
} }
function removeSignal(signalId) {
confirm(`Are you sure you want to remove signal ${signalId}? This cannot be undone.`)
.then(() => {
$.ajax({
url: `/api/railSystems/${railSystem.id}/signals/${signalId}`,
type: "DELETE"
})
.always(() => {
railSystemUpdated();
})
.fail((response) => {
console.error(response);
})
})
}
function removeReachableConnection(signalId, fromId, toId) { function removeReachableConnection(signalId, fromId, toId) {
confirm(`Are you sure you want to remove the connection from ${fromId} to ${toId} from signal ${signalId}?`) confirm(`Are you sure you want to remove the connection from ${fromId} to ${toId} from signal ${signalId}?`)
.then(() => { .then(() => {
@ -312,8 +329,8 @@ function removeReachableConnection(signalId, fromId, toId) {
data: JSON.stringify({connections: connections}), data: JSON.stringify({connections: connections}),
contentType: "application/json" contentType: "application/json"
}) })
.done((response) => { .done(() => {
railSystemChanged(); railSystemUpdated();
}) })
.fail((response) => { .fail((response) => {
console.error(response); console.error(response);
@ -348,7 +365,7 @@ function addReachableConnection(signalId, fromId, toId) {
data: JSON.stringify({connections: connections}), data: JSON.stringify({connections: connections}),
contentType: "application/json" contentType: "application/json"
}) })
.done((response) => { .done(() => {
railSystemChanged(); railSystemChanged();
}) })
.fail((response) => { .fail((response) => {

55
src/main/resources/templates/index.html
View File

@ -34,6 +34,12 @@
</div> </div>
</div> </div>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSignalModal">Add Signal</button>
</div>
</div>
<hr class="my-4"/> <hr class="my-4"/>
<div class="row"> <div class="row">
@ -43,14 +49,6 @@
<div id="railMapDetailPanel" class="col p-2 border"> <div id="railMapDetailPanel" class="col p-2 border">
</div> </div>
</div> </div>
<hr class="my-4"/>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSignalModal">Add Signal</button>
</div>
</div>
</div> </div>
<div> <div>
@ -69,25 +67,23 @@
<hr> <hr>
{{#each branchConnections}} {{#each branchConnections}}
<h5>{{this.direction}} <small class="text-muted">{{this.id}}</small></h5> <h5>{{this.direction}} <small class="text-muted">ID: {{this.id}}</small></h5>
<dl class="row"> <p>
<dt class="col-sm-3">Branch</dt> On branch <span class="badge bg-dark">{{this.branch.name}} <small class="text-muted">ID: {{this.branch.id}}</small></span>
<dd class="col-sm-9">{{this.branch.name}} <small class="text-muted">{{this.branch.id}}</small></dd> </p>
<dt class="col-sm-3">Reachable Signals</dt> <h6>Connected to Signals:</h6>
<dd class="col-sm-9"> <ul class="list-unstyled">
{{#each this.reachableSignalConnections}} {{#each this.reachableSignalConnections}}
<p> <li>
<a onclick="selectSignalById({{this.signalId}})" href="#">{{this.signalName}}</a> <a onclick="selectSignalById({{this.signalId}})" href="#">{{this.signalName}}</a>
<small class="text-muted">{{this.signalId}}</small> via via {{this.direction}} <small class="text-muted">ID: {{this.connectionId}}</small>
{{this.direction}} connection {{this.connectionId}} <span
<span class="btn btn-sm btn-secondary js_removeSignalConnection"
class="btn btn-sm btn-danger js_removeSignalConnection" onclick="removeReachableConnection({{../../id}}, {{../id}}, {{this.connectionId}})"
onclick="removeReachableConnection({{../../id}}, {{../id}}, {{this.connectionId}})" >Remove</span>
>Remove</span> </li>
</p> {{/each}}
{{/each}} </ul>
</dd>
</dl>
<div class="row" id="signalPotentialConnectionsRow-{{this.id}}"> <div class="row" id="signalPotentialConnectionsRow-{{this.id}}">
<div class="col-auto"> <div class="col-auto">
<select id="signalPotentialConnectionsSelect-{{this.id}}" class="form-select form-select-sm"> <select id="signalPotentialConnectionsSelect-{{this.id}}" class="form-select form-select-sm">
@ -101,6 +97,11 @@
</div> </div>
</div> </div>
{{/each}} {{/each}}
<div class="row">
<div class="col">
<button type="button" class="btn btn-secondary" onclick="removeSignal({{id}})">Remove this Signal</button>
</div>
</div>
</script> </script>
<div class="modal fade" tabindex="-1" id="confirmModal" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false"> <div class="modal fade" tabindex="-1" id="confirmModal" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">