mirror/moodle-auth_outage
1
0
Fork 0
mirror of https://github.com/catalyst/moodle-auth_outage.git synced 2026-05-17 05:48:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Issue #32 - UX improvements, detect end of outage and show in warning bar. Does not redirect user to info page anymore.

Browse Source
This commit is contained in:
Daniel Thee Roperto
2016-09-23 15:53:28 +10:00
parent 80ed7b69ad
commit ded6b2d005
16 changed files with 598 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
views/info/content.php
View File

@@ -25,20 +25,20 @@
defined('MOODLE_INTERNAL') || die();
if ($this->has_admin_options()) {
if ($viewbag['admin']) {
$adminlinks = [];
foreach ([
'startofwarning' => -$this->outage->get_warning_duration(),
'startofwarning' => -$viewbag['outage']->get_warning_duration(),
'15secondsbefore' => -15,
'start' => 0,
'endofoutage' => $this->outage->get_duration_planned(),
'endofoutage' => $viewbag['outage']->get_duration_planned() - 1,
] as $title => $delta) {
$adminlinks[] = html_writer::link(
new moodle_url(
'/auth/outage/info.php',
[
'id' => $this->outage->id,
'auth_outage_preview' => $this->outage->id,
'id' => $viewbag['outage']->id,
'auth_outage_preview' => $viewbag['outage']->id,
'auth_outage_delta' => $delta,
]
),
@@ -47,7 +47,7 @@ if ($this->has_admin_options()) {
}
$admineditlink = html_writer::link(
new moodle_url('/auth/outage/edit.php', ['id' => $this->outage->id]),
new moodle_url('/auth/outage/edit.php', ['id' => $viewbag['outage']->id]),
get_string('outageedit', 'auth_outage')
);
}
@@ -57,15 +57,15 @@ if ($this->has_admin_options()) {
<div>
<b><?php echo get_string('infofrom', 'auth_outage'); ?></b>
<?php echo userdate($this->outage->starttime, get_string('datetimeformat', 'auth_outage')); ?>
<?php echo userdate($viewbag['outage']->starttime, get_string('datetimeformat', 'auth_outage')); ?>
</div>
<div>
<b><?php echo get_string('infountil', 'auth_outage'); ?></b>
<?php echo userdate($this->outage->stoptime, get_string('datetimeformat', 'auth_outage')); ?>
<?php echo userdate($viewbag['outage']->stoptime, get_string('datetimeformat', 'auth_outage')); ?>
</div>
<div class="auth_outage_info_description"><?php echo $this->outage->get_description(); ?></div>
<div class="auth_outage_info_description"><?php echo $viewbag['outage']->get_description(); ?></div>
<?php if ($this->has_admin_options()): ?>
<?php if ($viewbag['admin']): ?>
<div class="auth_outage_info_adminlinks">
<b><?php echo get_string('preview'); ?>:</b>
<?php echo implode(' | ', $adminlinks); ?><br/>

19
views/info/static.php
View File

@@ -23,14 +23,19 @@
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
use auth_outage\output\renderer;
defined('MOODLE_INTERNAL') || die();
global $SITE;
// The Meta Refresh will ensure the page keeps refreshing every 5 minutes until outage is over.
?>
<!DOCTYPE html>
<html data-outage-id="<?php echo $this->outage->id; ?>">
<html data-outage-id="<?php echo $viewbag['outage']->id; ?>">
<head>
<title><?php echo strip_tags($SITE->fullname); ?></title>
<meta http-equiv="refresh" content="<?php echo (5 * 60); ?>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@@ -42,12 +47,8 @@ global $SITE;
<body>
<?php
// TODO refactor warning bar to not require this.
// The static page always shows as if outage has started.
$outage = $this->outage;
$static = true;
require($CFG->dirroot.'/auth/outage/views/warningbar.php');
// Static page is rendered as if outage started. It is never rendered as admin or preview mode.
echo renderer::get()->render_warningbar($viewbag['outage'], $viewbag['outage']->starttime, false, false);
?>
<header>
@@ -55,8 +56,8 @@ require($CFG->dirroot.'/auth/outage/views/warningbar.php');
</header>
<section>
<h2><?php echo $this->outage->get_title(); ?></h2>
<?php require(__DIR__.'/content.php'); ?>
<h2><?php echo $viewbag['outage']->get_title(); ?></h2>
<?php echo renderer::get()->render_view('info/content.php', $viewbag); ?>
</section>
<!-- <?php echo

51
views/warningbar.js
View File

@@ -1,51 +0,0 @@
var auth_outage_countdown = {
timer: 0,
clienttime: Date.now(),
siteadmin: false,
init: function (countdown, siteadmin, redirectto) {
this.countdown = countdown;
this.siteadmin = siteadmin;
this.redirectto = redirectto;
this.divtext = document.getElementById('auth_outage_warningbar_countdown');
this.divblock = document.getElementById('auth_outage_warningbar_box');
this.text = this.divtext.innerHTML;
var $this = this;
this.timer = setInterval(function () {
$this.tick();
}, 1000);
this.tick();
},
tick: function () {
var elapsed = Math.round((Date.now() - this.clienttime) / 1000);
var missing = this.countdown - elapsed;
if (!this.siteadmin && (missing === 10)) {
this.divblock.className += ' imminent';
this.divblock.style.height = window.innerHeight + 'px';
}
if (missing <= 0) {
missing = 0;
clearInterval(this.timer);
if (!this.siteadmin) {
window.location = this.redirectto;
}
}
this.divtext.innerHTML = this.text.replace('{{countdown}}', this.seconds2hms(missing));
},
seconds2hms: function (seconds) {
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
seconds %= 60;
minutes %= 60;
// Cross-browser simple solution for padding zeroes.
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
return hours + ':' + minutes + ':' + seconds;
}
};
// auth_outage_countdown is used outside this js file.
/* jshint unused:false */

91
views/warningbar.php
View File

@@ -1,91 +0,0 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* View included by the renderer to output the outage warning bar.
*
* @package auth_outage
* @author Daniel Thee Roperto <daniel.roperto@catalyst-au.net>
* @copyright 2016 Catalyst IT
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
use auth_outage\local\outagelib;
defined('MOODLE_INTERNAL') || die();
global $OUTPUT;
if (!isset($static)) {
$static = false;
}
if ($static) {
$start = userdate($outage->starttime, get_string('datetimeformat', 'auth_outage'));
$stop = userdate($outage->stoptime, get_string('datetimeformat', 'auth_outage'));
$countdown = get_string('messageoutageongoing', 'auth_outage', ['start' => $start, 'stop' => $stop]);
} else {
$infolink = new moodle_url('/auth/outage/info.php', ['id' => $outage->id]);
}
echo html_writer::tag('style', outagelib::get_config()->css);
?>
<div id="auth_outage_warningbar_box">
<div class="auth_outage_warningbar_center">
<div id="auth_outage_warningbar_countdown"><?php echo $countdown; ?></div>
<div>
<?php
if ($static) {
echo $outage->get_title();
} else {
echo html_writer::link(
$infolink,
$outage->get_title(),
['target' => '_blank', 'class' => 'auth_outage_warningbar_box_title']
);
}
if (!$static && is_siteadmin() && $outage->is_ongoing()) {
$url = new moodle_url('/auth/outage/finish.php', ['id' => $outage->id]);
$text = html_writer::empty_tag('img', [
'src' => $OUTPUT->pix_url('t/check'),
'alt' => get_string('finish', 'auth_outage'),
'class' => 'iconsmall',
]).' '.get_string('finish', 'auth_outage');
$attr = [
'title' => get_string('finish', 'auth_outage'),
'class' => 'auth_outage_warningbar_box_finish',
];
echo html_writer::link($url, $text, $attr);
}
?>
</div>
</div>
</div>
<?php if (!$static && !$outage->is_ongoing($time)): ?>
<script>
<?php require($CFG->dirroot.'/auth/outage/views/warningbar.js'); ?>
auth_outage_countdown.init(
<?php echo($outage->starttime - $time); ?>,
<?php echo(is_siteadmin() ? 'true' : 'false'); ?>,
'<?php echo $infolink; ?>'
);
</script>
<?php endif; ?>
<div class="auth_outage_warningbar_spacer">&nbsp;</div>

48
views/warningbar.css → views/warningbar/warningbar.css
View File

@@ -13,13 +13,53 @@ If you need to make changes here, remember to update your settings inside Moodle
position: fixed;
text-align: center;
top: 0;
transition: height 10s linear;
transition: background 3s ease-out;
width: 100%;
z-index: 9999;
}
#auth_outage_warningbar_box.imminent {
background: purple;
#auth_outage_warningbar_box.auth_outage_warning_period {
background: repeating-linear-gradient(
-45deg,
#ff7c00,
#ff7c00 10px,
#ff6c00 10px,
#ff6c00 20px
);
background-color: #ff7c00;
}
#auth_outage_warningbar_box.auth_outage_imminent_period {
background: repeating-linear-gradient(
-45deg,
#a000a0,
#a000a0 10px,
#800080 10px,
#800080 20px
);
background-color: #800080;
}
#auth_outage_warningbar_box.auth_outage_ongoing_period {
background: repeating-linear-gradient(
-45deg,
#ee0000,
#ee0000 10px,
#cc0000 10px,
#cc0000 20px
);
background-color: #ee0000;
}
#auth_outage_warningbar_box.auth_outage_finished_period {
background: repeating-linear-gradient(
-45deg,
#00aa00,
#00aa00 10px,
#009900 10px,
#009900 20px
);
background-color: #009900;
}
.auth_outage_warningbar_center {
@@ -28,7 +68,7 @@ If you need to make changes here, remember to update your settings inside Moodle
top: 50%;
}
#auth_outage_warningbar_countdown {
#auth_outage_warningbar_message {
font-size: 200%;
font-weight: bold;
margin: 10px 0;

