MDL-42597 Administration: Modified maintenance mode countdown to display nicely

Added Style and JS to display maintenance mode timer similar
to what is done on moodle demo site for rest.

lang/en/admin.php

@@ -671,7 +671,7 @@ $string['loginpasswordautocomplete_help'] = 'Having this off will let users save
 $string['loglifetime'] = 'Keep logs for';
 $string['longtimewarning'] = '<b>Please note that this process can take a long time.</b>';
 $string['maintenancemode'] = 'In maintenance mode';
-$string['maintenancemodeisscheduled'] = 'Site is switching to maintenance mode in {$a} minutes';
+$string['maintenancemodeisscheduled'] = 'This site will be switched to maintenance mode in {$a->min} mins {$a->sec} secs';
 $string['maintfileopenerror'] = 'Error opening maintenance files!';
 $string['maintinprogress'] = 'Maintenance is in progress...';
 $string['manageformats'] = 'Manage course formats';

lib/outputrenderers.php

@@ -468,9 +468,20 @@ class core_renderer extends renderer_base {
 
         $output = '';
         if (isset($CFG->maintenance_later) and $CFG->maintenance_later > time()) {
-            $output .= $this->box_start('errorbox maintenancewarning');
-            $output .= get_string('maintenancemodeisscheduled', 'admin', (int)(($CFG->maintenance_later-time())/60));
+            $timeleft = $CFG->maintenance_later - time();
+            // If timeleft less than 30 sec, set the class on block to error to highlight.
+            $errorclass = ($timeleft < 30) ? 'error' : 'warning';
+            $output .= $this->box_start($errorclass . ' moodle-has-zindex maintenancewarning');
+            $a = new stdClass();
+            $a->min = (int)($timeleft/60);
+            $a->sec = (int)($timeleft % 60);
+            $output .= get_string('maintenancemodeisscheduled', 'admin', $a) ;
             $output .= $this->box_end();
+            $this->page->requires->yui_module('moodle-core-maintenancemodetimer', 'M.core.maintenancemodetimer',
+                    array(array('timeleftinsec' => $timeleft)));
+            $this->page->requires->strings_for_js(
+                    array('maintenancemodeisscheduled', 'sitemaintenance'),
+                    'admin');
         }
         return $output;
     }

lib/yui/build/moodle-core-maintenancemode/moodle-core-maintenancemode-debug.js

@@ -0,0 +1,58 @@
+YUI.add('moodle-core-maintenancemode', function (Y, NAME) {
+
+/**
+ * Maintenance mode timer display.
+ *
+ * @module moodle-core-maintenancemodetimer
+ */
+var MAINTENANCEMODETIMER = function() {
+        MAINTENANCEMODETIMER.superclass.constructor.apply(this, arguments);
+    };
+
+Y.extend(MAINTENANCEMODE, Y.Base, {
+    timeleftinsec: 0,
+    maintenancenode: Y.one('.box.maintenancewarning'),
+
+    /**
+     * Initialise timer if maintenancemode set.
+     *
+     * @param config {Array} array with timeleftinsec set.
+     */
+    initializer: function(config) {
+        if (this.maintenancenode) {
+            this.timeleftinsec = config.timeleftinsec;
+            this.maintenancenode.setAttribute('aria-live', 'polite');
+            Y.later(1000, this, 'updatetimer', null, true);
+        }
+    },
+
+    /**
+     * Decrement time left and update display text.
+     */
+    updatetimer: function() {
+        this.timeleftinsec -= 1;
+        if (this.timeleftinsec <= 0) {
+            this.maintenancenode.set('text', M.str.admin.sitemaintenance);
+        } else {
+            var a = {};
+            a.sec = this.timeleftinsec % 60;
+            a.min = Math.floor(this.timeleftinsec / 60);
+            this.maintenancenode.set('text', M.util.get_string('maintenancemodeisscheduled', 'admin', a));
+        }
+        // Set error class to highlight the importance.
+        if (this.timeleftinsec < 30) {
+            this.maintenancenode.addClass('error')
+                    .removeClass('warning');
+        } else {
+            this.maintenancenode.addClass('warning')
+                    .removeClass('error');
+        }
+    }
+});
+M.core = M.core || {};
+M.core.maintenancemodetimer = M.core.maintenancemodetimer || function(config) {
+    return new MAINTENANCEMODETIMER(config);
+};
+
+
+}, '@VERSION@', {"requires": ["base", "node"]});

