Split js and html

pull/8/head
Sami Mokaddem 2017-11-15 15:58:16 +01:00
parent e0d155564f
commit 82346e8782
2 changed files with 169 additions and 168 deletions

163
static/js/users.js Normal file
View File

@ -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();
});

View File

@ -180,178 +180,16 @@ small {
<script> <script>
/* URL */ /* URL */
var urlIconCalendar = "{{ url_for('static', filename='pics/calendar.gif') }}"; 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 */ /* DATA FROM CONF */
</script> </script>
<script> <script src="{{ url_for('static', filename='js/users.js') }}"></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>
</body> </body>