czydojade/resources/components/departures.html
2020-01-12 20:00:02 +01:00

33 lines
1.7 KiB
HTML

<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>
</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.
</div>
</div>