Calendar: add loading indicator

apps/calendar/css/style.css

@@ -17,6 +17,8 @@
 #editentry_dialog {display: none;}
 #parsingfail_dialog{display: none;}
 
+#loading { display: none; left: 40%; position: fixed; top: 4.4em; z-index: 100; }
+
 #calendar_holder {position: relative;bottom: 0; right: 0; left: 0; top: 3em;}
 .fc-content{padding:2px 4px;}
 #listview {margin: 0; padding: 10px; background: #EEEEEE;}

apps/calendar/js/calendar.js

@@ -8,7 +8,15 @@
 
 Calendar={
 	UI:{
+		loading: function(isLoading){
+			if (isLoading){
+				$('#loading').show();
+			}else{
+				$('#loading').hide();
+			}
+		},
 		startEventDialog:function(){
+			Calendar.UI.loading(false);
 			$('.tipsy').remove();
 			$('#calendar_holder').fullCalendar('unselect');
 			Calendar.UI.lockTime();
@@ -41,6 +49,7 @@ Calendar={
 				// TODO: save event
 				$('#event').dialog('destroy').remove();
 			}else{
+				Calendar.UI.loading(true);
 				$('#dialog_holder').load(OC.filePath('calendar', 'ajax', 'neweventform.php'), {start:start, end:end, allday:allday?1:0}, Calendar.UI.startEventDialog);
 			}
 		},
@@ -50,13 +59,16 @@ Calendar={
 				// TODO: save event
 				$('#event').dialog('destroy').remove();
 			}else{
+				Calendar.UI.loading(true);
 				$('#dialog_holder').load(OC.filePath('calendar', 'ajax', 'editeventform.php') + '?id=' + id, Calendar.UI.startEventDialog);
 			}
 		},
 		submitDeleteEventForm:function(url){
 			var post = $( '#event_form' ).serialize();
 			$('#errorbox').empty();
+			Calendar.UI.loading(true);
 			$.post(url, post, function(data){
+					Calendar.UI.loading(false);
 					if(data.status == 'success'){
 						$('#calendar_holder').fullCalendar('removeEvents', $('#event_form input[name=id]').val());
 						$('#event').dialog('destroy').remove();
@@ -69,8 +81,10 @@ Calendar={
 		validateEventForm:function(url){
 			var post = $( "#event_form" ).serialize();
 			$("#errorbox").empty();
+			Calendar.UI.loading(true);
 			$.post(url, post,
 				function(data){
+					Calendar.UI.loading(false);
 					if(data.status == "error"){
 						var output = missing_field + ": <br />";
 						if(data.title == "true"){
@@ -107,8 +121,10 @@ Calendar={
 		},
 		moveEvent:function(event, dayDelta, minuteDelta, allDay, revertFunc){
 			$('.tipsy').remove();
+			Calendar.UI.loading(true);
 			$.post(OC.filePath('calendar', 'ajax', 'moveevent.php'), { id: event.id, dayDelta: dayDelta, minuteDelta: minuteDelta, allDay: allDay?1:0, lastmodified: event.lastmodified},
 			function(data) {
+				Calendar.UI.loading(false);
 				if (data.status == 'success'){
 					event.lastmodified = data.lastmodified;
 					console.log("Event moved successfully");
@@ -120,8 +136,10 @@ Calendar={
 		},
 		resizeEvent:function(event, dayDelta, minuteDelta, revertFunc){
 			$('.tipsy').remove();
+			Calendar.UI.loading(true);
 			$.post(OC.filePath('calendar', 'ajax', 'resizeevent.php'), { id: event.id, dayDelta: dayDelta, minuteDelta: minuteDelta, lastmodified: event.lastmodified},
 			function(data) {
+				Calendar.UI.loading(false);
 				if (data.status == 'success'){
 					event.lastmodified = data.lastmodified;
 					console.log("Event resized successfully");
@@ -210,6 +228,7 @@ Calendar={
 				if($('#choosecalendar_dialog').dialog('isOpen') == true){
 					$('#choosecalendar_dialog').dialog('moveToTop');
 				}else{
+					Calendar.UI.loading(true);
 					$('#dialog_holder').load(OC.filePath('calendar', 'ajax', 'choosecalendar.php'), function(){
 						$('#choosecalendar_dialog').dialog({
 							width : 600,
@@ -217,13 +236,16 @@ Calendar={
 								$(this).dialog('destroy').remove();
 							}
 						});
+						Calendar.UI.loading(false);
 					});
 				}
 			},
 			activation:function(checkbox, calendarid)
 			{
+				Calendar.UI.loading(true);
 				$.post(OC.filePath('calendar', 'ajax', 'activation.php'), { calendarid: calendarid, active: checkbox.checked?1:0 },
 				  function(data) {
+					Calendar.UI.loading(false);
 					if (data.status == 'success'){
 						checkbox.checked = data.active == 1;
 						if (data.active == 1){
@@ -520,6 +542,7 @@ $(document).ready(function(){
 				}
 			});
 		},
+		loading: Calendar.UI.loading,
 		eventSources: eventSources
 	});
 	$('#oneweekview_radio').click(function(){

apps/calendar/templates/calendar.php

@@ -19,6 +19,7 @@
 				var missing_field_dberror = '<?php echo $l->t('There was a database fail') ?>';
 				var totalurl = '<?php echo OC_Helper::linkTo('apps/calendar', 'caldav.php', null, true); ?>/calendars';
 				</script>
+				<div id="loading"><img src="<?php echo OC_Helper::imagePath('core', 'loading.gif'); ?>" /></div>
 				<div id="controls">
 					<div>
 						<form>