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

Fix order of scheduled and actual departure time

Browse Source
This commit is contained in:
Kacper Donat 2020-01-14 22:04:29 +01:00
parent 3b7932b976
commit d07936d314
7 changed files with 75 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
resources/components/departures.html
View File

@ -1,30 +1,7 @@
<div class="departures" v-responsive>
<ul class="departures__list list-underlined">
<li class="departure" v-for="departure in departures">
<div class="departure__line">
<line-symbol :line="departure.line"/>
<div class="line__display">{{ departure.display }}</div>
</div>
<div class="departure__time">
<fa :icon="['far', 'clock']" v-if="!departure.estimated" title="Czas rozkładowy, nieuwzględniający aktualnej sytuacji komunikacyjnej."/>
<span class="departure__estimated" v-if="departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm')">{{ departure.estimated.format('HH:mm') }}</span>
<span class="badge" :class="[departure.delay < 0 ? 'badge-danger' : 'badge-warning']"
v-if="departure.delay < 0 || departure.delay > 30">
{{ departure.delay|signed }}s
</span>
<span :class="[ 'departure__scheduled', departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm') && 'departure__scheduled--delayed']">
{{ departure.scheduled.format('HH:mm') }}
</span>
</div>
<div class="departure__stop">
<fa :icon="['fal', 'sign']" fixed-width class="mr-1"/>
<stop :stop="departure.stop"/>
</div>
</li>
<departure :departure="departure" v-for="departure in departures"/>
</ul>
<div class="alert alert-info" v-if="stops.length === 0">
<fa :icon="['fal', 'info-circle']"/>
Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.

29
resources/components/departures/departure.html Normal file
View File

@ -0,0 +1,29 @@
<li class="departure">
<div class="departure__line">
<line-symbol :line="departure.line"/>
<div class="line__display">{{ departure.display }}</div>
</div>
<div class="departure__time">
<fa :icon="['far', 'clock']" v-if="!departure.estimated" title="Czas rozkładowy, nieuwzględniający aktualnej sytuacji komunikacyjnej."/>
<span :class="[ 'departure__time', 'departure__time--delayed']" v-if="timeDiffers">
{{ departure.scheduled.format('HH:mm') }}
</span>
<span class="badge" :class="[departure.delay < 0 ? 'badge-danger' : 'badge-warning']"
v-if="departure.delay < 0 || departure.delay > 30">
{{ departure.delay|signed }}s
</span>
<span class="departure__time">{{ time.format('HH:mm') }}</span>
</div>
<div class="departure__stop">
<fa :icon="['fal', 'sign']" fixed-width class="mr-1 flex-shrink-0"/>
<stop :stop="departure.stop"/>
<div class="stop__actions flex-space-left">
<button class="btn btn-action">
<fa :icon="['far', 'code-commit']" rotation="90" />
</button>
</div>
</div>
</li>

4
resources/styles/_common.scss
View File

@ -95,7 +95,7 @@
}
svg.svg-inline--fa {
transform: rotate(360deg)
//transform: rotate(360deg)
}
.btn-unstyled {
@ -108,4 +108,4 @@ svg.svg-inline--fa {
.icon {
padding: .5rem 0.75rem;
}
}

41
resources/styles/_departure.scss
View File

@ -1,36 +1,29 @@
.departure {
@extend .flex;
flex-wrap: wrap;
}
.departure__line {
@extend .flex;
flex: 3 0;
.departure__line {
@extend .flex;
flex: 3 0;
.line__symbol {
min-width: 6rem;
}
}
.departure__stop {
@extend .flex;
width: 100%;
.stop {
flex: 1 1 auto;
}
}
.departure__time {
width: 9rem;
text-align: right;
.departure__scheduled--delayed {
text-decoration: line-through;
}
.line__symbol {
min-width: 6rem;
}
}
.departure__stop {
@extend .flex;
width: 100%;
}
.departure__time {
width: 9rem;
text-align: right;
}
.departure__time--delayed {
text-decoration: line-through;
}
.departures {

6
resources/styles/_line.scss
View File

@ -2,6 +2,10 @@
@extend .flex;
}
.line__display {
line-height: 1.2;
}
.line__symbol {
@each $type, $color in $line-types {
.icon {
@ -45,4 +49,4 @@
flex: 1 1 auto;
white-space: normal;
}
}
}

2
resources/styles/_stop.scss
View File

@ -5,6 +5,8 @@
}
.stop__name {
flex: 1 0;
line-height: 1.2;
}
.stop__variant {

21
resources/ts/components/departures.ts
View File

@ -7,7 +7,7 @@ import store from '../store'
const { State } = namespace('departures');
@Component({ template: require("../../components/departures.html"), store })
export class Departures extends Vue {
export class DeparturesComponent extends Vue {
@State
departures: Departure[];
@ -15,4 +15,21 @@ export class Departures extends Vue {
stops: Stop[];
}
Vue.component('Departures', Departures);
@Component({ template: require("../../components/departures/departure.html"), store })
export class DepartureComponent extends Vue {
@Prop(Object)
departure: Departure;
get timeDiffers() {
const departure = this.departure;
return departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm');
}
get time() {
return this.departure.estimated || this.departure.scheduled;
}
}
Vue.component('Departures', DeparturesComponent);
Vue.component('Departure', DepartureComponent);