Revived the dashboard.
This commit is contained in:
@@ -1,5 +1,40 @@
|
||||
@section('meta_title', __('sections.Dashboard'))
|
||||
@section('h1', __('sections.Dashboard'))
|
||||
<x-private.layout>
|
||||
|
||||
<div class="card border-0 shadow mb-4">
|
||||
<div class="card-body">
|
||||
@can('viewAny', \App\Models\CaptchaToken::class)
|
||||
<div id="chart-сaptcha-activity"></div>
|
||||
<div class="mt-4 table-responsive">
|
||||
<table class="table table-centered table-nowrap mb-0 rounded">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th class="border-0">{{ __('validation.attributes.date') }}</th>
|
||||
<th class="border-0">Capctha</th>
|
||||
<th class="border-0"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="captcha-log">
|
||||
@foreach($items as $item)
|
||||
<tr>
|
||||
<td>{{ $item->created_at->timezone(\App\Helpers\Helpers::getUserTimeZone())->format("d.m.Y H:i:s") }}</td>
|
||||
<td>
|
||||
@if($item->captcha && $item->captcha->captchaToken)
|
||||
<a href="{{ route('captcha-tokens.edit', ['captcha_token' => $item->captcha->captcha_token_id]) }}">{{ $item->captcha->captchaToken->title }}</a>
|
||||
@endif
|
||||
<p><strong>{{ $item->type->getTitle() }}</strong></p>
|
||||
</td>
|
||||
<td>
|
||||
<p><strong>IP:</strong> {{ $item->ip }}</p>
|
||||
<p><strong>User Agent:</strong> {{ $item->user_agent }}</p>
|
||||
<p><strong>referer:</strong> {{ $item->referer }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
</x-private.layout>
|
||||
|
||||
@@ -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
80
app/application/resources/volt/js/dashboard.js
Normal 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
49
app/application/resources/volt/js/echo.js
Normal 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();
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user