Как превратить «Поле продолжительности» Джанго в обратный отсчет с Аяксом? - PullRequest
Новая
       29

Как превратить «Поле продолжительности» Джанго в обратный отсчет с Аяксом?

0 голосов
/ 16 июня 2019

Я пытаюсь создать небольшое приложение для ведения счетов, чтобы научиться использовать Django Rest Framework и Ajax вместе.

У меня полностью настроен API, но я оторвался от Ajax.

Я пытаюсь создать кнопку «Пуск / Пауза», чтобы включить отсчет времени. У меня есть Ajax-скрипт, вызывающий поле «длительность» API, и у меня есть кнопка «Пуск / Пауза», которая меняется с «Пуск» на «Пауза».

Мне не хватает двух вещей. Первый способ переключения между «Пуск» и «Пауза». Я попытался Toggle(), но я думаю, что использовал это неправильно.

HTML: 

<div class="col-4" id="jsonresp">
    <button class="start_match btn btn-success">Start Match </button><h5>
    <lable>Time Left:</lable> <span id="duration"></span></h5>
</div>

script.js: 

<script>
$('.start_match').click(function () {
    var url = "{% url 'api:API_Match_Detail' pk=object.id %}";
    console.log(url);
    $.ajax({
        url: url,
        dataType: "json",
        success: function (data) {
            var match = data;
            console.log(match);
            $('#duration').text(data.duration);

            $(".start_match").removeClass('btn-success').addClass('btn-danger');
            $(".start_match").html("Pause Match");  
            // this is where I tried $(".start_match").toggle()
            },
         });
     });
</script>

Во-вторых, я не смог найти много информации. Я пытаюсь заставить поле длительности вести обратный отсчет до нуля и обновлять API по мере необходимости, так как я хотел бы перенести эти данные в другой проект, полностью отдельный от этого.

Модель: 

class Match(models.Model):
    tournament = models.ForeignKey(Tournament, on_delete=models.PROTECT)
    duration = models.DurationField(default=timedelta(minutes=6))
    more stuff...

Поскольку я хочу переключить кнопку и заставить ее делать что-то еще, я не думаю, что скрывать кнопку и показывать другую - это самое чистое решение.

Моя текущая лучшая догадка:

Я знаю, что это не правильно, но примерно так я думаю, что это должно работать с моими очень, очень ограниченными знаниями Javascript и Ajax. 

<script>
var url = "{% url 'api:API_Match_Detail' pk=object.id %}";
$.ajax({
    success: function (data) {

        // Set the duration
        url: url 
        $('#duration').text(data.duration);

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

          var time = datetime.timedelta 1 second //I know this isn't right at all 

          var totalTime = duration - time;
          save(x) // I know this isnt right either
          }
    }
    });
)};
</script>
...