Skip to content

Commit

Permalink
Clear up UI more
Browse files Browse the repository at this point in the history
  • Loading branch information
@AaronClaydon
AaronClaydon committed Feb 23, 2024
1 parent 7cb325a commit ea9ffb8
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 94 deletions.
2 changes: 1 addition & 1 deletion src/components/Alert.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="p-4 mb-4 text-sm" v-bind:class="typeClasses[type]">
<div class="p-4 text-sm" v-bind:class="typeClasses[type]">
<slot></slot>
</div>
</template>
Expand Down
9 changes: 0 additions & 9 deletions src/components/DetailedInformationRail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,6 @@
</div>

<div class="text-gray-900 dark:text-gray-200 text-base">
<div class="inline-block mr-4 text-sm font-medium text-gray-500">
<span v-if="journey.DetailedRailInformation.VehicleTypeName !== ''">
{{ journey.DetailedRailInformation.VehicleTypeName }}
</span>
<span v-else>
{{ journey.DetailedRailInformation.VehicleType }}
</span>
</div>

<span
class="material-symbols-outlined text-base"
v-if="journey.DetailedRailInformation?.AirConditioning"
Expand Down
164 changes: 88 additions & 76 deletions src/views/Journeys/View.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@
<div class="md:hidden">
<NavTabBar :tabs="tabs" :currentTab="currentTab" :changeTab="changeTab" />
</div>
<div class="flex flex-col-reverse md:flex-row h-full">
<div class="flex flex-col-reverse mt-2 md:flex-row h-full">
<div
class="basis-full md:basis-1/2 md:mr-2 mt-4 md:mt-0 md:block"
class="basis-full md:basis-1/2 md:mr-2 md:mt-0 md:block"
v-bind:class="{ hidden: this.currentTab !== 'timeline' }"
>
<Card>
Expand Down Expand Up @@ -201,94 +201,106 @@
</div>
<div
class="basis-full md:basis-1/2 md:ml-2 h-[450px] md:h-[400px] md:block"
v-bind:class="{ hidden: this.currentTab !== 'map' }"
>
<div v-if="journey?.RealtimeJourney?.Occupancy.OccupancyAvailable">
<Card class="mb-4">
<div><strong>Occupancy: </strong> {{ pretty.occupancyDescription(journey?.RealtimeJourney?.Occupancy.TotalPercentageOccupancy) }}</div>
<div v-if="journey?.RealtimeJourney?.Occupancy.ActualValues">
<div v-if="journey?.RealtimeJourney?.Occupancy.SeatedInformation">
<strong>Seats: </strong>
{{ journey?.RealtimeJourney?.Occupancy.SeatedOccupancy }} / {{ journey?.RealtimeJourney?.Occupancy.SeatedCapacity }}
<div class="md:block" v-bind:class="{ hidden: this.currentTab !== 'details' }">
<div v-if="journey?.RealtimeJourney?.Occupancy.OccupancyAvailable">
<Card class="mb-4">
<div><strong>Occupancy: </strong> {{ pretty.occupancyDescription(journey?.RealtimeJourney?.Occupancy.TotalPercentageOccupancy) }}</div>
<div v-if="journey?.RealtimeJourney?.Occupancy.ActualValues">
<div v-if="journey?.RealtimeJourney?.Occupancy.SeatedInformation">
<strong>Seats: </strong>
{{ journey?.RealtimeJourney?.Occupancy.SeatedOccupancy }} / {{ journey?.RealtimeJourney?.Occupancy.SeatedCapacity }}
</div>
<div v-if="journey?.RealtimeJourney?.Occupancy.WheelchairInformation">
<strong>Wheelchair Spaces: </strong>
{{ journey?.RealtimeJourney?.Occupancy.WheelchairOccupancy }} / {{ journey?.RealtimeJourney?.Occupancy.WheelchairCapacity }}
</div>
</div>
<div v-if="journey?.RealtimeJourney?.Occupancy.WheelchairInformation">
<strong>Wheelchair Spaces: </strong>
{{ journey?.RealtimeJourney?.Occupancy.WheelchairOccupancy }} / {{ journey?.RealtimeJourney?.Occupancy.WheelchairCapacity }}
</Card>
</div>

<div v-if="journey?.DetailedRailInformation">
<Card class="mb-4">
<div v-if="journey.DetailedRailInformation.VehicleTypeName !== ''">
<strong>Vehicle: </strong> {{ journey.DetailedRailInformation.VehicleTypeName }}
</div>
<div v-else>
<strong>Vehicle ID: </strong> {{ journey.DetailedRailInformation.VehicleType }}
</div>
<div>
<strong>Speed: </strong> {{ journey.DetailedRailInformation.SpeedKMH }} km/h
</div>
<div>
<strong>Fuel: </strong> {{ journey.DetailedRailInformation.PowerType }}
</div>
</div>
</Card>
</div>

