trevor/smartsoltech_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main funtions are ready

Browse Source 
issue: ServiceRequest creates when QR code scanned
This commit is contained in:
trevor
2024-10-14 05:24:48 +09:00
parent ee254ef17f
commit f17c6b3a1a
65 changed files with 1609 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
smartsoltech/web/templates/web/client_orders.html Normal file
View File

@@ -0,0 +1,13 @@
{% extends 'web/base.html' %}
{% block content %}
<h2>Мои заказы</h2>
<ul>
{% for order in orders %}
<li>
<strong>Заказ №{{ order.id }}:</strong> {{ order.service.name }} - Статус: {{ order.get_status_display }}
<a href="{% url 'order_detail' order.pk %}">Подробнее</a>
</li>
{% endfor %}
</ul>
{% endblock %}

29
smartsoltech/web/templates/web/complete_registration.html Normal file
View File

@@ -0,0 +1,29 @@
{% extends 'web/base.html' %}
<!-- web/templates/web/complete_registration_basic.html -->
{% load static %}
{% include 'web/header.html' %}
{% block content %}
<div class="container-fluid">
<h1>Регистрация</h1>
<form method="post">
{% csrf_token %}
<div class="form-group">
<label for="client_name">Имя</label>
<input type="text" id="client_name" name="client_name" required>
</div>
<div class="form-group">
<label for="client_email">Email</label>
<input type="email" id="client_email" name="client_email" required>
</div>
<div class="form-group">
<label for="client_phone">Телефон</label>
<input type="tel" id="client_phone" name="client_phone" required>
</div>
<button type="submit" class="btn btn-primary">Зарегистрироваться</button>
</form>
</div>
<!-- Подключение JavaScript файлов из static -->
<script src="{% static 'assets/js/script.min.js' %}"></script>
{% endblock%}

29
smartsoltech/web/templates/web/complete_registration_basic.html Normal file
View File

@@ -0,0 +1,29 @@
{% extends 'web/base.html' %}
<!-- web/templates/web/complete_registration_basic.html -->
{% load static %}
{% include 'web/header.html' %}
{% block content %}
<div class="container-fluid">
<h1>Регистрация</h1>
<form method="post">
{% csrf_token %}
<div class="form-group">
<label for="client_name">Имя</label>
<input type="text" id="client_name" name="client_name" required>
</div>
<div class="form-group">
<label for="client_email">Email</label>
<input type="email" id="client_email" name="client_email" required>
</div>
<div class="form-group">
<label for="client_phone">Телефон</label>
<input type="tel" id="client_phone" name="client_phone" required>
</div>
<button type="submit" class="btn btn-primary">Зарегистрироваться</button>
</form>
</div>
<!-- Подключение JavaScript файлов из static -->
<script src="{% static 'assets/js/script.min.js' %}"></script>
{% endblock%}

64
smartsoltech/web/templates/web/create_service_request.html Normal file
View File

@@ -0,0 +1,64 @@
<!-- web/templates/web/modal_order_form.html -->
<div id="orderModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Оформление заявки на услугу</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="orderForm" method="post" action="{% url 'create_service_request' service_id=service.pk %}">
{% csrf_token %}
<div class="form-group mb-3">
<label class="form-label">Имя</label>
<input id="client_name" class="form-control" type="text" name="client_name" required minlength="2" maxlength="50" />
</div>
<div class="form-group mb-3">
<label class="form-label">Телефон</label>
<input id="client_phone" class="form-control" type="tel" name="client_phone" required pattern="^\+?[0-9\s\-]{7,15}$" />
</div>
<div class="form-group mb-3">
<label class="form-label">Адрес электронной почты</label>
<input id="client_email" class="form-control" type="email" name="client_email" required />
</div>
<div class="form-group mb-3 text-center">
<label class="form-label">Сканируйте QR код для регистрации в Telegram боте</label>
<div id="qrCodeContainer">
<img src="{{ qr_code }}" alt="QR код для Telegram бота" class="img-fluid" />
</div>
<div class="form-group mt-3">
<a href="{{ registration_link }}" target="_blank">Перейдите по этой ссылке для регистрации в Telegram боте</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="submit" class="btn btn-primary" id="submitButton" disabled>Отправить заявку</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const checkVerificationStatus = () => {
fetch(`/service/request_status/{{ service_request_id }}/`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
if (data.is_verified) {
document.getElementById('submitButton').disabled = false;
}
})
.catch(error => console.error('Ошибка при проверке статуса:', error));
};
setInterval(checkVerificationStatus, 5000);
});
</script>

242
smartsoltech/web/templates/web/modal_order_form.html
View File

