This commit is contained in:
tree 2022-04-13 00:43:28 +02:00
rodič 9dc4c021d1
revize ea4ae6fa3e
2 změnil soubory, kde provedl 329 přidání a 295 odebrání

Zobrazit soubor

@ -22,8 +22,10 @@
Otevřená komunitní kryptoměnová konference Otevřená komunitní kryptoměnová konference
</div> </div>
<div class="mt-4"> <div class="mt-4">
<a href={$bundle.links.docs} class="hover:text-red-500" target="_blank" <a
><i class="fas fa-book" />&nbsp; Dokumentace</a href={$bundle.links.docs}
class="hover:text-red-500"
target="_blank"><i class="fas fa-book" />&nbsp; Dokumentace</a
> >
</div> </div>
</div> </div>

Zobrazit soubor

@ -7,6 +7,7 @@
import { faker } from "@faker-js/faker"; import { faker } from "@faker-js/faker";
import { import {
orderTicketForm, orderTicketForm,
bundle,
apiStatus, apiStatus,
userData, userData,
userDataLocal, userDataLocal,
@ -436,333 +437,364 @@
{/if} {/if}
<div class="mt-10 mb-10"> <div class="mt-10 mb-10">
<h1 class="uppercase text-2xl font-bold">Nákup vstupenek</h1> <h1 class="uppercase text-2xl font-bold">Nákup vstupenek</h1>
<div class="mt-4 mb-8">
<div class="flex w-full uppercase text-sm mb-2"> {#if !$apiStatus.wave}
<div class="flex-1">
{$apiStatus.wave.name} ({$apiStatus.wave.price} Kč)
</div>
<div class="justify-end">
Zbývá {$apiStatus.wave.live.left} / {$apiStatus.wave.count}
</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div
class="bg-utxo-gradient h-2.5 rounded-full transition-all"
style="width: {$apiStatus.wave.live.perc}%"
/>
</div>
</div>
{#if $apiStatus.wave.live.left <= 0}
<div class="mt-2">
Aktuální vlna je vyprodaná. {#if $apiStatus.wave.live.waiting > 0}Zarezervované
a nezaplacené vstupenky ({$apiStatus.wave.live.waiting}) se
postupně vrací do prodeje.{/if}
</div>
{:else if !showOrder && !forceShow}
<div class="mt-4"> <div class="mt-4">
<button Není aktivní žádná prodejní vlna. Sledujte naše sociální sítě - <a
class="border rounded-full border-[#E16A61] hover:border-0 hover:p-px hover:bg-utxo-gradient hover:text-white" href={$bundle.links.twitter}
on:click={() => (forceShow = true)} target="_blank"
><div class="px-6 py-2">Nakoupit další vstupenky</div></button class="underline hover:no-underline">Twitter</a
>,
<a
href={$bundle.links.instagram}
target="_blank"
class="underline hover:no-underline">Instagram</a
> >
nebo
<a
href={$bundle.links.fbevent}
target="_blank"
class="underline hover:no-underline">Facebook</a
>.
</div> </div>
{:else if !$apiStatus.wave}
<div class="mt-4">V současné době nelze zakoupit vstupenky.</div>
{:else} {:else}
<div <div class="mt-4 mb-8">
class="p-3 bg-blue-web-light rounded-md mt-6 text-blue-web shadow-md" <div class="flex w-full uppercase text-sm mb-2">
> <div class="flex-1">
<div class="sm:m-2 border rounded-md p-4 shadow bg-white mb-6"> {$apiStatus.wave.name} ({$apiStatus.wave.price} Kč)
<div class="mb-4">
Název akce: <span class="font-bold">UTXO.22</span><br />
Datum konání: <span class="font-bold">4. - 5. červen 2022</span>
(sobota - neděle)<br />
Místo: <span class="font-bold">Gabriel Loci</span>, Praha 5<br
/><br />
Aktuální cena vstupenky:
<span class="font-bold">{$apiStatus.wave.price}</span>
/ osobu ({$apiStatus.wave.name})
</div> </div>
<div class="md:flex gap-3"> <div class="justify-end">
<div class="md:w-1/2 p-2"> Zbývá {$apiStatus.wave.live.left} / {$apiStatus.wave.count}
<div class="font-bold uppercase">
&nbsp;Vstupenka obsahuje:
</div>
<div class="mt-4">
<div class="mb-2">
• přístup na všechny přednášky, workshopy a další události
v rámci konference
</div>
<div class="mb-2">
• platnost oba dva konferenční dny (sobota + neděle)
</div>
<div class="mb-2">
• přístup na <span class="font-bold">UTXO.Party</span> v sobotu
večer
</div>
</div>
</div>
<div class="md:w-1/2 p-2 md:mt-0 mt-3">
<div class="font-bold uppercase">
&nbsp;Vstupenka NEobsahuje:
</div>
<div class="mt-4">
<div class="mb-2">
• jídlo a pití - občerstvení bude možné zakoupit na místě
(platba kartou nebo Lightning)
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="p-2"> <div class="w-full bg-gray-200 rounded-full h-2.5">
<div> <div
<div class="uppercase text-sm font-bold">Email</div> class="bg-utxo-gradient h-2.5 rounded-full transition-all"
<div class="mt-2 text-sm"> style="width: {$apiStatus.wave.live.perc}%"
Kontaktní email, na který budou zaslány vstupenky. />
</div>
</div>
{#if $apiStatus.wave.live.left <= 0}
<div class="mt-2">
Aktuální vlna je vyprodaná. {#if $apiStatus.wave.live.waiting > 0}Zarezervované
a nezaplacené vstupenky ({$apiStatus.wave.live.waiting}) se
postupně vrací do prodeje.{/if}
</div>
{:else if !showOrder && !forceShow}
<div class="mt-4">
<button
class="border rounded-full border-[#E16A61] hover:border-0 hover:p-px hover:bg-utxo-gradient hover:text-white"
on:click={() => (forceShow = true)}
><div class="px-6 py-2">Nakoupit další vstupenky</div></button
>
</div>
{:else if !$apiStatus.wave}
<div class="mt-4">V současné době nelze zakoupit vstupenky.</div>
{:else}
<div
class="p-3 bg-blue-web-light rounded-md mt-6 text-blue-web shadow-md"
>
<div class="sm:m-2 border rounded-md p-4 shadow bg-white mb-6">
<div class="mb-4">
Název akce: <span class="font-bold">UTXO.22</span><br />
Datum konání:
<span class="font-bold">4. - 5. červen 2022</span>
(sobota - neděle)<br />
Místo: <span class="font-bold">Gabriel Loci</span>, Praha 5<br
/><br />
Aktuální cena vstupenky:
<span class="font-bold">{$apiStatus.wave.price}</span>
/ osobu ({$apiStatus.wave.name})
</div> </div>
<div class="mt-2"> <div class="md:flex gap-3">
<input <div class="md:w-1/2 p-2">
type="text" <div class="font-bold uppercase">
class="border border-blue-web rounded-md p-2 w-full lg:w-1/2 text-blue-web" &nbsp;Vstupenka obsahuje:
bind:value={$orderTicketForm.email} </div>
/> <div class="mt-4">
</div> <div class="mb-2">
</div> • přístup na všechny přednášky, workshopy a další
<div class="mt-6"> události v rámci konference
<div class="uppercase text-sm font-bold">Počet vstupenek</div>
<div class="mt-2 flex gap-3">
<select
name="count"
class="border border-blue-web rounded-md p-2 text-blue-web bg-white"
bind:value={$orderTicketForm.count}
>
{#each count as i}
<option value={i}>{i}</option>
{/each}
</select>
<div class="my-auto">
× <span class="font-bold">{$apiStatus.wave.price}</span> (cena
vstupenky)
</div>
</div>
</div>
<div class="mt-6">
<div class="uppercase text-sm font-bold">
Vstupenky a příplatky
</div>
<div class="mt-2 text-sm">
Informace, které budou vytištěné na Vaší konferenční jmenovku.
Tyto údaje jsou nepovinné a je možné je změnit později.
</div>
</div>
<div class="mt-2">
{#each ticketFormCountArray($orderTicketForm.count) as i}
<div
class="p-4 bg-utxo-gradient text-white rounded-md mb-6 shadow-md"
>
<div class="">
<div class="uppercase font-bold">Vstupenka #{i + 1}</div>
<div class="md:flex gap-2">
<div class="mt-2 flex-1">
<div class="uppercase text-sm">Jméno (Přezdívka)</div>
<div class="mt-2">
<input
type="text"
maxlength="25"
class="border border-blue-web rounded-md p-2 w-full text-blue-web"
bind:value={$orderTicketForm.tickets[i].name}
placeholder={faker.name.findName()}
/>
</div>
</div>
<div class="mt-2 flex-1">
<div class="uppercase text-sm">
Organizace (Firma)
</div>
<div class="mt-2">
<input
type="text"
maxlength="25"
class="border border-blue-web rounded-md p-2 w-full text-blue-web"
bind:value={$orderTicketForm.tickets[i].org}
placeholder={faker.company.companyName()}
/>
</div>
</div>
<div class="mt-2">
<div class="uppercase text-sm">Twitter účet</div>
<div class="mt-2">
<input
type="text"
maxlength="25"
class="border border-blue-web rounded-md p-2 w-full text-blue-web"
bind:value={$orderTicketForm.tickets[i].twitter}
placeholder="@{faker.internet.userName()}"
/>
</div>
</div>
</div> </div>
<div class="uppercase text-sm font-bold mt-3"> <div class="mb-2">
Volitelné příplatky • platnost oba dva konferenční dny (sobota + neděle)
</div> </div>
<div class="mt-1"> <div class="mb-2">
{#each $apiStatus.config.extras as ex} • přístup na <span class="font-bold">UTXO.Party</span> v
<div> sobotu večer
<label class="cursor-pointer" </div>
><input </div>
type="checkbox" </div>
class="mr-0.5 cursor-pointer" <div class="md:w-1/2 p-2 md:mt-0 mt-3">
bind:checked={$orderTicketForm.tickets[i] <div class="font-bold uppercase">
.extras[ex.id]} &nbsp;Vstupenka NEobsahuje:
/> </div>
<span class="font-semibold" <div class="mt-4">
>{ex.name} ({ex.price} Kč)</span <div class="mb-2">
></label • jídlo a pití - občerstvení bude možné zakoupit na
> místě (platba kartou nebo Lightning)
- <span class="text-sm">{ex.desc}</span>
</div>
{/each}
</div> </div>
</div> </div>
</div> </div>
{/each}
</div>
<div class="mt-6">
<div class="uppercase text-sm font-bold">
Dýško pro organizátory
</div> </div>
<div class="mt-2 flex flex-wrap gap-2"> </div>
{#each $apiStatus.config.tipPercentages as tp} <div class="p-2">
<button <div>
class="block py-1.5 px-4 min-w-16 {$orderTicketForm.tipPercent === <div class="uppercase text-sm font-bold">Email</div>
tp[0] && $orderTicketForm.tipCustom < 1 <div class="mt-2 text-sm">
? (tp[0] === 0 ? 'bg-gray-400' : 'bg-blue-web') + Kontaktní email, na který budou zaslány vstupenky.
' rounded-full text-white shadow-lg' </div>
: 'border border-solid border-blue-web rounded-full'}" <div class="mt-2">
on:click={changeTip(tp[0])}>{tp[1] || tp[0] + "%"}</button <input
type="text"
class="border border-blue-web rounded-md p-2 w-full lg:w-1/2 text-blue-web"
bind:value={$orderTicketForm.email}
/>
</div>
</div>
<div class="mt-6">
<div class="uppercase text-sm font-bold">Počet vstupenek</div>
<div class="mt-2 flex gap-3">
<select
name="count"
class="border border-blue-web rounded-md p-2 text-blue-web bg-white"
bind:value={$orderTicketForm.count}
> >
{/each} {#each count as i}
<div <option value={i}>{i}</option>
class="px-2 py-1 {$orderTicketForm.tipCustom > 0 {/each}
? 'px-5 border border-blue-web rounded-full bg-blue-web text-white' </select>
: ''}" <div class="my-auto">
> × <span class="font-bold">{$apiStatus.wave.price}</span
Jiná částka: <input > (cena vstupenky)
class="border border border-blue-web rounded-md px-2 py-1 text-blue-web w-16" </div>
bind:value={$orderTicketForm.tipCustom} </div>
/> Kč </div>
<div class="mt-6">
<div class="uppercase text-sm font-bold">
Vstupenky a příplatky
</div>
<div class="mt-2 text-sm">
Informace, které budou vytištěné na Vaší konferenční
jmenovku. Tyto údaje jsou nepovinné a je možné je změnit
později.
</div> </div>
</div> </div>
</div>
<div class="mt-8">
<div class="uppercase text-sm font-bold">Platební metoda</div>
<div class="mt-2"> <div class="mt-2">
{#each $apiStatus.config.paymentMethods as pm} {#each ticketFormCountArray($orderTicketForm.count) as i}
<div class="mb-2"> <div
<label class="cursor-pointer" class="p-4 bg-utxo-gradient text-white rounded-md mb-6 shadow-md"
><input >
checked={$orderTicketForm.paymentMethod === pm.id} <div class="">
name="paymentMethod" <div class="uppercase font-bold">
value={pm.id} Vstupenka #{i + 1}
type="radio" </div>
on:change={selectPaymentMethod} <div class="md:flex gap-2">
class="cursor-pointer" <div class="mt-2 flex-1">
/> <div class="uppercase text-sm">
{pm.name}</label Jméno (Přezdívka)
> </div>
<div class="mt-2">
<input
type="text"
maxlength="25"
class="border border-blue-web rounded-md p-2 w-full text-blue-web"
bind:value={$orderTicketForm.tickets[i].name}
placeholder={faker.name.findName()}
/>
</div>
</div>
<div class="mt-2 flex-1">
<div class="uppercase text-sm">
Organizace (Firma)
</div>
<div class="mt-2">
<input
type="text"
maxlength="25"
class="border border-blue-web rounded-md p-2 w-full text-blue-web"
bind:value={$orderTicketForm.tickets[i].org}
placeholder={faker.company.companyName()}
/>
</div>
</div>
<div class="mt-2">
<div class="uppercase text-sm">Twitter účet</div>
<div class="mt-2">
<input
type="text"
maxlength="25"
class="border border-blue-web rounded-md p-2 w-full text-blue-web"
bind:value={$orderTicketForm.tickets[i].twitter}
placeholder="@{faker.internet.userName()}"
/>
</div>
</div>
</div>
<div class="uppercase text-sm font-bold mt-3">
Volitelné příplatky
</div>
<div class="mt-1">
{#each $apiStatus.config.extras as ex}
<div>
<label class="cursor-pointer"
><input
type="checkbox"
class="mr-0.5 cursor-pointer"
bind:checked={$orderTicketForm.tickets[i]
.extras[ex.id]}
/>
<span class="font-semibold"
>{ex.name} ({ex.price} Kč)</span
></label
>
- <span class="text-sm">{ex.desc}</span>
</div>
{/each}
</div>
</div>
</div> </div>
{/each} {/each}
</div> </div>
</div> <div class="mt-6">
<div class="mt-6 py-3 px-4 bg-white rounded-md shadow-md text-sm"> <div class="uppercase text-sm font-bold">
<div class="uppercase text-sm font-bold"> Dýško pro organizátory
Shrnutí objednávky </div>
</div> <div class="mt-2 flex flex-wrap gap-2">
<div class="mt-1.5"> {#each $apiStatus.config.tipPercentages as tp}
<table cellpadding="5" class="table-auto"> <button
<tr> class="block py-1.5 px-4 min-w-16 {$orderTicketForm.tipPercent ===
<td tp[0] && $orderTicketForm.tipCustom < 1
>{$orderTicketForm.count}× UTXO.22 vstupenka ({$apiStatus ? (tp[0] === 0 ? 'bg-gray-400' : 'bg-blue-web') +
.wave.price} Kč)</td ' rounded-full text-white shadow-lg'
: 'border border-solid border-blue-web rounded-full'}"
on:click={changeTip(tp[0])}
>{tp[1] || tp[0] + "%"}</button
> >
<td>{ticketPrice}</td> {/each}
</tr> <div
{#if extrasStats.sum > 0} class="px-2 py-1 {$orderTicketForm.tipCustom > 0
{#each extrasStats.arr as es} ? 'px-5 border border-blue-web rounded-full bg-blue-web text-white'
<tr> : ''}"
<td >
>{es.count}× {$apiStatus.config.extras.find( Jiná částka: <input
(e) => e.id === es.id class="border border border-blue-web rounded-md px-2 py-1 text-blue-web w-16"
).shortname} ({es.price} Kč)</td bind:value={$orderTicketForm.tipCustom}
> /> Kč
<td>{es.sum}</td> </div>
</tr> </div>
{/each} </div>
{/if} <div class="mt-8">
{#if tip > 0} <div class="uppercase text-sm font-bold">Platební metoda</div>
<div class="mt-2">
{#each $apiStatus.config.paymentMethods as pm}
<div class="mb-2">
<label class="cursor-pointer"
><input
checked={$orderTicketForm.paymentMethod === pm.id}
name="paymentMethod"
value={pm.id}
type="radio"
on:change={selectPaymentMethod}
class="cursor-pointer"
/>
{pm.name}</label
>
</div>
{/each}
</div>
</div>
<div
class="mt-6 py-3 px-4 bg-white rounded-md shadow-md text-sm"
>
<div class="uppercase text-sm font-bold">
Shrnutí objednávky
</div>
<div class="mt-1.5">
<table cellpadding="5" class="table-auto">
<tr> <tr>
<td <td
>dýško pro organizátory ({$orderTicketForm.tipPercent > >{$orderTicketForm.count}× UTXO.22 vstupenka ({$apiStatus
0 .wave.price} Kč)</td
? $orderTicketForm.tipPercent + "%"
: $orderTicketForm.tipCustom + " Kč"})</td
> >
<td>{tip}</td> <td>{ticketPrice}</td>
</tr> </tr>
{/if} {#if extrasStats.sum > 0}
<tr> {#each extrasStats.arr as es}
<th align="right">Celkem:</th> <tr>
<th class="font-bold">{totalPrice}</th><th /></tr <td
> >{es.count}× {$apiStatus.config.extras.find(
</table> (e) => e.id === es.id
</div> ).shortname} ({es.price} Kč)</td
<div class="mt-1.5"> >
Platební metoda: <span class="font-bold" <td>{es.sum}</td>
>{#if $orderTicketForm.paymentMethod === "btcpay"}Bitcoin{:else}Platební </tr>
karta{/if}</span {/each}
> {/if}
</div> {#if tip > 0}
</div> <tr>
<div class="mt-6"> <td
<div class="flex gap-3"> >dýško pro organizátory ({$orderTicketForm.tipPercent >
{#if !formProcessing} 0
<div> ? $orderTicketForm.tipPercent + "%"
<button : $orderTicketForm.tipCustom + " Kč"})</td
class="{formProcessing >
? 'bg-gray-800' <td>{tip}</td>
: 'hover:bg-utxo-gradient bg-[#E16A61]'} text-white font-semibold rounded-full shadow-md" </tr>
disabled={formProcessing} {/if}
on:click={submitOrderHandler} <tr>
><div class="py-2 px-4"> <th align="right">Celkem:</th>
Odeslat objednávku - zaplatit {totalPrice}{#if $orderTicketForm.paymentMethod === "btcpay"}bitcoinem{:else}platební <th class="font-bold">{totalPrice}</th><th /></tr
kartou{/if}
</div></button
> >
</div> </table>
{/if} </div>
<div class="mt-1.5">
Platební metoda: <span class="font-bold"
>{#if $orderTicketForm.paymentMethod === "btcpay"}Bitcoin{:else}Platební
karta{/if}</span
>
</div>
</div>
<div class="mt-6">
<div class="flex gap-3">
{#if !formProcessing}
<div>
<button
class="{formProcessing
? 'bg-gray-800'
: 'hover:bg-utxo-gradient bg-[#E16A61]'} text-white font-semibold rounded-full shadow-md"
disabled={formProcessing}
on:click={submitOrderHandler}
><div class="py-2 px-4">
Odeslat objednávku - zaplatit {totalPrice}{#if $orderTicketForm.paymentMethod === "btcpay"}bitcoinem{:else}platební
kartou{/if}
</div></button
>
</div>
{/if}
{#if formProcessing} {#if formProcessing}
<div class="flex gap-3"> <div class="flex gap-3">
<div class=""> <div class="">
<img src="/img/Spin-1s-200px.gif" class="w-10" /> <img src="/img/Spin-1s-200px.gif" class="w-10" />
</div> </div>
<div class="my-auto text-red-600 font-bold"> <div class="my-auto text-red-600 font-bold">
Odesílám objednávku .. Odesílám objednávku ..
</div>
</div> </div>
{/if}
</div>
{#if orderError}
<div
class="py-2 px-3 mt-4 text-red-600 bg-red-200 rounded-xl shadow-md"
>
Chyba: {orderError.title}
</div> </div>
{/if} {/if}
</div> </div>
{#if orderError}
<div
class="py-2 px-3 mt-4 text-red-600 bg-red-200 rounded-xl shadow-md"
>
Chyba: {orderError.title}
</div>
{/if}
</div> </div>
</div> </div>
</div> {/if}
{/if} {/if}
</div> </div>
<!--pre>{JSON.stringify($orderTicketForm, null, 2)}</pre> <!--pre>{JSON.stringify($orderTicketForm, null, 2)}</pre>