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	30	// file selection
31	31	function FileSelectHandler(e) {
32	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	52	// process all File objects
36	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	74	parent.find('.filedrag').html(f.name);
38	75	}
39	76	}
40	77	\ No newline at end of file
...	...
1	1	# coding=utf-8
2	2	from django import forms
3	3
	4	+from resubmit.widgets import ResubmitFileWidget
	5	+
4	6	from .models import Themes
5	7
6	8	class BasicElemetsForm(forms.ModelForm):
...	...	@@ -45,6 +47,11 @@ class BasicElemetsForm(forms.ModelForm):
45	47	class Meta:
46	48	model = Themes
47	49	fields = ['title', 'favicon', 'small_logo', 'large_logo', 'footer_note']
	50	+ widgets = {
	51	+ 'favicon': ResubmitFileWidget(attrs={'accept':'image/*'}),
	52	+ 'small_logo': ResubmitFileWidget(attrs={'accept':'image/*'}),
	53	+ 'larger_logo': ResubmitFileWidget(attrs={'accept':'image/*'}),
	54	+ }
48	55
49	56	class CSSStyleForm(forms.ModelForm):
50	57
...	...
...	...	@@ -15,10 +15,10 @@
15	15	<div class="card-body">
16	16	<a href="{% url 'themes:basic' %}" class="page_selector"><h4><i class="fa fa-angle-down"></i> {% trans 'Basic Elements' %}</h4></a>
17	17
18		- <form method="post" action="" enctype="multipart/form-data">
	18	+ <form id="theme-form" method="post" action="" enctype="multipart/form-data">
19	19	{% csrf_token %}
20	20	{% for field in form %}
21		- <div class="form-group{% if form.has_error %} has-error {% endif %} is-fileinput">
	21	+ <div class="form-group{% if form.has_error %} has-error {% endif %} is-fileinput" data-file_id="{{ field.auto_id }}">
22	22	{% if field.auto_id == 'id_small_logo' or field.auto_id == 'id_large_logo' or field.auto_id == 'id_favicon' %}
23	23	{% if field.field.required %}
24	24	<label for="{{ field.auto_id }}">{{ field.label }} <span>*</span></label>
...	...	@@ -70,19 +70,33 @@
70	70	{% endif %}
71	71
72	72	<span id="helpBlock" class="help-block">{{ field.help_text }}</span>
73		- {% if field.errors %}
74		- <div class="alert alert-danger alert-dismissible" role="alert">
75		- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
76		- <span aria-hidden="true">×</span>
77		- </button>
78		- <ul>
79		- {% for error in field.errors %}
80		- <li>{{ error }}</li>
81		- {% endfor %}
82		- </ul>
83		- </div>
84		- {% endif %}
85	73	</div>
	74	+
	75	+ {% if field.errors %}
	76	+ <div class="alert alert-danger alert-dismissible" role="alert">
	77	+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	78	+ <span aria-hidden="true">×</span>
	79	+ </button>
	80	+ <ul>
	81	+ {% for error in field.errors %}
	82	+ <li>{{ error }}</li>
	83	+ {% endfor %}
	84	+ </ul>
	85	+ </div>
	86	+ {% endif %}
	87	+
	88	+ {% if field.auto_id == 'id_small_logo' or field.auto_id == 'id_large_logo' or field.auto_id == 'id_favicon' %}
	89	+ <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">
	90	+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
	91	+ <span aria-hidden="true">×</span>
	92	+ </button>
	93	+ <ul>
	94	+ <li class="size" style="display:none">{% trans "The image is too large. It should have less than 2MB." %}</li>
	95	+ <li class="format" style="display:none">{% trans 'File not supported.' %}</li>
	96	+ </ul>
	97	+ </div>
	98	+ <br clear="all" />
	99	+ {% endif %}
86	100	{% endfor %}
87	101	<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
88	102	<div class="text-center">
...	...