kor-elf/service-captcha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

Revived the dashboard.

Browse Source
This commit is contained in:
Leonid Nikitin
2024-04-28 01:26:30 +05:00
parent 4bc170ed00
commit 5703015874
41 changed files with 2005 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/application/resources/volt/js/app.js
View File

@@ -2,4 +2,6 @@ import.meta.glob([
'../images/**',
]);
import './bootstrap';
import './volt.js';
import './echo';
import './volt';
import './dashboard'

80
app/application/resources/volt/js/dashboard.js Normal file
View File

@@ -0,0 +1,80 @@
"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 => {
});
}

49
app/application/resources/volt/js/echo.js Normal file
View File

@@ -0,0 +1,49 @@
"use strict";
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
class websocket {
_echo = null;
pusher = Pusher;
callbacks = []
constructor() {
let _this = this;
axios.get('/websockets/settings')
.then(response => {
_this._echo = new Echo({
broadcaster: 'reverb',
key: response.data.key,
wsHost: response.data.wsHost,
wsPort: response.data.wsPort,
wssPort: response.data.wssPort,
forceTLS: response.data.forceTLS,
enabledTransports: ['ws', 'wss'],
});
_this.startCallbacks();
})
.catch(error => {
});
}
add(callback) {
if (this._echo !== null) {
callback(this._echo)
return ;
}
this.callbacks.push(callback);
}
startCallbacks() {
let _this = this;
this.callbacks.forEach(function(callback) {
callback(_this._echo)
});
}
}
window.websocket = new websocket();

98
app/application/resources/volt/js/volt.js
View File

@@ -21,8 +21,6 @@ const d = document;
import * as bootstrap from 'bootstrap';
import Swal from 'sweetalert2';
import SmoothScroll from 'smooth-scroll';
import Chartist from 'chartist';
import 'chartist-plugin-tooltips';
d.addEventListener("DOMContentLoaded", function(event) {
@@ -176,102 +174,6 @@ d.addEventListener("DOMContentLoaded", function(event) {
});
}
//Chartist
if(d.querySelector('.ct-chart-sales-value')) {
//Chart 5
new Chartist.Line('.ct-chart-sales-value', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[0, 10, 30, 40, 80, 60, 100]
]
}, {
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: false,
showLabel: false,
labelInterpolationFnc: function(value) {
return '$' + (value / 1) + 'k';
}
}
});
}
if(d.querySelector('.ct-chart-ranking')) {
var chart = new Chartist.Bar('.ct-chart-ranking', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
series: [
[1, 5, 2, 5, 4, 3],
[2, 3, 4, 8, 1, 2],
]
}, {
low: 0,
showArea: true,
plugins: [
Chartist.plugins.tooltip()
],
axisX: {
// On the x-axis start means top and end means bottom
position: 'end'
},
axisY: {
// On the y-axis start means left and end means right
showGrid: false,
showLabel: false,
offset: 0
}
});
chart.on('draw', function(data) {
if(data.type === 'line' || data.type === 'area') {
data.element.animate({
d: {
begin: 2000 * data.index,
dur: 2000,
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
to: data.path.clone().stringify(),
easing: Chartist.Svg.Easing.easeOutQuint
}
});
}
});
}
if(d.querySelector('.ct-chart-traffic-share')) {
var data = {
series: [70, 20, 10]
};
var sum = function(a, b) { return a + b };
new Chartist.Pie('.ct-chart-traffic-share', data, {
labelInterpolationFnc: function(value) {
return Math.round(value / data.series.reduce(sum) * 100) + '%';
},
low: 0,
high: 8,
donut: true,
donutWidth: 20,
donutSolid: true,
fullWidth: false,
showLabel: false,
plugins: [
Chartist.plugins.tooltip()
],
});
}
if (d.getElementById('loadOnClick')) {
d.getElementById('loadOnClick').addEventListener('click', function () {
var button = this;