49 lines
1.6 KiB
PHP
49 lines
1.6 KiB
PHP
<div x-data="auditionManager()">
|
|
<template x-for="room in rooms" :key="room.id">
|
|
<div>
|
|
<h2 x-text="room.name"></h2>
|
|
<ul :id="'room-' + room.id" class="audition-list">
|
|
<template x-for="audition in room.auditions" :key="audition.id">
|
|
<li x-text="audition.name" :data-id="audition.id"></li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<script>
|
|
function auditionManager() {
|
|
return {
|
|
rooms: @json($rooms), // Pass rooms data from the controller
|
|
init() {
|
|
this.rooms.forEach(room => {
|
|
new Sortable(document.getElementById('room-' + room.id), {
|
|
group: 'shared',
|
|
animation: 150,
|
|
onEnd: this.updateOrder.bind(this)
|
|
});
|
|
});
|
|
},
|
|
updateOrder(event) {
|
|
let order = [];
|
|
event.to.querySelectorAll('li').forEach((el, index) => {
|
|
order.push({
|
|
id: el.dataset.id,
|
|
room_id: event.to.id.split('-')[1],
|
|
room_order: index
|
|
});
|
|
});
|
|
|
|
fetch('/update-order', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify(order)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|