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

Add onclick display of train data

Browse Source
This commit is contained in:
Conor McNamara
2023-02-05 15:12:21 +00:00
parent 855e1a7f7d
commit b2513a4890
4 changed files with 120 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,2 +1,2 @@
# Running Build & Depoloying it to Firebase # Running Build & Depoloying it to Firebase
`npm run build && firebase deploy` `npm run build && firebase deploy`

85
package-lock.json generated
View File

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

1
package.json
View File

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

67
src/components/Map.vue
View File

@ -1,5 +1,14 @@
<template> <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="getLiveTrainData">Show</button>
<button @click="postLiveTrainData">Populate Database</button> <button @click="postLiveTrainData">Populate Database</button>
@ -10,20 +19,12 @@
<ol-source-osm /> <ol-source-osm />
</ol-tile-layer> </ol-tile-layer>
<template v-for="coordinate in this.coordinates"> <template v-for="coordinate, i in coordinates">
<ol-vector-layer> <ol-overlay :position="coordinate">
<ol-source-vector> <template v-slot="slotProps">
<ol-feature> <div class="overlay-content" @click="getSelectedTrain(i)">{{ i }}</div>
<ol-geom-point :coordinates="coordinate"></ol-geom-point> </template>
<ol-style> </ol-overlay>
<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> </template>
</ol-map> </ol-map>
@ -35,7 +36,8 @@ import {fromLonLat, toLonLat} from 'ol/proj.js';
import axios from 'axios'; import axios from 'axios';
export default { export default {
name: "Map", name: "MapsOverlay",
data() { data() {
const center = ref(fromLonLat([-7.5029786, 53.4494762])) const center = ref(fromLonLat([-7.5029786, 53.4494762]))
const projection = ref('EPSG:3857') const projection = ref('EPSG:3857')
@ -55,10 +57,11 @@ export default {
strokeWidth, strokeWidth,
strokeColor, strokeColor,
fillColor, fillColor,
coordinates: [], coordinates: [],
dbLiveTrainData: [], dbLiveTrainData: [],
allDataMap: {} allDataMap: {},
selectedDataMap: {},
display: false,
} }
}, },
@ -69,16 +72,29 @@ export default {
.then((response) => { .then((response) => {
this.dbLiveTrainData = response.data; 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++) { 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.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) => { .catch((error) => {
console.log(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 ---------------- // ---------------- TESTING ----------------
postLiveTrainData() { postLiveTrainData() {
axios.get('https://us-central1-concept-d5be1.cloudfunctions.net/postLiveTrainData') axios.get('https://us-central1-concept-d5be1.cloudfunctions.net/postLiveTrainData')
@ -92,4 +108,13 @@ export default {
// ---------------- TESTING ---------------- // ---------------- TESTING ----------------
} }
} }
</script> </script>
<style scoped>
.overlay-content {
background: #efefef;
box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
padding: 10px 20px;
font-size: 16px;
}
</style>