55 lines
2.5 KiB
HTML
55 lines
2.5 KiB
HTML
<div class="departures">
|
|
<div class="departures__actions">
|
|
<div class="departures__auto-refresh">
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" class="custom-control-input" v-model="autoRefresh" :id="`autorefresh_${_uid}`">
|
|
<label class="custom-control-label" :for="`autorefresh_${_uid}`">auto odświeżanie:</label>
|
|
</div>
|
|
<div v-if="autoRefresh" class="d-flex align-items-center">
|
|
<input v-model="interval" class="form-control form-control-sm mx-1"/>
|
|
s
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="update" class="flex-space-left btn btn-sm btn-outline-action">
|
|
<fa :icon="['far', 'sync']" /> odśwież
|
|
</button>
|
|
</div>
|
|
|
|
<ul class="departures__list list-underlined">
|
|
<li class="departure" v-for="departure in departures">
|
|
<div class="departure__line line">
|
|
<div class="line__symbol d-flex align-items-center">
|
|
<fa :icon="['fac', departure.line.type]" fixed-width class="mr-1"/>
|
|
{{ departure.line.symbol }}
|
|
</div>
|
|
<div class="line__display">{{ departure.display }}</div>
|
|
<div class="line__perks flex-space-left">
|
|
<fa :icon="['fas', 'walking']" fixed-width v-if="departure.line.fast"/>
|
|
<fa :icon="['fal', 'moon']" fixed-width v-if="departure.line.night"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="departure__time">
|
|
<span class="departure__scheduled" v-if="departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm')">
|
|
{{ 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__estimated">{{ departure.estimated.format('HH:mm') }}</span>
|
|
</div>
|
|
|
|
<div class="departure__stop">
|
|
<fa :icon="['fal', 'sign']" fixed-width class="mr-1"/>
|
|
<stop :stop="departure.stop"></stop>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="alert alert-info" v-if="stops.length === 0">
|
|
<fa :icon="['fal', 'info-circle']"></fa>
|
|
Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.
|
|
</div>
|
|
</div> |