psy4 / biz_v.html
DmitrMakeev's picture
Update biz_v.html
acad0d5 verified
raw
history blame
14.2 kB
<!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>