Adjusting bugs involving image in themes configuration

Zambom
1 parent fb879490
Showing 3 changed files with 73 additions and 15 deletions Show diff stats
amadeus/static/js/themes.js
themes/forms.py
themes/templates/themes/basic_update.html
@@ -30,10 +30,47 @@ function Init() {
 // file selection
 function FileSelectHandler(e) {
 	var files = e.target.files || e.dataTransfer.files,
-		parent = $(e.target.offsetParent);
+		parent = $(e.target.offsetParent),
+		file_id = parent.data('file_id'),
+		submit_btn = $("#theme-form").find("input[type='submit']"),
+		max_size = 2*1024*1024;
+	parent.removeClass('alert-file');
+
+	var alerts_open = $("#theme-form").find(".alert-file").length;
+
+	console.log(alerts_open);
+
+	if (alerts_open == 0) {
+		$(submit_btn).prop('disable', false);
+		$(submit_btn).prop('disabled', false);
+	}
+
+	$("." + file_id + "-file-errors").hide();
+	$("." + file_id + "-file-errors .size").hide();
+	$("." + file_id + "-file-errors .format").hide();
 	// process all File objects
 	for (var i = 0, f; f = files[i]; i++) {
+		if (f.size > max_size) {
+			$(submit_btn).prop('disable', true);
+			$(submit_btn).prop('disabled', true);
+
+			$("." + file_id + "-file-errors").show();
+			$("." + file_id + "-file-errors .size").show();
+
+			parent.addClass('alert-file');
+		} 
+
+		if (!f.type.match(/^image\//)) {
+			$(submit_btn).prop('disable', true);
+			$(submit_btn).prop('disabled', true);
+
+			$("." + file_id + "-file-errors").show();
+			$("." + file_id + "-file-errors .format").show();
+
+			parent.addClass('alert-file');
+		}
+
 		parent.find('.filedrag').html(f.name);
 	}
 }
 \ No newline at end of file
 # coding=utf-8
 from django import forms
+from resubmit.widgets import ResubmitFileWidget
+
 from .models import Themes
 class BasicElemetsForm(forms.ModelForm):
@@ -45,6 +47,11 @@ class BasicElemetsForm(forms.ModelForm):
 	class Meta:
 		model = Themes
 		fields = ['title', 'favicon', 'small_logo', 'large_logo', 'footer_note']
+		widgets = {
+			'favicon': ResubmitFileWidget(attrs={'accept':'image/*'}),
+			'small_logo': ResubmitFileWidget(attrs={'accept':'image/*'}),
+			'larger_logo': ResubmitFileWidget(attrs={'accept':'image/*'}),
+		}
 class CSSStyleForm(forms.ModelForm):
@@ -15,10 +15,10 @@
 			<div class="card-body">
 				<a href="{% url 'themes:basic' %}" class="page_selector"><h4><i class="fa fa-angle-down"></i> {% trans 'Basic Elements' %}</h4></a>
-				<form method="post" action="" enctype="multipart/form-data">
+				<form id="theme-form" method="post" action="" enctype="multipart/form-data">
 					{% csrf_token %}
 					{% for field in form %}
-						<div class="form-group{% if form.has_error %} has-error {% endif %} is-fileinput">
+						<div class="form-group{% if form.has_error %} has-error {% endif %} is-fileinput" data-file_id="{{ field.auto_id }}">
 							{% if field.auto_id == 'id_small_logo' or field.auto_id == 'id_large_logo' or field.auto_id == 'id_favicon' %}
 				        		{% if field.field.required %}
 									<label for="{{ field.auto_id }}">{{ field.label }} <span>*</span></label>
@@ -70,19 +70,33 @@
 							{% endif %}
 							<span id="helpBlock" class="help-block">{{ field.help_text }}</span>
-							{% if field.errors %}
-								<div class="alert alert-danger alert-dismissible" role="alert">
-				  					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-				  						<span aria-hidden="true">&times;</span>
-										</button>
-									<ul>
-										{% for error in field.errors %}
-											<li>{{ error }}</li>
-										{% endfor %}
-									</ul>
-								</div>
-							{% endif %}
 						</div>
+						
+						{% if field.errors %}
+							<div class="alert alert-danger alert-dismissible" role="alert">
+			  					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+			  						<span aria-hidden="true">&times;</span>
+									</button>
+								<ul>
+									{% for error in field.errors %}
+										<li>{{ error }}</li>
+									{% endfor %}
+								</ul>
+							</div>
+						{% endif %}
+
+						{% if field.auto_id == 'id_small_logo' or field.auto_id == 'id_large_logo' or field.auto_id == 'id_favicon' %}
+							<div class="col-lg-12 col-md-12 col-sm-12 alert alert-danger alert-dismissible {{ field.auto_id }}-file-errors" style="display:none" role="alert">
+									<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+										<span aria-hidden="true">&times;</span>
+									</button>
+								<ul>
+									<li class="size" style="display:none">{% trans "The image is too large. It should have less than 2MB." %}</li>
+									<li class="format" style="display:none">{% trans 'File not supported.' %}</li>
+								</ul>
+							</div>
+							<br clear="all" />
+						{% endif %}
 					{% endfor %}
 					<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
 						<div class="text-center">
	@@ -30,10 +30,47 @@ function Init() {		@@ -30,10 +30,47 @@ function Init() {
30	// file selection	30	// file selection
31	function FileSelectHandler(e) {	31	function FileSelectHandler(e) {
32	var files = e.target.files \|\| e.dataTransfer.files,	32	var files = e.target.files \|\| e.dataTransfer.files,
33	- parent = $(e.target.offsetParent);	33	+ parent = $(e.target.offsetParent),
		34	+ file_id = parent.data('file_id'),
		35	+ submit_btn = $("#theme-form").find("input[type='submit']"),
		36	+ max_size = 210241024;
34		37
		38	+ parent.removeClass('alert-file');
		39	+
		40	+ var alerts_open = $("#theme-form").find(".alert-file").length;
		41	+
		42	+ console.log(alerts_open);
		43	+
		44	+ if (alerts_open == 0) {
		45	+ $(submit_btn).prop('disable', false);
		46	+ $(submit_btn).prop('disabled', false);
		47	+ }
		48	+
		49	+ $("." + file_id + "-file-errors").hide();
		50	+ $("." + file_id + "-file-errors .size").hide();
		51	+ $("." + file_id + "-file-errors .format").hide();
35	// process all File objects	52	// process all File objects
36	for (var i = 0, f; f = files[i]; i++) {	53	for (var i = 0, f; f = files[i]; i++) {
		54	+ if (f.size > max_size) {
		55	+ $(submit_btn).prop('disable', true);
		56	+ $(submit_btn).prop('disabled', true);
		57	+
		58	+ $("." + file_id + "-file-errors").show();
		59	+ $("." + file_id + "-file-errors .size").show();
		60	+
		61	+ parent.addClass('alert-file');
		62	+ }
		63	+
		64	+ if (!f.type.match(/^image\//)) {
		65	+ $(submit_btn).prop('disable', true);
		66	+ $(submit_btn).prop('disabled', true);
		67	+
		68	+ $("." + file_id + "-file-errors").show();
		69	+ $("." + file_id + "-file-errors .format").show();
		70	+
		71	+ parent.addClass('alert-file');
		72	+ }
		73	+
37	parent.find('.filedrag').html(f.name);	74	parent.find('.filedrag').html(f.name);
38	}	75	}
39	}	76	}
40	\ No newline at end of file	77	\ No newline at end of file