mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2024-09-19 18:21:00 +02:00
Fixed sidebar toggle in Query Results
The element was replaced so the click event listener was destroyed in the process. - Added onclick inside the rendered html - Additional refactoring inside this commit
This commit is contained in:
Risto Lahtela
parent
6c13691a52
commit
61841966f5
@ -36,6 +36,73 @@ const InvalidEntries = {
|
||||
}
|
||||
}
|
||||
|
||||
function loadFilters(json) {
|
||||
filters.push(...json.filters);
|
||||
|
||||
filterView = json.view;
|
||||
|
||||
document.getElementById('viewFromDateField').setAttribute('placeholder', json.view.afterDate);
|
||||
document.getElementById('viewFromTimeField').setAttribute('placeholder', json.view.afterTime);
|
||||
document.getElementById('viewToDateField').setAttribute('placeholder', json.view.beforeDate);
|
||||
document.getElementById('viewToTimeField').setAttribute('placeholder', json.view.beforeTime);
|
||||
|
||||
const s = {
|
||||
name: {playersOnline: 'Players Online'},
|
||||
tooltip: {zeroDecimals: {valueDecimals: 0}},
|
||||
type: {areaSpline: 'areaspline'}
|
||||
};
|
||||
|
||||
const playersOnlineSeries = {
|
||||
name: 'Players Online', type: 'areaspline', tooltip: {valueDecimals: 0},
|
||||
data: json.viewPoints, color: '#9E9E9E', yAxis: 0
|
||||
}
|
||||
|
||||
graphs.push(Highcharts.stockChart('viewChart', {
|
||||
rangeSelector: {
|
||||
selected: 3,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
yAxis: {
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
series: [playersOnlineSeries],
|
||||
xAxis: {
|
||||
events: {
|
||||
afterSetExtremes: function (event) {
|
||||
if (this) {
|
||||
const afterDate = Highcharts.dateFormat('%d/%m/%Y', this.min);
|
||||
const afterTime = Highcharts.dateFormat('%H:%M', this.min);
|
||||
const beforeDate = Highcharts.dateFormat('%d/%m/%Y', this.max);
|
||||
const beforeTime = Highcharts.dateFormat('%H:%M', this.max);
|
||||
document.getElementById('viewFromDateField').value = afterDate;
|
||||
document.getElementById('viewFromTimeField').value = afterTime;
|
||||
document.getElementById('viewToDateField').value = beforeDate;
|
||||
document.getElementById('viewToTimeField').value = beforeTime;
|
||||
const dontUpdateGraph = true;
|
||||
setFilterOption('view', 'viewFromDateField', 'afterDate', isValidDate, correctDate, dontUpdateGraph);
|
||||
setFilterOption('view', 'viewFromTimeField', 'afterTime', isValidTime, correctTime, dontUpdateGraph);
|
||||
setFilterOption('view', 'viewToDateField', 'beforeDate', isValidDate, correctDate, dontUpdateGraph);
|
||||
setFilterOption('view', 'viewToTimeField', 'beforeTime', isValidTime, correctTime, dontUpdateGraph);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
let filterElements = '';
|
||||
for (let i = 0; i < filters.length; i++) {
|
||||
filterElements += createFilterSelector('#filters', i, filters[i]);
|
||||
}
|
||||
document.getElementById('filter-dropdown').innerHTML = filterElements;
|
||||
}
|
||||
|
||||
class Filter {
|
||||
constructor(kind) {
|
||||
this.kind = kind;
|
||||
@ -439,7 +506,7 @@ function renderDataResultScreen(resultCount, view) {
|
||||
document.querySelector('#content .tab').innerHTML =
|
||||
`<div class="container-fluid mt-4">
|
||||
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
||||
<h1 class="h3 mb-0 text-gray-800"><i class="sidebar-toggler fa fa-fw fa-bars"></i>Plan ·
|
||||
<h1 class="h3 mb-0 text-gray-800"><i class="sidebar-toggler fa fa-fw fa-bars" onclick="toggleSidebar()"></i>Plan ·
|
||||
Query Results</h1>
|
||||
<p class="mb-0 text-gray-800">(matched ${resultCount} players)</p>
|
||||
</div>
|
||||
|
||||
@ -100,15 +100,16 @@ reduceSidebar();
|
||||
$(window).resize(reduceSidebar);
|
||||
|
||||
function toggleSidebar() {
|
||||
$('body').toggleClass('sidebar-hidden');
|
||||
document.querySelector('body').classList.toggle('sidebar-hidden');
|
||||
$('.sidebar .collapse').collapse('hide');
|
||||
|
||||
const closeModal = $('.sidebar-close-modal');
|
||||
const closeModal = document.querySelector('.sidebar-close-modal');
|
||||
if ($(window).width() < 900) {
|
||||
closeModal.toggleClass('hidden');
|
||||
} else {
|
||||
if (!closeModal.hasClass('hidden')) closeModal.addClass('hidden');
|
||||
closeModal.classList.toggle('hidden');
|
||||
} else if (!closeModal.classList.contains('hidden')) {
|
||||
closeModal.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
$('.sidebar-toggler,.sidebar-close-modal').on('click', toggleSidebar);
|
||||
document.querySelectorAll('.sidebar-toggler,.sidebar-close-modal')
|
||||
.forEach(element => element.addEventListener('click', toggleSidebar));
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
<script>
|
||||
function login() {
|
||||
msg.addClass('hidden');
|
||||
errorElement.classList.add('hidden');
|
||||
const user = $('#inputUser').val();
|
||||
if (!user || user.length < 1) {
|
||||
return displayError('You need to specify a Username');
|
||||
@ -58,7 +58,6 @@
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
console.log(event.key);
|
||||
if (event.key === 'Enter') login();
|
||||
});
|
||||
</script>
|
||||
@ -225,14 +224,14 @@
|
||||
login();
|
||||
});
|
||||
|
||||
const msg = $(`#fail-msg`);
|
||||
const errorElement = document.getElementById("fail-msg");
|
||||
|
||||
function displayError(message) {
|
||||
msg.text(message);
|
||||
msg.removeClass('hidden');
|
||||
errorElement.innerText = message;
|
||||
errorElement.classList.remove('hidden');
|
||||
}
|
||||
|
||||
$('#forgot-button').click(() => $('#forgotModal').modal());
|
||||
document.getElementById('forgot-button').addEventListener('click', () => $('#forgotModal').modal());
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
@ -86,6 +86,9 @@
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-body" id="data_player_info">
|
||||
<div class="hidden alert alert-danger" id="fail-msg">
|
||||
Failed
|
||||
</div>
|
||||
<label class="mt-2 mb-0" for="viewFromDateField">Show a view</label>
|
||||
<div class="mt-2 input-group input-row">
|
||||
<div class="col-auto">
|
||||
@ -347,70 +350,13 @@
|
||||
runQuery();
|
||||
} else {
|
||||
jsonRequest("./v1/filters", function (json, error) {
|
||||
filters.push(...json.filters);
|
||||
|
||||
filterView = json.view;
|
||||
|
||||
document.getElementById('viewFromDateField').setAttribute('placeholder', json.view.afterDate);
|
||||
document.getElementById('viewFromTimeField').setAttribute('placeholder', json.view.afterTime);
|
||||
document.getElementById('viewToDateField').setAttribute('placeholder', json.view.beforeDate);
|
||||
document.getElementById('viewToTimeField').setAttribute('placeholder', json.view.beforeTime);
|
||||
|
||||
const s = {
|
||||
name: {playersOnline: 'Players Online'},
|
||||
tooltip: {zeroDecimals: {valueDecimals: 0}},
|
||||
type: {areaSpline: 'areaspline'}
|
||||
};
|
||||
|
||||
const playersOnlineSeries = {
|
||||
name: 'Players Online', type: 'areaspline', tooltip: {valueDecimals: 0},
|
||||
data: json.viewPoints, color: '#9E9E9E', yAxis: 0
|
||||
if (json) {
|
||||
loadFilters(json);
|
||||
} else if (error) {
|
||||
const errorElement = document.getElementById("fail-msg");
|
||||
errorElement.innerText = error;
|
||||
errorElement.classList.remove('hidden');
|
||||
}
|
||||
|
||||
graphs.push(Highcharts.stockChart('viewChart', {
|
||||
rangeSelector: {
|
||||
selected: 3,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
yAxis: {
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
series: [playersOnlineSeries],
|
||||
xAxis: {
|
||||
events: {
|
||||
afterSetExtremes: function (event) {
|
||||
if (this) {
|
||||
const afterDate = Highcharts.dateFormat('%d/%m/%Y', this.min);
|
||||
const afterTime = Highcharts.dateFormat('%H:%M', this.min);
|
||||
const beforeDate = Highcharts.dateFormat('%d/%m/%Y', this.max);
|
||||
const beforeTime = Highcharts.dateFormat('%H:%M', this.max);
|
||||
document.getElementById('viewFromDateField').value = afterDate;
|
||||
document.getElementById('viewFromTimeField').value = afterTime;
|
||||
document.getElementById('viewToDateField').value = beforeDate;
|
||||
document.getElementById('viewToTimeField').value = beforeTime;
|
||||
const dontUpdateGraph = true;
|
||||
setFilterOption('view', 'viewFromDateField', 'afterDate', isValidDate, correctDate, dontUpdateGraph);
|
||||
setFilterOption('view', 'viewFromTimeField', 'afterTime', isValidTime, correctTime, dontUpdateGraph);
|
||||
setFilterOption('view', 'viewToDateField', 'beforeDate', isValidDate, correctDate, dontUpdateGraph);
|
||||
setFilterOption('view', 'viewToTimeField', 'beforeTime', isValidTime, correctTime, dontUpdateGraph);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
let filterElements = '';
|
||||
for (let i = 0; i < filters.length; i++) {
|
||||
filterElements += createFilterSelector('#filters', i, filters[i]);
|
||||
}
|
||||
document.getElementById('filter-dropdown').innerHTML = filterElements;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -184,11 +184,11 @@
|
||||
<script src="js/color-selector.js"></script>
|
||||
|
||||
<script id="mainScript">
|
||||
const msg = $(`#fail-msg`);
|
||||
const errorElement = document.getElementById("fail-msg");
|
||||
|
||||
function displayError(message) {
|
||||
msg.text(message);
|
||||
msg.removeClass('hidden');
|
||||
errorElement.innerText = message;
|
||||
errorElement.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function checkIfRegistered(code) {
|
||||
@ -204,8 +204,8 @@
|
||||
})
|
||||
}
|
||||
|
||||
$('#register-button').click(() => {
|
||||
msg.addClass('hidden');
|
||||
document.getElementById('register-button').addEventListener('click', () => {
|
||||
errorElement.classList.add('hidden');
|
||||
const user = $('#inputUser').val();
|
||||
if (!user || user.length < 1) {
|
||||
return displayError('You need to specify a Username');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user