Sophia/steamwidgets-web
1
0
Fork 0
mirror of https://github.com/SophiaAtkinson/steamwidgets-web.git synced 2025-06-27 14:37:41 -07:00
Code Issues Packages Projects Releases Wiki Activity

Stats

Browse Source
This commit is contained in:
Daniel Brendel
2022-09-08 12:02:23 +02:00
parent 3edc2c4f0e
commit b02e52feef
15 changed files with 528 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
app/resources/js/app.js
View File

@ -4,7 +4,14 @@
* Put here your application specific JavaScript implementations
*/
window.vue = new Vue({
import './../sass/app.scss';
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
import Chart from 'chart.js/auto';
window.vue = new Vue({
el: '#app',
data: {
@ -26,6 +33,145 @@
});
}
},
ajaxRequest: function (method, url, data = {}, successfunc = function(data){}, finalfunc = function(){}, config = {})
{
let func = window.axios.get;
if (method == 'post') {
func = window.axios.post;
} else if (method == 'patch') {
func = window.axios.patch;
} else if (method == 'delete') {
func = window.axios.delete;
}
func(url, data, config)
.then(function(response){
successfunc(response.data);
})
.catch(function (error) {
console.log(error);
})
.finally(function(){
finalfunc();
}
);
},
renderStats: function(pw, elem, start, end = '') {
window.vue.ajaxRequest('post', window.location.origin + '/stats/query/' + pw, { start: start, end: end }, function(response){
if (response.code == 200) {
document.getElementById('inp-date-from').value = response.start;
document.getElementById('inp-date-till').value = response.end;
document.getElementById('count-total').innerHTML = response.count_total;
document.getElementById('count-app').innerHTML = response.counts.mod_app;
document.getElementById('count-server').innerHTML = response.counts.mod_server;
document.getElementById('count-user').innerHTML = response.counts.mod_user;
let content = document.getElementById(elem);
if (content) {
let labels = [];
let data_app = [];
let data_server = [];
let data_user = [];
let day = 60 * 60 * 24 * 1000;
let dt = new Date(Date.parse(start));
for (let i = 0; i <= response.day_diff; i++) {
let curDate = new Date(dt.getTime() + day * i);
let curDay = curDate.getDate();
let curMonth = curDate.getMonth() + 1;
if (curDay < 10) {
curDay = '0' + curDay;
}
if (curMonth < 10) {
curMonth = '0' + curMonth;
}
labels.push(curDate.getFullYear() + '-' + curMonth + '-' + curDay);
data_app.push(0);
data_server.push(0);
data_user.push(0);
}
for (const [key, value] of Object.entries(response.data.mod_app)) {
labels.forEach(function(lblElem, lblIndex){
if (lblElem == key) {
data_app[lblIndex] = parseInt(value[0]);
}
});
}
for (const [key, value] of Object.entries(response.data.mod_server)) {
labels.forEach(function(lblElem, lblIndex){
if (lblElem == key) {
data_server[lblIndex] = parseInt(value[0]);
}
});
}
for (const [key, value] of Object.entries(response.data.mod_user)) {
labels.forEach(function(lblElem, lblIndex){
if (lblElem == key) {
data_user[lblIndex] = parseInt(value[0]);
}
});
}
const config = {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'App',
backgroundColor: 'rgb(0, 162, 232)',
borderColor: 'rgb(0, 162, 232)',
data: data_app,
},
{
label: 'Server',
backgroundColor: 'rgb(163, 73, 164)',
borderColor: 'rgb(163, 73, 164)',
data: data_server,
},
{
label: 'User',
backgroundColor: 'rgb(240, 155, 90)',
borderColor: 'rgb(240, 155, 90)',
data: data_user,
}
]
},
options: {
scales: {
y: {
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
}
}
}
};
if (window.statsChart !== null) {
window.statsChart.destroy();
}
window.statsChart = new Chart(
content,
config
);
}
} else {
alert(response.msg);
}
});
},
}
});
@ -36,4 +182,4 @@ window.hljs = hljs;
document.addEventListener('DOMContentLoaded', function(){
window.hljs.highlightAll();
});
});

8
app/resources/sass/app.scss
View File

@ -109,6 +109,14 @@ body {
background-color: rgb(200, 200, 200);
}
.stats-input {
padding: 8px;
color: rgb(50, 50, 50);
background-color: rgb(200, 200, 200);
border: 1px solid rgb(100, 100, 100);
border-radius: 5px;
}
.scroll-to-top {
position: fixed;
z-index: 3;