AS_timbres/Templates/IMMEX/xclientes/sistema_create_IMMEX.html

{% extends 'base.html' %}


{% block content %}
    <h1>Create a new Sistema IMMEX por cliente</h1>
    <form method="post" id="sistemaXCliente-form">

        {% csrf_token %}
        {% if form.non_field_errors %}
          <div class="alert alert-danger" role="alert">
            {% for error in form.non_field_errors %}
            <p>{{ error }}</p>
            {% endfor %}
          </div>
        {% endif %}
        <div class="">
            <div class="form-group">
                <div class="form">
                {{ form.id_sistema.label }}
                {{ form.id_sistema }}
                <button id="add-sistema-btn" type="button" class="btn btn-info">Add Sistema</button>
                {% if form.id_sistema.errors %}
                  <ul class="errorlist">
                    {% for error in form.id_sistema.errors %}
                    <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                {% endif %}
                </div>        
            </div>
            
            <div class="form-group">
            {{ form.cliente.label}}
            {{ form.cliente }}
            <button id="add-cliente-btn" type="button" class="btn btn-info">Add Cliente</button>
            {% if form.cliente.errors %}
              <ul class="errorlist">
                {% for error in form.cliente.errors %}
                <li>{{ error }}</li>
                {% endfor %}
              </ul>
            {% endif %}
            </div>
    
            <div class="form-group">
            {{ form.num_licencias.label }}
            {{ form.num_licencias }}
            {% if form.num_licencias.errors %}
              <ul class="errorlist">
                {% for error in form.num_licencias.errors %}
                <li>{{ error }}</li>
                {% endfor %}
              </ul>
            {% endif %}
            </div>
    
            <button class="btn btn-success" type="submit">Create</button>
        </div>
      </form>
{% endblock content %}


{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('SISTEMA X CLIENTE', window.name);

        if(window.name==='createSistemaXCliente_popup'){
          document.querySelector('#sistemaXCliente-form').addEventListener('submit',(event)=>{
            event.preventDefault();
            let form  = event.target;
            let url   = `{% url 'create_sistemaIMMEX' %}`;
            let data  = new FormData(form);
            let xhr   = new XMLHttpRequest();
            xhr.open('POST',url);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.onreadystatechange = ()=>{
              if(xhr.readyState===XMLHttpRequest.DONE){
                if(xhr.status===200){
                  let response = JSON.parse(xhr.responseText);
                  if(response.errors){
                    alert(response.errors);

                  }else{
                    window.opener.postMessage({data:response, windowName:'createSistemaXCliente'}, window.location.origin);
                    
                    window.close();
                    
                  }
  
                }else{
                  console.error('Request error', xhr.statusText);
                }

              }
            };
            xhr.send(data);

            
          });
        }

        /*add Sistema*/
        document.querySelector('#add-sistema-btn').addEventListener('click', function() {
            let parentWidth = window.innerWidth;
            let parentHeight = window.innerHeight;

            let childWidth = 800;
            let childHeight = 600;
            let left =(parentWidth - childWidth);
            let top = (parentHeight - childHeight);
                        
            let popupWin = window.open("{% url 'create_sistemas_form' %}", "popupWin", "width=" + childWidth + ",height=" + childHeight + ",left=" + left + ",top=" + top);
            popupWin.focus();
        });
        
        /*Add cliente*/
        document.querySelector("#add-cliente-btn").addEventListener('click',()=>{
            let parentWidth = window.innerWidth;
            let parentHeight = window.innerHeight;

            let childWidth = 800;
            let childHeight = 600;
            let left =(parentWidth - childWidth);
            let top = (parentHeight - childHeight);
            
            
            let popupWin = window.open("{% url 'ClientesIMMEX_Create' %}", "popupWin", "width=" + childWidth + ",height=" + childHeight + ",left=" + left + ",top=" + top);
            popupWin.focus();
        });

        
        window.addEventListener('message', function(event) {
          let response = event.data.data;
          
          let windowName = event.data.windowName;          
          
          if(windowName==='clientWindow'){
            let id_cliente = response.id;
            let Nombre = response.Nombre;
            let option= `<option value="${id_cliente}" selected> ${Nombre}</option>`;
            document.querySelector("#id_cliente").insertAdjacentHTML('beforeend',option);
            
          }
          else if (windowName==='sistemaWindow'){
            let id_sistema = response.id;
            let nombre_sistema = response.nombre_sistema;
            let version = response.version;
            let option = '<option value="' + id_sistema + '" selected>' + nombre_sistema + ', version ' + version + '</option>';
            document.querySelector('#id_id_sistema').insertAdjacentHTML('beforeend', option);
            
          }
          
        });
    });

  </script>
{% endblock scripts %}