@@ -1,36 +1,214 @@
<!-- web/templates/web/modal_order_form.html -->
<div id="orderModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Оформление заявки на услугу</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Модальное окно для заявки на услугу</title>
<style>
/* Стили для модального окна */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#qrCodeImg {
display: block;
margin: 20px auto;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!-- Модальное окно -->
<div id="serviceModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h4>Заполните заявку на услугу</h4>
<p>QR-код для завершения регистрации:</p>
<img id="qrCodeImg" src="" alt="QR Code">
<form id="serviceRequestForm">
<div class="form-group">
<label for="clientName">Ваше имя:</label>
<input type="text" class="form-control" id="clientName" name="client_name" placeholder="Введите ваше имя" required minlength="2" maxlength="50" readonly>
</div>
<div class="modal-body">
<form id="orderForm" method="post" action="{% url 'create_order' pk=service.pk %}">
{% csrf_token %}
<div class="form-group mb-3">
<label class="form-label">Имя</label>
<input id="client_name" class="form-control" type="text" name="client_name" required minlength="2" maxlength="50" />
</div>
<div class="form-group mb-3">
<label class="form-label">Телефон</label>
<input id="client_phone" class="form-control" type="tel" name="client_phone" required pattern="^\+?[0-9\s\-]{7,15}$" />
</div>
<div class="form-group mb-3">
<label class="form-label">Адрес электронной почты</label>
<input id="client_email" class="form-control" type="email" name="client_email" required />
</div>
<div class="form-group mb-3">
<label class="form-label">Описание услуги</label>
<textarea id="message" class="form-control" name="message" rows="4" required minlength="10" maxlength="1000"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="submit" class="btn btn-primary">Отправить заявку</button>
</div>
</form>
<div class="form-group">
<label for="clientChatId">Ваш chat ID:</label>
<input type="text" class="form-control" id="clientChatId" name="client_chat_id" placeholder="Ваш chat ID" readonly>
</div>
</div>
<div class="form-group">
<label for="clientEmail">Ваш email:</label>
<input type="email" class="form-control" id="clientEmail" name="client_email" placeholder="Введите ваш email" required>
</div>
<div class="form-group">
<label for="clientPhone">Ваш телефон:</label>
<input type="text" class="form-control" id="clientPhone" name="client_phone" placeholder="Введите ваш телефон" required pattern="^\+?[0-9\s\-]{7,15}$">
</div>
<div class="form-group">
<label for="description">Описание заявки:</label>
<textarea class="form-control" id="description" name="description" placeholder="Опишите вашу заявку" required></textarea>
</div>
<button type="submit" class="btn btn-success" id="submitButton" disabled>Отправить заявку</button>
</form>
</div>
</div>
<script>
// Обработчик открытия модального окна
document.getElementById('openModalBtn').addEventListener('click', function () {
const serviceId = this.getAttribute('data-service-id');
// Открываем модальное окно
document.getElementById('serviceModal').style.display = 'block';
// Выполняем запрос на генерацию QR-кода
fetch(`/service/generate_qr_code/${serviceId}/`)
.then(response => response.json())
.then(data => {
// Обновляем src изображения QR-кода
document.getElementById('qrCodeImg').src = data.qr_code_url;
// Запуск проверки статуса каждые 5 секунд
const interval = setInterval(() => {
checkVerificationStatus(data.service_request_id, interval);
}, 5000);
})
.catch(error => console.error('Ошибка при генерации QR-кода:', error));
});
// Обработчик закрытия модального окна
document.querySelector('.close').addEventListener('click', function () {
document.getElementById('serviceModal').style.display = 'none';
});
// Обработчик отправки формы
document.getElementById('serviceRequestForm').addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(this);
const serviceId = document.getElementById('openModalBtn').getAttribute('data-service-id');
// Отправка данных формы на сервер
fetch('/service/request/' + serviceId + '/', {
method: 'POST',
body: formData
}).then(response => {
if (response.ok) {
alert('Заявка успешно отправлена!');
document.getElementById('serviceModal').style.display = 'none';
// Отправка сообщения в Telegram
sendTelegramNotification(formData);
} else {
alert('Ошибка при отправке заявки. Пожалуйста, попробуйте снова.');
}
}).catch(error => console.error('Ошибка при отправке данных формы:', error));
});
// Проверка статуса заявки на наличие подтверждения Telegram
const checkVerificationStatus = (serviceRequestId, interval) => {
fetch(`/service/request_status/${serviceRequestId}/`)
.then(response => response.json())
.then(data => {
if (data.is_verified) {
// Заполнение полей формы данными пользователя
document.getElementById('clientName').value = data.client_name;
document.getElementById('clientChatId').value = data.client_chat_id;
// Активируем кнопку отправки, если все поля заполнены
updateButtonState();
// Останавливаем интервал проверки статуса
clearInterval(interval);
}
})
.catch(error => console.error('Ошибка при проверке статуса заявки:', error));
};
// Код для активации кнопки "Отправить" при заполнении всех полей
const clientEmail = document.getElementById('clientEmail');
const clientPhone = document.getElementById('clientPhone');
const clientName = document.getElementById('clientName');
const description = document.getElementById('description');
const clientChatId = document.getElementById('clientChatId');
const submitButton = document.getElementById('submitButton');
const updateButtonState = () => {
if (clientEmail.value && clientPhone.value && clientName.value && description.value && clientChatId.value) {
submitButton.disabled = false;
} else {
submitButton.disabled = true;
}
};
// Привязка событий к полям для обновления состояния кнопки отправки
clientEmail.addEventListener('input', updateButtonState);
clientPhone.addEventListener('input', updateButtonState);
description.addEventListener('input', updateButtonState);
// Удаление placeholder при установке фокуса на поле
document.querySelectorAll('input, textarea').forEach(field => {
field.addEventListener('focus', function () {
this.dataset.placeholder = this.placeholder;
this.placeholder = '';
});
field.addEventListener('blur', function () {
this.placeholder = this.dataset.placeholder;
});
});
// Функция для отправки уведомления в Telegram
const sendTelegramNotification = (formData) => {
const clientName = formData.get('client_name');
const serviceDescription = formData.get('description');
const chatId = formData.get('client_chat_id');
const message = `Здравствуйте, ${clientName}! Ваша заявка успешно зарегистрирована. Детали: ${serviceDescription}`;
fetch('/service/send_telegram_notification/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ chat_id: chatId, message: message })
}).then(response => {
if (response.ok) {
console.log('Уведомление успешно отправлено в Telegram');
} else {
console.error('Ошибка при отправке уведомления в Telegram');
}
}).catch(error => console.error('Ошибка при отправке уведомления в Telegram:', error));
};
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

