psy2

Sleeping

File size: 13,130 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);
        }
        .form-group {
            margin: 20px auto;
            width: 100%;
            max-width: 400px; /* Устанавливаем максимальную ширину */
            text-align: left;
        }
        .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;
            margin-bottom: 20px;
        }
        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;
        }
        #dropdown-container {
            margin-top: 20px;
        }
        #dropdown-container select {
            width: 100%; /* Устанавливаем ширину выпадающего списка */
            padding: 12px; /* Увеличиваем внутренний отступ */
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }
    </style>



    <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;
        }
        .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;
        }
        #uploadButton:hover {
            background-color: #388E3C;
        }
        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #4CAF50; /* Зелёный цвет */
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite; /* Safari */
            animation: spin 2s linear infinite;
            display: none; /* Изначально скрыт */
            position: fixed; /* Фиксированное положение */
            top: 50%; /* По центру по вертикали */
            left: 50%; /* По центру по горизонтали */
            transform: translate(-50%, -50%); /* Центрирование */
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>











  
</head>
<body>
    <h1>WhatsGRM - Принудительное обновление базы данных с Бизон 365</h1>

    <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>













   <h1>Upload CSV File</h1>
    <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"> Verify Phone
            </label>
            <label>
                <input type="checkbox" name="add_curator" value="1"> Add Curator
            </label>
        </div>
        <input id="uploadButton" type="submit" value="Upload">
    </form>
    <div id="result"></div>
    <div class="loader"></div>

   <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 loader = document.querySelector('.loader');
            loader.style.display = 'block'; // Показываем спиннер

            fetch('/upload_csv', {
                method: 'POST',
                body: form
            })
            .then(response => response.json())
            .then(data => {
                loader.style.display = 'none'; // Скрываем спиннер после завершения
                const notyf = new Notyf({
                    duration: 5000, // Длительность показа уведомления
                    position: {
                        x: 'right',
                        y: 'bottom'
                    },
                    types: [
                        {
                            type: 'success',
                            background: 'green',
                            icon: {
                                className: 'notyf__icon--success',
                                tagName: 'span',
                                text: ''
                            }
                        }
                    ]
                });
                notyf.success(data.message); // Показываем уведомление с сообщением от сервера
            })
            .catch(error => {
                console.error('Error:', error);
                loader.style.display = 'none'; // Скрываем спиннер в случае ошибки
                const notyf = new Notyf({
                    duration: 5000, // Длительность показа уведомления
                    position: {
                        x: 'right',
                        y: 'bottom'
                    },
                    types: [
                        {
                            type: 'error',
                            background: 'red',
                            icon: {
                                className: 'notyf__icon--error',
                                tagName: 'span',
                                text: ''
                            }
                        }
                    ]
                });
                notyf.error('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>