Dar de alta sistmeas en ajax popup

Templates/Clientes/edit_cliente.html

@@ -6,7 +6,7 @@
 
 {% block content %}
     
-    <form method="POST" action=".">
+    <form method="POST" action="." id="cliente-form">
         {% csrf_token %}
         <div class="form-group">
             <label for="{{form.RFC.name}}"><strong> {{form.RFC.label|capfirst}} </strong></label>
@@ -34,7 +34,51 @@
 
 {% block scripts %}
 <script>
-    
+
+    document.addEventListener("DOMContentLoaded", ()=>{
+        if(window.name ==='popupWin')
+        {
+            console.log('popupWin')
+            document.querySelector("#cliente-form").addEventListener('submit',(event)=>{
+                event.preventDefault();
+                let form= event.target;
+                let url = `{% url 'add_cliente' %}`;
+                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);
+                            window.opener.postMessage({data:response, windowName:'clientWindow'},window.location.origin);
+                            window.close();
+                        }else{
+                            console.error('Request error ',xhr.statusText);
+                        }
+                    }
+                };
+                xhr.send(data);
+                /*
+                fetch(url,{
+                    method:'POST',
+                    body:data
+                })
+                .then(response=>response.json())
+                .then(response=>{
+                    window.opener.postMessage({data:response, windowName:'clientWindow'},window.location.origin);
+                    window.close();
+                })
+                .catch(error => console.log(error));
+                */
+            });
+        }else{
+            console.log('not popupWin')
+        }
+    })
+
     window.addEventListener("load", (event)=>{
         if(!id_Activo.checked){
             id_fecha_baja.setAttribute('required','')

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 %}

Templates/Sistemas/manageSystem/uploadZip.html

@@ -6,38 +6,58 @@
     
 
 {% block content %}
-<form id="upload-form">    
-    <input type="file" name="zip_file" required>
-<hr>
-<label for="id_sistema">Sistema </label>
-<select id="id_sistema" name="sistema" required>
-    {% for sistema in sistemas %}
-        <option value="{{ sistema.id }}">{{ sistema.nombre_sistema }} ({{ sistema.version }})</option>
-    {% endfor %}
-</select><br><br>
-<label for="id_version">version </label>
-<input id="id_version" type="text" name="version"><br><br>
-<label for="anio">Año:</label>
-<input type="number" id="anio" name="anio" required min="23" max="30"  required>
-<label for="mes">Mes:</label>
-<input type="number" id="mes" name="mes" required min="1" max="12"  required>
-<label for="mayor">Mayor:</label>
-<input type="number" id="mayor" name="mayor" required min="0" max="99" value="0" required>
-<label for="menor">Menor:</label>
-<input type="number" id="menor" name="menor" required min="0" max="99" value="0" required>
-<br><br>
-
-    <button type="submit">Upload</button>
+<form id="upload-form">   
+    <div class="form-group">
+        <input type="file" name="zip_file" required accept=".zip">
+    </div>
+    <hr>
+    <div class="form-group">
+        <label for="id_sistema">Sistema </label>
+        <select id="id_sistema" name="sistema" required class="form-control">
+            {% for sistema in sistemas %}
+                <option value="{{ sistema.id }}">{{ sistema.nombre_sistema }} ({{ sistema.version }})</option>
+            {% endfor %}
+        </select>
+    </div>
+    
+    <div class="form-group row">
+        
+        <div class="col-sm-2">
+            <label for="anio" >Año:</label>
+            <input type="number" id="anio" name="anio" class="form-control" required min="23" max="30">
+        </div>
+        
+        <div class="col-sm-2">
+            <label for="mes" >Mes:</label>
+            <input type="number" id="mes" name="mes" class="form-control" required min="1" max="12">
+        </div>
+        
+        <div class="col-sm-2">
+            <label for="mayor" >Mayor:</label>
+            <input type="number" id="mayor" name="mayor" class="form-control" required min="0" max="99" value="0">
+        </div>
+        
+        <div class="col-sm-2">
+            <label for="menor">Menor:</label>
+            <input type="number" id="menor" name="menor" class="form-control" required min="0" max="99" value="0">
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="id_version">version </label>
+        <input id="id_version" type="text" name="version" class="form-control" required>
+    </div>
+    <button class="btn btn-primary" type="submit">Upload</button>
 </form>
 <input type="hidden" id="id_token" name="token" value="{{ token }}">
 {% endblock content %}
 
 {% block scripts %}
 <script>
+    var actualVersionSystem = document.querySelector('#id_sistema')
     
     var currentYear = (new Date()).getFullYear();
     var currentMonthNUm = (new Date()).getMonth() +1;
-    console.log('currentMonth',currentMonthNUm)
+    
 
     var anio = document.getElementById("anio");
     anio.value = currentYear.toString().slice(-2);
@@ -54,9 +74,32 @@
     mes.addEventListener("change", updateVersion);
     mayor.addEventListener("change", updateVersion);
     menor.addEventListener("change", updateVersion);
+    
+    actualVersionSystem.addEventListener('change',()=>{
+        getActualVersion()
+    })
+
+    actualVersionSystem.addEventListener('load', getActualVersion())
+
+    function getActualVersion(){
+        let options = actualVersionSystem.options;
+        let selectedIndex = actualVersionSystem.selectedIndex;
+        let selectedOption = options[selectedIndex];
+        
+        let sistemaId = selectedOption.value;
+        let sistemaVersion = selectedOption.text.match(/\((.*)\)/)[1];
+        let sistemaVersionArray = sistemaVersion.split(".");
+        anio.value =sistemaVersionArray[0]
+        mes.value  =sistemaVersionArray[1]
+        mayor.value=sistemaVersionArray[2]
+        menor.value=sistemaVersionArray[3]
+        
+        version.value = sistemaVersion
+        //console.log(sistemaVersion, sistemaVersionArray)
+    }
 
     function updateVersion() {
-        console.log('sss',anio.value.toString() )
+        
         version.value = anio.value.toString()+"."+mes.value.toString() +"."+mayor.value.toString()+"."+menor.value.toString();
     }