psy2

Sleeping

App Files Files Community

DmitrMakeev commited on Jul 24, 2024

Commit

decdc1a

•

1 Parent(s): 419103f

Update biz_v.html

Browse files

Files changed (1) hide show

biz_v.html +158 -69

biz_v.html CHANGED Viewed

@@ -124,66 +124,14 @@ button:hover {
     text-align: center;
 }
-/* Custom Checkbox Styles */
-.container-checkbox {
-    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);
-}
     </style>
 </head>
 <body>
@@ -197,15 +145,11 @@ button:hover {
                     <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="Загрузить пользователей">
@@ -241,6 +185,14 @@ button:hover {
         </div>
     </div>
     <!-- Подключение скрипта Notyf -->
     <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>
     <script>
@@ -288,9 +240,7 @@ button:hover {
                 });
             });
         });
-    </script>
-    <script>
         const notyf = new Notyf({
             duration: 5000,
             position: {
@@ -306,6 +256,10 @@ button:hover {
             const minDate = document.getElementById('dateSelect').value;
             const type = document.getElementById('typeSelect').value;
             const url = '/send_request';
             fetch(url, {
                 method: 'POST',
                 headers: {
@@ -317,10 +271,16 @@ button:hover {
             .then(data => {
                 console.log('JSON Response:', data);
                 createDropdown(data);
             })
             .catch(error => {
                 console.error('Error:', error);
                 notyf.error('Error: ' + error.message);
             })
             .finally(() => {
                 requestButtonClicked = false;
@@ -360,6 +320,135 @@ button:hover {
                 notyf.error('Error: ' + error.message);
             });
         }
     </script>
 </body>
-</html>

     text-align: center;
 }
+/* Стили для спиннера */
+#spinner {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     display: none;
 }
     </style>
 </head>
 <body>
                     <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="Загрузить пользователей">
         </div>
     </div>
+    <!-- Спиннер -->
+    <div id="spinner">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 115 115">
+            <path fill="none" stroke="rgba(0, 0, 0, 0.05)" stroke-width="3" d="M 85 85 C -5 16 -39 127 78 30 C 126 -9 57 -16 85 85 C 94 123 124 111 85 85 Z" />
+            <path id="el" fill="none" stroke-dasharray="60 310" stroke-dashoffset="445" stroke-linecap="round" stroke-width="3" d="M 85 85 C -5 16 -39 127 78 30 C 126 -9 57 -16 85 85 C 94 123 124 111 85 85 Z" />
+        </svg>
+    </div>
     <!-- Подключение скрипта Notyf -->
     <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>
     <script>
                 });
             });
         });
         const notyf = new Notyf({
             duration: 5000,
             position: {
             const minDate = document.getElementById('dateSelect').value;
             const type = document.getElementById('typeSelect').value;
             const url = '/send_request';
+            // Показать спиннер
+            document.getElementById('spinner').style.display = 'block';
             fetch(url, {
                 method: 'POST',
                 headers: {
             .then(data => {
                 console.log('JSON Response:', data);
                 createDropdown(data);
+                // Скрыть спиннер
+                document.getElementById('spinner').style.display = 'none';
             })
             .catch(error => {
                 console.error('Error:', error);
                 notyf.error('Error: ' + error.message);
+                // Скрыть спиннер
+                document.getElementById('spinner').style.display = 'none';
             })
             .finally(() => {
                 requestButtonClicked = false;
                 notyf.error('Error: ' + error.message);
             });
         }
+        // JavaScript для спиннера
+        const colorTable = [
+            // ease in
+            [0.0, 0xf15a31],
+            [0.2, 0xffd31b],
+            [0.33, 0xa6ce42],
+            [0.4, 0x007ac1],
+            [0.45, 0x007ac1],
+            // ease out
+            [0.55, 0x007ac1],
+            [0.6, 0x007ac1],
+            [0.67, 0xa6ce42],
+            [0.8, 0xffd31b],
+            [1.0, 0xf15a31]
+        ];
+        function lerp(x, x0, x1, y0, y1) {
+            const t = (x - x0) / (x1 - x0);
+            return y0 + t * (y1 - y0);
+        }
+        function lerpStroke(t) {
+            return lerpTable(1, t, colorTable, false, lerpColor);
+        }
+        function lerpOffset(min, max, t) {
+            return (max - min) * t + min;
+        }
+        function lerpColor(x, x0, x1, y0, y1) {
+            const b0 = y0 & 0xff;
+            const g0 = (y0 & 0xff00) >> 8;
+            const r0 = (y0 & 0xff0000) >> 16;
+            const b1 = y1 & 0xff;
+            const g1 = (y1 & 0xff00) >> 8;
+            const r1 = (y1 & 0xff0000) >> 16;
+            const r = Math.floor(lerp(x, x0, x1, r0, r1));
+            const g = Math.floor(lerp(x, x0, x1, g0, g1));
+            const b = Math.floor(lerp(x, x0, x1, b0, b1));
+            return "#" + ((r << 16) | ( return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");
+        }
+        function lerpTable(vIndex, tValue, table, canExtrapolate, lerpFunc = lerp) {
+            const rowCount = table.length;
+            for (let i = 0; i < rowCount; ++i) {
+                const a = table[i][0];
+                if (i === 0 && tValue < a) {
+                    if (canExtrapolate) {
+                        return lerpFunc(
+                            tValue,
+                            a,
+                            table[i + 1][0],
+                            table[i][vIndex],
+                            table[i + 1][vIndex]
+                        );
+                    }
+                    return table[i][vIndex];
+                }
+                if (i === rowCount - 1 && tValue >= a) {
+                    if (canExtrapolate) {
+                        return lerpFunc(
+                            tValue,
+                            table[i - 1][0],
+                            a,
+                            table[i - 1][vIndex],
+                            table[i][vIndex]
+                        );
+                    }
+                    return table[i][vIndex];
+                }
+                if (tValue >= a && tValue <= table[i + 1][0]) {
+                    return lerpFunc(
+                        tValue,
+                        a,
+                        table[i + 1][0],
+                        table[i][vIndex],
+                        table[i + 1][vIndex]
+                    );
+                }
+            }
+            return 0;
+        }
+        const el = document.getElementById("el");
+        const speed = 2;
+        const speedDashoffset = 7600 / speed;
+        const speedStroke = 6000 / speed;
+        const pathWidth = 372;
+        let startTime;
+        let animationFrameId;
+        const tick = (now) => {
+            const dtOffset = ((now - startTime) % speedDashoffset) / speedDashoffset;
+            const dtStroke = ((now - startTime) % speedStroke) / speedStroke;
+            const stroke = lerpStroke(dtStroke);
+            const offset = lerpOffset(pathWidth / 2, -pathWidth / 2, dtOffset);
+            el.style.cssText = `stroke-dashoffset: ${offset}; stroke: ${stroke};`;
+            animationFrameId = requestAnimationFrame(tick);
+        };
+        document.getElementById('sendRequestButton').addEventListener('click', function() {
+            // Показать спиннер и начать анимацию
+            document.getElementById('spinner').style.display = 'block';
+            startTime = performance.now();
+            tick(startTime);
+            // Ваш существующий код для отправки запроса
+            // ...
+            // Пример завершения запроса (замените на ваш реальный код)
+            setTimeout(() => {
+                // Скрыть спиннер и остановить анимацию
+                document.getElementById('spinner').style.display = 'none';
+                cancelAnimationFrame(animationFrameId);
+            }, 3000); // Имитация задержки в 3 секунды
+        });
     </script>
 </body>
+</html>