AS_timbres/Templates/Clientes/timbres_cliente.html

{% extends 'base.html' %}

{% block content %}
<h1>Timbres <strong>{{RFC}}</strong> </h1>
<h2>Timbres totales: <strong></strong>{{conteo}}</strong></h2>

  <span class="justify-content-sm-end navbar-text mr-2">
    {% if filters.datepicker%}
      De fecha: <strong>"{{filters.datepicker}}"</strong>
    {% endif %}
    
    {% if filters.datepickerFin %}
      A fecha: <strong>"{{filters.datepickerFin}}"</strong>
    {% endif %}
  </span>

<br><br>
<table class="table">
    <thead>
      <tr>
        <th></th>
        <th scope="col"> UUID</th>        
        <th scope="col">
          PAC
          <select id="table_select_PAC" class="form-control form-control-sm my_event_cls">
            <option value="00">Todos</option>
            <!--option value="01">EDICOM</option-->            
          </select>
        </th>
        <th scope="col">
          <input id="table_tipo" name="tipo" value="True" type="checkbox" class="form-check-input my_event_cls" >
          Tipo CFDI
        </th>
        <th scope="col">Serie/Folio</th>
        <th scope="col">
          <input id="table_fecha" name="fecha" value="True" type="checkbox" class="form-check-input my_event_cls" >
          Fecha
          <select id="table_select_Meses" class="form-control form-control-sm my_event_cls">
            <option value="00">Todos</option>
            <option value="01">Enero</option>
            <option value="02">Febrero</option>
            <option value="03">Marzo</option>
            <option value="04">Abril</option>
            <option value="05">Mayo</option>
            <option value="06">Junio</option>
            <option value="07">Julio</option>
            <option value="08">Agosto</option>
            <option value="09">Septiembre</option>
            <option value="10">Octubre</option>
            <option value="11">Noviembre</option>
            <option value="12">Diciembre</option>
          </select>
        </th>        
      </tr>
    </thead>  
    <tbody>       
      {% for obj in lista %}
        <tr class="{% if obj.modo == 'Normal' %}table-success{% endif %}">
          <td>{{ forloop.counter }}) </td>
            <th scope="row">{{obj.uuid}}</th>
            <td>{{obj.rfcp}}</td>
            <td>{{obj.tipo}}</td>
            <td>{{obj.serie}}/{{obj.folio}}</td>
            <td>{{obj.created_at|date:"d M Y"}}</td>
        </tr>
      {% endfor %}    
    </tbody>
</table>

<div id='id_filters' style="display: none;">{% for i,v in filters.items %}&{{i}}={{v}}{% endfor%}</div>

{% endblock content %}
    

{% block scripts %}
<script>
  function get_pacs(){
    url = "{% url 'PACS_Retrive_RFCS' %}"
    fetch(url, {
      method: 'GET',
      headers:{
        'Content-Type':'application/json',
        'X-Requested-With':'XMLHttpRequest',
      },
      credentials:"same-origin"
    })
    .then(res=>{
      return res.json()
    })
    .then(data=>{
            
      let pacs = [...new Set( data['PACS'].map((arr)=> arr.rfcp) )]        
      pacs.forEach((val,index)=>{          
        let option = document.createElement('option')
        option.value=val
        option.text=val
        table_select_PAC.add(option)
        PAC.filter(val=>val.includes('PAC'))
        .forEach((val,index)=>{
          table_select_PAC.value = val.split('=')[1]
        })
      })
    })
}
</script>
<!--end functions-->

<script>
      let filters = document.getElementById('id_filters').textContent
      let mes = Object.values(filters.split('&'))
      let PAC = Object.values(filters.split('&'))
      let tipo = Object.values(filters.split('&'))
      let lsearch = Object.values(filters.split('&'))
      let ldatepicker = Object.values(filters.split('&'))
      let ldatepickerFin = Object.values(filters.split('&'))
      let anc = document.getElementById('home_id')
      let ref=''

      mes.filter(val=> val.length >0)
      .filter(val=>val.includes('mes'))
      .forEach((val,index)=>{
        table_select_Meses.value= val.split('=')[1]
      })
      
      tipo.filter(val=>val.includes('tipo'))
      .forEach((val,index)=>{
        
        table_tipo.checked= val.split('=')[1] ==='on' ?true:false 
      })
      
      lsearch.filter(val=>val.includes('search'))
      .forEach((val,index)=>{
        search.value = val.split('=')[1]
      })
      
      ldatepicker.filter(val=>val.includes('datepicker'))
      .forEach((val,index)=>{
        datepicker.value=val.split('=')[1]
      })

      ldatepickerFin.filter(val=>val.includes('datepicker'))
      .forEach((val,index)=>{
        datepickerFin.value=val.split('=')[1]
      })
      
      window.addEventListener('load',event=>{
        get_pacs()        
      })
      document.querySelectorAll('.my_event_cls').forEach(item=>{
        if(item.id==='datepicker' || item.id==='datepickerFin'){
          item.addEventListener('focusout',event=>{
            ref=`?PAC=${table_select_PAC.value}`
            ref+=`&mes=${table_select_Meses.value}`
            ref+=`&tipo=${table_tipo.checked}`
            ref+=`&search=${search.value}`
            ref+=`&datepicker=${datepicker.value}`
            ref+=`&datepickerFin=${datepickerFin.value}`
          })
          
        }else{
          item.addEventListener('change', event=>{
            ref=`?PAC=${table_select_PAC.value}`
            ref+=`&mes=${table_select_Meses.value}`
            ref+=`&tipo=${table_tipo.checked}`
            ref+=`&search=${search.value}`
            ref+=`&datepicker=${datepicker.value}`
            ref+=`&datepickerFin=${datepickerFin.value}`
          })
        }
      })

      

      table_select_PAC.addEventListener('change',(event)=>{        
        anc.href=''
        anc.href=ref
        anc.click()
      })
      table_select_Meses.addEventListener('change',(event)=>{
        anc.href=''
        anc.href=ref
        anc.click()
      })

      table_tipo.addEventListener('click', (event)=>{
          document.getElementById('tipo').checked = table_tipo.checked? true:false;
          if(table_fecha.checked){
              table_fecha.click()
          }
      })

      table_fecha.addEventListener('click', (event)=>{
          

          if(dates.hasAttribute("style")){
              dates.removeAttribute('style')
              datepicker.value=''
              datepicker.setAttribute("required",'')
              datepickerFin.value=''

              datepickerFin.setAttribute('required','')
              search.setAttribute("style","display:none;")
              search.value=''
              
          }else{
              dates.setAttribute("style","display:none;")
              search.removeAttribute('style')
              datepicker.removeAttribute('required')
              datepickerFin.removeAttribute('required')
          }
          if(table_tipo.checked && table_fecha.checked){
              table_tipo.checked=false
          }
      })
    </script>
{% endblock scripts %}