43 lines
2.2 KiB
HTML
43 lines
2.2 KiB
HTML
<main class="d-flex">
|
|
<div style="width: 100%">
|
|
<l-map :center="{ lat: 52.0194, lon: 19.1451 }" :zoom=7 :options="{ zoomControl: false }" class="map">
|
|
<l-vector-layer url="https://api.maptiler.com/maps/bright/style.json?key=8GX5FRUNgk4lB83GZT8Q"
|
|
token="not-needed"
|
|
attribution='<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
|
|
/>
|
|
|
|
<div class="provider-picker">
|
|
<h2 class="provider-picker__heading">Wybierz lokalizację</h2>
|
|
<ul class="provider-picker__providers">
|
|
<li v-for="provider in providers" :key="provider.id" class="provider-picker__provider">
|
|
<a :href="`/${provider.id}`" class="provider">
|
|
<ui-icon icon="line-bus" size="2x" />
|
|
<div>
|
|
<div class="provider__short-name">{{ provider.shortName }}</div>
|
|
<div class="provider__name">{{ provider.name }}</div>
|
|
</div>
|
|
<tooltip v-if="provider.lastUpdate != null">Ostatnia akutalizacja: {{ provider.lastUpdate|moment('YYYY-MM-DD HH:mm') }}</tooltip>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<l-marker :lat-lng="provider.location" v-for="provider in providers" :options="{ keyboard: false }" :key="provider.id">
|
|
<l-icon>
|
|
<div class="map__label-box" tabindex="0">
|
|
<a :href="`/${provider.id}`" class="provider">
|
|
<ui-icon icon="line-bus" class="map__icon" />
|
|
<div>
|
|
<div class="provider__short-name">{{ provider.shortName }}</div>
|
|
<div class="provider__name">{{ provider.name }}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</l-icon>
|
|
</l-marker>
|
|
</l-map>
|
|
</div>
|
|
|
|
<portal-target name="popups" multiple/>
|
|
</main>
|