Merge pull request #29 from 0hAodha/addBootstrap

Added dependencies and installed bootstrap js/css packages, no actual…

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/navbar.vue

@@ -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>

src/main.js

@@ -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";

src/pages/InsightsPage.vue

@@ -1,6 +1,6 @@
 <template>
-<router-link to="/">Home</router-link>
+    <navbar></navbar>
-<router-link to="/insights">Insights</router-link>
+
 
 <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>

src/pages/MapPage.vue

@@ -1,7 +1,8 @@
 <template>
-<router-link to="/">Home</router-link>
+  <navbar></navbar>
-<router-link to="/insights">Insights</router-link>
+
-<button @click="postLiveTrainData">Populate Database</button>
+  <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 id = "dateP">Date: {{ selectedDataMap["TrainDate"] }}</p>
-        <p>Status: {{ selectedDataMap["TrainStatus"] }}</p>
+        <p id = "dateP">Status: {{ selectedDataMap["TrainStatus"] }}</p>
-        <p>Longitude: {{ selectedDataMap["TrainLongitude"] }}</p>
+        <p id = "dateP">Train Position - Long: {{ selectedDataMap["TrainLongitude"] }} Lat: {{ selectedDataMap["TrainLatitude"] }}</p>
-        <p>Latitude: {{ selectedDataMap["TrainLatitude"] }}</p>
+        <p id = "directionP">Direction: {{ selectedDataMap["Direction"] }}</p>
-        <p>Direction: {{ selectedDataMap["Direction"] }}</p>
+        <p id = "messageP">Public Message: {{ selectedDataMap["PublicMessage"] }}</p>
-        <p>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;
-}
+  overflow: hidden;
-
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
-#sidebarDiv{
-  position: relative;
-  height: 100%;
-  width: 100%;
-  color: white;
 }
 
 #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{
+#hoverButton{
-  position: relative;
+  z-index: 3;
-  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;
   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>