re2o/machines/templates/machines/edit_portlist.html

{% extends "machines/sidebar.html" %}
{% comment %}
Re2o est un logiciel d'administration développé initiallement au rezometz. Il
se veut agnostique au réseau considéré, de manière à être installable en
quelques clics.

Copyright © 2017  Gabriel Détraz
Copyright © 2017  Goulven Kermarec
Copyright © 2017  Augustin Lemesle

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
{% endcomment %}

{% load bootstrap3 %}
{% load i18n %}

{% block title %}{% trans "Machines" %}{% endblock %}

{% block content %}
    {% bootstrap_form_errors port_list %}


    <form class="form" method="post">
        {% csrf_token %}
        {% bootstrap_form port_list %}
        {{ ports.management_form }}
        <div id="formset">
            {% for form in ports.forms %}
                <div class="port">
                    <p>
                        {{ form }}
                    </p>
                </div>
            {% endfor %}
        </div>

        <p>
            {% trans "Add a port" as value %}
            <input class="btn btn-primary btn-sm" role="button" value="value" id="add_one">
        </p>
        {% trans "Create or edit" as tr_create_or_edit %}
        {% bootstrap_button tr_create_or_edit icon='ok' button_class='btn-success' %}
    </form>
    <script type="text/javascript">
        var template = `{{ports.empty_form}}`;

        function add_port() {
            var new_index = document.getElementsByClassName('port').length;
            document.getElementById('id_form-TOTAL_FORMS').value =
                parseInt(document.getElementById('id_form-TOTAL_FORMS').value) + 1;
            var new_port = document.createElement('div');
            new_port.className = 'port';
            new_port.innerHTML = template.replace(/__prefix__/g, new_index);
            document.getElementById('formset').appendChild(new_port);
        }

        document.addEventListener("DOMContentLoaded", function () {
            document.getElementById("add_one").addEventListener("click", add_port, true);
        });
    </script>
{% endblock %}