admin: add button to retry task

passbook/admin/templates/administration/task/list.html

@@ -24,6 +24,7 @@
                     <th role="columnheader" scope="col">{% trans 'Last Status' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Status' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Messages' %}</th>
+                    <th role="cell"></th>
                 </tr>
             </thead>
             <tbody role="rowgroup">
@@ -62,6 +63,11 @@
                         </div>
                         {% endfor %}
                     </td>
+                    <td>
+                        <button is="action-button" class="pf-c-button pf-m-primary" url="{% url 'passbook_api:admin_system_tasks-retry' pk=task.task_name %}">
+                            {% trans 'Retry Task' %}
+                        </button>
+                    </td>
                 </tr>
                 {% endfor %}
             </tbody>

passbook/root/settings.py

@@ -65,7 +65,7 @@ LOGIN_URL = "passbook_flows:default-authentication"
 AUTH_USER_MODEL = "passbook_core.User"
 
 _cookie_suffix = "_debug" if DEBUG else ""
-CSRF_COOKIE_NAME = f"passbook_csrf{_cookie_suffix}"
+CSRF_COOKIE_NAME = f"passbook_csrf"
 LANGUAGE_COOKIE_NAME = f"passbook_language{_cookie_suffix}"
 SESSION_COOKIE_NAME = f"passbook_session{_cookie_suffix}"
 

passbook/static/static/src/ActionButton.js

@@ -0,0 +1,63 @@
+import { getCookie } from "./utils.js";
+
+const PRIMARY_CLASS = "pf-m-primary";
+const SUCCESS_CLASS = "pf-m-success";
+const ERROR_CLASS = "pf-m-danger";
+const PROGRESS_CLASSES = ["pf-m-progress", "pf-m-in-progress"];
+
+class ActionButton extends HTMLButtonElement {
+
+    constructor() {
+        super();
+        this.addEventListener('click', e => this.callAction());
+    }
+
+    isRunning = false;
+    oldBody = "";
+
+    setLoading() {
+        this.classList.add(...PROGRESS_CLASSES);
+        this.oldBody = this.innerText;
+        this.innerHTML = `<span class="pf-c-button__progress">
+            <span class="pf-c-spinner pf-m-md" role="progressbar" aria-valuetext="Loading...">
+                <span class="pf-c-spinner__clipper"></span>
+                <span class="pf-c-spinner__lead-ball"></span>
+                <span class="pf-c-spinner__tail-ball"></span>
+            </span>
+        </span>${this.oldBody}`;
+    }
+
+    setDone(statusClass) {
+        this.isRunning = false;
+        this.classList.remove(...PROGRESS_CLASSES);
+        this.innerText = this.oldBody;
+        this.classList.replace(PRIMARY_CLASS, statusClass);
+        setTimeout(() => {
+            console.log('test');
+            this.classList.replace(statusClass, PRIMARY_CLASS);
+        }, 1000);
+    }
+
+    callAction() {
+        if (this.isRunning === true) {
+            return;
+        }
+        this.setLoading();
+        const csrftoken = getCookie('passbook_csrf');
+        const request = new Request(
+            this.attributes["url"].value,
+            { headers: { 'X-CSRFToken': csrftoken } }
+        );
+        fetch(request, {
+            method: "POST",
+            mode: 'same-origin',
+        }).then(r => r.json()).then(r => {
+            this.setDone(SUCCESS_CLASS);
+        }).catch(() => {
+            this.setDone(ERROR_CLASS);
+        });
+    }
+
+}
+
+customElements.define('action-button', ActionButton, { extends: 'button' });

passbook/static/static/src/passbook.js

@@ -1,4 +1,5 @@
 import './FetchFillSlot.js';
+import './ActionButton.js';
 
 // Button Dropdowns
 document.querySelectorAll("button.pf-c-dropdown__toggle").forEach((b) => {

passbook/static/static/src/utils.js

@@ -0,0 +1,15 @@
+export function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}