161
smartsoltech/web/templates/web/modal_order_form_old.html Normal file
View File

@@ -0,0 +1,161 @@
<!-- web/templates/web/modal_order_form.html -->
<div id="orderModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Оформление заявки на услугу</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="orderForm" method="post" action="{% url 'create_service_request' service_id=service.pk %}">
{% csrf_token %}
<div class="form-group mb-3">
<label class="form-label">Имя</label>
<input id="client_name" class="form-control" type="text" name="client_name" required minlength="2" maxlength="50" />
</div>
<div class="form-group mb-3">
<label class="form-label">Телефон</label>
<input id="client_phone" class="form-control" type="tel" name="client_phone" required pattern="^\+?[0-9\s\-]{7,15}$" />
</div>
<div class="form-group mb-3">
<label class="form-label">Адрес электронной почты</label>
<input id="client_email" class="form-control" type="email" name="client_email" required />
</div>
<div class="form-group mb-3 text-center">
<label class="form-label">Сканируйте QR код для регистрации в Telegram боте</label>
<div id="qrCodeContainer">
<img id="qrCodeImage" src="{{ qr_code_url }}" alt="QR код для Telegram бота" class="img-fluid" style="max-width: 150px;" />
</div>
<div class="form-group mt-3">
<a id="registrationLink" href="#" target="_blank">Перейдите по этой ссылке для регистрации в Telegram боте</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="submit" class="btn btn-primary" id="submitButton" disabled>Отправить заявку</button>
</div>
</form>
{% comment %} <div id="diagnostic_info" class="mt-3">
<form id="registrationForm">
<h3>Диагностическая информация</h3>
<div class="form-group mb-3">
<label for="registrationLinkField" class="form-label">Ссылка для регистрации в Telegram боте:</label>
<input type="text" id="registrationLinkField" class="form-control" readonly />
</div>
<div class="form-group mb-3">
<label for="requestIdField" class="form-label">Номер заявки:</label>
<input type="text" id="requestIdField" class="form-control" readonly />
</div>
</form>
</div> {% endcomment %}
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('registrationForm');
const submitButton = document.getElementById('submitButton');
const qrCodeImage = document.getElementById('qrCodeImage');
const registrationLink = document.getElementById('registrationLink');
let serviceId = "{{ service.pk }}"; // Получаем значение serviceId из шаблона
// Генерация QR-кода при открытии формы
fetch(`/service/generate_qr_code/${serviceId}/`)
.then(response => response.json())
.then(data => {
qrCodeImage.src = data.qr_code_url;
registrationLink.href = data.registration_link;
// Извлекаем номер заявки из ссылки на регистрацию
const requestMatch = data.registration_link.match(/request_(\d+)_token/);
if (requestMatch) {
serviceId = requestMatch[1];
}
// Отображение диагностической информации на форме
//document.getElementById('registrationLinkField').value = data.registration_link;
//document.getElementById('requestIdField').value = serviceId;
// Запуск проверки статуса каждые 5 секунд
const interval = setInterval(() => {
checkVerificationStatus(serviceId, interval);
}, 5000);
})
.catch(error => console.error('Ошибка при генерации QR-кода:', error));
const checkVerificationStatus = (serviceId, interval) => {
fetch(`/service/request_status/${serviceId}/`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
if (data.is_verified) {
// Заполнение полей формы данными пользователя
document.getElementById('client_name').value = data.client_name;
document.getElementById('client_email').value = data.client_email;
document.getElementById('client_phone').value = data.client_phone;
// Активируем кнопку отправки, если поля заполнены
updateButtonState();
// Останавливаем интервал проверки статуса
clearInterval(interval);
}
})
.catch(error => console.error('Ошибка при проверке статуса:', error));
};
// Обработчик кнопки отправки формы
submitButton.addEventListener('click', function () {
if (submitButton.disabled) {
return;
}
// Проверка наличия данных в таблице ServiceRequest перед отправкой формы
fetch(`/service/check_service_request_data/?request_id=${serviceId}`)
.then(response => response.json())
.then(data => {
if (data.exists) {
// Обратная связь пользователю
alert('Заявка уже существует. Данные будут обновлены.');
// Заполнение формы данными из заявки
document.getElementById('client_name').value = data.client_name;
document.getElementById('client_email').value = data.client_email;
document.getElementById('client_phone').value = data.client_phone;
// Отправка формы
form.submit();
} else {
// Если данных нет, отправляем форму как новую заявку
form.submit();
}
})
.catch(error => {
console.error('Ошибка при проверке данных заявки:', error);
alert('Произошла ошибка при проверке данных. Пожалуйста, попробуйте еще раз.');
});
});
// Код для активации кнопки "Отправить" при заполнении полей телефона и email
const clientEmail = document.getElementById('client_email');
const clientPhone = document.getElementById('client_phone');
const updateButtonState = () => {
if (clientEmail.value && clientPhone.value) {
submitButton.disabled = false;
} else {
submitButton.disabled = true;
}
};
// Привязка событий к полям email и телефона
clientEmail.addEventListener('input', updateButtonState);
clientPhone.addEventListener('input', updateButtonState);
});
</script>

