a52c2a8462
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
460 lines
18 KiB
JavaScript
460 lines
18 KiB
JavaScript
var Index = function () {
|
|
// function to initiate Chart 1
|
|
/*var runChart1 = function () {
|
|
function randValue() {
|
|
return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
|
|
};
|
|
var pageviews = [
|
|
[1, randValue()],
|
|
[2, randValue()],
|
|
[3, 2 + randValue()],
|
|
[4, 3 + randValue()],
|
|
[5, 5 + randValue()],
|
|
[6, 10 + randValue()],
|
|
[7, 15 + randValue()],
|
|
[8, 20 + randValue()],
|
|
[9, 25 + randValue()],
|
|
[10, 30 + randValue()],
|
|
[11, 35 + randValue()],
|
|
[12, 25 + randValue()],
|
|
[13, 15 + randValue()],
|
|
[14, 20 + randValue()],
|
|
[15, 45 + randValue()],
|
|
[16, 50 + randValue()],
|
|
[17, 65 + randValue()],
|
|
[18, 70 + randValue()],
|
|
[19, 85 + randValue()],
|
|
[20, 80 + randValue()],
|
|
[21, 75 + randValue()],
|
|
[22, 80 + randValue()],
|
|
[23, 75 + randValue()],
|
|
[24, 70 + randValue()],
|
|
[25, 65 + randValue()],
|
|
[26, 75 + randValue()],
|
|
[27, 80 + randValue()],
|
|
[28, 85 + randValue()],
|
|
[29, 90 + randValue()],
|
|
[30, 95 + randValue()]
|
|
];
|
|
var visitors = [
|
|
[1, randValue() - 5],
|
|
[2, randValue() - 5],
|
|
[3, randValue() - 5],
|
|
[4, 6 + randValue()],
|
|
[5, 5 + randValue()],
|
|
[6, 20 + randValue()],
|
|
[7, 25 + randValue()],
|
|
[8, 36 + randValue()],
|
|
[9, 26 + randValue()],
|
|
[10, 38 + randValue()],
|
|
[11, 39 + randValue()],
|
|
[12, 50 + randValue()],
|
|
[13, 51 + randValue()],
|
|
[14, 12 + randValue()],
|
|
[15, 13 + randValue()],
|
|
[16, 14 + randValue()],
|
|
[17, 15 + randValue()],
|
|
[18, 15 + randValue()],
|
|
[19, 16 + randValue()],
|
|
[20, 17 + randValue()],
|
|
[21, 18 + randValue()],
|
|
[22, 19 + randValue()],
|
|
[23, 20 + randValue()],
|
|
[24, 21 + randValue()],
|
|
[25, 14 + randValue()],
|
|
[26, 24 + randValue()],
|
|
[27, 25 + randValue()],
|
|
[28, 26 + randValue()],
|
|
[29, 27 + randValue()],
|
|
[30, 31 + randValue()]
|
|
];
|
|
var plot = $.plot($("#placeholder-h1"), [{
|
|
data: pageviews,
|
|
label: "Unique Visits"
|
|
}, {
|
|
data: visitors,
|
|
label: "Page Views"
|
|
}], {
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
lineWidth: 2,
|
|
fill: true,
|
|
fillColor: {
|
|
colors: [{
|
|
opacity: 0.05
|
|
}, {
|
|
opacity: 0.01
|
|
}]
|
|
}
|
|
},
|
|
points: {
|
|
show: false
|
|
},
|
|
shadowSize: 2
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
tickColor: "#eee",
|
|
borderWidth: 0
|
|
},
|
|
colors: ["#d12610", "#37b7f3", "#52e136"],
|
|
xaxis: {
|
|
ticks: 11,
|
|
tickDecimals: 0
|
|
},
|
|
yaxis: {
|
|
ticks: 11,
|
|
tickDecimals: 0
|
|
}
|
|
});
|
|
|
|
function showTooltip(x, y, contents) {
|
|
$('<div id="tooltip">' + contents + '</div>').css({
|
|
position: 'absolute',
|
|
display: 'none',
|
|
top: y + 5,
|
|
left: x + 15,
|
|
border: '1px solid #333',
|
|
padding: '4px',
|
|
color: '#fff',
|
|
'border-radius': '3px',
|
|
'background-color': '#333',
|
|
opacity: 0.80
|
|
}).appendTo("body").fadeIn(200);
|
|
}
|
|
var previousPoint = null;
|
|
$("#placeholder-h1").bind("plothover", function (event, pos, item) {
|
|
$("#x").text(pos.x.toFixed(2));
|
|
$("#y").text(pos.y.toFixed(2));
|
|
if (item) {
|
|
if (previousPoint != item.dataIndex) {
|
|
previousPoint = item.dataIndex;
|
|
$("#tooltip").remove();
|
|
var x = item.datapoint[0].toFixed(2),
|
|
y = item.datapoint[1].toFixed(2);
|
|
showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
|
|
}
|
|
} else {
|
|
$("#tooltip").remove();
|
|
previousPoint = null;
|
|
}
|
|
});
|
|
};
|
|
// function to initiate Chart 2
|
|
var runChart2 = function () {
|
|
var data_pie = [],
|
|
series = Math.floor(Math.random() * 6) + 3;
|
|
for (var i = 0; i < series; i++) {
|
|
data_pie[i] = {
|
|
label: "Series" + (i + 1),
|
|
data: Math.floor(Math.random() * 100) + 1
|
|
};
|
|
}
|
|
$.plot('#placeholder-h2', data_pie, {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
radius: 1,
|
|
tilt: 0.5,
|
|
label: {
|
|
show: true,
|
|
radius: 1,
|
|
formatter: labelFormatter,
|
|
background: {
|
|
opacity: 0.8
|
|
}
|
|
},
|
|
combine: {
|
|
color: '#999',
|
|
threshold: 0.1
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
}
|
|
});
|
|
|
|
function labelFormatter(label, series) {
|
|
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
|
|
}
|
|
};
|
|
// function to initiate Chart 3
|
|
var runChart3 = function () {
|
|
var data = [],
|
|
totalPoints = 300;
|
|
|
|
function getRandomData() {
|
|
if (data.length > 0)
|
|
data = data.slice(1);
|
|
// Do a random walk
|
|
while (data.length < totalPoints) {
|
|
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
|
y = prev + Math.random() * 10 - 5;
|
|
if (y < 0) {
|
|
y = 0;
|
|
} else if (y > 100) {
|
|
y = 100;
|
|
}
|
|
data.push(y);
|
|
}
|
|
// Zip the generated y values with the x values
|
|
var res = [];
|
|
for (var i = 0; i < data.length; ++i) {
|
|
res.push([i, data[i]]);
|
|
}
|
|
return res;
|
|
}
|
|
// Set up the control widget
|
|
var updateInterval = 30;
|
|
$("#updateInterval").val(updateInterval).change(function () {
|
|
var v = $(this).val();
|
|
if (v && !isNaN(+v)) {
|
|
updateInterval = +v;
|
|
if (updateInterval < 1) {
|
|
updateInterval = 1;
|
|
} else if (updateInterval > 2000) {
|
|
updateInterval = 2000;
|
|
}
|
|
$(this).val("" + updateInterval);
|
|
}
|
|
});
|
|
var plot = $.plot("#placeholder-h3", [getRandomData()], {
|
|
grid: {
|
|
borderWidth: 1,
|
|
borderColor: '#eeeeee'
|
|
},
|
|
series: {
|
|
shadowSize: 0 // Drawing is faster without shadows
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 100
|
|
},
|
|
xaxis: {
|
|
show: false
|
|
}
|
|
});
|
|
|
|
function update() {
|
|
plot.setData([getRandomData()]);
|
|
// Since the axes don't change, we don't need to call plot.setupGrid()
|
|
plot.draw();
|
|
setTimeout(update, updateInterval);
|
|
}
|
|
update();
|
|
};
|
|
// function to initiate Sparkline
|
|
var runSparkline = function () {
|
|
$(".sparkline_line_good span").sparkline("html", {
|
|
type: "line",
|
|
fillColor: "#B1FFA9",
|
|
lineColor: "#459D1C",
|
|
width: "50",
|
|
height: "24"
|
|
});
|
|
$(".sparkline_line_bad span").sparkline("html", {
|
|
type: "line",
|
|
fillColor: "#FFC4C7",
|
|
lineColor: "#BA1E20",
|
|
width: "50",
|
|
height: "24"
|
|
});
|
|
$(".sparkline_line_neutral span").sparkline("html", {
|
|
type: "line",
|
|
fillColor: "#CCCCCC",
|
|
lineColor: "#757575",
|
|
width: "50",
|
|
height: "24"
|
|
});
|
|
$(".sparkline_bar_good span").sparkline('html', {
|
|
type: "bar",
|
|
barColor: "#459D1C",
|
|
barWidth: "5",
|
|
height: "24"
|
|
});
|
|
$(".sparkline_bar_bad span").sparkline('html', {
|
|
type: "bar",
|
|
barColor: "#BA1E20",
|
|
barWidth: "5",
|
|
height: "24"
|
|
});
|
|
$(".sparkline_bar_neutral span").sparkline('html', {
|
|
type: "bar",
|
|
barColor: "#757575",
|
|
barWidth: "5",
|
|
height: "24"
|
|
});
|
|
};
|
|
// function to initiate EasyPieChart
|
|
var runEasyPieChart = function () {
|
|
if (isIE8 || isIE9) {
|
|
if (!Function.prototype.bind) {
|
|
Function.prototype.bind = function (oThis) {
|
|
if (typeof this !== "function") {
|
|
// closest thing possible to the ECMAScript 5 internal IsCallable function
|
|
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
|
}
|
|
var aArgs = Array.prototype.slice.call(arguments, 1),
|
|
fToBind = this,
|
|
fNOP = function () {}, fBound = function () {
|
|
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
|
|
};
|
|
fNOP.prototype = this.prototype;
|
|
fBound.prototype = new fNOP();
|
|
return fBound;
|
|
};
|
|
}
|
|
}
|
|
$('.easy-pie-chart .bounce').easyPieChart({
|
|
animate: 1000,
|
|
size: 70
|
|
});
|
|
$('.easy-pie-chart .cpu').easyPieChart({
|
|
animate: 1000,
|
|
lineWidth: 3,
|
|
barColor: '#35aa47',
|
|
size: 70
|
|
|
|
});
|
|
};*/
|
|
// function to initiate Full Calendar
|
|
var runFullCalendar = function () {
|
|
//calendar
|
|
/* initialize the calendar
|
|
-----------------------------------------------------------------*/
|
|
var $modal = $('#event-management');
|
|
$('#event-categories div.event-category').each(function () {
|
|
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
|
|
// it doesn't need to have a start or end
|
|
var eventObject = {
|
|
title: $.trim($(this).text()) // use the element's text as the event title
|
|
};
|
|
// store the Event Object in the DOM element so we can get to it later
|
|
$(this).data('eventObject', eventObject);
|
|
// make the event draggable using jQuery UI
|
|
$(this).draggable({
|
|
zIndex: 999,
|
|
revert: true, // will cause the event to go back to its
|
|
revertDuration: 50 // original position after the drag
|
|
});
|
|
});
|
|
/* initialize the calendar
|
|
-----------------------------------------------------------------*/
|
|
var date = new Date();
|
|
var d = date.getDate();
|
|
var m = date.getMonth();
|
|
var y = date.getFullYear();
|
|
var form = '';
|
|
var calendar = $('#calendar').fullCalendar({
|
|
buttonText: {
|
|
prev: '<i class="icon-chevron-left"></i>',
|
|
next: '<i class="icon-chevron-right"></i>'
|
|
},
|
|
header: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'month,agendaWeek,agendaDay'
|
|
},
|
|
events: [{
|
|
title: 'Meeting with Boss',
|
|
start: new Date(y, m, 1),
|
|
className: 'label-default'
|
|
}, {
|
|
title: 'Bootstrap Seminar',
|
|
start: new Date(y, m, d - 5),
|
|
end: new Date(y, m, d - 2),
|
|
className: 'label-teal'
|
|
}, {
|
|
title: 'Lunch with Nicole',
|
|
start: new Date(y, m, d - 3, 12, 0),
|
|
className: 'label-green',
|
|
allDay: false
|
|
}],
|
|
editable: true,
|
|
droppable: true, // this allows things to be dropped onto the calendar !!!
|
|
drop: function (date, allDay) { // this function is called when something is dropped
|
|
// retrieve the dropped element's stored Event Object
|
|
var originalEventObject = $(this).data('eventObject');
|
|
var $categoryClass = $(this).attr('data-class');
|
|
// we need to copy it, so that multiple events don't have a reference to the same object
|
|
var copiedEventObject = $.extend({}, originalEventObject);
|
|
// assign it the date that was reported
|
|
copiedEventObject.start = date;
|
|
copiedEventObject.allDay = allDay;
|
|
if ($categoryClass)
|
|
copiedEventObject['className'] = [$categoryClass];
|
|
// render the event on the calendar
|
|
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
|
|
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
|
|
// is the "remove after drop" checkbox checked?
|
|
if ($('#drop-remove').is(':checked')) {
|
|
// if so, remove the element from the "Draggable Events" list
|
|
$(this).remove();
|
|
}
|
|
},
|
|
selectable: true,
|
|
selectHelper: true,
|
|
select: function (start, end, allDay) {
|
|
$modal.modal({
|
|
backdrop: 'static'
|
|
});
|
|
form = $("<form></form>");
|
|
form.append("<div class='row'></div>");
|
|
form.find(".row").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>New Event Name</label><input class='form-control' placeholder='Insert Event Name' type=text name='title'/></div></div>").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>").find("select[name='category']").append("<option value='label-default'>Work</option>").append("<option value='label-green'>Home</option>").append("<option value='label-purple'>Holidays</option>").append("<option value='label-orange'>Party</option>").append("<option value='label-yellow'>Birthday</option>").append("<option value='label-teal'>Generic</option>").append("<option value='label-beige'>To Do</option>");
|
|
$modal.find('.remove-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
|
|
form.submit();
|
|
});
|
|
$modal.find('form').on('submit', function () {
|
|
title = form.find("input[name='title']").val();
|
|
$categoryClass = form.find("select[name='category'] option:checked").val();
|
|
if (title !== null) {
|
|
calendar.fullCalendar('renderEvent', {
|
|
title: title,
|
|
start: start,
|
|
end: end,
|
|
allDay: allDay,
|
|
className: $categoryClass
|
|
}, true // make the event "stick"
|
|
);
|
|
}
|
|
$modal.modal('hide');
|
|
return false;
|
|
});
|
|
calendar.fullCalendar('unselect');
|
|
},
|
|
eventClick: function (calEvent, jsEvent, view) {
|
|
var form = $("<form></form>");
|
|
form.append("<label>Change event name</label>");
|
|
form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='icon-ok'></i> Save</button></span></div>");
|
|
$modal.modal({
|
|
backdrop: 'static'
|
|
});
|
|
$modal.find('.remove-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.remove-event').unbind('click').click(function () {
|
|
calendar.fullCalendar('removeEvents', function (ev) {
|
|
return (ev._id == calEvent._id);
|
|
});
|
|
$modal.modal('hide');
|
|
});
|
|
$modal.find('form').on('submit', function () {
|
|
calEvent.title = form.find("input[type=text]").val();
|
|
calendar.fullCalendar('updateEvent', calEvent);
|
|
$modal.modal('hide');
|
|
return false;
|
|
});
|
|
}
|
|
});
|
|
};
|
|
return {
|
|
init: function () {
|
|
/*runChart1();
|
|
runChart2();
|
|
runChart3();
|
|
runSparkline();
|
|
runEasyPieChart();*/
|
|
runFullCalendar();
|
|
}
|
|
};
|
|
}(); |