aindreas/traintracker
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8 from 0hAodha/conor

Browse Source 
Add onclick display of train data
This commit is contained in:
Aindréas Ó hAodha
2023-02-05 15:23:34 +00:00
committed by GitHub
parent 1a8f46d892 b2513a4890
commit f89995967c
4 changed files with 120 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"axios": "^1.3.1",
"ol": "^7.2.2",
"vue": "^3.2.45",
"vue3-openlayers": "^0.1.71"
},
@ -676,6 +677,11 @@
"integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ==",
"optional": true
},
"node_modules/earcut": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
},
"node_modules/esbuild": {
"version": "0.16.17",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz",
@ -781,20 +787,19 @@
"dev": true
},
"node_modules/geotiff": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
"integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz",
"integrity": "sha512-FKvFTNowMU5K6lHYY2f83d4lS2rsCNdpUC28AX61x9ZzzqPNaWFElWv93xj0eJFaNyOYA63ic5OzJ88dHpoA5Q==",
"dependencies": {
"@petamoriken/float16": "^3.4.7",
"lerc": "^3.0.0",
"lru-cache": "^6.0.0",
"pako": "^2.0.4",
"parse-headers": "^2.0.2",
"quick-lru": "^6.1.1",
"web-worker": "^1.2.0",
"xml-utils": "^1.0.2"
},
"engines": {
"browsers": "defaults",
"node": ">=10.19"
}
},
@ -949,12 +954,13 @@
}
},
"node_modules/ol": {
"version": "6.15.1",
"resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
"integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
"version": "7.2.2",
"resolved": "https://registry.npmjs.org/ol/-/ol-7.2.2.tgz",
"integrity": "sha512-eqJ1hhVQQ3Ap4OhYq9DRu5pz9RMpLhmoTauDoIqpn7logVi1AJE+lXjEHrPrTSuZYjtFbMgqr07sxoLNR65nrw==",
"dependencies": {
"geotiff": "2.0.4",
"ol-mapbox-style": "^8.0.5",
"earcut": "^2.2.3",
"geotiff": "^2.0.7",
"ol-mapbox-style": "^9.2.0",
"pbf": "3.2.1",
"rbush": "^3.0.1"
},
@ -977,9 +983,9 @@
}
},
"node_modules/ol-mapbox-style": {
"version": "8.2.1",
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
"integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
"version": "9.5.0",
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.5.0.tgz",
"integrity": "sha512-ArYzeuZ4dOYZ6UnhXK30kNBdouZay/r6LzLsFGnvJ86lxY6ShJu2FtcKCFGCOZoJZYyoLCStHYOHcRrVLDaJ0Q==",
"dependencies": {
"@mapbox/mapbox-gl-style-spec": "^13.23.1",
"mapbox-to-css-font": "^2.4.1"
@ -1066,6 +1072,17 @@
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/quick-lru": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.1.tgz",
"integrity": "sha512-S27GBT+F0NTRiehtbrgaSE1idUAJ5bX8dPAQTdylEyNlrdcH5X4Lz7Edz3DYzecbsCluD5zO8ZNEe04z3D3u6Q==",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/quickselect": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
@ -1320,6 +1337,48 @@
"proj4": "^2.7.5"
}
},
"node_modules/vue3-openlayers/node_modules/geotiff": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
"integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
"dependencies": {
"@petamoriken/float16": "^3.4.7",
"lerc": "^3.0.0",
"lru-cache": "^6.0.0",
"pako": "^2.0.4",
"parse-headers": "^2.0.2",
"web-worker": "^1.2.0",
"xml-utils": "^1.0.2"
},
"engines": {
"browsers": "defaults",
"node": ">=10.19"
}
},
"node_modules/vue3-openlayers/node_modules/ol": {
"version": "6.15.1",
"resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
"integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
"dependencies": {
"geotiff": "2.0.4",
"ol-mapbox-style": "^8.0.5",
"pbf": "3.2.1",
"rbush": "^3.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/openlayers"
}
},
"node_modules/vue3-openlayers/node_modules/ol-mapbox-style": {
"version": "8.2.1",
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
"integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
"dependencies": {
"@mapbox/mapbox-gl-style-spec": "^13.23.1",
"mapbox-to-css-font": "^2.4.1"
}
},
"node_modules/web-worker": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",

1
package.json
View File

