app/templates/partials/jobs/count.html

{% from "components/big-number.html" import big_number %}

<div
  {% if not finished_at %}
    data-module="update-content"
    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
    data-key="counts"
    aria-live="polite"
  {% endif %}
>

  <ul class="grid-row job-totals">
    <li class="column-one-quarter">
      {{ big_number(
        counts.queued, 'queued'
      )}}
    </li>
    <li class="column-one-quarter">
      {{ big_number(
        counts.sent, 'processed'
      )}}
    </li>
  </ul>

</div>
Make job page poll for updates This is a first go at having the job page update without refreshing. The approach I’ve taken is to do all the rendering of HTML on the server side, rather than use a Javascipt templating engine like mustache. This ensures that we don’t have to maintain two sets of templates. So the approach is to split the job page into partials. These partials can then: - be included in the job page to render the whole page - be rendered indivudually and then returned as a blob of HTML inside a JSON response Then I’ve added a Javascript module which looks for areas of the page that should be reloaded. For each area of the page it will poll a URL and re-render that section of the page when it gets new HTML. It implements some throttling so that API calls will never happen more frequently than 0.67 times/second. 2016-03-02 17:36:20 +00:00			`{% from "components/big-number.html" import big_number %}`
Patch update sections of the page on AJAX Currently, when we update a section of the page with AJAX we replace the entire HTML of the section with the new HTML. This causes problems: - if you’re trying to interact with that section of the page, eg by inpecting it, clicking or hovering an element - (probably) for screenreaders trying to navigate a page which is changing more than is necessary This commit replaces the call to `.html()` with a pretty clever library called diffDOM[1]. DiffDOM works by taking a diff of the old element and the new element, then doing a patch update, ie only modifying the parts that have changed. This is similar in concept to React’s virtual DOM, while still allowing us to render all markup from one set of templates on the server-side. 1. https://github.com/fiduswriter/diffDOM 2016-04-27 09:28:42 +01:00
			`<div`
			`{% if not finished_at %}`
			`data-module="update-content"`
			`data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"`
			`data-key="counts"`
Add ARIA live attribute to all AJAX updated areas So that screenreaders will report on updates to the page. 2016-04-27 09:43:27 +01:00			`aria-live="polite"`
Patch update sections of the page on AJAX Currently, when we update a section of the page with AJAX we replace the entire HTML of the section with the new HTML. This causes problems: - if you’re trying to interact with that section of the page, eg by inpecting it, clicking or hovering an element - (probably) for screenreaders trying to navigate a page which is changing more than is necessary This commit replaces the call to `.html()` with a pretty clever library called diffDOM[1]. DiffDOM works by taking a diff of the old element and the new element, then doing a patch update, ie only modifying the parts that have changed. This is similar in concept to React’s virtual DOM, while still allowing us to render all markup from one set of templates on the server-side. 1. https://github.com/fiduswriter/diffDOM 2016-04-27 09:28:42 +01:00			`{% endif %}`
			`>`

			`<ul class="grid-row job-totals">`
			`<li class="column-one-quarter">`
			`{{ big_number(`
			`counts.queued, 'queued'`
			`)}}`
			`</li>`
			`<li class="column-one-quarter">`
			`{{ big_number(`
			`counts.sent, 'processed'`
			`)}}`
			`</li>`
			`</ul>`

			`</div>`