kadet/czydojade
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add visual info about position of the stop on trip

Browse Source
This commit is contained in:
Kacper Donat 2020-01-24 22:26:29 +01:00
parent e49a70c71a
commit 306c034de5
4 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/components/departures/departure.html
View File

@ -34,7 +34,7 @@
</div>
</div>
<fold :visible="showTrip">
<trip :schedule="trip.schedule" v-if="trip" :class="[ `trip--${departure.line.type}` ]"/>
<trip :schedule="trip.schedule" :current="departure.stop" v-if="trip" :class="[ `trip--${departure.line.type}` ]"/>
<div v-else class="text-center">
<fa icon="spinner-third" pulse></fa>
</div>

2
resources/components/trip.html
View File

@ -1,6 +1,6 @@
<div class="trip">
<ol class="trip__stops" v-dragscroll.x>
<li v-for="stop in schedule" class="trip__stop">
<li v-for="stop in stops" class="trip__stop" :class="[ stop.current && 'trip__stop--current', stop.visited && 'trip__stop--visited' ]">
<div class="trip__marker"/>
<div class="trip__description">
<stop :stop="stop.stop"/>

21
resources/styles/_trip.scss
View File

@ -6,6 +6,7 @@ $description-width: 250px;
$trip-stop-marker-size: .9rem;
$trip-stop-marker-spacing: .75rem;
$trip-line-width: .2rem;
$trip-visited: rgba($dark, .3);
.trip {
display: flex;
@ -87,6 +88,25 @@ $trip-line-width: .2rem;
}
}
.trip__stop--visited {
.trip__marker {
border-color: $trip-visited;
&::before, &::after {
background: $trip-visited;
}
}
.trip__description, .trip__departure {
opacity: .4;
}
}
.trip__stop--current .trip__marker {
&::before {
background: $trip-visited;
}
}
.trip__description {
display: flex;
transform: rotate(-$description-rotation) translateX(.75rem);
@ -101,7 +121,6 @@ $trip-line-width: .2rem;
}
}
.trip__departure {
font-size: $small-font-size;
font-weight: bold;

14
resources/ts/components/trip.ts
View File

@ -2,10 +2,24 @@ import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { ScheduledStop } from "../model/trip";
import { Stop } from "../model";
type ScheduledStopInfo = ScheduledStop & { visited: boolean, current: boolean };
@Component({ template: require("../../components/trip.html") })
export class TripComponent extends Vue {
@Prop(Array) public schedule: ScheduledStop[];
@Prop(Object) public current: Stop;
get stops(): ScheduledStopInfo[] {
let visited = true;
return this.schedule.map(stop => ({
...stop,
current: stop.stop.id == this.current.id ? !(visited = false) : false,
visited: visited,
}));
}
}
Vue.component('Trip', TripComponent);