fully functional. UX/UI stage

smartsoltech/static/assets/js/get-csrf-token.js

@@ -0,0 +1,18 @@
+// Функция для получения CSRF токена из куков
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+// Инициализация переменной csrftoken, которая будет доступна глобально
+const csrftoken = getCookie('csrftoken');

smartsoltech/static/assets/js/modal-init.js

@@ -1,110 +1,49 @@
 document.addEventListener("DOMContentLoaded", function () {
+    // Работа с модальным окном заявки
     var modalElement = document.getElementById('orderModal');
     if (modalElement) {
         var modal = new bootstrap.Modal(modalElement);
-        
+
         // Инициализация модального окна
-        modalElement.addEventListener('show.bs.modal', function (event) {
+        modalElement.addEventListener('show.bs.modal', function () {
             console.log("Модальное окно открыто");
         });
 
-        modalElement.addEventListener('hide.bs.modal', function (event) {
+        modalElement.addEventListener('hide.bs.modal', function () {
             console.log("Модальное окно закрыто");
         });
     }
-});
 
-document.addEventListener('DOMContentLoaded', function () {
-    const generateQrButton = document.getElementById('generateQrButton');
+    // Открытие модального окна для заявки на услугу
+    const openModalBtn = document.getElementById('openModalBtn');
+    const serviceModal = document.getElementById('serviceModal');
 
-    if (generateQrButton) {
-        generateQrButton.addEventListener('click', function () {
-            const clientEmail = document.getElementById('clientEmail').value;
-            const clientPhone = document.getElementById('clientPhone').value;
-            const clientName = document.getElementById('clientName').value;
-            const description = document.getElementById('description').value;
-            const serviceId = generateQrButton.getAttribute('data-service-id');
+    if (openModalBtn && serviceModal) {
+        openModalBtn.addEventListener('click', function (event) {
+            event.preventDefault();
+            const serviceId = openModalBtn.getAttribute('data-service-id');
+            console.log("Service ID при открытии модального окна:", serviceId);
 
-            // Проверка заполненности полей
-            if (!clientEmail || !clientPhone || !clientName || !description || !serviceId) {
-                alert('Все поля должны быть заполнены.');
+            if (!serviceId) {
+                alert("Идентификатор услуги не найден. Обновите страницу и попробуйте снова.");
                 return;
             }
 
-            // Получение CSRF токена из cookies
-            function getCookie(name) {
-                let cookieValue = null;
-                if (document.cookie && document.cookie !== '') {
-                    const cookies = document.cookie.split(';');
-                    for (let i = 0; i < cookies.length; i++) {
-                        const cookie = cookies[i].trim();
-                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                            break;
-                        }
-                    }
-                }
-                return cookieValue;
-            }
+            generateQrButton.dataset.serviceId = serviceId;
 
-            const csrftoken = getCookie('csrftoken');
-
-            // Отправка POST запроса на создание заявки
-            fetch('/service/create_request/', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': csrftoken
-                },
-                body: JSON.stringify({
-                    client_email: clientEmail,
-                    client_phone: clientPhone,
-                    client_name: clientName,
-                    service_id: serviceId,
-                    description: description
-                })
-            })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('Ошибка при создании заявки');
-                }
-                return response.json();
-            })
-            .then(data => {
-                if (data.status === 'success') {
-                    alert(data.message);
-                } else if (data.status === 'existing_request') {
-                    alert(data.message);
-                } else {
-                    alert('Неизвестная ошибка. Пожалуйста, попробуйте снова.');
-                }
-            })
-            .catch(error => {
-                console.error('Ошибка при создании заявки:', error);
-            });
+            serviceModal.classList.add('show');
+            serviceModal.style.display = 'block';
         });
     }
-});
 
-function checkVerificationStatus(serviceRequestId, interval) {
-    fetch(`/service/request_status/${serviceRequestId}/`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Ошибка при проверке статуса заявки');
+    document.querySelectorAll('.close').forEach(closeBtn => {
+        closeBtn.addEventListener('click', function () {
+            if (serviceModal) {
+                serviceModal.classList.remove('show');
+                setTimeout(() => {
+                    serviceModal.style.display = 'none';
+                }, 500);
             }
-            return response.json();
-        })
-        .then(data => {
-            if (data.is_verified) {
-                // Закрываем форму и показываем окно подтверждения
-                document.getElementById('serviceModal').style.display = 'none';
-                document.getElementById('confirmationModal').style.display = 'block';
-
-                // Останавливаем интервал проверки статуса
-                clearInterval(interval);
-            }
-        })
-        .catch(error => {
-            console.error('Ошибка при проверке статуса заявки:', error);
         });
-}
+    });
+});

smartsoltech/static/assets/js/service_request.js

@@ -0,0 +1,116 @@
+// service-request.js
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Открытие модального окна
+    const openModalBtn = document.getElementById('openModalBtn');
+    const serviceModal = document.getElementById('serviceModal');
+    const generateQrButton = document.getElementById('generateQrButton');
+
+    if (openModalBtn && serviceModal) {
+        openModalBtn.addEventListener('click', function (event) {
+            event.preventDefault();
+            // Логирование значения serviceId при открытии модального окна
+            const serviceId = openModalBtn.getAttribute('data-service-id');
+            console.log("Service ID при открытии модального окна:", serviceId);
+            
+            // Проверяем, если serviceId отсутствует
+            if (!serviceId) {
+                alert("Идентификатор услуги не найден. Обновите страницу и попробуйте снова.");
+                return;
+            }
+
+            // Сохраняем serviceId для дальнейшего использования
+            generateQrButton.dataset.serviceId = serviceId;
+
+            // Показываем модальное окно
+            serviceModal.classList.add('show');
+            serviceModal.style.display = 'block';
+        });
+    } else {
+        console.error('Не удалось найти элемент с id openModalBtn или serviceModal.');
+    }
+
+    // Закрытие модального окна
+    document.querySelectorAll('.close').forEach(closeBtn => {
+        closeBtn.addEventListener('click', function () {
+            if (serviceModal) {
+                serviceModal.classList.remove('show');
+                setTimeout(() => {
+                    serviceModal.style.display = 'none';
+                }, 500);
+            }
+        });
+    });
+
+    // Обработчик кнопки "Создать заявку"
+    if (generateQrButton) {
+        generateQrButton.addEventListener('click', function () {
+            // Получение значений полей
+            const clientEmail = document.getElementById('clientEmail').value.trim();
+            const clientPhone = document.getElementById('clientPhone').value.trim();
+            const clientName = document.getElementById('clientName').value.trim();
+            const description = document.getElementById('description').value.trim();
+
+            // Получаем serviceId из кнопки открытия модального окна
+            const serviceId = generateQrButton.dataset.serviceId;
+
+            // Логируем для проверки значения serviceId перед отправкой
+            console.log("Service ID перед отправкой запроса:", serviceId);
+
+            // Проверка заполненности полей
+            if (!clientEmail || !clientPhone || !clientName || !description || !serviceId) {
+                let errorMessage = 'Пожалуйста, заполните все поля формы перед продолжением.\n';
+                if (!serviceId) {
+                    errorMessage += 'Идентификатор услуги не найден. Обновите страницу и попробуйте снова.\n';
+                }
+                alert(errorMessage);
+                return;
+            }
+
+            // Отправка POST запроса на создание заявки
+            fetch(`/service/generate_qr_code/${serviceId}/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrftoken  // Используем глобально инициализированный CSRF токен
+                },
+                body: JSON.stringify({
+                    client_email: clientEmail,
+                    client_phone: clientPhone,
+                    client_name: clientName,
+                    description: description
+                })
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Ошибка при создании заявки');
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.qr_code_url) {
+                    // Обновляем src изображения QR-кода и показываем его
+                    const qrCodeImg = document.getElementById('qrCodeImg');
+                    if (qrCodeImg) {
+                        qrCodeImg.src = data.qr_code_url;
+                        qrCodeImg.style.display = 'block';
+                    }
+
+                    // Начинаем проверку статуса заявки
+                    const interval = setInterval(() => {
+                        checkVerificationStatus(data.service_request_id, interval);
+                    }, 5000);
+                } else if (data.status === 'existing_request') {
+                    alert(data.message);
+                } else {
+                    alert('Неизвестная ошибка. Пожалуйста, попробуйте снова.');
+                }
+            })
+            .catch(error => {
+                console.error('Ошибка при создании заявки:', error);
+            });
+        });
+    } else {
+        console.error('Не удалось найти элемент с id generateQrButton.');
+    }
+});

smartsoltech/static/assets/js/verification_status.js

@@ -0,0 +1,37 @@
+// verification-status.js
+
+function checkVerificationStatus(serviceRequestId, interval) {
+    console.log(`Проверка статуса для заявки с ID: ${serviceRequestId}`); // Лог для проверки
+
+    fetch(`/service/request_status/${serviceRequestId}/`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Ошибка при проверке статуса заявки');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.is_verified) {
+                // Закрываем форму и показываем окно подтверждения
+                const serviceModal = document.getElementById('serviceModal');
+                const confirmationModal = document.getElementById('confirmationModal');
+
+                if (serviceModal) {
+                    serviceModal.style.display = 'none';
+                }
+
+                if (confirmationModal) {
+                    confirmationModal.style.display = 'block';
+                }
+
+                // Останавливаем интервал проверки статуса
+                clearInterval(interval);
+            }
+        })
+        .catch(error => {
+            console.error('Ошибка при проверке статуса заявки:', error);
+        });
+}
+
+// Делаем функцию доступной глобально
+window.checkVerificationStatus = checkVerificationStatus;