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

Added bootstrap and navbar component

Browse Source
This commit is contained in:
J-Lennox10
2023-03-06 11:43:14 +00:00
parent f31dea3fac
commit a619fe6297
7 changed files with 108 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
package-lock.json generated
View File

@ -8,7 +8,9 @@
"name": "nuemap",
"version": "0.0.0",
"dependencies": {
"@popperjs/core": "^2.11.6",
"axios": "^1.3.1",
"bootstrap": "^5.2.3",
"firebase": "^9.17.1",
"ol": "^7.2.2",
"vue": "^3.2.45",
@ -993,6 +995,15 @@
"resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.7.1.tgz",
"integrity": "sha512-oXZOc+aePd0FnhTWk15pyqK+Do87n0TyLV1nxdEougE95X/WXWDqmQobfhgnSY7QsWn5euZUWuDVeTQvoQ5VNw=="
},
"node_modules/@popperjs/core": {
"version": "2.11.6",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@protobufjs/aspromise": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@ -1240,6 +1251,24 @@
"node": ">= 0.6.0"
}
},
"node_modules/bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.6"
}
},
"node_modules/btoa": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",

2
package.json
View File

@ -8,7 +8,9 @@
"preview": "vite preview"
},
"dependencies": {
"@popperjs/core": "^2.11.6",
"axios": "^1.3.1",
"bootstrap": "^5.2.3",
"firebase": "^9.17.1",
"ol": "^7.2.2",
"vue": "^3.2.45",

28
src/components/navbar.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" alt="mascot" width="55" height="40" class="d-inline-block align-text-middle">
<b>Irish Rail Tracker</b>
</a>
<a class = "navbarLink"><router-link to="/">Home</router-link></a>
<a class = "navbarLink"><router-link to="/insights">Insights</router-link></a>
</div>
</nav>
</template>
<script>
export default {
name: "navbar"
}
</script>
<style scoped>
.navbarLink{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 150%;
}
</style>

5
src/main.js
View File

@ -19,4 +19,7 @@ const app = createApp(App);
app.use(router);
app.use(OpenLayersMap)
app.use(LoadingPlugin)
app.mount('#app')
app.mount('#app')
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.js";

20
src/pages/InsightsPage.vue
View File

@ -1,6 +1,6 @@
<template>
<router-link to="/">Home</router-link>
<router-link to="/insights">Insights</router-link>
<navbar></navbar>
<h1>Insights</h1>
<div v-if="this.insights">
@ -27,6 +27,7 @@
<script>
import {store} from '../store/store'
import navbar from '../components/navbar.vue'
export default {
name: "InsightsPage",
@ -41,6 +42,11 @@ export default {
}
},
components: {
// SidebarPanel
navbar
},
created() {
this.insights = store.insights
this.latestTrain = store.latestTrain
@ -52,4 +58,14 @@ export default {
</script>
<style scoped>
.navbarLink{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 24px;
}
body{
background-color: rgb(44, 102, 102);
}
</style>

100
src/pages/MapPage.vue
View File

@ -1,7 +1,8 @@
<template>
<router-link to="/">Home</router-link>
<router-link to="/insights">Insights</router-link>
<button @click="postLiveTrainData">Populate Database</button>
<navbar></navbar>
<button id="hoverButton" @click="postLiveTrainData">Populate Database</button>
<div><SidebarPanel /></div>
@ -15,17 +16,16 @@
<div id= "sidebarDiv">
<h2>Train Code: {{ selectedDataMap["TrainCode"] }}</h2>
<p>Date: {{ selectedDataMap["TrainDate"] }}</p>
<p>Status: {{ selectedDataMap["TrainStatus"] }}</p>
<p>Longitude: {{ selectedDataMap["TrainLongitude"] }}</p>
<p>Latitude: {{ selectedDataMap["TrainLatitude"] }}</p>
<p>Direction: {{ selectedDataMap["Direction"] }}</p>
<p>Public Message: {{ selectedDataMap["PublicMessage"] }}</p>
<p id = "dateP">Date: {{ selectedDataMap["TrainDate"] }}</p>
<p id = "dateP">Status: {{ selectedDataMap["TrainStatus"] }}</p>
<p id = "dateP">Train Position - Long: {{ selectedDataMap["TrainLongitude"] }} Lat: {{ selectedDataMap["TrainLatitude"] }}</p>
<p id = "directionP">Direction: {{ selectedDataMap["Direction"] }}</p>
<p id = "messageP">Public Message: {{ selectedDataMap["PublicMessage"] }}</p>
</div>
</div>
</transition>
<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height: 100vh; width: 100vw">
<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="position:absolute; height:90.7vh; width:100%;">
<ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection" />
<ol-tile-layer>
<ol-source-osm />
@ -50,6 +50,7 @@ import {fromLonLat, toLonLat} from 'ol/proj.js';
import app from '../api/firebase';
import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
// import SidebarPanel from '../components/SidebarPanel.vue'
import navbar from '../components/navbar.vue'
import { set } from 'ol/transform';
export default {
@ -86,6 +87,7 @@ export default {
components: {
// SidebarPanel
navbar
},
created() {
@ -277,27 +279,31 @@ export default {
background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555);
background-size: 400%, 400%;
box-shadow: 0 0 4px 2px #333333;
}
#sidebarDiv{
position: relative;
height: 100%;
width: 100%;
color: white;
overflow: hidden;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
#sidebarHeader{
position: relative;
top:0%;
height: 10%;
height: 15%;
width: 100%;
overflow: hidden;
}
#sidebarDiv{
position: absolute;
height: 80%;
width: 100%;
color: white;
}
#headerImage{
height: 100%;
height: 80%;
width: auto;
overflow: hidden;
position: relative;
top: 10px;
}
#xButton{
@ -313,62 +319,10 @@ export default {
color:red;
}
#sidebarFooter{
position: relative;
bottom:0%;
height:10%;
text-align: center;
color: azure;
}
#sidebarMain{
position: relative;
height:80%;
width:100%;
overflow: hidden;
}
#sidebarContent{
position: relative;
size: 6px;
color: white;
overflow-wrap: break-word;
font-family: Georgia, 'Times New Roman', Times, serif ;
}
#mapDiv{
background-color: black;
#hoverButton{
z-index: 3;
position: absolute;
float: right;
right: 0%;
top: 0%;
width:100%;
overflow: hidden;
height: 100%;
}
#mapIFrame{
position: relative;
height: 100%;
width: 100%;
top: 0%;
z-index: 0;
}
#buttonDiv{
position: absolute;
float: right;
right: 10%;
top: 0%;
width:10%;
height:10px;
}
#buttonElement{
position: relative;
top: 50%;
left: 50%;
z-index: 0;
}
</style>

13
src/pages/SidebarPanel.vue
View File

@ -1,13 +0,0 @@
<template>
<h1>test import</h1>
</template>
<script>
export default {
name: "SidebarPanel"
}
</script>
<style scoped>
</style>