lib/yui/build/moodle-core-maintenancemode/moodle-core-maintenancemode-min.js

@@ -0,0 +1 @@
+YUI.add("moodle-core-maintenancemode",function(e,t){var n=function(){n.superclass.constructor.apply(this,arguments)};e.extend(MAINTENANCEMODE,e.Base,{timeleftinsec:0,maintenancenode:e.one(".box.maintenancewarning"),initializer:function(t){this.maintenancenode&&(this.timeleftinsec=t.timeleftinsec,this.maintenancenode.setAttribute("aria-live","polite"),e.later(1e3,this,"updatetimer",null,!0))},updatetimer:function(){this.timeleftinsec-=1;if(this.timeleftinsec<=0)this.maintenancenode.set("text",M.str.admin.sitemaintenance);else{var e={};e.sec=this.timeleftinsec%60,e.min=Math.floor(this.timeleftinsec/60),this.maintenancenode.set("text",M.util.get_string("maintenancemodeisscheduled","admin",e))}this.timeleftinsec<30?this.maintenancenode.addClass("error").removeClass("warning"):this.maintenancenode.addClass("warning").removeClass("error")}}),M.core=M.core||{},M.core.maintenancemodetimer=M.core.maintenancemodetimer||function(e){return new n(e)}},"@VERSION@",{requires:["base","node"]});

lib/yui/build/moodle-core-maintenancemode/moodle-core-maintenancemode.js

@@ -0,0 +1,58 @@
+YUI.add('moodle-core-maintenancemode', function (Y, NAME) {
+
+/**
+ * Maintenance mode timer display.
+ *
+ * @module moodle-core-maintenancemodetimer
+ */
+var MAINTENANCEMODETIMER = function() {
+        MAINTENANCEMODETIMER.superclass.constructor.apply(this, arguments);
+    };
+
+Y.extend(MAINTENANCEMODE, Y.Base, {
+    timeleftinsec: 0,
+    maintenancenode: Y.one('.box.maintenancewarning'),
+
+    /**
+     * Initialise timer if maintenancemode set.
+     *
+     * @param config {Array} array with timeleftinsec set.
+     */
+    initializer: function(config) {
+        if (this.maintenancenode) {
+            this.timeleftinsec = config.timeleftinsec;
+            this.maintenancenode.setAttribute('aria-live', 'polite');
+            Y.later(1000, this, 'updatetimer', null, true);
+        }
+    },
+
+    /**
+     * Decrement time left and update display text.
+     */
+    updatetimer: function() {
+        this.timeleftinsec -= 1;
+        if (this.timeleftinsec <= 0) {
+            this.maintenancenode.set('text', M.str.admin.sitemaintenance);
+        } else {
+            var a = {};
+            a.sec = this.timeleftinsec % 60;
+            a.min = Math.floor(this.timeleftinsec / 60);
+            this.maintenancenode.set('text', M.util.get_string('maintenancemodeisscheduled', 'admin', a));
+        }
+        // Set error class to highlight the importance.
+        if (this.timeleftinsec < 30) {
+            this.maintenancenode.addClass('error')
+                    .removeClass('warning');
+        } else {
+            this.maintenancenode.addClass('warning')
+                    .removeClass('error');
+        }
+    }
+});
+M.core = M.core || {};
+M.core.maintenancemodetimer = M.core.maintenancemodetimer || function(config) {
+    return new MAINTENANCEMODETIMER(config);
+};
+
+
+}, '@VERSION@', {"requires": ["base", "node"]});

lib/yui/build/moodle-core-maintenancemodetimer/moodle-core-maintenancemodetimer-debug.js