122
views/warningbar/warningbar.js Normal file
View File

@@ -0,0 +1,122 @@
var auth_outage_warningbar = {
init: function (params) {
this.preview = params.preview;
this.countdown = params.countdown;
this.ongoing = params.ongoing;
this.backonline = params.backonline;
this.backonlinedescription = params.backonlinedescription;
this.servertime = params.servertime;
this.checkfinishedurl = params.checkfinishedurl;
this.starts = params.starts;
this.stops = params.stops;
this.clienttime = Date.now();
this.finished = false;
this.divtext = document.getElementById('auth_outage_warningbar_message');
this.divtitle = document.getElementById('auth_outage_warningbar_title');
this.divblock = document.getElementById('auth_outage_warningbar_box');
this.finishbutton = document.getElementById('auth_outage_warningbar_button');
this.startWarning();
},
startWarning: function () {
if (this.finishbutton) {
this.finishbutton.style.display = 'none';
}
this.divblock.className = 'auth_outage_warning_period';
this.tickWarning();
},
tickWarning: function () {
var elapsed = Math.round((Date.now() - this.clienttime) / 1000);
var missing = (this.starts - this.servertime) - elapsed;
if (missing <= 0) {
this.startOngoing();
} else {
if (missing <= 10) {
this.divblock.className = 'auth_outage_imminent_period';
}
this.divtext.innerHTML = this.countdown.replace('{{countdown}}', this.seconds2hms(missing));
var $this = this;
setTimeout(function () {
$this.tickWarning();
}, 1000);
}
},
startOngoing: function () {
this.divblock.className = 'auth_outage_ongoing_period';
if (this.finishbutton) {
this.finishbutton.style.display = '';
}
this.divtext.innerHTML = this.ongoing;
this.tickOngoing();
},
tickOngoing: function () {
if (this.finished) {
return;
}
if (this.preview) {
// If one second before finish time, enfore finish. Otherwise, never finish it.
if (this.servertime == this.stops - 1) {
this.finish();
}
else {
return;
}
}
var $this = this;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
$this.ajaxCheckFinished(this);
};
xmlhttp.open("GET", this.checkfinishedurl, true);
xmlhttp.send();
setTimeout(function () {
$this.tickOngoing();
}, (5 * 60 * 1000)); // Check every 5 minutes.
},
ajaxCheckFinished: function (ajax) {
if (ajax.readyState == XMLHttpRequest.DONE) {
if (ajax.status == 200) {
if (ajax.responseText.trim() === 'finished') {
this.finish();
}
}
}
},
finish: function () {
this.divblock.className = 'auth_outage_finished_period';
if (this.finishbutton) {
this.finishbutton.style.display = 'none';
}
this.divtext.innerHTML = this.backonline;
this.divtitle.innerHTML = this.backonlinedescription;
},
seconds2hms: function (seconds) {
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
seconds %= 60;
minutes %= 60;
// Cross-browser simple solution for padding zeroes.
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
return hours + ':' + minutes + ':' + seconds;
}
};
// auth_outage_countdown is used outside this js file.
/* jshint unused:false */

