Dar de alta sistmeas en ajax popup

Templates/Sistemas/Xclientes/sistema_create.html

@@ -0,0 +1,110 @@
+<!-- sistema_create.html -->
+{% extends 'base.html' %}
+
+{% block content %}
+  <h1>Create a new sistemas por cliente</h1>
+  <form method="post">
+
+    {% csrf_token %}
+    <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>
+            </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>
+        </div>
+
+        <div class="form-group">
+        {{ form.num_licencias.label }}
+        {{ form.num_licencias }}
+        </div>
+
+        <button class="btn btn-success" type="submit">Create</button>
+    </div>
+  </form>
+  
+{% endblock %}
+
+{% block scripts %}
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        /*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=800,height=600");
+            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 'add_cliente' %}", "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);
+            
+          }
+          
+        });
+    });
+
+    /*
+    $(function() {
+      $('#add-sistema-btn').click(function() {
+        let popupWin = window.open("{% url 'create_sistemas_form' %}", "popupWin", "width=800,height=600");
+        popupWin.focus();
+      });
+        window.addEventListener('message', function(event) {
+        let response = event.data;
+        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>';
+        $('#id_id_sistema').append(option);
+        $('#sistema-modal').modal('hide');
+      });
+    });
+    */
+  </script>
+{% endblock scripts %}

Templates/Sistemas/Xclientes/sistema_create_form.html

@@ -0,0 +1,60 @@
+<!-- sistema_create_form.html -->
+
+
+{% block content %}
+  <h1>Create a new Sistema</h1>
+  <form id="sistema-form" method="post" action="{% url 'create_sistemas_form' %}">
+    {% csrf_token %}
+    {{ form.as_p }}
+    <button type="submit">Create</button>
+  </form>
+{% endblock %}
+
+{% block scripts %}
+  
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        document.querySelector('#sistema-form').addEventListener('submit', function(event) {
+          event.preventDefault();
+          var form = event.target;
+          var url = form.getAttribute('action');
+          var data = new FormData(form);
+          fetch(url, {
+            method: 'POST',
+            body: data
+          })
+          .then(response => response.json())
+          .then(response => {
+            window.opener.postMessage({data:response, windowName:'sistemaWindow'}, window.location.origin);
+            window.close();
+          })
+          .catch(error => console.log(error));
+        });
+    });
+
+    /*
+    <!--script src="https://code.jquery.com/jquery-3.6.0.min.js">
+    $(function() {
+      $('#sistema-form').submit(function(event) {
+        event.preventDefault();
+        var form = $(this);
+        var url = form.attr('action');
+        var data = form.serialize();
+        $.ajax({
+          url: url,
+          data: data,
+          type: 'post',
+          dataType: 'json',
+          success: function(response) {
+            window.opener.postMessage(response, '*');
+            window.close();
+          },
+          error: function(xhr, status, error) {
+            console.log(xhr.responseText);
+          }
+        });
+      });
+    });*/
+  </script>
+{% endblock scripts %}