From 8656f6dcf3ab75911c28421ef1c1d7dcc50c82af Mon Sep 17 00:00:00 2001
From: Maxime Bombar <bombar@crans.org>
Date: Sun, 21 Oct 2018 22:29:48 +0200
Subject: [PATCH] [Printer] Refactor frontend of printer interface (1st step)

---
 printer/templates/printer/newjob.html | 92 +++++++++++++++------------
 1 file changed, 51 insertions(+), 41 deletions(-)

diff --git a/printer/templates/printer/newjob.html b/printer/templates/printer/newjob.html
index 78557923..55d32a18 100644
--- a/printer/templates/printer/newjob.html
+++ b/printer/templates/printer/newjob.html
@@ -13,76 +13,86 @@
   <h3>{% trans "Printing Menu" %}</h3>
   {{ jobform.management_form }}
   {% bootstrap_formset_errors jobform %}
-  <div id="form_set" class="form-group">
+  <div class="row">
+  <div id="form_set" class="form-group container">
     {% for job in jobform.forms %}
-    <div class='file_to_print form-inline'>
-      {% massive_bootstrap_form job "" %}
-      <button class="btn btn-danger" id="id_form-0-job-remove" type="button">
+    <div class="file_to_print col-xs-12 col-sm-4 col-md-3" style="margin-top:1em">
+      {% massive_bootstrap_form job ""  %}
+      <button class="btn btn-danger form-job-remove" type="button">
         <span class="fa fa-times"></span>
       </button>
     </div>
     {% endfor %}
   </div>
+  </div>
 
+  <div class="col-xs-12 row btn-toolbar">
   <button type="button" class="btn btn-primary" role="button" id="add_one">{% trans "Add a file"%}</button>
 
-  {% bootstrap_button action_name name="options" button_type="submit" icon="star" %}
+  {% bootstrap_button action_name name="Next" button_type="submit" icon="star" %}
+  </div>
+  <div style="clear:both; margin-bottom:1em"></div>
 </form>
 <script type="text/javascript">
 
-  var template = `{% bootstrap_form jobform.empty_form %}
-          <button class="btn btn-danger btn-sm"
-            id="id_form-__prefix__-job-remove" type="button">
+  var template = `{% bootstrap_form jobform.empty_form  %}
+          <button class="btn btn-danger form-job-remove" type="button">
             <span class="fa fa-times"></span>
         </button>`
   
-  function add_job() { 
-        var new_index = 
-            document.getElementsByClassName('file_to_print').length;
-        document.getElementById('id_form-TOTAL_FORMS').value ++;
-        var new_job = document.createElement('div');
-        new_job.className = 'file_to_print form-inline';
-        new_job.innerHTML = template.replace(/__prefix__/g, new_index);
-        document.getElementById('form_set').appendChild(new_job);
-	add_listener_for_id(new_index);  
+	function add_job() {
+	  newId = document.getElementsByClassName('file_to_print').length;
+	  
+	  
+          document.getElementById('id_form-TOTAL_FORMS').value ++;
+	  
+          var new_job = document.createElement('div');
+	  
+          new_job.className = 'file_to_print col-xs-12 col-sm-4 col-md-3';
+	  
+	  new_job.style.marginTop = '1em';
+	  
+          new_job.innerHTML = template.replace(/__prefix__/g, newId);
+	  
+          document.getElementById('form_set').appendChild(new_job);
+
+	  var newJobLength = new_job.childNodes.length
+	  
+	  add_listener_for_btn(new_job.childNodes[newJobLength - 1]);  
   }
 
-
-	  function del_job(event){
-	  var job = event.target.parentNode;
+	  
+	  function del_job(job, event){
+	  // var job = event.target.parentNode;
 	  job.parentNode.removeChild(job);
 	  document.getElementById('id_form-TOTAL_FORMS').value --;
 	  }
 	  
 
-function add_listener_for_id(i){
-	  document.getElementById('id_form-' + i.toString() + '-job-remove')
-	  .addEventListener("click", function(event){
-                  var job = event.target.parentNode;
-	          job.parentNode.removeChild(job);
-     	          document.getElementById('id_form-TOTAL_FORMS').value --;
-	        }
-	      )
-	    }
+	  function add_listener_for_btn(rmBtn){
+
+	  rmBtn.addEventListener("click", function(event){del_job(rmBtn.parentNode, event)});
+	  
+	  }
 	  
 	  
   // Add events manager when DOM is fully loaded
   document.addEventListener(
      "DOMContentLoaded",
      function() {
-        document.getElementById("add_one")
-          .addEventListener("click", add_job, true);
-	document.getElementById('id_form-0-job-remove')
-	  .addEventListener("click", function(event){
-                  var job = event.target.parentNode;
-	          job.parentNode.removeChild(job);
-     	          document.getElementById('id_form-TOTAL_FORMS').value --;
-	        }
-	      )
-	  
-  }
+          document.getElementById("add_one").addEventListener("click", add_job, true);
 
-  );
+	  // Array of all the delete buttons
+	  var allBtns = document.getElementsByClassName("form-job-remove");
+
+	  for (var i=0; i < allBtns.length; i++) {
+	      add_listener_for_btn(allBtns[i]);
+	}
+
+	}
+	  
+	)
+	    
 
 </script>
 {% endblock %}