Updated look and feel and added front-end validation for image elements in add-show

airtime_mvc/public/css/add-show.css

@@ -117,7 +117,6 @@ label.wrapp-label input[type="checkbox"] {
 
 #add_show_end_date_no_repeat, #add_show_start_date  {
 	width: 89px;
-
 }
 
 #add_show_duration	{
@@ -127,8 +126,17 @@ label.wrapp-label input[type="checkbox"] {
 }
 
 #show_logo_current, #show_logo_preview {
-	width: 50px;
+    border: 1px solid #5b5b5b;
-	height: 50px;
+    -webkit-box-shadow: 0px 0px 2px 1px rgba(48,48,48,1);
+    -moz-box-shadow: 0px 0px 2px 1px rgba(48,48,48,1);
+    box-shadow: 0px 0px 2px 1px rgba(48,48,48,1);
+	width: 200px;
+	height: 200px;
 	display: none;
 	cursor: default;
 }
+
+#show_remove_logo {
+    display: none;
+	height: 28px;
+}

airtime_mvc/public/js/airtime/schedule/add-show.js

@@ -241,14 +241,17 @@ function setAddShowEvents(form) {
 			$("#show_logo_current-element").show();
 			$("#show_logo_current-label").show();
 			$("#show_logo_current").show();
+			$("#show_remove_logo").show();
 		} else {
 	    	$("#show_logo_current-element").hide();
 	    	$("#show_logo_current-label").hide();
 			$("#show_logo_current").hide();
+			$("#show_remove_logo").hide();
 		}
     } else {
     	$("#show_logo_current-element").hide();
     	$("#show_logo_current-label").hide();
+		$("#show_remove_logo").hide();
     }
 
     form.find("#add_show_repeats").click(function(){
@@ -611,7 +614,7 @@ function setAddShowEvents(form) {
 	});
 	
 	// when an image is uploaded, we want to show it to the user
-	form.find("#upload").change(function(event) {
+	form.find("#add_show_logo").change(function(event) {
 		if (this.files && this.files[0]) {
             $("#show_logo_preview").show();
 			var reader = new FileReader(); // browser compatibility?
@@ -621,13 +624,78 @@ function setAddShowEvents(form) {
                     .attr('src', e.target.result);
             };
 
-            // read the image data as though it were a data URI
+            // check image size so we don't crash the page trying to render
-            reader.readAsDataURL(this.files[0]);
+            if (validateImage(this.files[0], $("#add_show_logo"))) {
+            	// read the image data as though it were a data URI
+            	reader.readAsDataURL(this.files[0]);
+			} else {
+				// remove the element by replcaing it with a clone of itself
+				var el = $("#add_show_logo");
+				el.replaceWith(el = el.clone(true));
+				$("#show_logo_preview").hide();
+			}
         } else {
             $("#show_logo_preview").hide();
         }
 	});
 	
+	// validate on upload
+	function validateImage(img, el) {
+		// remove any existing error messages
+		if ($("#img-err")) { $("#img-err").remove(); }
+		
+        if (img.size > 2048000) { // 2MB - pull this from somewhere instead?
+            // hack way of inserting an error message
+            var err = $.i18n._("Selected file is too large");
+            el.parent().after(
+            	"<ul id='img-err' class='errors'>" +
+            		"<li>" + err + "</li>" +
+            	"</ul>");
+            return false;
+        } else if (validateMimeType(img.type) < 0) {
+        	var err = $.i18n._("File format is not supported");
+        	el.parent().after(
+            	"<ul id='img-err' class='errors'>" +
+            		"<li>" + err + "</li>" +
+            	"</ul>");
+        	return false;
+        }
+        return true;
+	}
+	
+	function validateMimeType(mime) {
+		var extensions = [
+			'image/jpeg',
+			'image/png',
+			'image/gif'
+			];
+		return $.inArray(mime, extensions);
+	}
+	
+	form.find("#show_remove_logo").click(function() {
+		var showId = $("#add_show_id").attr("value");
+		
+		console.log(showId);
+		console.log($("#show_logo_current").attr("src"));
+		
+		if (showId && $("#show_logo_current").attr("src") !== "") {
+			var action = '/rest/show/' + showId + '/delete-image';
+			
+			$.ajax({
+				url: action,
+				data: '',
+				type: 'POST',
+				success: function() {
+					$("#show_logo_current").prop("src", "")
+			    	$("#show_logo_current-element").hide();
+			    	$("#show_logo_current-label").hide();
+					$("#show_logo_current").hide();
+					$("#show_remove_logo").hide();
+				}
+			});
+		}
+	});
+	
     form.find("#add-show-close").click(closeAddShowForm);
 
 	form.find(".add-show-submit").click(function(event) {
@@ -666,11 +734,10 @@ function setAddShowEvents(form) {
         	action = baseUrl+"Schedule/"+String(addShowButton.attr("data-action"));
         
         var image;
-        if ($('#upload')[0] && $('#upload')[0].files
+        if ($('#add_show_logo')[0] && $('#add_show_logo')[0].files
-        		&& $('#upload')[0].files[0]) {
+        		&& $('#add_show_logo')[0].files[0]) {
         	image = new FormData();
-        	image.append('file', $('#upload')[0].files[0]);
+        	image.append('file', $('#add_show_logo')[0].files[0]);
-        	data['show_logo_name'] = $('#upload')[0].files[0].name;
         }
         
         $.ajax({
@@ -826,7 +893,7 @@ function setAddShowEvents(form) {
 	}
     
     // Since Zend's setAttrib won't apply through the wrapper, set accept=image/* here
-    $("#upload").prop("accept", "image/*");
+    $("#add_show_logo").prop("accept", "image/*");
     var bgColorEle = $("#add_show_background_color");
     var textColorEle = $("#add_show_color");
     $('#add_show_name').bind('input', 'change', function(){