rezometz/re2o
8
0
Fork 0
mirror of https://gitlab2.federez.net/re2o/re2o synced 2024-11-16 08:23:12 +00:00
Code Issues Releases Wiki Activity

[Printer] Refactor frontend of printer interface (1st step)

Browse source
This commit is contained in:
Maxime Bombar 2018-10-21 22:29:48 +02:00 committed by root
parent d7233a0845
commit 8656f6dcf3
1 changed files with 51 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
printer/templates/printer/newjob.html
View file

@ -13,76 +13,86 @@
<h3>{% trans "Printing Menu" %}</h3> <h3>{% trans "Printing Menu" %}</h3>
{{ jobform.management_form }} {{ jobform.management_form }}
{% bootstrap_formset_errors jobform %} {% 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 %} {% for job in jobform.forms %}
<div class='file_to_print form-inline'> <div class="file_to_print col-xs-12 col-sm-4 col-md-3" style="margin-top:1em">
{% massive_bootstrap_form job "" %} {% massive_bootstrap_form job "" %}
<button class="btn btn-danger" id="id_form-0-job-remove" type="button"> <button class="btn btn-danger form-job-remove" type="button">
<span class="fa fa-times"></span> <span class="fa fa-times"></span>
</button> </button>
</div> </div>
{% endfor %} {% endfor %}
</div> </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> <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> </form>
<script type="text/javascript"> <script type="text/javascript">
var template = `{% bootstrap_form jobform.empty_form %} var template = `{% bootstrap_form jobform.empty_form %}
<button class="btn btn-danger btn-sm" <button class="btn btn-danger form-job-remove" type="button">
id="id_form-__prefix__-job-remove" type="button">
<span class="fa fa-times"></span> <span class="fa fa-times"></span>
</button>` </button>`
function add_job() { function add_job() {
var new_index = newId = document.getElementsByClassName('file_to_print').length;
document.getElementsByClassName('file_to_print').length;
document.getElementById('id_form-TOTAL_FORMS').value ++;
var new_job = document.createElement('div'); document.getElementById('id_form-TOTAL_FORMS').value ++;
new_job.className = 'file_to_print form-inline';
new_job.innerHTML = template.replace(/__prefix__/g, new_index); var new_job = document.createElement('div');
document.getElementById('form_set').appendChild(new_job);
add_listener_for_id(new_index); 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){ function del_job(job, event){
var job = event.target.parentNode; // var job = event.target.parentNode;
job.parentNode.removeChild(job); job.parentNode.removeChild(job);
document.getElementById('id_form-TOTAL_FORMS').value --; document.getElementById('id_form-TOTAL_FORMS').value --;
} }
function add_listener_for_id(i){ function add_listener_for_btn(rmBtn){
document.getElementById('id_form-' + i.toString() + '-job-remove')
.addEventListener("click", function(event){ rmBtn.addEventListener("click", function(event){del_job(rmBtn.parentNode, event)});
var job = event.target.parentNode;
job.parentNode.removeChild(job); }
document.getElementById('id_form-TOTAL_FORMS').value --;
}
)
}
// Add events manager when DOM is fully loaded // Add events manager when DOM is fully loaded
document.addEventListener( document.addEventListener(
"DOMContentLoaded", "DOMContentLoaded",
function() { function() {
document.getElementById("add_one") document.getElementById("add_one").addEventListener("click", add_job, true);
.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 --;
}
)
}
); // 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> </script>
{% endblock %} {% endblock %}