81 lines
3.3 KiB
JavaScript
81 lines
3.3 KiB
JavaScript
"use strict";
|
||
|
||
import Chartist from "chartist";
|
||
import 'chartist-plugin-tooltips';
|
||
|
||
if(document.querySelector('#chart-сaptcha-activity')) {
|
||
let chartCaptchaActivity = null;
|
||
axios.get('/dashboard/chart-captcha-activity')
|
||
.then(response => {
|
||
chartCaptchaActivity = new Chartist.Line('#chart-сaptcha-activity', {
|
||
labels: response.data.days,
|
||
series: response.data.values,
|
||
}, {
|
||
low: 0,
|
||
showArea: true,
|
||
fullWidth: true,
|
||
plugins: [
|
||
Chartist.plugins.tooltip()
|
||
],
|
||
axisX: {
|
||
// On the x-axis start means top and end means bottom
|
||
position: 'end',
|
||
showGrid: true,
|
||
},
|
||
axisY: {
|
||
// On the y-axis start means left and end means right
|
||
showGrid: true,
|
||
showLabel: true,
|
||
}
|
||
});
|
||
|
||
let currentDate = response.data.days[response.data.days.length - 1];
|
||
|
||
window.websocket.add(function (echo) {
|
||
echo.private('chart-captcha-activity')
|
||
.listen('CreatedCaptchaLog', (e) => {
|
||
let options = chartCaptchaActivity.data;
|
||
|
||
if (currentDate !== e.chartCaptchaActivity.date) {
|
||
currentDate = e.chartCaptchaActivity.date;
|
||
|
||
options['labels'].push(currentDate);
|
||
options['series'].forEach(function(series, i) {
|
||
series.push(response.data.types[i]);
|
||
options['series'].push(series);
|
||
});
|
||
}
|
||
let values = options['series'][e.chartCaptchaActivity['type'] - 1];
|
||
options['series'][e.chartCaptchaActivity['type'] - 1][values.length - 1]['value']++;
|
||
chartCaptchaActivity.update(options);
|
||
|
||
let captchaLog = document.querySelector('#captcha-log');
|
||
if (captchaLog) {
|
||
let tr = document.createElement("tr");
|
||
let link = '';
|
||
if (e.captchaLog.link !== '' && e.captchaLog.title !== '') {
|
||
link = `<a href="${e.captchaLog.link}">${e.captchaLog.title}</a>`;
|
||
}
|
||
tr.innerHTML = `
|
||
<td>${e.captchaLog.created_at}</td>
|
||
<td>
|
||
${link}
|
||
<p><strong>${e.captchaLog.type}</strong></p>
|
||
</td>
|
||
<td>
|
||
<p><strong>IP:</strong> ${e.captchaLog.ip}</p>
|
||
<p><strong>User Agent:</strong> ${e.captchaLog.user_agent}</p>
|
||
<p><strong>referer:</strong> ${e.captchaLog.referer}</p>
|
||
</td>
|
||
`;
|
||
|
||
captchaLog.prepend(tr);
|
||
}
|
||
});
|
||
});
|
||
})
|
||
.catch(error => {
|
||
|
||
});
|
||
}
|