mirror of https://github.com/MISP/misp-dashboard
Split js and html
Sami Mokaddem
parent
e0d155564f
commit
82346e8782
|
|
@ -0,0 +1,163 @@
|
|||
var punchcardWidget;
|
||||
var pieOrgWidget;
|
||||
var pieApiWidget;
|
||||
var overtimeWidget;
|
||||
|
||||
var div_day;
|
||||
function highlight_punchDay() {
|
||||
if (!(div_day === undefined)) {
|
||||
div_day.removeClass('highlightDay');
|
||||
}
|
||||
|
||||
var curDay = datePickerWidgetPunch.datepicker( "getDate" ).getDay();
|
||||
if (curDay == 7)
|
||||
curDay = 0;
|
||||
div_day = $('[data-daynum="'+curDay+'"]');
|
||||
div_day.addClass('highlightDay')
|
||||
}
|
||||
|
||||
function updateDatePunch() {
|
||||
var date = datePickerWidgetPunch.datepicker( "getDate" );
|
||||
$.getJSON( url_getUserLogins+"?date="+date.getTime()/1000, function( data ) {
|
||||
if (!(punchcardWidget === undefined)) {
|
||||
punchcardWidget.settings.data = data;
|
||||
punchcardWidget.refresh();
|
||||
highlight_punchDay();
|
||||
} else {
|
||||
punchcardWidget = $('#punchcard').punchcard({
|
||||
data: data,
|
||||
singular: 'login',
|
||||
plural: 'logins',
|
||||
timezones: ['local'],
|
||||
timezoneIndex:0
|
||||
});
|
||||
punchcardWidget = punchcardWidget.data("plugin_" + "punchcard");
|
||||
highlight_punchDay();
|
||||
}
|
||||
});
|
||||
}
|
||||
function updateDatePieOrg() {
|
||||
var date = datePickerWidgetOrg.datepicker( "getDate" );
|
||||
$.getJSON( url_getTopOrglogin+"?date="+date.getTime()/1000, function( data ) {
|
||||
toPlot = [];
|
||||
for (item of data) { toPlot.push({ label: item[0], data: item[1] }); }
|
||||
if (toPlot.length == 0) {
|
||||
toPlot = [{ label: 'No data', data: 100 }];
|
||||
}
|
||||
if (!pieOrgWidget === undefined) {
|
||||
pieOrgWidget.setData(toPlot);
|
||||
pieOrgWidget.draw();
|
||||
} else {
|
||||
pieOrgWidget = $.plot('#pieOrg', toPlot, {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function updateDatePieApi() {
|
||||
var date = datePickerWidgetApi.datepicker( "getDate" );
|
||||
$.getJSON( url_getLoginVSCOntribution+"?date="+date.getTime()/1000, function( data ) {
|
||||
toPlot = [
|
||||
{label: 'Login with contribution during the day', data: data[0], color: '#4da74d' },
|
||||
{label: 'Login without contribution during the day', data:data[1], color: '#cb4b4b' }
|
||||
];
|
||||
if (data[0] == 0 && data[1] == 0) {
|
||||
toPlot = [{ label: 'No data', data: 100 }];
|
||||
}
|
||||
|
||||
if (!pieApiWidget === undefined) {
|
||||
pieApiWidget.setData(toPlot);
|
||||
pieApiWidget.draw();
|
||||
} else {
|
||||
pieApiWidget = $.plot('#pieApi', toPlot, {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function updateDateOvertime() {
|
||||
var date = datePickerWidgetOvertime.datepicker( "getDate" );
|
||||
var now = new Date();
|
||||
if (date.toDateString() == now.toDateString()) {
|
||||
date = now;
|
||||
} else {
|
||||
date.setTime(date.getTime() + (24*60*60*1000-1)); // include data of selected date
|
||||
}
|
||||
$.getJSON( url_getUserLoginsOvertime+"?date="+parseInt(date.getTime()/1000), function( data ) {
|
||||
temp = [];
|
||||
var i=0;
|
||||
for (item of data) {
|
||||
temp.push([new Date(item[0]*1000), item[1]]);
|
||||
}
|
||||
data = {label: 'Login overtime', data: temp}
|
||||
if (!overtimeWidget === undefined) {
|
||||
overtimeWidget.setData(toPlot);
|
||||
overtimeWidget.draw();
|
||||
} else {
|
||||
overtimeWidget = $.plot('#lineChart', [data], {
|
||||
lines: {
|
||||
show: true,
|
||||
steps: true,
|
||||
fill: true
|
||||
},
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
minTickSize: [1, "day"],
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
var datePickerOptions = {
|
||||
showOn: "button",
|
||||
maxDate: 0,
|
||||
buttonImage: urlIconCalendar,
|
||||
buttonImageOnly: true,
|
||||
buttonText: "Select date",
|
||||
showAnim: "slideDown"
|
||||
};
|
||||
// punch
|
||||
var datePickerOptionsPunch = jQuery.extend({}, datePickerOptions);
|
||||
datePickerOptionsPunch['onSelect'] = updateDatePunch;
|
||||
datePickerWidgetPunch = $( "#datepickerPunch" );
|
||||
datePickerWidgetPunch.datepicker(datePickerOptionsPunch);
|
||||
datePickerWidgetPunch.datepicker("setDate", new Date());
|
||||
// org login
|
||||
var datePickerOptionsOrg = jQuery.extend({}, datePickerOptions);
|
||||
datePickerOptionsOrg['onSelect'] = updateDatePieOrg;
|
||||
datePickerWidgetOrg = $( "#datepickerOrgLogin" );
|
||||
datePickerWidgetOrg.datepicker(datePickerOptionsOrg);
|
||||
datePickerWidgetOrg.datepicker("setDate", new Date());
|
||||
// api
|
||||
var datePickerOptionsApi = jQuery.extend({}, datePickerOptions);
|
||||
datePickerOptionsApi['onSelect'] = updateDatePieApi;
|
||||
datePickerWidgetApi = $( "#datepickerApi" );
|
||||
datePickerWidgetApi.datepicker(datePickerOptionsApi);
|
||||
datePickerWidgetApi.datepicker("setDate", new Date());
|
||||
// overtime
|
||||
var datePickerOptionsOvertime = jQuery.extend({}, datePickerOptions);
|
||||
datePickerOptionsOvertime['onSelect'] = updateDateOvertime;
|
||||
datePickerWidgetOvertime = $( "#datepickerOvertimeLogin" );
|
||||
datePickerWidgetOvertime.datepicker(datePickerOptionsOvertime);
|
||||
datePickerWidgetOvertime.datepicker("setDate", new Date());
|
||||
|
||||
updateDatePunch();
|
||||
updateDatePieOrg();
|
||||
updateDatePieApi();
|
||||
updateDateOvertime();
|
||||
|
||||
});
|
||||
|
|
@ -180,178 +180,16 @@ small {
|
|||
<script>
|
||||
/* URL */
|
||||
var urlIconCalendar = "{{ url_for('static', filename='pics/calendar.gif') }}";
|
||||
var url_getUserLogins = "{{ url_for('getUserLogins') }}";
|
||||
var url_getTopOrglogin = "{{ url_for('getTopOrglogin') }}";
|
||||
var url_getLoginVSCOntribution = "{{ url_for('getLoginVSCOntribution') }}";
|
||||
var url_getUserLoginsOvertime = "{{ url_for('getUserLoginsOvertime') }}";
|
||||
|
||||
/* DATA FROM CONF */
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var punchcardWidget;
|
||||
var pieOrgWidget;
|
||||
var pieApiWidget;
|
||||
var overtimeWidget;
|
||||
|
||||
var div_day;
|
||||
function highlight_punchDay() {
|
||||
if (!(div_day === undefined)) {
|
||||
div_day.removeClass('highlightDay');
|
||||
}
|
||||
|
||||
var curDay = datePickerWidgetPunch.datepicker( "getDate" ).getDay();
|
||||
if (curDay == 7)
|
||||
curDay = 0;
|
||||
div_day = $('[data-daynum="'+curDay+'"]');
|
||||
div_day.addClass('highlightDay')
|
||||
}
|
||||
|
||||
function updateDatePunch() {
|
||||
var date = datePickerWidgetPunch.datepicker( "getDate" );
|
||||
$.getJSON( "{{ url_for('getUserLogins') }}"+"?date="+date.getTime()/1000, function( data ) {
|
||||
if (!(punchcardWidget === undefined)) {
|
||||
punchcardWidget.settings.data = data;
|
||||
punchcardWidget.refresh();
|
||||
highlight_punchDay();
|
||||
} else {
|
||||
punchcardWidget = $('#punchcard').punchcard({
|
||||
data: data,
|
||||
singular: 'login',
|
||||
plural: 'logins',
|
||||
timezones: ['local'],
|
||||
timezoneIndex:0
|
||||
});
|
||||
punchcardWidget = punchcardWidget.data("plugin_" + "punchcard");
|
||||
highlight_punchDay();
|
||||
}
|
||||
});
|
||||
}
|
||||
function updateDatePieOrg() {
|
||||
var date = datePickerWidgetOrg.datepicker( "getDate" );
|
||||
$.getJSON( "{{ url_for('getTopOrglogin') }}"+"?date="+date.getTime()/1000, function( data ) {
|
||||
toPlot = [];
|
||||
for (item of data) { toPlot.push({ label: item[0], data: item[1] }); }
|
||||
if (toPlot.length == 0) {
|
||||
toPlot = [{ label: 'No data', data: 100 }];
|
||||
}
|
||||
if (!pieOrgWidget === undefined) {
|
||||
pieOrgWidget.setData(toPlot);
|
||||
pieOrgWidget.draw();
|
||||
} else {
|
||||
pieOrgWidget = $.plot('#pieOrg', toPlot, {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function updateDatePieApi() {
|
||||
var date = datePickerWidgetApi.datepicker( "getDate" );
|
||||
$.getJSON( "{{ url_for('getLoginVSCOntribution') }}"+"?date="+date.getTime()/1000, function( data ) {
|
||||
toPlot = [
|
||||
{label: 'Login with contribution during the day', data: data[0], color: '#4da74d' },
|
||||
{label: 'Login without contribution during the day', data:data[1], color: '#cb4b4b' }
|
||||
];
|
||||
if (data[0] == 0 && data[1] == 0) {
|
||||
toPlot = [{ label: 'No data', data: 100 }];
|
||||
}
|
||||
|
||||
if (!pieApiWidget === undefined) {
|
||||
pieApiWidget.setData(toPlot);
|
||||
pieApiWidget.draw();
|
||||
} else {
|
||||
pieApiWidget = $.plot('#pieApi', toPlot, {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function updateDateOvertime() {
|
||||
var date = datePickerWidgetOvertime.datepicker( "getDate" );
|
||||
var now = new Date();
|
||||
if (date.toDateString() == now.toDateString()) {
|
||||
date = now;
|
||||
} else {
|
||||
date.setTime(date.getTime() + (24*60*60*1000-1)); // include data of selected date
|
||||
}
|
||||
$.getJSON( "{{ url_for('getUserLoginsOvertime') }}"+"?date="+parseInt(date.getTime()/1000), function( data ) {
|
||||
temp = [];
|
||||
var i=0;
|
||||
for (item of data) {
|
||||
temp.push([new Date(item[0]*1000), item[1]]);
|
||||
}
|
||||
data = {label: 'Login overtime', data: temp}
|
||||
if (!overtimeWidget === undefined) {
|
||||
overtimeWidget.setData(toPlot);
|
||||
overtimeWidget.draw();
|
||||
} else {
|
||||
overtimeWidget = $.plot('#lineChart', [data], {
|
||||
lines: {
|
||||
show: true,
|
||||
steps: true,
|
||||
fill: true
|
||||
},
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
minTickSize: [1, "day"],
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
var datePickerOptions = {
|
||||
showOn: "button",
|
||||
maxDate: 0,
|
||||
buttonImage: urlIconCalendar,
|
||||
buttonImageOnly: true,
|
||||
buttonText: "Select date",
|
||||
showAnim: "slideDown"
|
||||
};
|
||||
// punch
|
||||
var datePickerOptionsPunch = jQuery.extend({}, datePickerOptions);
|
||||
datePickerOptionsPunch['onSelect'] = updateDatePunch;
|
||||
datePickerWidgetPunch = $( "#datepickerPunch" );
|
||||
datePickerWidgetPunch.datepicker(datePickerOptionsPunch);
|
||||
datePickerWidgetPunch.datepicker("setDate", new Date());
|
||||
// org login
|
||||
var datePickerOptionsOrg = jQuery.extend({}, datePickerOptions);
|
||||
datePickerOptionsOrg['onSelect'] = updateDatePieOrg;
|
||||
datePickerWidgetOrg = $( "#datepickerOrgLogin" );
|
||||
datePickerWidgetOrg.datepicker(datePickerOptionsOrg);
|
||||
datePickerWidgetOrg.datepicker("setDate", new Date());
|
||||
// api
|
||||
var datePickerOptionsApi = jQuery.extend({}, datePickerOptions);
|
||||
datePickerOptionsApi['onSelect'] = updateDatePieApi;
|
||||
datePickerWidgetApi = $( "#datepickerApi" );
|
||||
datePickerWidgetApi.datepicker(datePickerOptionsApi);
|
||||
datePickerWidgetApi.datepicker("setDate", new Date());
|
||||
// overtime
|
||||
var datePickerOptionsOvertime = jQuery.extend({}, datePickerOptions);
|
||||
datePickerOptionsOvertime['onSelect'] = updateDateOvertime;
|
||||
datePickerWidgetOvertime = $( "#datepickerOvertimeLogin" );
|
||||
datePickerWidgetOvertime.datepicker(datePickerOptionsOvertime);
|
||||
datePickerWidgetOvertime.datepicker("setDate", new Date());
|
||||
|
||||
updateDatePunch();
|
||||
updateDatePieOrg();
|
||||
updateDatePieApi();
|
||||
updateDateOvertime();
|
||||
|
||||
});
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/users.js') }}"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue