@markusantonwolf/ta-foodtrucks
Version:
TA-Foodtrucks plugin shows the next food truck and street food dates in your area based on Craftplaces API. You can customize the endpoints to get all dates for a specific vendor, for a specific city or just for a location you are interested in. The light
97 lines (96 loc) • 5.25 kB
HTML
<div
class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
x-data="taFoodtrucks()"
x-init="init()"
x-cloak
data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
data-locale="de-DE"
data-min-height="10rem"
data-duration="1000"
data-today="Heute"
data-tomorrow="Morgen"
data-seperator=" - "
data-suffix=" Uhr"
>
<div class="ta-foodtrucks-loading bg-white text-gray-400" :class="{'ta-foodtrucks-loading-out': initialized}" x-show="loading">
<svg
xmlns="http://www.w3.org/2000/svg"
class="fill-current h-24 w-24"
viewBox="0 0 100 100"
>
<path
d="M27.136 52.495c1.377 12.625 12.734 21.747 25.359 20.37s21.747-12.735 20.37-25.36m-3.878.423c1.14 10.438-6.378 19.91-16.915 21.06s-19.92-6.478-21.06-16.916"
>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="1s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite"
/>
</path>
</svg>
</div>
<div class="ta-foodtrucks-error" x-show="!has_dates">
Sorry, no dates available at the moment...
</div>
<template x-for="(item, index) in dates" :key="item.id" x-if="has_dates">
<div class="flex flex-col sm:flex-row items-center justify-between border-b-2 border-dashed border-gray-100 last:border-b-0 py-8 px-4">
<div class="ta-foodtrucks-logo rounded-full w-24 h-24 border border-gray-200 shadow-md sm:mr-8">
<img :src="item.logo.url.local" alt="asdas" class="ta-foodtrucks-logo-image" />
</div>
<div class="ta-foodtrucks-details leading-tight">
<div class="text-base text-green-600 font-bold">
<span x-text="getWeekday(index, true)"></span>,
<span x-text="getDay(index)"></span>
</div>
<div class="text-4xl sm:text-5xl font-light mb-2">
<span x-text="getTime(index, ' - ', 'Uhr')"></span>
</div>
<div class="text-base font-semibold">
<span x-text="item.name"></span>
: <span x-text="item.location.address.street"></span>
<span x-text="item.location.address.number"></span>,
<span x-text="item.location.address.city"></span>
</div>
<div class="text-sm font-regular mb-2">
<span class="font-normal" x-text="item.vendor.name.long"></span>:
<span x-text="item.vendor.offer"></span>
</div>
<div class="w-full flex flex-wrap justify-between font-normal text-sm">
<div class="flex flex-wrap items-center my-2">
<a
:href="getWhat3WordsLink(index)"
class="inline-flex text-sm text-pink-800 font-bold items-center"
target="_blank"
>
<svg class="fill-current h-4" viewBox="0 0 576 512">
<path
d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"
/>
</svg>
<span class="ml-1"> What3Words </span></a
>
<span class="ml-2">
(<span x-text="item.location.position.what3words"></span>)
</span>
</div>
<a
:href="getGoogleMapsLink(index)"
class="inline-flex text-sm text-pink-800 font-bold items-center my-2"
target="_blank"
>
<svg class="fill-current h-4" viewBox="0 0 384 512">
<path
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
/>
</svg>
<span class="ml-1"> Google Maps </span>
</a>
</div>
</div>
</div>
</template>
</div>