<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WhatsMasterGRM - Принудительное обновление базы</title> <link rel="stylesheet" href="styles.css"> <!-- Подключение стилей Notyf --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css"> <!-- Подключение скрипта Notyf --> <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script> </head> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 0; } h1 { background-color: #4CAF50; color: white; padding: 20px; margin: 0; border-bottom: 2px solid #388E3C; font-size: 28px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .container { display: flex; justify-content: space-around; margin-top: 20px; } .block { width: 45%; text-align: center; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .form-group { margin: 20px 0; } .form-group label { display: block; margin-bottom: 8px; font-size: 16px; } .form-group input, .form-group select { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } button { display: block; margin: 20px auto; color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 12px 24px; font-size: 16px; border-radius: 5px; transition: background-color 0.3s ease; } button:hover { background-color: #388E3C; } .input-row { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .input-row input[type="file"] { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } .input-row input[type="checkbox"] { margin-top: 5px; } .input-row label { display: flex; align-items: center; color: #000000; font-size: 16px; } #uploadButton { color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 10px 20px; font-size: 16px; border-radius: 5px; margin-top: 20px; display: block; margin-left: auto; margin-right: auto; } #uploadButton:hover { background-color: #388E3C; } .block h2 { text-align: center; } /* Custom Checkbox Styles */ .container-checkbox { color: #000000; display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .container-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container-checkbox:hover input ~ .checkmark { background-color: #ccc; } .container-checkbox input:checked ~ .checkmark { background-color: #4CAF50; } .checkmark:after { content: ""; position: absolute; display: none; } .container-checkbox input:checked ~ .checkmark:after { display: block; } .container-checkbox .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } input[type="date"] { background-color: #4CAF50; color: white; padding: 12px; font-size: 16px; border: none; border-radius: 5px; width: 100%; box-sizing: border-box; } ::-webkit-calendar-picker-indicator { background-color: white; padding: 5px; cursor: pointer; border-radius: 3px; } #dropdown { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; margin-bottom: 20px; } #uploadButtonJson { color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 10px 20px; font-size: 16px; border-radius: 5px; margin-top: 20px; display: block; margin-left: auto; margin-right: auto; } #uploadButtonJson:hover { background-color: #388E3C; } .block form#uploadFormJson { margin-top: 20px; } .block form#uploadFormJson label { display: flex; align-items: center; margin-bottom: 10px; font-size: 16px; color: #000000; } .block form#uploadFormJson input[type="file"] { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; margin-right: 10px; } #message { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; color: #4CAF50; text-align: center; } </style> <body> <h1>WhatsMasterGRM - Принудительное обновление базы</h1> <div class="container"> <div class="block"> <h2>Тильда - Таблица CSV</h2> <form id="uploadForm" enctype="multipart/form-data" method="post"> <div class="input-row"> <input type="file" name="file" accept=".csv"> </div> <div class="input-row"> <label class="container-checkbox"> Наличие WhatsApp <input type="checkbox" name="verify_phone" value="1"> <span class="checkmark"></span> </label> <label class="container-checkbox"> Добавлять менеджера <input type="checkbox" name="add_curator" value="1"> <span class="checkmark"></span> </label> </div> <input id="uploadButton" type="submit" value="Загрузить пользователей"> </form> <div id="result"></div> <h2>WhatsMasterCRM - Файл JSON</h2> <form id="uploadFormJson" onsubmit="handleFormSubmit(event)" enctype="multipart/form-data"> <div class="input-row"> <input type="file" id="fileJson" name="file" accept=".json" required> </div> <input id="uploadButtonJson" type="submit" value="Upload"> </form> <div id="message" style="display:none; margin-top:20px;"></div> </div> <div class="block"> <h2>Бизон 365 - API</h2> <div class="form-group"> <label for="tokenInput">API-токен администратора Бизон 365:</label> <input type="text" id="tokenInput" placeholder="Введите токен"> </div> <div class="form-group"> <label for="dateInput">Крайняя дата выборки комнат:</label> <input type="date" id="dateInput"> </div> <div class="form-group"> <label for="typeSelect">Выбор формата вебинара:</label> <select id="typeSelect"> <option value="AutoWebinars">Автовебинарные комнаты</option> <option value="LiveWebinars">Вебинарные комнаты</option> </select> </div> <button id="sendRequestButton">Получить список комнат Бизон 365</button> <div id="dropdown-container"></div> <button id="sendGetRequestButton">Обновить базу WhatsMasterGRM</button> </div> </div> <script> document.getElementById('uploadForm').addEventListener('submit', function(event) { event.preventDefault(); const form = new FormData(this); fetch('/upload_csv', { method: 'POST', body: form }) .then(response => response.json()) .then(data => { showNotification('Загрузка завершена'); }) .catch(error => { console.error('Error:', error); showNotification('Произошла ошибка при загрузке файла.', true); }); }); document.getElementById('uploadFormJson').addEventListener('submit', function(event) { event.preventDefault(); var formData = new FormData(event.target); fetch('/upload_json', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { showNotification(data.message || 'Файл успешно загружен'); }) .catch(error => { showNotification("Произошла ошибка: " + error, true); }); }); document.getElementById('sendRequestButton').addEventListener('click', function() { const token = document.getElementById('tokenInput').value; const minDate = document.getElementById('dateInput').value; const type = document.getElementById('typeSelect').value; const url = '/send_request'; fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'token=' + encodeURIComponent(token) + '&minDate=' + encodeURIComponent(minDate) + '&type=' + encodeURIComponent(type) }) .then(response => response.json()) .then(data => { createDropdown(data); showNotification('Список комнат успешно получен'); }) .catch(error => { console.error('Error:', error); showNotification('Произошла ошибка при получении списка комнат.', true); }); }); function createDropdown(data) { const container = document.getElementById('dropdown-container'); container.innerHTML = ''; const select = document.createElement('select'); select.id = 'dropdown'; select.classList.add('form-group'); data.forEach(item => { const option = document.createElement('option'); option.value = item; option.text = item; select.appendChild(option); }); container.appendChild(select); const sendGetRequestButton = document.getElementById('sendGetRequestButton'); sendGetRequestButton.removeEventListener('click', handleGetRequest); sendGetRequestButton.addEventListener('click', handleGetRequest); } function handleGetRequest() { const selectedValue = document.getElementById('dropdown').value; const token = document.getElementById('tokenInput').value; const getUrl = '/send_get_request?token=' + encodeURIComponent(token) + '&webinarId=' + encodeURIComponent(selectedValue); fetch(getUrl, { method: 'GET' }) .then(response => response.json()) .then(data => { showNotification('Пользователи добавлены в базу данных WhatsGRM'); }) .catch(error => { console.error('Error:', error); showNotification('Произошла ошибка при обновлении базы.', true); }); } function showNotification(message, isError = false) { const notyf = new Notyf({ duration: 5000, position: { x: 'right', y: 'top', }, types: [ { type: 'success', background: 'green', icon: { className: 'notyf__icon--success', tagName: 'span', text: '' } }, { type: 'error', background: 'red', icon: { className: 'notyf__icon--error', tagName: 'span', text: '' } } ] }); if (isError) { notyf.open({ type: 'error', message: message }); } else { notyf.open({ type: 'success', message: message }); } } </script> </body> </html>