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/header.php b/header.php index d1e718c..bfc8600 100644 --- a/header.php +++ b/header.php @@ -46,6 +46,7 @@ else{ + 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);