@ -9,6 +9,7 @@
},
"dependencies": {
"axios": "^1.3.1",
"ol": "^7.2.2",
"vue": "^3.2.45",
"vue3-openlayers": "^0.1.71"
},

65
src/components/Map.vue
View File

@ -1,5 +1,14 @@
<template>
<h1>Test</h1>
<div v-if="this.display">
<h2>Train Code: {{ selectedDataMap["TrainCode"] }}</h2>
<p>Date: {{ selectedDataMap["TrainDate"] }}</p>
<p>Status: {{ selectedDataMap["TrainStatus"] }}</p>
<p>Longitude: {{ selectedDataMap["TrainLongitude"] }}</p>
<p>Longitude: {{ selectedDataMap["TrainLatitude"] }}</p>
<p>Direction: {{ selectedDataMap["Direction"] }}</p>
<p>Public Message: {{ selectedDataMap["PublicMessage"] }}</p>
</div>
<button @click="getLiveTrainData">Show</button>
<button @click="postLiveTrainData">Populate Database</button>
@ -10,20 +19,12 @@
<ol-source-osm />
</ol-tile-layer>
<template v-for="coordinate in this.coordinates">
<ol-vector-layer>
<ol-source-vector>
<ol-feature>
<ol-geom-point :coordinates="coordinate"></ol-geom-point>
<ol-style>
<ol-style-circle :radius="radius">
<ol-style-fill :color="fillColor"></ol-style-fill>
<ol-style-stroke :color="strokeColor" :width="strokeWidth"></ol-style-stroke>
</ol-style-circle>
</ol-style>
</ol-feature>
</ol-source-vector>
</ol-vector-layer>
<template v-for="coordinate, i in coordinates">
<ol-overlay :position="coordinate">
<template v-slot="slotProps">
<div class="overlay-content" @click="getSelectedTrain(i)">{{ i }}</div>
</template>
</ol-overlay>
</template>
</ol-map>
@ -35,7 +36,8 @@ import {fromLonLat, toLonLat} from 'ol/proj.js';
import axios from 'axios';
export default {
name: "Map",
name: "MapsOverlay",
data() {
const center = ref(fromLonLat([-7.5029786, 53.4494762]))
const projection = ref('EPSG:3857')
@ -55,10 +57,11 @@ export default {
strokeWidth,
strokeColor,
fillColor,
coordinates: [],
dbLiveTrainData: [],
allDataMap: {}
allDataMap: {},
selectedDataMap: {},
display: false,
}
},
@ -69,16 +72,29 @@ export default {
.then((response) => {
this.dbLiveTrainData = response.data;
// create a Hashmap with the key-values as {TrainCode: JSON}
// create an array of coordinates and hashmap with the key-values {index: JSON obj}
for(var i=0; i<this.dbLiveTrainData.data.length; i++) {
this.allDataMap[this.dbLiveTrainData.data[i]["TrainCode"][0]] = this.dbLiveTrainData.data[i];
this.coordinates[i] = ref(fromLonLat([this.dbLiveTrainData.data[i]["TrainLongitude"][0], this.dbLiveTrainData.data[i]["TrainLatitude"][0]]))
this.allDataMap[i] = this.dbLiveTrainData.data[i];
}
})
.catch((error) => {
console.log(error)
})
},
// assign a single train's data to the selected hashmap
getSelectedTrain(i) {
this.display = true;
this.selectedDataMap["TrainCode"] = this.allDataMap[i]["TrainCode"][0];
this.selectedDataMap["TrainDate"] = this.allDataMap[i]["TrainDate"][0];
this.selectedDataMap["TrainStatus"] = this.allDataMap[i]["TrainStatus"][0];
this.selectedDataMap["TrainLongitude"] = this.allDataMap[i]["TrainLongitude"][0];
this.selectedDataMap["TrainLatitude"] = this.allDataMap[i]["TrainLatitude"][0];
this.selectedDataMap["Direction"] = this.allDataMap[i]["Direction"][0];
this.selectedDataMap["PublicMessage"] = this.allDataMap[i]["PublicMessage"][0];
},
// ---------------- TESTING ----------------
postLiveTrainData() {
axios.get('https://us-central1-concept-d5be1.cloudfunctions.net/postLiveTrainData')
@ -93,3 +109,12 @@ export default {
}
}
</script>
<style scoped>
.overlay-content {
background: #efefef;
box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
padding: 10px 20px;
font-size: 16px;
}
</style>