From cb0eb4e82608d77bfe401cfe6f68e15e0d5f7f87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojt=C4=9Bch=20Sajdl?=
Date: Wed, 13 Dec 2017 11:58:33 +0100
Subject: [PATCH] Better time & date checking, growl for displaying messages
---
css/jquery.growl.css | 96 +++++++++++++++
footer.php | 1 +
header.php | 1 +
js/admin.js | 23 +++-
js/vendor/jquery.growl.js | 251 ++++++++++++++++++++++++++++++++++++++
5 files changed, 369 insertions(+), 3 deletions(-)
create mode 100644 css/jquery.growl.css
create mode 100644 js/vendor/jquery.growl.js
diff --git a/css/jquery.growl.css b/css/jquery.growl.css
new file mode 100644
index 0000000..bf53002
--- /dev/null
+++ b/css/jquery.growl.css
@@ -0,0 +1,96 @@
+/* jQuery Growl
+ * Copyright 2015 Kevin Sylvestre
+ * 1.3.3
+ */
+.ontop, #growls-default, #growls-tl, #growls-tr, #growls-bl, #growls-br, #growls-tc, #growls-bc, #growls-cc, #growls-cl, #growls-cr {
+ z-index: 50000;
+ position: fixed; }
+
+#growls-default {
+ top: 10px;
+ right: 10px; }
+#growls-tl {
+ top: 10px;
+ left: 10px; }
+#growls-tr {
+ top: 10px;
+ right: 10px; }
+#growls-bl {
+ bottom: 10px;
+ left: 10px; }
+#growls-br {
+ bottom: 10px;
+ right: 10px; }
+#growls-tc {
+ top: 10px;
+ right: 10px;
+ left: 10px; }
+#growls-bc {
+ bottom: 10px;
+ right: 10px;
+ left: 10px; }
+#growls-cc {
+ top: 50%;
+ left: 50%;
+ margin-left: -125px; }
+#growls-cl {
+ top: 50%;
+ left: 10px; }
+#growls-cr {
+ top: 50%;
+ right: 10px; }
+#growls-tc .growl, #growls-bc .growl {
+ margin-left: auto;
+ margin-right: auto; }
+
+.growl {
+ opacity: 0.8;
+ filter: alpha(opacity=80);
+ position: relative;
+ border-radius: 4px;
+ -webkit-transition: all 0.4s ease-in-out;
+ -moz-transition: all 0.4s ease-in-out;
+ transition: all 0.4s ease-in-out; }
+ .growl.growl-incoming {
+ opacity: 0;
+ filter: alpha(opacity=0); }
+ .growl.growl-outgoing {
+ opacity: 0;
+ filter: alpha(opacity=0); }
+ .growl.growl-small {
+ width: 200px;
+ padding: 5px;
+ margin: 5px; }
+ .growl.growl-medium {
+ width: 250px;
+ padding: 10px;
+ margin: 10px; }
+ .growl.growl-large {
+ width: 300px;
+ padding: 15px;
+ margin: 15px; }
+ .growl.growl-default {
+ color: #FFF;
+ background: #7f8c8d; }
+ .growl.growl-error {
+ color: #FFF;
+ background: #C0392B; }
+ .growl.growl-notice {
+ color: #FFF;
+ background: #2ECC71; }
+ .growl.growl-warning {
+ color: #FFF;
+ background: #F39C12; }
+ .growl .growl-close {
+ cursor: pointer;
+ float: right;
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: normal;
+ font-family: helvetica, verdana, sans-serif; }
+ .growl .growl-title {
+ font-size: 18px;
+ line-height: 24px; }
+ .growl .growl-message {
+ font-size: 14px;
+ line-height: 18px; }
diff --git a/footer.php b/footer.php
index 31c3e1f..6a44ad0 100644
--- a/footer.php
+++ b/footer.php
@@ -15,6 +15,7 @@ function render_footer($admin = false)
+
}?>
diff --git a/js/admin.js b/js/admin.js
index 4c088cf..46eef42 100644
--- a/js/admin.js
+++ b/js/admin.js
@@ -20,12 +20,28 @@
$("#new-incident select").trigger("change");
$("body").on("submit","#new-incident",function(){
- var time = Date.parse($('#time').val());
+ var time = Date.parse($('#time_input').val());
var end_time = Date.parse($('#end_time').val());
+ var type = $("#type").val();
- if (time>end_time|| isNaN(time) || isNaN(end_time))
+ if (type == 2 &&(isNaN(time) || isNaN(end_time)))
{
- //TODO: Error class
+ if (isNaN(end_time))
+ {
+ $('#time_input').addClass("error");
+ $.growl.error({ message: "Start time is invalid!" });
+ }
+
+ if (isNaN(end_time))
+ {
+ $('#end_time').addClass("error");
+ $.growl.error({ message: "End time is invalid!" });
+ }
+ return false;
+ }
+ else if (type == 2 && time >= end_time)
+ {
+ $.growl.error({ message: "End time is either the same or earlier than start time!" });
$('#time').addClass("error");
$('#end_time').addClass("error");
return false;
@@ -33,6 +49,7 @@
if($('#status-container :checkbox:checked').length == 0)
{
+ $.growl.error({ message: "Please check at least one service!" });
$('#status-container').addClass("error");
return false;
}
diff --git a/js/vendor/jquery.growl.js b/js/vendor/jquery.growl.js
new file mode 100644
index 0000000..befb373
--- /dev/null
+++ b/js/vendor/jquery.growl.js
@@ -0,0 +1,251 @@
+// Generated by CoffeeScript 2.1.0
+(function() {
+ /*
+ jQuery Growl
+ Copyright 2015 Kevin Sylvestre
+ 1.3.3
+ */
+ "use strict";
+ var $, Animation, Growl;
+
+ $ = jQuery;
+
+ Animation = (function() {
+ class Animation {
+ static transition($el) {
+ var el, ref, result, type;
+ el = $el[0];
+ ref = this.transitions;
+ for (type in ref) {
+ result = ref[type];
+ if (el.style[type] != null) {
+ return result;
+ }
+ }
+ }
+
+ };
+
+ Animation.transitions = {
+ "webkitTransition": "webkitTransitionEnd",
+ "mozTransition": "mozTransitionEnd",
+ "oTransition": "oTransitionEnd",
+ "transition": "transitionend"
+ };
+
+ return Animation;
+
+ })();
+
+ Growl = (function() {
+ class Growl {
+ static growl(settings = {}) {
+ return new Growl(settings);
+ }
+
+ constructor(settings = {}) {
+ this.render = this.render.bind(this);
+ this.bind = this.bind.bind(this);
+ this.unbind = this.unbind.bind(this);
+ this.mouseEnter = this.mouseEnter.bind(this);
+ this.mouseLeave = this.mouseLeave.bind(this);
+ this.click = this.click.bind(this);
+ this.close = this.close.bind(this);
+ this.cycle = this.cycle.bind(this);
+ this.waitAndDismiss = this.waitAndDismiss.bind(this);
+ this.present = this.present.bind(this);
+ this.dismiss = this.dismiss.bind(this);
+ this.remove = this.remove.bind(this);
+ this.animate = this.animate.bind(this);
+ this.$growls = this.$growls.bind(this);
+ this.$growl = this.$growl.bind(this);
+ this.html = this.html.bind(this);
+ this.content = this.content.bind(this);
+ this.container = this.container.bind(this);
+ this.settings = $.extend({}, Growl.settings, settings);
+ this.initialize(this.settings.location);
+ this.render();
+ }
+
+ initialize(location) {
+ var id;
+ id = 'growls-' + location;
+ return $('body:not(:has(#' + id + '))').append('');
+ }
+
+ render() {
+ var $growl;
+ $growl = this.$growl();
+ this.$growls(this.settings.location).append($growl);
+ if (this.settings.fixed) {
+ this.present();
+ } else {
+ this.cycle();
+ }
+ }
+
+ bind($growl = this.$growl()) {
+ $growl.on("click", this.click);
+ if (this.settings.delayOnHover) {
+ $growl.on("mouseenter", this.mouseEnter);
+ $growl.on("mouseleave", this.mouseLeave);
+ }
+ return $growl.on("contextmenu", this.close).find(`.${this.settings.namespace}-close`).on("click", this.close);
+ }
+
+ unbind($growl = this.$growl()) {
+ $growl.off("click", this.click);
+ if (this.settings.delayOnHover) {
+ $growl.off("mouseenter", this.mouseEnter);
+ $growl.off("mouseleave", this.mouseLeave);
+ }
+ return $growl.off("contextmenu", this.close).find(`.${this.settings.namespace}-close`).off("click", this.close);
+ }
+
+ mouseEnter(event) {
+ var $growl;
+ $growl = this.$growl();
+ return $growl.stop(true, true);
+ }
+
+ mouseLeave(event) {
+ return this.waitAndDismiss();
+ }
+
+ click(event) {
+ if (this.settings.url != null) {
+ event.preventDefault();
+ event.stopPropagation();
+ return window.open(this.settings.url);
+ }
+ }
+
+ close(event) {
+ var $growl;
+ event.preventDefault();
+ event.stopPropagation();
+ $growl = this.$growl();
+ return $growl.stop().queue(this.dismiss).queue(this.remove);
+ }
+
+ cycle() {
+ var $growl;
+ $growl = this.$growl();
+ return $growl.queue(this.present).queue(this.waitAndDismiss());
+ }
+
+ waitAndDismiss() {
+ var $growl;
+ $growl = this.$growl();
+ return $growl.delay(this.settings.duration).queue(this.dismiss).queue(this.remove);
+ }
+
+ present(callback) {
+ var $growl;
+ $growl = this.$growl();
+ this.bind($growl);
+ return this.animate($growl, `${this.settings.namespace}-incoming`, 'out', callback);
+ }
+
+ dismiss(callback) {
+ var $growl;
+ $growl = this.$growl();
+ this.unbind($growl);
+ return this.animate($growl, `${this.settings.namespace}-outgoing`, 'in', callback);
+ }
+
+ remove(callback) {
+ this.$growl().remove();
+ return typeof callback === "function" ? callback() : void 0;
+ }
+
+ animate($element, name, direction = 'in', callback) {
+ var transition;
+ transition = Animation.transition($element);
+ $element[direction === 'in' ? 'removeClass' : 'addClass'](name);
+ $element.offset().position;
+ $element[direction === 'in' ? 'addClass' : 'removeClass'](name);
+ if (callback == null) {
+ return;
+ }
+ if (transition != null) {
+ $element.one(transition, callback);
+ } else {
+ callback();
+ }
+ }
+
+ $growls(location) {
+ var base;
+ if (this.$_growls == null) {
+ this.$_growls = [];
+ }
+ return (base = this.$_growls)[location] != null ? base[location] : base[location] = $('#growls-' + location);
+ }
+
+ $growl() {
+ return this.$_growl != null ? this.$_growl : this.$_growl = $(this.html());
+ }
+
+ html() {
+ return this.container(this.content());
+ }
+
+ content() {
+ return `${this.settings.close}
\n${this.settings.title}
\n${this.settings.message}
`;
+ }
+
+ container(content) {
+ return `\n ${content}\n
`;
+ }
+
+ };
+
+ Growl.settings = {
+ namespace: 'growl',
+ duration: 3200,
+ close: "×",
+ location: "default",
+ style: "default",
+ size: "medium",
+ delayOnHover: true
+ };
+
+ return Growl;
+
+ })();
+
+ this.Growl = Growl;
+
+ $.growl = function(options = {}) {
+ return Growl.growl(options);
+ };
+
+ $.growl.error = function(options = {}) {
+ var settings;
+ settings = {
+ title: "Error!",
+ style: "error"
+ };
+ return $.growl($.extend(settings, options));
+ };
+
+ $.growl.notice = function(options = {}) {
+ var settings;
+ settings = {
+ title: "Notice!",
+ style: "notice"
+ };
+ return $.growl($.extend(settings, options));
+ };
+
+ $.growl.warning = function(options = {}) {
+ var settings;
+ settings = {
+ title: "Warning!",
+ style: "warning"
+ };
+ return $.growl($.extend(settings, options));
+ };
+
+}).call(this);