Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Javascript no django

Olá, Acompanhei os cursos anteriores e me ajudou a resolver muitas questões que tinha em relação ao django. Entretanto, estou desenvolvendo uma aplicação que possui um timer em que o usuário clica no botão "iniciar", e uma função no javacript faz a contagem do timer e exibe na tela. Quando coloco o javascript e o html juntos, o timer funciona, mas quando separo nos arquivos statics e templates, exibe o conteúdo do timer na tela, mas clico no botão iniciar e não tem nenhuma ação. Como faço para executar essa ação? Consegue me indicar algum material?

html:

div class="container-fluid">

        <div class="row text-center">
           <!-- <div class="text-primary">Pomodoro Timer</div> -->
            <p id="display">1:00</p>
            <!--<button id="more" class="bt1 ">+</button>
            <button id="less" class="bt1">-</button>
            -->
        </div>

        <div id="timer" class="pieChart slice"></div>

        <button id="go" class="bt2" style="margin-top: 3%"  onclick="{% static 'js/teste.js' %}">Iniciar</button>
        <!--<button id="pause" class="bt2" >Pause</button>
        <button id="reset" class="bt2" >Stop/Reset</button>
        -->
    </div>

JavaScript:
    // JQuery code to be added in here.
    var tf;
    var start;
    var length;
    var end;
    var x;
    var now;
    var remaining;
    var minutes;
    var seconds;
    var d;
    var i;
    var left;
    var right;
    var line=[];
    var slice;
    var pauseTime;
    var pauseLength;

    //show default value when page is loaded
    $(document).ready(function (){
        tf = 1;
    $('#display').html('1:00');});


    function display () {
            $('#display').empty().html(tf + ':00');
    }

    //user to add mins
    $('#more').on('click',function() {
        tf = tf + 1 ;
        display();
    });

    //user to minus mins
    $('#less').on('click',function() {
        if (tf > 1) {
            tf = tf - 1;
            display();
        }
    });

    // Update the count down every 1 second
    function a () {
        x = setInterval(function () {

            // Get the time when the user clicks
            now = $.now();

            // Find the distance between now and the count down time

            remaining = end - now;

            // Time calculations for days, hours, minutes and seconds
            minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
            seconds = Math.round((remaining % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"

            if (seconds == 60) {
                document.getElementById("display").innerHTML = "1:00";
            }

            else if (seconds < 10) {
                document.getElementById("display").innerHTML = minutes + ":0" + seconds;
            }

            else document.getElementById("display").innerHTML = minutes + ":" + seconds;

            // If the count down is finished, write some text
            if (remaining < 0) {
                clearInterval(x);
                document.getElementById("display").innerHTML = "END";
            }

            //to animate the pie
            d = 360 / length;
            i = length - remaining;
            right = -90 + d * i;
            left = -90 + d * i - 180;

            //rotates the red, shows blue on the right
            if (right < 90) {
                line = ['linear-gradient(' + right + 'deg, #008000 50%, transparent 50%)',
                    'linear-gradient(-90deg, #FF0000 50%, transparent 50%)'];
            }

            //rotates the blue, shows blue on both sides
            else {
                line = ['linear-gradient(' + left + 'deg, #FF0000 50%, transparent 50%)',
                    'linear-gradient(-90deg, #FF0000 50%, transparent 50%)'];
            }

            //to update the class of the pie
            slice = $('#timer').css({
                'background-image': line.join(',')
            });

        }, 1000);

    }
    //user to start or resume
    $('#go').on('click', function () {

    //to start
        if (isNaN(pauseTime)) {
            start = $.now();
            length = tf * 60 * 1000;
            end = start + length;
            a();
        }
//to resume
        else {
            start = $.now();
            end = start + pauseLength;
            a();
        }
    });

`

2 respostas
solução!

Oi Mario, tudo bem com você?

Para executar essa ação com arquivos separados, o primeiro passo é ter o arquivo jquery, já que está trabalhando com esta biblioteca jquery em seu contador. Caso não tenha este arquivo, poderá baixá-lo neste link.

  • Dentro da pasta js, há uma pasta jquery, copie esta pasta para onde se localiza seus arquivos js em static.

  • Crie o arquivo contador.js dentro da pasta js em static, este arquivo conterá todo o código do contador.

A estrutura é similar a essa:

static
    - js
        - jquery
            - jquery-2.2.4.min.js
        - contador.js
  • Agora, em templates, no seu arquivo html, precisamos pedir para o django carregar estes arquivos estáticos, e fazemos isso com a cláusula load static:
{% load static %}
  • Precisamos também carregar os arquivos da biblioteca jquery e o nosso arquivo que faz a contagem:
         <script src="{% static 'js/jquery/jquery-2.2.4.min.js' %}"></script>
         <script src="{% static 'js/contador.js' %}"></script>
  • Com o nosso template pronto e os devidos arquivos na pasta static, podemos chamar a função responsável por fazer a contagem:
<button id="go" class="bt2" style="margin-top: 3%"  onclick="a">Iniciar</button>

O nosso arquivo html ficará da seguinte forma:

image

Para leitura, recomendo este artigo que trata sobre jquery e django.

Fico à disposição para qualquer dúvida. Abraços e bons estudos!

Funcionou!!! Obrigada