|
|
@@ -0,0 +1,77 @@
|
|
|
+
|
|
|
+import { Controller } from "@hotwired/stimulus"
|
|
|
+
|
|
|
+export default class extends Controller {
|
|
|
+ connect() {
|
|
|
+ // Écoute tous les clics sur .open-modal -> détournement vers #lastStep + MAJ des options du formulaire
|
|
|
+ document.querySelectorAll('.planning-cell-free, .planning-cell-locked').forEach(element => {
|
|
|
+ element.addEventListener('click', this.handleClick.bind(this))
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ handleClick(event) {
|
|
|
+ event.preventDefault()
|
|
|
+ const slotId = event.currentTarget.dataset.id
|
|
|
+ const cell = event.currentTarget;
|
|
|
+ const path = cell.querySelector('.icon path');
|
|
|
+
|
|
|
+ if (!slotId) return
|
|
|
+
|
|
|
+ // A partir du slotId ->
|
|
|
+ // 1. trouver l'état du slot cliqué et le basculer dans la BDD (LOCKED/UNLOCKED/GAME)
|
|
|
+ // 2. mettre à jour le style de la case cliquée
|
|
|
+
|
|
|
+ // Etape 1
|
|
|
+ fetch(`/api/slot/${slotId}/toggleStatus`, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Accept': 'application/json'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ if (!response.ok) {
|
|
|
+ throw new Error(`Erreur API: ${response.status}`);
|
|
|
+ }
|
|
|
+ return response.json();
|
|
|
+ })
|
|
|
+ .then(data => {
|
|
|
+
|
|
|
+ // Etape 2
|
|
|
+ console.log('ID du slot cliqué :', slotId);
|
|
|
+ console.log('ÉTAT DU SLOT :', data.status);
|
|
|
+
|
|
|
+ if (data.status === "UNLOCKED") {
|
|
|
+ cell.classList.add('planning-cell-free');
|
|
|
+ cell.classList.remove('planning-cell-locked');
|
|
|
+ path.setAttribute('d', 'M12 0a4 4 0 0 1 4 4v2.5h-1V4a3 3 0 1 0-6 0v2h.5A2.5 2.5 0 0 1 12 8.5v5A2.5 2.5 0 0 1 9.5 16h-7A2.5 2.5 0 0 1 0 13.5v-5A2.5 2.5 0 0 1 2.5 6H8V4a4 4 0 0 1 4-4');
|
|
|
+ } else if (data.status === "LOCKED") {
|
|
|
+ cell.classList.remove('planning-cell-free');
|
|
|
+ cell.classList.add('planning-cell-locked');
|
|
|
+ path.setAttribute('d', 'M8 0a4 4 0 0 1 4 4v2.05a2.5 2.5 0 0 1 2 2.45v5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 13.5v-5a2.5 2.5 0 0 1 2-2.45V4a4 4 0 0 1 4-4m0 1a3 3 0 0 0-3 3v2h6V4a3 3 0 0 0-3-3');
|
|
|
+ } else {
|
|
|
+ console.warn("Statut de réponse sans action :", data.status);
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('Erreur lors de la récupération des slots :', error);
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ disconnect() {
|
|
|
+ this.element.querySelectorAll('.planning-cell-free').forEach(element => {
|
|
|
+ element.removeEventListener('click', this.handleClick)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+}
|
garthh