Better time & date checking, growl for displaying messages
This commit is contained in:
Vojtěch Sajdl
parent
f2600d0c56
commit
cb0eb4e826
|
|
@ -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; }
|
||||
|
|
@ -15,6 +15,7 @@ function render_footer($admin = false)
|
|||
<?php if ($admin){?>
|
||||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||||
<script src="/js/admin.js"></script>
|
||||
<script src="/js/vendor/jquery.growl.js"></script>
|
||||
<? }?>
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ else{
|
|||
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link href="/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="/css/jquery.growl.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||||
</head>
|
||||
<body class="admin">
|
||||
|
|
|
|||
23
js/admin.js
23
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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('<div id="' + id + '" />');
|
||||
}
|
||||
|
||||
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 `<div class='${this.settings.namespace}-close'>${this.settings.close}</div>\n<div class='${this.settings.namespace}-title'>${this.settings.title}</div>\n<div class='${this.settings.namespace}-message'>${this.settings.message}</div>`;
|
||||
}
|
||||
|
||||
container(content) {
|
||||
return `<div class='${this.settings.namespace} ${this.settings.namespace}-${this.settings.style} ${this.settings.namespace}-${this.settings.size}'>\n ${content}\n</div>`;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
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);
|
||||
Loading…
Reference in New Issue