DmitrMakeev
commited on
Commit
•
1ef8582
1
Parent(s):
decdc1a
Update biz_v.html
Browse files- biz_v.html +227 -227
biz_v.html
CHANGED
@@ -194,211 +194,186 @@ button:hover {
|
|
194 |
</div>
|
195 |
|
196 |
<!-- Подключение скрипта Notyf -->
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
const notyf = new Notyf({
|
203 |
-
duration: 5000,
|
204 |
-
position: {
|
205 |
-
x: 'right',
|
206 |
-
y: 'top'
|
207 |
-
},
|
208 |
-
types: [
|
209 |
-
{
|
210 |
-
type: 'info',
|
211 |
-
background: 'green',
|
212 |
-
icon: {
|
213 |
-
className: 'notyf__icon--info',
|
214 |
-
tagName: 'span',
|
215 |
-
text: ''
|
216 |
-
}
|
217 |
-
}
|
218 |
-
]
|
219 |
-
});
|
220 |
-
notyf.open({
|
221 |
-
type: 'info',
|
222 |
-
message: 'Загрузка началась, пожалуйста, подождите'
|
223 |
-
});
|
224 |
-
fetch('/upload_csv', {
|
225 |
-
method: 'POST',
|
226 |
-
body: form
|
227 |
-
})
|
228 |
-
.then(response => response.json())
|
229 |
-
.then(data => {
|
230 |
-
notyf.open({
|
231 |
-
type: 'success',
|
232 |
-
message: data.message
|
233 |
-
});
|
234 |
-
})
|
235 |
-
.catch(error => {
|
236 |
-
console.error('Error:', error);
|
237 |
-
notyf.open({
|
238 |
-
type: 'error',
|
239 |
-
message: 'An error occurred while uploading the file.'
|
240 |
-
});
|
241 |
-
});
|
242 |
-
});
|
243 |
-
|
244 |
const notyf = new Notyf({
|
245 |
duration: 5000,
|
246 |
position: {
|
247 |
x: 'right',
|
248 |
-
y: 'top'
|
249 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
250 |
});
|
251 |
-
|
252 |
-
|
253 |
-
|
254 |
-
requestButtonClicked = true;
|
255 |
-
const token = document.getElementById('tokenInput').value;
|
256 |
-
const minDate = document.getElementById('dateSelect').value;
|
257 |
-
const type = document.getElementById('typeSelect').value;
|
258 |
-
const url = '/send_request';
|
259 |
-
|
260 |
-
// Показать спиннер
|
261 |
-
document.getElementById('spinner').style.display = 'block';
|
262 |
-
|
263 |
-
fetch(url, {
|
264 |
-
method: 'POST',
|
265 |
-
headers: {
|
266 |
-
'Content-Type': 'application/x-www-form-urlencoded'
|
267 |
-
},
|
268 |
-
body: 'token=' + encodeURIComponent(token) + '&minDate=' + encodeURIComponent(minDate) + '&type=' + encodeURIComponent(type)
|
269 |
-
})
|
270 |
-
.then(response => response.json())
|
271 |
-
.then(data => {
|
272 |
-
console.log('JSON Response:', data);
|
273 |
-
createDropdown(data);
|
274 |
-
|
275 |
-
// Скрыть спиннер
|
276 |
-
document.getElementById('spinner').style.display = 'none';
|
277 |
-
})
|
278 |
-
.catch(error => {
|
279 |
-
console.error('Error:', error);
|
280 |
-
notyf.error('Error: ' + error.message);
|
281 |
-
|
282 |
-
// Скрыть спиннер
|
283 |
-
document.getElementById('spinner').style.display = 'none';
|
284 |
-
})
|
285 |
-
.finally(() => {
|
286 |
-
requestButtonClicked = false;
|
287 |
-
});
|
288 |
});
|
289 |
-
|
290 |
-
|
291 |
-
|
292 |
-
|
293 |
-
|
294 |
-
|
295 |
-
|
296 |
-
|
297 |
-
|
298 |
-
option.text = item;
|
299 |
-
select.appendChild(option);
|
300 |
});
|
301 |
-
|
302 |
-
|
303 |
-
|
304 |
-
|
305 |
-
|
306 |
-
|
307 |
-
const selectedValue = document.getElementById('dropdown').value;
|
308 |
-
const token = document.getElementById('tokenInput').value;
|
309 |
-
const getUrl = '/send_get_request?token=' + encodeURIComponent(token) + '&webinarId=' + encodeURIComponent(selectedValue);
|
310 |
-
fetch(getUrl, {
|
311 |
-
method: 'GET'
|
312 |
-
})
|
313 |
-
.then(response => response.json())
|
314 |
-
.then(data => {
|
315 |
-
console.log('GET Response:', data);
|
316 |
-
notyf.success('Пользователи добавлены в базу данных WhatsGRM');
|
317 |
-
})
|
318 |
-
.catch(error => {
|
319 |
-
console.error('Error:', error);
|
320 |
-
notyf.error('Error: ' + error.message);
|
321 |
});
|
322 |
-
}
|
323 |
-
|
324 |
-
|
325 |
-
|
326 |
-
|
327 |
-
|
328 |
-
|
329 |
-
|
330 |
-
|
331 |
-
|
332 |
-
|
333 |
-
|
334 |
-
|
335 |
-
|
336 |
-
|
337 |
-
|
338 |
-
|
339 |
-
|
340 |
-
|
341 |
-
|
342 |
-
|
343 |
-
|
344 |
-
|
345 |
-
|
346 |
-
|
347 |
-
|
348 |
-
|
349 |
-
|
350 |
-
|
351 |
-
|
352 |
-
|
353 |
-
|
354 |
-
|
355 |
-
|
356 |
-
|
357 |
-
|
358 |
-
|
359 |
-
|
360 |
-
|
361 |
-
|
362 |
-
|
363 |
-
|
364 |
-
|
365 |
-
|
366 |
-
|
367 |
-
|
368 |
-
|
369 |
-
|
370 |
-
|
371 |
-
|
372 |
-
|
373 |
-
|
374 |
-
|
375 |
-
|
376 |
-
|
377 |
-
|
378 |
-
|
379 |
-
|
380 |
-
|
381 |
-
|
382 |
-
|
383 |
-
|
384 |
-
|
385 |
-
|
386 |
-
|
387 |
-
|
388 |
-
|
389 |
-
|
390 |
-
|
391 |
-
|
392 |
-
|
393 |
-
|
394 |
-
|
395 |
-
|
396 |
-
|
397 |
-
|
398 |
-
|
399 |
-
|
400 |
-
|
401 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
402 |
return lerpFunc(
|
403 |
tValue,
|
404 |
a,
|
@@ -407,48 +382,73 @@ button:hover {
|
|
407 |
table[i + 1][vIndex]
|
408 |
);
|
409 |
}
|
|
|
410 |
}
|
411 |
|
412 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
413 |
}
|
414 |
|
415 |
-
|
|
|
416 |
|
417 |
-
|
418 |
-
const speedDashoffset = 7600 / speed;
|
419 |
-
const speedStroke = 6000 / speed;
|
420 |
-
const pathWidth = 372;
|
421 |
-
let startTime;
|
422 |
-
let animationFrameId;
|
423 |
|
424 |
-
|
425 |
-
|
426 |
-
|
|
|
|
|
|
|
427 |
|
428 |
-
|
429 |
-
|
|
|
430 |
|
431 |
-
|
|
|
432 |
|
433 |
-
|
434 |
-
};
|
435 |
|
436 |
-
|
437 |
-
|
438 |
-
document.getElementById('spinner').style.display = 'block';
|
439 |
-
startTime = performance.now();
|
440 |
-
tick(startTime);
|
441 |
|
442 |
-
|
443 |
-
|
|
|
|
|
|
|
444 |
|
445 |
-
|
446 |
-
|
447 |
-
|
448 |
-
|
449 |
-
|
450 |
-
|
451 |
-
|
452 |
-
|
|
|
|
|
|
|
453 |
</body>
|
454 |
</html>
|
|
|
194 |
</div>
|
195 |
|
196 |
<!-- Подключение скрипта Notyf -->
|
197 |
+
<script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>
|
198 |
+
<script>
|
199 |
+
document.getElementById('uploadForm').addEventListener('submit', function(event) {
|
200 |
+
event.preventDefault();
|
201 |
+
const form = new FormData(this);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
202 |
const notyf = new Notyf({
|
203 |
duration: 5000,
|
204 |
position: {
|
205 |
x: 'right',
|
206 |
+
y: 'top'
|
207 |
},
|
208 |
+
types: [
|
209 |
+
{
|
210 |
+
type: 'info',
|
211 |
+
background: 'green',
|
212 |
+
icon: {
|
213 |
+
className: 'notyf__icon--info',
|
214 |
+
tagName: 'span',
|
215 |
+
text: ''
|
216 |
+
}
|
217 |
+
}
|
218 |
+
]
|
219 |
});
|
220 |
+
notyf.open({
|
221 |
+
type: 'info',
|
222 |
+
message: 'Загрузка началась, пожалуйста, подождите'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
223 |
});
|
224 |
+
fetch('/upload_csv', {
|
225 |
+
method: 'POST',
|
226 |
+
body: form
|
227 |
+
})
|
228 |
+
.then(response => response.json())
|
229 |
+
.then(data => {
|
230 |
+
notyf.open({
|
231 |
+
type: 'success',
|
232 |
+
message: data.message
|
|
|
|
|
233 |
});
|
234 |
+
})
|
235 |
+
.catch(error => {
|
236 |
+
console.error('Error:', error);
|
237 |
+
notyf.open({
|
238 |
+
type: 'error',
|
239 |
+
message: 'An error occurred while uploading the file.'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
240 |
});
|
241 |
+
});
|
242 |
+
});
|
243 |
+
|
244 |
+
const notyf = new Notyf({
|
245 |
+
duration: 5000,
|
246 |
+
position: {
|
247 |
+
x: 'right',
|
248 |
+
y: 'top',
|
249 |
+
},
|
250 |
+
});
|
251 |
+
let requestButtonClicked = false;
|
252 |
+
document.getElementById('sendRequestButton').addEventListener('click', function() {
|
253 |
+
if (requestButtonClicked) return;
|
254 |
+
requestButtonClicked = true;
|
255 |
+
const token = document.getElementById('tokenInput').value;
|
256 |
+
const minDate = document.getElementById('dateSelect').value;
|
257 |
+
const type = document.getElementById('typeSelect').value;
|
258 |
+
const url = '/send_request';
|
259 |
+
|
260 |
+
// Показать спиннер
|
261 |
+
document.getElementById('spinner').style.display = 'block';
|
262 |
+
|
263 |
+
fetch(url, {
|
264 |
+
method: 'POST',
|
265 |
+
headers: {
|
266 |
+
'Content-Type': 'application/x-www-form-urlencoded'
|
267 |
+
},
|
268 |
+
body: 'token=' + encodeURIComponent(token) + '&minDate=' + encodeURIComponent(minDate) + '&type=' + encodeURIComponent(type)
|
269 |
+
})
|
270 |
+
.then(response => response.json())
|
271 |
+
.then(data => {
|
272 |
+
console.log('JSON Response:', data);
|
273 |
+
createDropdown(data);
|
274 |
+
|
275 |
+
// Скрыть спиннер
|
276 |
+
document.getElementById('spinner').style.display = 'none';
|
277 |
+
})
|
278 |
+
.catch(error => {
|
279 |
+
console.error('Error:', error);
|
280 |
+
notyf.error('Error: ' + error.message);
|
281 |
+
|
282 |
+
// Скрыть спиннер
|
283 |
+
document.getElementById('spinner').style.display = 'none';
|
284 |
+
})
|
285 |
+
.finally(() => {
|
286 |
+
requestButtonClicked = false;
|
287 |
+
});
|
288 |
+
});
|
289 |
+
function createDropdown(data) {
|
290 |
+
const container = document.getElementById('dropdown-container');
|
291 |
+
container.innerHTML = '';
|
292 |
+
const select = document.createElement('select');
|
293 |
+
select.id = 'dropdown';
|
294 |
+
select.classList.add('form-group');
|
295 |
+
data.forEach(item => {
|
296 |
+
const option = document.createElement('option');
|
297 |
+
option.value = item;
|
298 |
+
option.text = item;
|
299 |
+
select.appendChild(option);
|
300 |
+
});
|
301 |
+
container.appendChild(select);
|
302 |
+
const sendGetRequestButton = document.getElementById('sendGetRequestButton');
|
303 |
+
sendGetRequestButton.removeEventListener('click', handleGetRequest);
|
304 |
+
sendGetRequestButton.addEventListener('click', handleGetRequest);
|
305 |
+
}
|
306 |
+
function handleGetRequest() {
|
307 |
+
const selectedValue = document.getElementById('dropdown').value;
|
308 |
+
const token = document.getElementById('tokenInput').value;
|
309 |
+
const getUrl = '/send_get_request?token=' + encodeURIComponent(token) + '&webinarId=' + encodeURIComponent(selectedValue);
|
310 |
+
fetch(getUrl, {
|
311 |
+
method: 'GET'
|
312 |
+
})
|
313 |
+
.then(response => response.json())
|
314 |
+
.then(data => {
|
315 |
+
console.log('GET Response:', data);
|
316 |
+
notyf.success('Пользователи добавлены в базу данных WhatsGRM');
|
317 |
+
})
|
318 |
+
.catch(error => {
|
319 |
+
console.error('Error:', error);
|
320 |
+
notyf.error('Error: ' + error.message);
|
321 |
+
});
|
322 |
+
}
|
323 |
+
|
324 |
+
// JavaScript для спиннера
|
325 |
+
const colorTable = [
|
326 |
+
// ease in
|
327 |
+
[0.0, 0xf15a31],
|
328 |
+
[0.2, 0xffd31b],
|
329 |
+
[0.33, 0xa6ce42],
|
330 |
+
[0.4, 0x007ac1],
|
331 |
+
[0.45, 0x007ac1],
|
332 |
+
// ease out
|
333 |
+
[0.55, 0x007ac1],
|
334 |
+
[0.6, 0x007ac1],
|
335 |
+
[0.67, 0xa6ce42],
|
336 |
+
[0.8, 0xffd31b],
|
337 |
+
[1.0, 0xf15a31]
|
338 |
+
];
|
339 |
+
|
340 |
+
function lerp(x, x0, x1, y0, y1) {
|
341 |
+
const t = (x - x0) / (x1 - x0);
|
342 |
+
return y0 + t * (y1 - y0);
|
343 |
+
}
|
344 |
+
|
345 |
+
function lerpStroke(t) {
|
346 |
+
return lerpTable(1, t, colorTable, false, lerpColor);
|
347 |
+
}
|
348 |
+
|
349 |
+
function lerpOffset(min, max, t) {
|
350 |
+
return (max - min) * t + min;
|
351 |
+
}
|
352 |
+
|
353 |
+
function lerpColor(x, x0, x1, y0, y1) {
|
354 |
+
const b0 = y0 & 0xff;
|
355 |
+
const g0 = (y0 & 0xff00) >> 8;
|
356 |
+
const r0 = (y0 & 0xff0000) >> 16;
|
357 |
+
|
358 |
+
const b1 = y1 & 0xff;
|
359 |
+
const g1 = (y1 & 0xff00) >> 8;
|
360 |
+
const r1 = (y1 & 0xff0000) >> 16;
|
361 |
+
|
362 |
+
const r = Math.floor(lerp(x, x0, x1, r0, r1));
|
363 |
+
const g = Math.floor(lerp(x, x0, x1, g0, g1));
|
364 |
+
const b = Math.floor(lerp(x, x0, x1, b0, b1));
|
365 |
+
|
366 |
+
return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");
|
367 |
+
}
|
368 |
+
|
369 |
+
function lerpTable(vIndex, tValue, table, canExtrapolate, lerpFunc = lerp) {
|
370 |
+
const rowCount = table.length;
|
371 |
+
|
372 |
+
for (let i = 0; i < rowCount; ++i) {
|
373 |
+
const a = table[i][0];
|
374 |
+
|
375 |
+
if (i === 0 && tValue < a) {
|
376 |
+
if (canExtrapolate) {
|
377 |
return lerpFunc(
|
378 |
tValue,
|
379 |
a,
|
|
|
382 |
table[i + 1][vIndex]
|
383 |
);
|
384 |
}
|
385 |
+
return table[i][vIndex];
|
386 |
}
|
387 |
|
388 |
+
if (i === rowCount - 1 && tValue >= a) {
|
389 |
+
if (canExtrapolate) {
|
390 |
+
return lerpFunc(
|
391 |
+
tValue,
|
392 |
+
table[i - 1][0],
|
393 |
+
a,
|
394 |
+
table[i - 1][vIndex],
|
395 |
+
table[i][vIndex]
|
396 |
+
);
|
397 |
+
}
|
398 |
+
return table[i][vIndex];
|
399 |
+
}
|
400 |
+
|
401 |
+
if (tValue >= a && tValue <= table[i + 1][0]) {
|
402 |
+
return lerpFunc(
|
403 |
+
tValue,
|
404 |
+
a,
|
405 |
+
table[i + 1][0],
|
406 |
+
table[i][vIndex],
|
407 |
+
table[i + 1][vIndex]
|
408 |
+
);
|
409 |
+
}
|
410 |
}
|
411 |
|
412 |
+
return 0;
|
413 |
+
}
|
414 |
|
415 |
+
const el = document.getElementById("el");
|
|
|
|
|
|
|
|
|
|
|
416 |
|
417 |
+
const speed = 2;
|
418 |
+
const speedDashoffset = 7600 / speed;
|
419 |
+
const speedStroke = 6000 / speed;
|
420 |
+
const pathWidth = 372;
|
421 |
+
let startTime;
|
422 |
+
let animationFrameId;
|
423 |
|
424 |
+
const tick = (now) => {
|
425 |
+
const dtOffset = ((now - startTime) % speedDashoffset) / speedDashoffset;
|
426 |
+
const dtStroke = ((now - startTime) % speedStroke) / speedStroke;
|
427 |
|
428 |
+
const stroke = lerpStroke(dtStroke);
|
429 |
+
const offset = lerpOffset(pathWidth / 2, -pathWidth / 2, dtOffset);
|
430 |
|
431 |
+
el.style.cssText = `stroke-dashoffset: ${offset}; stroke: ${stroke};`;
|
|
|
432 |
|
433 |
+
animationFrameId = requestAnimationFrame(tick);
|
434 |
+
};
|
|
|
|
|
|
|
435 |
|
436 |
+
document.getElementById('sendRequestButton').addEventListener('click', function() {
|
437 |
+
// Показать спиннер и начать анимацию
|
438 |
+
document.getElementById('spinner').style.display = 'block';
|
439 |
+
startTime = performance.now();
|
440 |
+
tick(startTime);
|
441 |
|
442 |
+
// Ваш существующий код для отправки запроса
|
443 |
+
// ...
|
444 |
+
|
445 |
+
// Пример завершения запроса (замените на ваш реальный код)
|
446 |
+
setTimeout(() => {
|
447 |
+
// Скрыть спиннер и остановить анимацию
|
448 |
+
document.getElementById('spinner').style.display = 'none';
|
449 |
+
cancelAnimationFrame(animationFrameId);
|
450 |
+
}, 3000); // Имитация задержки в 3 секунды
|
451 |
+
});
|
452 |
+
</script>
|
453 |
</body>
|
454 |
</html>
|