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

Merge pull request #11 from 0hAodha/conor

Browse Source 
Add map icons
This commit is contained in:
Aindréas Ó hAodha
2023-02-10 09:19:30 +00:00
committed by GitHub
parent e34c05ddc9 a6dafabae5
commit ec2058ea13
1 changed files with 103 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/components/Map.vue
View File

@ -1,38 +1,42 @@
<template> <template>
<button @click="getLiveTrainData">Show</button> <button @click="getLiveTrainData">Show</button>
<button @click="postLiveTrainData">Populate Database</button> <button @click="postLiveTrainData">Populate Database</button>
<!--Sidebar, fades out on click of X button--> <!--Sidebar, fades out on click of X button-->
<transition id="sidebar" name="slideLeft"> <transition id="sidebar" name="slideLeft">
<div v-if="this.display" id= "sidebarDiv"> <div v-if="this.display" id= "sidebarDiv">
<div id = "sidebarHeader"><img id = "headerImage" src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png"> <div v-on:click="this.display = false" id="xButton">X</div></div>
<div id= "sidebarDiv"> <div id = "sidebarHeader">
<h2>Train Code: {{ selectedDataMap["TrainCode"] }}</h2> <img id = "headerImage" src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png">
<p>Date: {{ selectedDataMap["TrainDate"] }}</p> <div v-on:click="this.display = false" id="xButton">X</div>
<p>Status: {{ selectedDataMap["TrainStatus"] }}</p> </div>
<p>Longitude: {{ selectedDataMap["TrainLongitude"] }}</p>
<p>Latitude: {{ selectedDataMap["TrainLatitude"] }}</p> <div id= "sidebarDiv">
<p>Direction: {{ selectedDataMap["Direction"] }}</p> <h2>Train Code: {{ selectedDataMap["TrainCode"] }}</h2>
<p>Public Message: {{ selectedDataMap["PublicMessage"] }}</p> <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>
</div>
</div> </div>
</div> </transition>
</transition>
<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height: 1000px"> <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height: 1000px">
<ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection" /> <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection" />
<ol-tile-layer> <ol-tile-layer>
<ol-source-osm /> <ol-source-osm />
</ol-tile-layer> </ol-tile-layer>
<template v-for="coordinate, i in coordinates"> <template v-for="coordinate, i in coordinates" :position="inline-block">
<ol-overlay :position="coordinate"> <ol-overlay :position="coordinate">
<template v-slot="slotProps"> <div class="overlay-content" @click="getSelectedTrain(i)">
<div class="overlay-content" @click="getSelectedTrain(i)">{{ i }}</div> <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="trainMapIcon">
</template> </div>
</ol-overlay> </ol-overlay>
</template> </template>
</ol-map> </ol-map>
</template> </template>
@ -118,10 +122,12 @@ export default {
<style scoped> <style scoped>
.overlay-content { .overlay-content {
background: #efefef; width: 1%;
box-shadow: 0 5px 10px rgb(2 2 2 / 20%); }
padding: 10px 20px;
font-size: 16px; .trainMapIcon {
height: 5.5vh;
width: 3.5vw;
} }
.slideLeft-enter-active, .slideLeft-leave-active { .slideLeft-enter-active, .slideLeft-leave-active {
@ -135,30 +141,29 @@ export default {
} }
@keyframes gradient { @keyframes gradient {
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} }
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#sidebar{ #sidebar{
position: absolute; position: absolute;
height: 85%; height: 85%;
width: 20%; width: 20%;
left: 2%; left: 2%;
top: 12%; top: 12%;
z-index: 2; z-index: 2;
text-align: center; text-align: center;
animation: gradient 15s ease infinite; animation: gradient 15s ease infinite;
background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555); background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555);
background-size: 400%, 400%; background-size: 400%, 400%;
box-shadow: 0 0 4px 2px #333333; box-shadow: 0 0 4px 2px #333333;
} }
#sidebarDiv{ #sidebarDiv{
@ -169,91 +174,87 @@ box-shadow: 0 0 4px 2px #333333;
} }
#sidebarHeader{ #sidebarHeader{
position: relative; position: relative;
top:0%; top:0%;
height: 10%; height: 10%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
#headerImage{ #headerImage{
height: 100%; height: 100%;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
} }
#xButton{ #xButton{
font-size: 80%; font-size: 80%;
font-family: Georgia; font-family: Georgia;
color: white; color: white;
position: absolute; position: absolute;
top:10px; top:10px;
right:10px; right:10px;
} }
#xButton:hover{ #xButton:hover{
color:red; color:red;
} }
#sidebarFooter{ #sidebarFooter{
position: relative; position: relative;
bottom:0%; bottom:0%;
height:10%; height:10%;
text-align: center; text-align: center;
color: azure; color: azure;
} }
#sidebarMain{ #sidebarMain{
position: relative; position: relative;
height:80%; height:80%;
width:100%; width:100%;
overflow: hidden; overflow: hidden;
} }
#sidebarContent{ #sidebarContent{
position: relative; position: relative;
size: 6px; size: 6px;
color: white; color: white;
overflow-wrap: break-word; overflow-wrap: break-word;
font-family: Georgia, 'Times New Roman', Times, serif ; font-family: Georgia, 'Times New Roman', Times, serif ;
}
body{
background-color: #b7deff;
} }
#mapDiv{ #mapDiv{
background-color: black; background-color: black;
position: absolute; position: absolute;
float: right; float: right;
right: 0%; right: 0%;
top: 0%; top: 0%;
width:100%; width:100%;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
#mapIFrame{ #mapIFrame{
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
top: 0%; top: 0%;
z-index: 0; z-index: 0;
} }
#buttonDiv{ #buttonDiv{
position: absolute; position: absolute;
float: right; float: right;
right: 10%; right: 10%;
top: 0%; top: 0%;
width:10%; width:10%;
height:10px; height:10px;
} }
#buttonElement{ #buttonElement{
position: relative; position: relative;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 0; z-index: 0;
} }
</style> </style>