psy3

Sleeping

File size: 10,205 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Request</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">
    <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: left;
    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: #4CAF50;
    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;
}
/* Стили для выпадающего списка */
#dropdown-container select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: white;
    appearance: none; /* Убираем стандартные стили браузера */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
/* Центрирование заголовков блоков */
.block h2 {
    text-align: center;
}
    </style>
</head>
<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>
                        <input type="checkbox" name="verify_phone" value="1"> Наличие WhatsApp
                    </label>
                    <label>
                        <input type="checkbox" name="add_curator" value="1"> Добавлять менеджера
                    </label>
                </div>
                <input id="uploadButton" type="submit" value="Загрузить пользователей">
            </form>
            <div id="result"></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="dateSelect">Выбор даты:</label>
                <select id="dateSelect">
                    <option value="2021-01-01T00:00:00">2021-01-01</option>
                    <option value="2022-01-01T00:00:00">2022-01-01</option>
                    <option value="2023-01-01T00:00:00">2023-01-01</option>
                    <option value="2024-01-01T00:00:00">2024-01-01</option>
                </select>
            </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">Обновить базу пользователей WhatCRM</button>
        </div>
    </div>

    <!-- Подключение скрипта Notyf -->
    <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>
    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const form = new FormData(this);
            const notyf = new Notyf({
                duration: 5000,
                position: {
                    x: 'right',
                    y: 'top'
                },
                types: [
                    {
                        type: 'info',
                        background: 'green',
                        icon: {
                            className: 'notyf__icon--info',
                            tagName: 'span',
                            text: ''
                        }
                    }
                ]
            });
            notyf.open({
                type: 'info',
                message: 'Загрузка началась, пожалуйста, подождите'
            });
            fetch('/upload_csv', {
                method: 'POST',
                body: form
            })
            .then(response => response.json())
            .then(data => {
                notyf.open({
                    type: 'success',
                    message: data.message
                });
            })
            .catch(error => {
                console.error('Error:', error);
                notyf.open({
                    type: 'error',
                    message: 'An error occurred while uploading the file.'
                });
            });
        });
    </script>

    <script>
        const notyf = new Notyf({
            duration: 5000,
            position: {
                x: 'right',
                y: 'top',
            },
        });
        let requestButtonClicked = false;
        document.getElementById('sendRequestButton').addEventListener('click', function() {
            if (requestButtonClicked) return;
            requestButtonClicked = true;
            const token = document.getElementById('tokenInput').value;
            const minDate = document.getElementById('dateSelect').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 => {
                console.log('JSON Response:', data);
                createDropdown(data);
            })
            .catch(error => {
                console.error('Error:', error);
                notyf.error('Error: ' + error.message);
            })
            .finally(() => {
                requestButtonClicked = false;
            });
        });
        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 => {
                console.log('GET Response:', data);
                notyf.success('Пользователи добавлены в базу данных WhatsGRM');
            })
            .catch(error => {
                console.error('Error:', error);
                notyf.error('Error: ' + error.message);
            });
        }
    </script>
</body>
</html>