5
respostas

Lista de presença com JS

Estou fazendo um sistema em Django para controle de frequência de alunos.Tenho uma tabela/formulario HTML que é alimentada por um loop em python:

   <form action="{% url 'cadastra_presenca' %}" method="POST" enctype="multipart/form-data"> 
                    {% csrf_token %} 
                {% for alunos in curso %}

                <tr class="tbody-row">
                        <td class="tbody-column" style="display:none;">
                            <label style="display: flex; justify-content: center;display: none;">

                                <input type="text"  class="input-3" value="{{alunos.id}}"  name="id_matricula_presenca"/>

                            </label>
                        </td>

                        <td class="tbody-column">{{alunos.alunos.nome_aluno}}
                            <label style="display: flex; justify-content: center;display: none;">

                                <input type="text"  class="input-3" value="{{alunos.alunos.nome_aluno}}" name="nome_aluno_presenca"/>

                            </label>
                        </td>

                        <td class="tbody-column">

                                <input type="date" class="input-3" value="{{data_presenca}}" readonly  name="data_presenca_aluno">

                        </td>                           

                        <td class="tbody-column">
                            <label style="display: flex; justify-content: center;">
                                <input type="checkbox"   class="presenca" checked multiple value="P" name="confirma_presenca_aluno">
                                <input class="ausencia" type='hidden' disabled value='F' multiple  name='confirma_presenca_aluno'>

                            </label>
                        </td>                   

               </tr> 

                {% endfor %}

                <div style="display: flex; justify-content: center;position:relative;">
                    <input type="submit" class="botao-presenca" value="OK">                     
                </div>

                </form> 

Entretanto, como o checkbox não envia nada se estiver desmarcado, tive que arrumar uma solução para esse problema, usando um input escondido que possui o mesmo name, para que quando o checkbox esteja unchecked o valor que o form envia é o do input hidden. Mas a "gambiarra" funciona até certo ponto.

Segue o JS que fiz para tal:

var presenca= document.querySelectorAll('.presenca');
//var ausencia = document.querySelectorAll('.ausencia');

presenca.forEach(function(p){
        p.addEventListener('click',function(){
              var ausente=p.parentNode.querySelector('.ausencia');
        if(ausente.disabled==true){
            ausente.disabled=false;
        }else if(ausente.disabled==false){
            ausente.disabled=true;
        }

    });

});

Quando eu quero fazer o formulário de edição dessas presenças, não consigo fazer com que o checkbox fique marcado quando o valor for 'P' e desmarcado se 'F' e para que o usuário, caso queira editar altere apenas aqueles que quiser.

Já tentei inclusive um loop com o type="radio" , entretanto, mesmo cada aluno tendo um radio box... eu só consigo selecionar 1 já que todos os radios tem o mesmo name.

Daria para fazer essa lista de presença usando Java Script ? Como eu faria para funcionar essa questão dos checkbox? E persistir aqueles com F e aqueles com P , desmarcados ou marcados.

5 respostas

Fala ai Raul, tudo bem? Já tentou abrir a dúvida dentro da sessão do Django? Acho que por lá você vai conseguir uma resposta mais objetiva e direta para seu problema.

Isso porque com Django as vezes nem vai ser necessário utilizar JavaScript para, porque o Django possui sua template engine e nela é possível realizar esses tipos de condicionais.

Espero ter ajudado.

Infelizmente ninguém me respondeu sobre isso. Já procurei em todo canto em não achei nada. Acabei testando diversas coisas até conseguir um resultado satisfatório. Entretanto, não sei se fiz da melhor forma possível. O que fiz foi isso aqui basicamente:

    <form action="{% url 'cadastra_presenca' %}" method="POST" enctype="multipart/form-data"> 
                    {% csrf_token %} 
                {% for alunos in curso %}

                <tr class="tbody-row">
                        <td class="tbody-column" style="display:none;">
                            <label style="display: flex; justify-content: center;display: none;">

                                <input type="text"  class="input-3" value="{{alunos.id}}"  name="id_matricula_presenca"/>

                            </label>
                        </td>

                        <td class="tbody-column">{{alunos.alunos.nome_aluno}}
                            <label style="display: flex; justify-content: center;display: none;">

                                <input type="text"  class="input-3" value="{{alunos.alunos.nome_aluno}}" name="nome_aluno_presenca"/>

                            </label>
                        </td>

                        <td class="tbody-column">

                                <input type="date" class="input-3" value="{{data_presenca}}" readonly  name="data_presenca_aluno">

                        </td>                           

                        <td class="tbody-column">
                            <label style="display: flex; justify-content: center;">
                                <input type="checkbox"   class="presenca" checked multiple value="P" name="confirma_presenca_aluno">
                                <input class="ausencia" type='hidden' disabled value='F' multiple  name='confirma_presenca_aluno'>
                            </label>
                        </td>                                 
                </tr>                                                                          
                {% endfor %}
     <div style="display: flex; justify-content: center;position:relative;">
    <input type="submit" class="botao-presenca" value="OK">                     
    </div>
   </form>  

Ai nas views eu capturei as listas de cada name de input, e gerei uma terceira lista. Depois percorri essa array de listas e fui jogando no banco. Dessa forma:

def cadastra_presenca(request):
    if request.method=='POST':

        id_matricula_presenca=request.POST.getlist('id_matricula_presenca')

        lista_matricula=request.POST.getlist('nome_aluno_presenca')
        lista_presenca=request.POST.getlist('confirma_presenca_aluno')
        lista_data=request.POST.getlist('data_presenca_aluno')
        lista_final=[]

        contador=0

        for i in lista_data:

            if contador<= len(lista_data):
                lista_final.append([id_matricula_presenca[contador],lista_matricula[contador],lista_presenca[contador],lista_data[contador]])

                contador+=1

        con=0

        for j in lista_final:

            matricula=Matricula.objects.get(pk=j[0]) 
            id_aluno=matricula.alunos.id


            attendance=ListaPresenca.objects.filter(identificador_usuario=request.user.id).filter(matricula=matricula)           
            if  attendance.filter(dia_presenca=j[3]).exists():
                messages.error(request,'Presença já cadastrada para esse(s) aluno(s)')
                return HttpResponsePermanentRedirect(reverse('filtro_presenca'))

            dar_presenca=ListaPresenca.objects.create(identificador_usuario=request.user.id,matricula=matricula,
            dia_presenca=j[3],presenca=j[2])

            dar_presenca.save()


        #print(lista_presenca)
        messages.success(request,'Presença cadastrada com sucesso')
        return redirect('filtro_presenca')

Fala Raul, poxa que pena ninguém ter respondido por la, é uma categoria que tem muitas duvidas.

Eu não manjo de Django, mas, olhando os códigos para mim ficaram bons, não vejo problemas.

Abraços e bons estudos.

Sem problemas, já tá me ajudando pra caramba. Das suas respostas que tirei um monte de coisas pra poder fazer essa lista. Logo aparecerão mais dúvidas, conto com você, abraço e muito obrigado!

Opa, pode contar, sempre que precisar não deixe de criar suas dúvidas.

Abraços.