Блог

Главная - Вопросы по программированию - Как отобразить индикатор выполнения сельдерея в пользовательском интерфейсе таким образом, чтобы он отображался даже после переключения страниц

Как отобразить индикатор выполнения сельдерея в пользовательском интерфейсе таким образом, чтобы он отображался даже после переключения страниц

#jquery #django #celery #django-celery #celery-task

Вопрос:

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

 views.py
 
 def approval_req_func(request):
    task = go_to_sleep.delay(3)
    data = {'status': 'Success', 'message': 'Approved successfully', 'task_id':task.task_id}
    return HttpResponse(json.dumps(data), content_type="application/json")
 
 tasks.py
 
 @app.task(bind=True)
def go_to_sleep(self,duration):
    progress_recorder = ProgressRecorder(self)
    s = Contact.objects.all()
    for i,j in enumerate(s):
        time.sleep(duration)
        print(j)
        progress_recorder.set_progress(i 1, len(s),f'On Iteration {i}')
    return 'Done'
 
 Html amp; Scripts
 
 <button>Click to start Progress</button>
<div class='progress-wrapper'>
  <div id='progress-bar' class='progress-bar' style="background-color: #68a9ef; width: 0%;">amp;nbsp;</div>
</div>
<div id="progress-bar-message">Waiting for progress to start...</div>
 
 <script>
$(document).ready(function(){
  $("button").click(function(event) {
      event.preventDefault()
      const valuesInArray = $(this).serializeArray()
      const body = {}
      valuesInArray.forEach(e => {
          body[e.name] = e.value
      });
      $.ajax({
          method: "GET",
          url: "{% url 'contact:approval_req_func' %}",
          data: body
      }).done(function (response) {
                $(function () {
                var progressUrl = "{% url 'celery_progress:task_status' 'task-id-stub' %}";
                var progressUrll = progressUrl.replace('task-id-stub', response['task_id']);
                CeleryProgressBar.initProgressBar(progressUrll);
            });
          })
          .fail(function (response) {
              console.log(response);
     })
});
})

</script>
Метки: ,