czydojade/resources/components/picker/stop.html
2020-10-02 20:00:24 +02:00

48 lines
2.0 KiB
HTML

<div class="finder__stop">
<div class="d-flex">
<slot name="primary-action" />
<div class="overflow-hidden align-self-center">
<stop :stop="stop" />
<div class="stop__destinations" v-if="destinations && destinations.length > 0">
<ul class="ml-1">
<li class="stop__destination destination" v-for="destination in destinations" :key="destination.stop.id">
<ul class="destination__lines">
<li v-for="line in destination.lines">
<line-symbol :line="line" :key="line.symbol" simple/>
</li>
</ul>
<span class="destination__name ml-1">{{ destination.stop.name }}</span>
</li>
</ul>
</div>
</div>
<div class="stop__actions flex-space-left">
<slot name="actions">
<button class="btn btn-action" ref="action-info" @click="details = !details">
<tooltip>dodatkowe informacje</tooltip>
<ui-icon icon="info"/>
</button>
<button class="btn btn-action" ref="action-map" v-hover:map>
<ui-icon icon="map"/>
</button>
</slot>
</div>
</div>
<keep-alive>
<portal to="popups">
<ui-dialog v-if="details" @leave="details = false" behaviour="modal" class="ui-modal--medium" title="Szczegóły przystanku">
<stop-details :stop="stop"/>
</ui-dialog>
</portal>
</keep-alive>
<keep-alive>
<!-- FIXME: This should be in portal but it's not possible due to information loss, maybe in vue3 it will be better?-->
<ui-dialog reference="action-map" v-if="showMap" arrow class="ui-popup--no-padding" style="width: 500px;" placement="right-start" v-hover:inMap>
<stop-map :stop="stop" style="height: 300px"/>
</ui-dialog>
</keep-alive>
</div>