https://www.autrechene.fr/assets/controllers/checkbox_controller-d4ac89f28c2ebe19f9723ced7288d968.js

1import {Controller} from '@hotwired/stimulus';
2import Swal from 'sweetalert2';
3
4/* stimulusFetch: 'lazy' */
5export default class extends Controller {
6    alertesIds = [];
7
8    connect() {
9        this.changeUrl();
10        this.initButtons();
11        this.initCheckboxes();
12    }
13
14
15    changeUrl() {
16        const activePage = document.querySelector("div.navigation li.active");
17        const searchParams = new URLSearchParams(window.location.search);
18
19        if (activePage !== null) {
20            const newPage = activePage.textContent.trim();
21            if (searchParams.get('page') !== newPage) {
22                searchParams.set('page', newPage);
23                const url = window.location.pathname + '?' + searchParams.toString();
24                history.pushState(null, null, url);
25            }
26        }
27    }
28
29    initButtons() {
30        document.querySelector('#alerteActions button.delete')?.addEventListener('click', (e) => {
31            this.archiveOrDeleteMessages('delete')
32        });
33        document.querySelector('#alerteActions button.archive')?.addEventListener('click', (e) => {
34            this.archiveOrDeleteMessages('archive')
35        });
36        document.querySelector('#alerteActions button.checkAll')?.addEventListener('click', (e) => {
37            this.verifyCheckboxes('check')
38        });
39        document.querySelector('#alerteActions button.uncheckAll')?.addEventListener('click', (e) => {
40            this.verifyCheckboxes('uncheck')
41        });
42        document.getElementById('enableSelection')?.addEventListener('click', (e) => {
43            this.displayButtons(!(e.currentTarget.dataset.show === 'true'));
44        });
45    }
46
47    initCheckboxes() {
48        let checkboxes = document.querySelectorAll('.checkbox-message input');
49        for (let checkbox of checkboxes) {
50            checkbox.addEventListener('change', (event) => {
51                let box = checkbox.closest('.container-message').querySelector('.card');
52                let alerteId = checkbox.closest('div.container-message').dataset.alerte;
53                let indexAlerte = this.alertesIds.indexOf(alerteId);
54
55                if (checkbox.checked) {
56                    box.style.background = checkbox.dataset.color;
57                    indexAlerte === -1 ? this.alertesIds.push(alerteId) : '';
58                } else {
59                    box.style.background = '';
60                    indexAlerte > -1 ? this.alertesIds.splice(indexAlerte, 1) : '';
61                }
62            });
63        }
64    }
65
66    displayButtons(display = true) {
67        document.getElementById('enableSelection').dataset.show = display.toString()
68
69        const divActions = document.getElementById('alerteActions');
70        const alertesItems = document.querySelectorAll('.container-message');
71        if (display) {
72            divActions.classList.remove('d-none');
73            for (let alerteItem of alertesItems) {
74                alerteItem.style.gridTemplateColumns = '2.5rem 1fr';
75                alerteItem.querySelector('.checkbox-message').style.display = 'initial';
76            }
77        } else {
78            divActions.classList.add('d-none');
79            for (let alerteItem of alertesItems) {
80                alerteItem.style.gridTemplateColumns = '1fr';
81                alerteItem.querySelector('.checkbox-message').style.display = 'none';
82            }
83            this.verifyCheckboxes('uncheck');
84        }
85    }
86
87    async archiveOrDeleteMessages(action) {
88        if (await this.popupConfirmation(action)) {
89            const station = document.getElementById('messagesContent').dataset.station;
90            const url = Routing.generate(`moncompte_alerte_ajax_${action}`, {'station_slug': station});
91
92            fetch(url, {
93                method: 'POST',
94                body: JSON.stringify(this.alertesIds)
95            })
96                .then(response => {
97                    if (response.ok) {
98                        Swal.fire({
99                            title: this.alertesIds.length + ` ${this.alertesIds.length > 1 ? 'Alertes' : 'Alerte'}` + ` ${action === 'delete' ? 'supprimée' : 'archivée'}` + `${this.alertesIds.length > 1 ? 's' : ''}`,
100                            icon: 'success',
101                            confirmButtonColor: '#9FBA00',
102                        });
103                        if (!(action === 'archive' && document.getElementById('messagesContent').dataset.f

103ilter === 'search')) {
104                            this.alertesIds.forEach(alerteId => {
105                                let containerMessage = document.querySelector('.container-message[data-alerte="' + alerteId + '"]');
106                                containerMessage.style.marginLeft = '100vw';
107                                containerMessage.style.marginRight = '-100vw';
108                                setTimeout(() => {
109                                    containerMessage.remove();
110                                }, 800);
111                            });
112                        }
113                        this.getNewMessagescontent();
114                        this.alertesIds = [];
115                    } else {
116                        throw new Error((response.status).toString() + ' ' + response.statusText);
117                    }
118                })
119                .catch(error => {
120                    Swal.fire({
121                        title: 'Erreur',
122                        text: error.message,
123                        icon: 'error',
124                        confirmButtonColor: '#9FBA00',
125                    });
126                });
127        }
128    }
129
130
131    async popupConfirmation(action) {
132        const result = await Swal.fire({
133            icon: action === 'archive' ? "question" : "warning",
134            title: "En êtes vous sur ?",
135            text: (action === 'archive' ? "Archiver " : "Supprimer ") + this.alertesIds.length + (this.alertesIds.length > 1 ? ' alertes' : ' alerte'),
136            showConfirmButton: true,
137            confirmButtonColor: action === 'archive' ? '#ffc107' : '#d73925',
138            showCancelButton: true,
139            cancelButtonText: 'non',
140        });
141        return result.isConfirmed;
142    }
143
144    getNewMessagescontent() {
145        const divMessagesContent = document.getElementById('messagesContent');
146        const url = Routing.generate('moncompte_alerte_ajax_messages', {'station_slug': divMessagesContent.dataset.station});
147        const searchParams = new URLSearchParams(window.location.search);
148        searchParams.set('filter', divMessagesContent.dataset.filter);
149
150        fetch(url + '?' + searchParams.toString())
151            .then(res => res.text())
152            .then(resHtml => {
153                divMessagesContent.innerHTML = resHtml;
154                this.changeUrl();
155                this.initButtons();
156                this.initCheckboxes();
157            })
158            .catch((e) => {
159                Swal.fire({
160                    title: "Erreur dans la récupération des alertes",
161                    text: e.message,
162                    icon: 'error',
163                    button: "OK",
164                    confirmButtonColor: '#D1400D',
165                });
166            })
167    }
168
169
170    verifyCheckboxes(method = null) {
171        let checkboxes = document.querySelectorAll('.checkbox-message input');
172        if (method === null) {
173            let allCheck = true;
174            for (let checkbox of checkboxes) {
175                if (!checkbox.checked) {
176                    allCheck = false;
177                    break;
178                }
179            }
180            if (allCheck) {
181                document.querySelector('#alerteActions button.checkAll').classList.add('d-none');
182                document.querySelector('#alerteActions button.uncheckAll').classList.remove('d-none');
183            } else {
184                document.querySelector('#alerteActions button.checkAll').classList.remove('d-none');
185                document.querySelector('#alerteActions button.uncheckAll').classList.add('d-none');
186            }
187        } else {
188            if (method === "check") {
189                for (let checkbox of checkboxes) {
190                    checkbox.checked = true;
191                    checkbox.dispatchEvent(new Event("change"));
192                }
193            } else if (method === "uncheck") {
194                for (let checkbox of checkboxes) {
195                    checkbox.checked = false;
196                    checkbox.dispatchEvent(new Event("change"));
197                }
198            }
199            this.verifyCheckboxes();
200        }
201    }
202}