-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (177 loc) · 6.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Train Delivery System</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Vis.js CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="mb-2">Train Mail Delivery</h1>
<video width="400" height="340" controls>
<source src="./train demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="stationInput">Station:</label>
<div class="input-group">
<input type="text" class="form-control" id="stationInput" placeholder="Enter station (e.g., A)">
<div class="input-group-append">
<button type="button" class="btn btn-primary btn-sm" id="addStationBtn">Add Station</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="edgeInput">Edge:</label>
<div class="input-group">
<input type="text" class="form-control" id="edgeInput" placeholder="Enter edge (e.g., E1,A,B,30)">
<div class="input-group-append">
<button type="button" class="btn btn-primary btn-sm" id="addEdgeBtn">Add Edge</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="deliveryInput">Delivery:</label>
<div class="input-group">
<input type="text" class="form-control" id="deliveryInput" placeholder="Enter delivery (e.g., K1,5,A,C)">
<div class="input-group-append">
<button type="button" class="btn btn-primary btn-sm" id="addDeliveryBtn">Add Delivery</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="trainInput">Train:</label>
<div class="input-group">
<input type="text" class="form-control" id="trainInput" placeholder="Enter train (e.g., Q1,6,B)">
<div class="input-group-append">
<button type="button" class="btn btn-primary btn-sm" id="addTrainBtn">Add Train</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<h2>Selected Options:</h2>
<div id="selectedOptions"></div>
<button type="submit" class="btn btn-primary mt-3" id="submitBtn">Run System</button>
<div id="output" class="mt-4"></div>
<div id="graphCanvas"></div>
</div>
<!-- Bootstrap JS and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Vis.js CDN -->
<script src="./train-mail-delivery-system.js"></script>
<script>
$(document).ready(function() {
// Array to store selected options
let selectedStations = [];
let selectedEdges = [];
let selectedDeliveries = [];
let selectedTrains = [];
// Function to add option to selected array and display it
function addOption(input, selectedArray) {
const value = $(input).val().trim();
let formatRegex;
let example;
// Determine format regex and example based on input type
if (input === "#stationInput") {
formatRegex = /^[A-Z]$/;
example = "A";
} else if (input === "#edgeInput") {
formatRegex = /^E\d+,[A-Z],[A-Z],\d+$/;
example = "E1,A,B,30";
} else if (input === "#deliveryInput") {
formatRegex = /^K\d+,\d+,[A-Z],[A-Z]$/;
example = "K1,5,A,C";
} else if (input === "#trainInput") {
formatRegex = /^Q\d+,\d+,[A-Z]$/;
example = "Q1,6,B";
}
// Check if value is valid format
if (value !== "" && formatRegex.test(value)) {
// Check if value is a duplicate
if (selectedArray.includes(value)) {
alert("Duplicate value. Please enter a unique value.");
} else {
selectedArray.push(value);
displaySelectedOptions();
// Clear input field
$(input).val("");
}
} else {
alert("Invalid format. Please enter a valid value. Example format: " + example);
}
}
// Function to display selected options
function displaySelectedOptions() {
let selectedHtml = "<ul>";
selectedHtml += "<li><strong>Stations:</strong> " + selectedStations.join(", ") + "</li>";
selectedHtml += "<li><strong>Edges:</strong> " + selectedEdges.join(", ") + "</li>";
selectedHtml += "<li><strong>Deliveries:</strong> " + selectedDeliveries.join(", ") + "</li>";
selectedHtml += "<li><strong>Trains:</strong> " + selectedTrains.join(", ") + "</li>";
selectedHtml += "</ul>";
$("#selectedOptions").html(selectedHtml);
}
// Event handler for adding station
$("#addStationBtn").click(function() {
addOption("#stationInput", selectedStations);
});
// Event handler for adding edge
$("#addEdgeBtn").click(function() {
addOption("#edgeInput", selectedEdges);
});
// Event handler for adding delivery
$("#addDeliveryBtn").click(function() {
addOption("#deliveryInput", selectedDeliveries);
});
// Event handler for adding train
$("#addTrainBtn").click(function() {
addOption("#trainInput", selectedTrains);
});
// Event handler for form submission
$("#submitBtn").click(function() {
const input = {
"stations": selectedStations,
"edges": selectedEdges,
"deliveries": selectedDeliveries,
"trains": selectedTrains
};
console.log(input);
const system = new TrainMailDeliverySystem(input);
const output = system.run();
console.log(output);
const movements = output.movements;
const time = output.time;
let moves = "";
movements.map(move => {
moves = moves + move +"</br>"
});
$("#output").html("<h2>System Output: ("+ time +") </h2><p>" + moves + "</p>");
});
});
</script>
</body>
</html>