Better time & date checking, growl for displaying messages

Pryx · Pryx · commit cb0eb4e82608 · 2017-12-13T11:58:33.000+01:00
diff --git a/css/jquery.growl.css 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
@@ -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>
diff --git a/header.php b/header.php
@@ -46,6 +46,7 @@ function render_header($page_name, $admin = false){
   <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">
diff --git a/js/admin.js b/js/admin.js
@@ -20,19 +20,36 @@
 	$("#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;	
 		}
 
 		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