@@ -0,0 +1,59 @@
+YUI.add('moodle-core-maintenancemodetimer', function (Y, NAME) {
+
+/**
+ * Maintenance mode timer display.
+ *
+ * @module moodle-core-maintenancemodetimer
+ */
+var MAINTENANCEMODETIMER = function() {
+        MAINTENANCEMODETIMER.superclass.constructor.apply(this, arguments);
+    };
+
+Y.extend(MAINTENANCEMODETIMER, Y.Base, {
+    timeleftinsec: 0,
+    maintenancenode: Y.one('.box.maintenancewarning'),
+
+    /**
+     * Initialise timer if maintenancemode set.
+     *
+     * @param config {Array} array with timeleftinsec set.
+     */
+    initializer: function(config) {
+        if (this.maintenancenode) {
+            this.timeleftinsec = config.timeleftinsec;
+            this.maintenancenode.setAttribute('aria-live', 'polite');
+            Y.later(1000, this, 'updatetimer', null, true);
+        }
+    },
+
+    /**
+     * Decrement time left and update display text.
+     */
+    updatetimer: function() {
+        this.timeleftinsec -= 1;
+        if (this.timeleftinsec <= 0) {
+            this.maintenancenode.set('text', M.str.admin.sitemaintenance);
+        } else {
+            var a = {};
+            a.sec = this.timeleftinsec % 60;
+            a.min = Math.floor(this.timeleftinsec / 60);
+            this.maintenancenode.set('text', M.util.get_string('maintenancemodeisscheduled', 'admin', a));
+        }
+        // Set error class to highlight the importance.
+        if (this.timeleftinsec < 30) {
+            this.maintenancenode.addClass('error')
+                    .removeClass('warning');
+        } else {
+            this.maintenancenode.addClass('warning')
+                    .removeClass('error');
+        }
+    }
+});
+
+M.core = M.core || {};
+M.core.maintenancemodetimer = M.core.maintenancemodetimer || function(config) {
+    return new MAINTENANCEMODETIMER(config);
+};
+
+
+}, '@VERSION@', {"requires": ["base", "node"]});

lib/yui/build/moodle-core-maintenancemodetimer/moodle-core-maintenancemodetimer-min.js

@@ -0,0 +1 @@
+YUI.add("moodle-core-maintenancemodetimer",function(e,t){var n=function(){n.superclass.constructor.apply(this,arguments)};e.extend(n,e.Base,{timeleftinsec:0,maintenancenode:e.one(".box.maintenancewarning"),initializer:function(t){this.maintenancenode&&(this.timeleftinsec=t.timeleftinsec,this.maintenancenode.setAttribute("aria-live","polite"),e.later(1e3,this,"updatetimer",null,!0))},updatetimer:function(){this.timeleftinsec-=1;if(this.timeleftinsec<=0)this.maintenancenode.set("text",M.str.admin.sitemaintenance);else{var e={};e.sec=this.timeleftinsec%60,e.min=Math.floor(this.timeleftinsec/60),this.maintenancenode.set("text",M.util.get_string("maintenancemodeisscheduled","admin",e))}this.timeleftinsec<30?this.maintenancenode.addClass("error").removeClass("warning"):this.maintenancenode.addClass("warning").removeClass("error")}}),M.core=M.core||{},M.core.maintenancemodetimer=M.core.maintenancemodetimer||function(e){return new n(e)}},"@VERSION@",{requires:["base","node"]});

lib/yui/build/moodle-core-maintenancemodetimer/moodle-core-maintenancemodetimer.js

@@ -0,0 +1,59 @@
+YUI.add('moodle-core-maintenancemodetimer', function (Y, NAME) {
+
+/**
+ * Maintenance mode timer display.
+ *
+ * @module moodle-core-maintenancemodetimer
+ */
+var MAINTENANCEMODETIMER = function() {
+        MAINTENANCEMODETIMER.superclass.constructor.apply(this, arguments);
+    };
+
+Y.extend(MAINTENANCEMODETIMER, Y.Base, {
+    timeleftinsec: 0,
+    maintenancenode: Y.one('.box.maintenancewarning'),
+
+    /**
+     * Initialise timer if maintenancemode set.
+     *
+     * @param config {Array} array with timeleftinsec set.
+     */
+    initializer: function(config) {
+        if (this.maintenancenode) {
+            this.timeleftinsec = config.timeleftinsec;
+            this.maintenancenode.setAttribute('aria-live', 'polite');
+            Y.later(1000, this, 'updatetimer', null, true);
+        }
+    },
+
+    /**
+     * Decrement time left and update display text.
+     */
+    updatetimer: function() {
+        this.timeleftinsec -= 1;
+        if (this.timeleftinsec <= 0) {
+            this.maintenancenode.set('text', M.str.admin.sitemaintenance);
+        } else {
+            var a = {};
+            a.sec = this.timeleftinsec % 60;
+            a.min = Math.floor(this.timeleftinsec / 60);
+            this.maintenancenode.set('text', M.util.get_string('maintenancemodeisscheduled', 'admin', a));
+        }
+        // Set error class to highlight the importance.
+        if (this.timeleftinsec < 30) {
+            this.maintenancenode.addClass('error')
+                    .removeClass('warning');
+        } else {
+            this.maintenancenode.addClass('warning')
+                    .removeClass('error');
+        }
+    }
+});
+
+M.core = M.core || {};
+M.core.maintenancemodetimer = M.core.maintenancemodetimer || function(config) {
+    return new MAINTENANCEMODETIMER(config);
+};
+
+
+}, '@VERSION@', {"requires": ["base", "node"]});

