Calendar: add loading indicator

diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css
index 0204f2fc12faa96274963a09d6455161881c9c8e..6555c25a76797912ac0dbcca83df5ac0b76d61f4 100644 (file)
--- a/apps/calendar/css/style.css
+++ b/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;}

diff --git a/apps/calendar/js/calendar.js b/apps/calendar/js/calendar.js
index c3644b537041b95a2e6ac5237824a614226ecdfd..6e0a450f6a8f980f50ae545ff8b5df881e3d634e 100644 (file)
--- a/apps/calendar/js/calendar.js
+++ b/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(){

diff --git a/apps/calendar/templates/calendar.php b/apps/calendar/templates/calendar.php
index 2003b7efc491f7ac38e96c86e7b3a90a7598d0d4..13bc8bc1bb1659fab2298486b3cbc964425bf165 100755 (executable)
--- a/apps/calendar/templates/calendar.php
+++ b/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>