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 => {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|