<div v-if="journey?.DetailedRailInformation">
<Card class="mb-4">
<div>
<strong>Speed: </strong> {{ journey.DetailedRailInformation.SpeedKMH }} km/h
</div>
<div>
<strong>Seating: </strong> {{ journey.DetailedRailInformation.Seating }}
</div>

<div>
<strong>Seating: </strong> {{ journey.DetailedRailInformation.Seating }}
</div>
<div>
<strong>Sleepers: </strong> {{ journey.DetailedRailInformation.SleeperAvailable }}
</div>
<div v-if="journey.DetailedRailInformation.SleeperAvailable">
<strong>Sleeper for: </strong> {{ journey.DetailedRailInformation.Sleepers }}
</div>

<div>
<strong>Sleepers: </strong> {{ journey.DetailedRailInformation.SleeperAvailable }}
</div>
<div v-if="journey.DetailedRailInformation.SleeperAvailable">
<strong>Sleeper for: </strong> {{ journey.DetailedRailInformation.Sleepers }}
</div>
<div v-if="journey.DetailedRailInformation.CateringAvailable">
<strong>Catering Description: </strong> {{ journey.DetailedRailInformation.CateringDescription }}
</div>

<div v-if="journey.DetailedRailInformation.CateringAvailable">
<strong>Catering Description: </strong> {{ journey.DetailedRailInformation.CateringDescription }}
</div>
<div>
<strong>Driver only: </strong> {{ journey.DetailedRailInformation.DriverOnly }}
</div>
<div>
<strong>Guard required: </strong> {{ journey.DetailedRailInformation.GuardRequired }}
</div>

<div>
<strong>Driver only: </strong> {{ journey.DetailedRailInformation.DriverOnly }}
</div>
<div>
<strong>Guard required: </strong> {{ journey.DetailedRailInformation.GuardRequired }}
</div>
<div>
<strong>Reservation Required: </strong> {{ journey.DetailedRailInformation.ReservationRequired }}
</div>
<div>
<strong>Reservation Required for bike: </strong> {{ journey.DetailedRailInformation.ReservationBikeRequired }}
</div>
<div>
<strong>Reservation Recommended: </strong> {{ journey.DetailedRailInformation.ReservationRecommended }}
</div>
</Card>
</div>
</div>

<div>
<strong>Reservation Required: </strong> {{ journey.DetailedRailInformation.ReservationRequired }}
</div>
<div>
<strong>Reservation Required for bike: </strong> {{ journey.DetailedRailInformation.ReservationBikeRequired }}
</div>
<div>
<strong>Reservation Recommended: </strong> {{ journey.DetailedRailInformation.ReservationRecommended }}
<div class="md:block h-[400px]" v-bind:class="{ hidden: this.currentTab !== 'map' }">
<mapbox-map
accessToken="pk.eyJ1IjoiYnJpdGJ1cyIsImEiOiJjbDExNzVsOHIwajAxM2Rtc3A4ZmEzNjU2In0.B-307FL4WGtmuwEfQjabOg"
mapStyle="mapbox://styles/britbus/cl1177uct008715o8qnee8str"
style="height: 100%"
:zoom="zoom"
:center="center"
@loaded="mapLoaded"
>
<div v-for="(point, index) in this.journeyPoints" v-bind:key="index">
<mapbox-marker :lngLat="point.location">
<template v-slot:icon>
<img src="/icons/bus-stop-station-svgrepo-com-16x16.png">
</template>
</mapbox-marker>

<mapbox-geogeometry-raw :source="point.track" v-if="point.track">
<mapbox-geogeometry-line :width="5" :color="point.active ? 'green' : 'gray'" />
</mapbox-geogeometry-raw>
</div>
</Card>
</div>

<mapbox-map
accessToken="pk.eyJ1IjoiYnJpdGJ1cyIsImEiOiJjbDExNzVsOHIwajAxM2Rtc3A4ZmEzNjU2In0.B-307FL4WGtmuwEfQjabOg"
mapStyle="mapbox://styles/britbus/cl1177uct008715o8qnee8str"
style="height: 100%"
:zoom="zoom"
:center="center"
@loaded="mapLoaded"
>
<div v-for="(point, index) in this.journeyPoints" v-bind:key="index">
<mapbox-marker :lngLat="point.location">
<mapbox-marker
:lngLat="this.journey.RealtimeJourney.VehicleLocation.coordinates"
:rotation="this.journey.RealtimeJourney.VehicleBearing-90"
v-if="this.journey.RealtimeJourney && this.journey.RealtimeJourney.VehicleLocation.coordinates.length === 2"
>
<template v-slot:icon>
<img src="/icons/bus-stop-station-svgrepo-com-16x16.png">
<img src="/icons/bus-svgrepo-com-32x32.png">
</template>
</mapbox-marker>

