Request data on frontend with a loop
This commit is contained in:
@ -11,7 +11,7 @@
|
|||||||
<p class="card-text">Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
|
<p class="card-text">Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><p class="card-stats">Trains: {{ this.insights["numTrains"] }}</p></li>
|
<li><p class="card-stats">Trains: {{ this.insights["numTrains"] }}</p></li>
|
||||||
<li><p class="card-stats">Darts: {{ this.insights["numDarts"] }}</p></li>
|
<li><p class="card-stats">DARTs: {{ this.insights["numDarts"] }}</p></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -23,7 +23,7 @@
|
|||||||
<p class="card-text">Total number of stations: {{ this.insights["totalNumStations"] }}</p>
|
<p class="card-text">Total number of stations: {{ this.insights["totalNumStations"] }}</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><p class="card-stats">Trains: {{ this.insights["numTrainStations"] }}</p></li>
|
<li><p class="card-stats">Trains: {{ this.insights["numTrainStations"] }}</p></li>
|
||||||
<li><p class="card-stats">Darts: {{ this.insights["numDartStations"] }}</p></li>
|
<li><p class="card-stats">DARTs: {{ this.insights["numDartStations"] }}</p></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -81,9 +81,9 @@
|
|||||||
<dt style="color:red;">Red</dt>
|
<dt style="color:red;">Red</dt>
|
||||||
<dd>Late Train</dd>
|
<dd>Late Train</dd>
|
||||||
<dt style="color:green;">Green</dt>
|
<dt style="color:green;">Green</dt>
|
||||||
<dd>Early/On Time Train</dd>
|
<dd>Early/On-Time Train</dd>
|
||||||
<dt style="color:black;">Black</dt>
|
<dt style="color:black;">Black</dt>
|
||||||
<dd>Terminated/Not Yet Running Train</dd>
|
<dd>Terminated/Not-Yet Running Train</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -185,6 +185,7 @@ export default {
|
|||||||
publicMessages: [],
|
publicMessages: [],
|
||||||
isPaused: false,
|
isPaused: false,
|
||||||
readyToDisplayMap: false,
|
readyToDisplayMap: false,
|
||||||
|
isFirstGET: true,
|
||||||
store,
|
store,
|
||||||
|
|
||||||
searchinput: "",
|
searchinput: "",
|
||||||
@ -218,6 +219,7 @@ export default {
|
|||||||
|
|
||||||
created() {
|
created() {
|
||||||
this.readyToDisplayMap = false
|
this.readyToDisplayMap = false
|
||||||
|
this.isFirstGET = true
|
||||||
let host = window.location.hostname
|
let host = window.location.hostname
|
||||||
if (host === '127.0.0.1' || host === 'localhost') {
|
if (host === '127.0.0.1' || host === 'localhost') {
|
||||||
this.postTrainAndStationData();
|
this.postTrainAndStationData();
|
||||||
@ -226,7 +228,7 @@ export default {
|
|||||||
this.getTrainAndStationData();
|
this.getTrainAndStationData();
|
||||||
}
|
}
|
||||||
// request new data every 60 seconds
|
// request new data every 60 seconds
|
||||||
// window.setInterval(this.getTrainAndStationData, 60000);
|
window.setInterval(this.getTrainAndStationData, 60000);
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
@ -421,6 +423,9 @@ export default {
|
|||||||
"numTrainStations": 0,
|
"numTrainStations": 0,
|
||||||
"numDartStations": 0
|
"numDartStations": 0
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// fill showTrains with the default value - true
|
||||||
|
if (this.isFirstGET) this.showTrains = new Array(response.data.length).fill(true)
|
||||||
|
|
||||||
// create an array of coordinates and hashmap with the key-values {index: JSON obj}
|
// create an array of coordinates and hashmap with the key-values {index: JSON obj}
|
||||||
for (var i=0; i<response.data.length; i++) {
|
for (var i=0; i<response.data.length; i++) {
|
||||||
@ -429,8 +434,6 @@ export default {
|
|||||||
this.trainCoordinates[i] = fromLonLat([train["TrainLongitude"][0], train["TrainLatitude"][0]])
|
this.trainCoordinates[i] = fromLonLat([train["TrainLongitude"][0], train["TrainLatitude"][0]])
|
||||||
insights["totalNumTrains"] += 1
|
insights["totalNumTrains"] += 1
|
||||||
|
|
||||||
// fill showTrains with the default value - true
|
|
||||||
this.showTrains[i] = true;
|
|
||||||
if (train["TrainType"][0] == "Train") insights["numTrains"] += 1;
|
if (train["TrainType"][0] == "Train") insights["numTrains"] += 1;
|
||||||
else if (train["TrainType"][0] == "DART") insights["numDarts"] += 1;
|
else if (train["TrainType"][0] == "DART") insights["numDarts"] += 1;
|
||||||
|
|
||||||
@ -465,20 +468,22 @@ export default {
|
|||||||
getStationData().then((response) => {
|
getStationData().then((response) => {
|
||||||
if (!response.data) throw new Error("Error fetching station from the database");
|
if (!response.data) throw new Error("Error fetching station from the database");
|
||||||
|
|
||||||
|
// fill showStations with the default value - true
|
||||||
|
if (this.isFirstGET) this.showStations = new Array(response.data.length).fill(true)
|
||||||
|
|
||||||
for (var i=0; i<response.data.length; i++) {
|
for (var i=0; i<response.data.length; i++) {
|
||||||
let station = response.data[i];
|
let station = response.data[i];
|
||||||
this.allStations[i] = station;
|
this.allStations[i] = station;
|
||||||
this.stationCoordinates[i] = fromLonLat([station["StationLongitude"][0], station["StationLatitude"][0]])
|
this.stationCoordinates[i] = fromLonLat([station["StationLongitude"][0], station["StationLatitude"][0]])
|
||||||
insights["totalNumStations"] += 1
|
insights["totalNumStations"] += 1
|
||||||
|
|
||||||
// setting the station to show on the map by default - true
|
|
||||||
this.showStations[i] = true;
|
|
||||||
if (station["StationType"][0] == "DART") insights["numDartStations"] += 1;
|
if (station["StationType"][0] == "DART") insights["numDartStations"] += 1;
|
||||||
else if (station["StationType"][0] == "Train") insights["numTrainStations"] += 1;
|
else if (station["StationType"][0] == "Train") insights["numTrainStations"] += 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
store.setInsights(insights);
|
store.setInsights(insights);
|
||||||
// this.loader.hide()
|
this.isFirstGET = false
|
||||||
|
|
||||||
// request the user's preferences
|
// request the user's preferences
|
||||||
this.getPreferences()
|
this.getPreferences()
|
||||||
})
|
})
|
||||||
|
Reference in New Issue
Block a user