93
views/warningbar/warningbar.php Normal file
View File

@@ -0,0 +1,93 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* View included by the renderer to output the outage warning bar.
*
* @package auth_outage
* @author Daniel Thee Roperto <daniel.roperto@catalyst-au.net>
* @copyright 2016 Catalyst IT
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
use auth_outage\local\outagelib;
defined('MOODLE_INTERNAL') || die();
global $OUTPUT;
$start = userdate($viewbag['outage']->starttime, get_string('datetimeformat', 'auth_outage'));
$stop = userdate($viewbag['outage']->stoptime, get_string('datetimeformat', 'auth_outage'));
$countdown = get_string('messageoutagewarning', 'auth_outage', ['start' => $start, 'stop' => $stop]);
$ongoing = get_string('messageoutageongoing', 'auth_outage', ['start' => $start, 'stop' => $stop]);
$message = $viewbag['outage']->is_ongoing($viewbag['time']) ? $ongoing : '';
$infolink = new moodle_url('/auth/outage/info.php', ['id' => $viewbag['outage']->id]);
$title = $viewbag['outage']->get_title();
if (!$viewbag['static']) {
$title = html_writer::link(
$infolink,
$title,
['target' => '_blank', 'class' => 'auth_outage_warningbar_box_title']
);
if (is_siteadmin()) {
$url = new moodle_url('/auth/outage/finish.php', ['id' => $viewbag['outage']->id]);
$text = html_writer::empty_tag('img', [
'src' => $OUTPUT->pix_url('t/check'),
'alt' => get_string('finish', 'auth_outage'),
'class' => 'iconsmall',
]).' '.get_string('finish', 'auth_outage');
$attr = [
'title' => get_string('finish', 'auth_outage'),
'class' => 'auth_outage_warningbar_box_finish',
];
$title .= ' '.html_writer::span(html_writer::link($url, $text, $attr), '', ['id' => 'auth_outage_warningbar_button']);
}
}
echo html_writer::tag('style', outagelib::get_config()->css);
?>
<div id="auth_outage_warningbar_box">
<div class="auth_outage_warningbar_center">
<div id="auth_outage_warningbar_message"><?php echo $message; ?></div>
<div id="auth_outage_warningbar_title"><?php echo $title; ?></div>
</div>
</div>
<div class="auth_outage_warningbar_spacer">&nbsp;</div>
<?php if (!$viewbag['static']): ?>
<script>
<?php
require(__DIR__.'/warningbar.js');
$json = json_encode([
'countdown' => $countdown,
'ongoing' => $ongoing,
'backonline' => get_string('messageoutagebackonline', 'auth_outage'),
'backonlinedescription' => get_string('messageoutagebackonlinedescription', 'auth_outage'),
'servertime' => $viewbag['time'],
'starts' => $viewbag['outage']->starttime,
'stops' => $viewbag['outage']->stoptime,
'preview' => $viewbag['preview'],
'checkfinishedurl' => (string)(new moodle_url('/auth/outage/checkfinished.php')),
]);
echo 'auth_outage_warningbar.init('.$json.');';
?>
</script>
<?php endif;