<mapbox-geogeometry-raw :source="point.track" v-if="point.track">
<mapbox-geogeometry-line :width="5" :color="point.active ? 'green' : 'gray'" />
</mapbox-geogeometry-raw>
</div>

<mapbox-marker
:lngLat="this.journey.RealtimeJourney.VehicleLocation.coordinates"
:rotation="this.journey.RealtimeJourney.VehicleBearing-90"
v-if="this.journey.RealtimeJourney && this.journey.RealtimeJourney.VehicleLocation.coordinates.length === 2"
>
<template v-slot:icon>
<img src="/icons/bus-svgrepo-com-32x32.png">
</template>
</mapbox-marker>
</mapbox-map>
</mapbox-map>
</div>
</div>
</div>
</div>
Expand Down
37 changes: 29 additions & 8 deletions src/views/Stops/View.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
{{ this.stop.OtherNames.Indicator }} {{ this.stop.OtherNames.Landmark }}
</span>

<div class="md:float-right inline overflow-x-scroll w-full">
<div class="dx overflow-y-hidden w-full whitespace-nowrap text-right">
<div class="inline overflow-x-scroll w-full">
<div class="dx overflow-y-hidden w-full whitespace-nowrap">
<router-link
:to="{'name': 'services/view', params: {'id': service.PrimaryIdentifier}}"
v-for="service in this.stop.Services" v-bind:key="service.PrimaryIdentifier"
>
<ServiceIcon
class="ml-2"
class="mr-2"
:service="service"
/>
</router-link>
Expand Down Expand Up @@ -43,18 +43,22 @@
<ServiceAlert :alert="serviceAlert" v-for="(serviceAlert, id) in this.serviceAlerts" v-bind:key="id" />
</div>

<NavTabBar :tabs="tabs" :currentTab="currentTab" :changeTab="changeTab" />

<div class="flex flex-col-reverse md:flex-row h-full">
<div class="basis-full md:basis-1/2 md:mr-2 mt-4 md:mt-0">
<div class="basis-full md:basis-1/2 md:mr-2 mt-2" v-bind:class="{ hidden: this.currentTab !== 'departures' }">
<Card>
<template #title>
Departures
</template>
<span v-if="this.loadingDepartures" class="text-xs font-semibold inline-block py-1 px-2 rounded text-amber-600 bg-amber-200 mr-1">
Loading...
</span>
<DeparturesList v-else :stop="this.stop" :departures="this.departures"/>
</Card>
</div>
<div class="basis-full md:basis-1/2 md:mr-2 mt-2" v-bind:class="{ hidden: this.currentTab !== 'arrivals' }">
<Card>
Not implemented yet
</Card>
</div>
<div class="hidden md:block basis-full md:basis-1/2 md:ml-2 h-[150px] md:h-[400px]">
<mapbox-map
accessToken="pk.eyJ1IjoiYnJpdGJ1cyIsImEiOiJjbDExNzVsOHIwajAxM2Rtc3A4ZmEzNjU2In0.B-307FL4WGtmuwEfQjabOg"
Expand Down Expand Up @@ -100,6 +104,7 @@ import ServiceIcon from '@/components/ServiceIcon.vue'
import DeparturesList from '@/components/DeparturesList.vue'
import ServiceAlert from '@/components/ServiceAlert.vue'
import Alert from '@/components/Alert.vue'
import NavTabBar from "@/components/NavTabBar.vue"
import axios from 'axios'
import API from '@/API'
import Pretty from '@/pretty'
Expand All @@ -126,7 +131,19 @@ export default {
currentZoom: 11.5,
refreshTimer: null,
serviceAlertsRefreshTimer: null
serviceAlertsRefreshTimer: null,
currentTab: "departures",
tabs: [
{
id: "departures",
name: "Departures",
},
{
id: "arrivals",
name: "Arrivals",
}
]
}
},
components: {
Expand All @@ -136,8 +153,12 @@ export default {
ServiceAlert,
Alert,
DeparturesList,
NavTabBar
},
methods: {
changeTab(newTab) {
this.currentTab = newTab
},
getStop() {
axios
.get(`${API.URL}/core/stops/${this.$route.params.id}`)
Expand Down

0 comments on commit ea9ffb8

Please sign in to comment.