14
smartsoltech/web/templates/web/order_detail.html Normal file
View File

@@ -0,0 +1,14 @@
{% extends 'web/base.html' %}
{% block content %}
<h2>Детали заказа</h2>
<p><strong>Номер заказа:</strong> {{ order.id }}</p>
<p><strong>Услуга:</strong> {{ order.service.name }}</p>
<p><strong>Клиент:</strong> {{ order.client.first_name }} {{ order.client.last_name }}</p>
<p><strong>Сообщение:</strong> {{ order.message }}</p>
<p><strong>Статус:</strong> {{ order.get_status_display }}</p>
<p><strong>Дата создания:</strong> {{ order.order_date }}</p>
<a href="{% url 'home' %}">Вернуться на главную</a>
{% endblock %}

6
smartsoltech/web/templates/web/service_detail.html
View File

@@ -14,7 +14,11 @@
<div style="max-width: 350px;">
<h2 class="text-uppercase fw-bold">{{ service.name }}<br /></h2>
<p class="my-3">{{ service.description }}</p>
<a class="btn btn-primary btn-lg me-2" role="button" href="#" data-bs-toggle="modal" data-bs-target="#orderModal">Order Service</a>
<button id="orderButton" data-service-id="{{ service.pk }}" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#orderModal">Заказать услугу</button>
<!-- Кнопка открытия модального окна -->
<button id="openModalBtn" class="btn btn-primary" data-service-id="{{ service.id }}">Открыть заявку на услугу</button>
</div>
</div>
</div>

10
smartsoltech/web/templates/web/service_request_success.html Normal file
View File

@@ -0,0 +1,10 @@
{% extends 'web/base.html' %}
{% block content %}
<div class="container mt-4">
<h2>Заявка успешно создана</h2>
<p>Спасибо, ваша заявка на услугу "{{ service_request.service.name }}" успешно создана.</p>
<p>Вы также можете перейти к своему заказу ниже:</p>
<a href="{% url 'order_detail' order.pk %}" class="btn btn-primary">Перейти к заказу</a>
</div>
{% endblock %}