lib/yui/src/maintenancemodetimer/build.json

@@ -0,0 +1,10 @@
+{
+  "name": "moodle-core-maintenancemodetimer",
+  "builds": {
+    "moodle-core-maintenancemodetimer": {
+      "jsfiles": [
+        "maintenancemodetimer.js"
+      ]
+    }
+  }
+}

lib/yui/src/maintenancemodetimer/js/maintenancemodetimer.js

@@ -0,0 +1,54 @@
+/**
+ * Maintenance mode timer display.
+ *
+ * @module moodle-core-maintenancemodetimer
+ */
+var MAINTENANCEMODETIMER = function() {
+        MAINTENANCEMODETIMER.superclass.constructor.apply(this, arguments);
+    };
+
+Y.extend(MAINTENANCEMODETIMER, Y.Base, {
+    timeleftinsec: 0,
+    maintenancenode: Y.one('.box.maintenancewarning'),
+
+    /**
+     * Initialise timer if maintenancemode set.
+     *
+     * @param config {Array} array with timeleftinsec set.
+     */
+    initializer: function(config) {
+        if (this.maintenancenode) {
+            this.timeleftinsec = config.timeleftinsec;
+            this.maintenancenode.setAttribute('aria-live', 'polite');
+            Y.later(1000, this, 'updatetimer', null, true);
+        }
+    },
+
+    /**
+     * Decrement time left and update display text.
+     */
+    updatetimer: function() {
+        this.timeleftinsec -= 1;
+        if (this.timeleftinsec <= 0) {
+            this.maintenancenode.set('text', M.str.admin.sitemaintenance);
+        } else {
+            var a = {};
+            a.sec = this.timeleftinsec % 60;
+            a.min = Math.floor(this.timeleftinsec / 60);
+            this.maintenancenode.set('text', M.util.get_string('maintenancemodeisscheduled', 'admin', a));
+        }
+        // Set error class to highlight the importance.
+        if (this.timeleftinsec < 30) {
+            this.maintenancenode.addClass('error')
+                    .removeClass('warning');
+        } else {
+            this.maintenancenode.addClass('warning')
+                    .removeClass('error');
+        }
+    }
+});
+
+M.core = M.core || {};
+M.core.maintenancemodetimer = M.core.maintenancemodetimer || function(config) {
+    return new MAINTENANCEMODETIMER(config);
+};

lib/yui/src/maintenancemodetimer/meta/maintenancemodetimer.json

@@ -0,0 +1,8 @@
+{
+  "moodle-core-maintenancemodetimer": {
+    "requires": [
+        "base",
+        "node"
+    ]
+  }
+}

theme/base/style/admin.css

@@ -350,3 +350,6 @@
 #core-cache-store-summaries .store-requires-attention {background-color:#ffd3d9;}
 
 .tinymcesubplugins img.icon { padding-top: 0; padding-bottom: 0; }
+.maintenancewarning {padding:3px 1em;text-align:center;position:fixed;bottom:0;right:0;overflow:hidden;z-index:1;}
+.maintenancewarning.error {background-color:#F2DEDE;border:2px solid #EED3D7;font-weight:bold;}
+.maintenancewarning.warning {background-color:#ffd3d9;border:2px solid #EED3D7;}

theme/bootstrapbase/less/moodle/admin.less

@@ -769,3 +769,24 @@ img.iconsmall {
     .alert;
     .alert-danger;
 }
+
+.maintenancewarning {
+    padding: 3px 1em;
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+    z-index: 1;
+    &.error {
+        color: @errorText;
+        background-color: @errorBackground;
+        border: 2px solid @errorBorder;
+        font-weight: bold;
+    }
+    &.warning {
+        color: @warningText;
+        background-color: @warningBackground;
+        border: 2px solid @warningBorder;
+    }
+}