49 lines
3.0 KiB
HTML
49 lines
3.0 KiB
HTML
<div class="flex gap-2 items-center"
|
|
x-data="{
|
|
status: '{{ game.status }}',
|
|
status_display: '{{ game.get_status_display }}',
|
|
open: false,
|
|
saving: false,
|
|
setStatus(newStatus, newStatusDisplay) {
|
|
this.status = newStatus;
|
|
this.status_display = newStatusDisplay;
|
|
this.saving = true;
|
|
// TODO: migrate to hx-post + hx-on::after-request for HTMX-native toast handling
|
|
fetchWithHtmxTriggers(`/api/games/{{ game.id }}/status`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify({ status: newStatus })
|
|
})
|
|
.then(() => {
|
|
document.body.dispatchEvent(new CustomEvent('status-changed'));
|
|
})
|
|
.catch(() => {
|
|
console.error('Failed to update status');
|
|
})
|
|
.finally(() => this.saving = false);
|
|
}
|
|
}"
|
|
>
|
|
<div class="inline-flex rounded-md shadow-2xs" role="group" @click.outside="open = false">
|
|
<button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle hover:cursor-pointer">
|
|
<span class="flex flex-row gap-4 justify-between items-center">
|
|
{% for status_value, status_label in game_statuses %}
|
|
<template x-if="status == '{{ status_value }}'">
|
|
<c-gamestatus display="flex" status="{{ status_value }}">{{ status_label }}</c-gamestatus>
|
|
</template>
|
|
{% endfor %}
|
|
<c-icon.arrowdown />
|
|
</span>
|
|
<div class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700" x-show="open" style="display: none;">
|
|
<ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">
|
|
{% for status_value, status_label in game_statuses %}
|
|
<li><a href="#" @click.prevent.stop="setStatus('{{ status_value }}', '{{ status_label }}'); open = false;" class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded-sm no-underline! border-0!" :class="{ 'font-bold': status === '{{ status_value }}' }"><c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus></a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div> |