czydojade/resources/components/finder.html
2019-12-10 17:51:15 +01:00

37 lines
1.5 KiB
HTML

<div class="finder">
<input class="form-control" v-model="filter" placeholder="Zacznij pisać nazwę aby szukać..."/>
<div v-if="filter.length < 3" class="mt-2">
<favourites></favourites>
</div>
<div v-if="state === 'fetching'" class="text-center p-4">
<fa icon="spinner-third" pulse/>
</div>
<div class="finder__stops" v-else-if="filter.length > 2 && Object.keys(filtered).length > 0">
<div class="stop-group" v-for="(group, name) in filtered">
<div class="stop-group__header">
<h3 class="stop-group__name">{{ name }}</h3>
<div class="actions flex-space-left">
<button class="btn btn-action" @click="select(group)">
<fa :icon="['fal', 'check-double']"></fa>
wybierz wszystkie
</button>
</div>
</div>
<ul class="stop-group__stops list-underlined">
<li v-for="stop in group" :key="stop.id" class="d-flex">
<button @click="select(stop, $event)" class="btn btn-action" data-action="add">
<fa :icon="['fal', 'check']" />
</button>
<stop :stop="stop" class="flex-grow-1"></stop>
</li>
</ul>
</div>
</div>
<div class="alert alert-warning" v-else-if="filter.length > 2">
<fa :icon="['far', 'exclamation-triangle']"></fa>
Nie znaleziono więcej przystanków, spełniających te kryteria.
</div>
</div>