czydojade/resources/components/departures/departure.html
2020-03-19 17:28:26 +01:00

49 lines
1.9 KiB
HTML

<li>
<div class="departure">
<div class="departure__line">
<line-symbol :line="departure.line"/>
<div class="line__display">{{ departure.display }}</div>
</div>
<div class="departure__time">
<template v-if="!departure.estimated">
<tooltip placement="top-end">Czas rozkładowy, nieuwzględniający aktualnej sytuacji komunikacyjnej.</tooltip>
<ui-icon icon="departure-warning" class="mr-1"/>
</template>
<template v-if="!relativeTimes">
<span :class="[ 'departure__time', 'departure__time--delayed']" v-if="timeDiffers">
{{ departure.scheduled|moment('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|moment('HH:mm') }}</span>
</template>
<template v-else>
{{ timeLeft|duration('humanize', true) }}
</template>
</div>
<div class="departure__stop">
<ui-icon icon="stop" fixed-width class="mr-1 flex-shrink-0"/>
<stop :stop="departure.stop"/>
<div class="stop__actions flex-space-left">
<button class="btn btn-action" @click="showTrip = !showTrip">
<tooltip>pokaż/ukryj trasę</tooltip>
<ui-icon icon="track" />
</button>
</div>
</div>
</div>
<fold :visible="showTrip">
<trip :schedule="trip.schedule" :current="departure.stop" v-if="trip" :class="[ `trip--${departure.line.type}` ]"/>
<div v-else class="text-center">
<ui-icon icon="spinner"/>
</div>
</fold>
</li>