From ff9cb4b4d71d0df8d0b0f0a96c4a5e45a02ad904 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Thu, 10 Aug 2023 18:13:55 +0200
Subject: 🚸 imports: auto-refresh import state and progress
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ishtar_common/templates/ishtar/import_table.html | 69 +++++++++++++++---------
 1 file changed, 43 insertions(+), 26 deletions(-)

(limited to 'ishtar_common/templates')

diff --git a/ishtar_common/templates/ishtar/import_table.html b/ishtar_common/templates/ishtar/import_table.html
index 138dbba65..f027e07c5 100644
--- a/ishtar_common/templates/ishtar/import_table.html
+++ b/ishtar_common/templates/ishtar/import_table.html
@@ -1,21 +1,36 @@
 {% load i18n l10n inline_formset %}
 {% localize off %}<script type="text/javascript">
-var html = $("#message_list").html();
-{% if MESSAGES and AJAX %}{% for message, message_type in MESSAGES %}
-html += '<div class="alert alert-{{message_type}} alert-dismissible fade show"';
-html += '   role="alert">';
-html += '     {{message}}';
-html += '     <button type="button" class="close" data-dismiss="alert"';
-html += '             aria-label="Close">';
-html += '         <span aria-hidden="true">&times;</span>';
-html += '     </button>';
-html += ' </div>';
-{% endfor %}{% endif %}
-$("#message_list").html(html);
+    var html = $("#message_list").html();
+    {% if MESSAGES and AJAX %}{% for message, message_type in MESSAGES %}
+    html += '<div class="alert alert-{{message_type}} alert-dismissible fade show"';
+    html += '   role="alert">';
+    html += '     {{message}}';
+    html += '     <button type="button" class="close" data-dismiss="alert"';
+    html += '             aria-label="Close">';
+    html += '         <span aria-hidden="true">&times;</span>';
+    html += '     </button>';
+    html += ' </div>';
+    {% endfor %}{% endif %}
+    $("#message_list").html(html);
 
-$("#import-list").find('select').prop('disabled', true);
-$("#import-list").find('input').prop('disabled', true);
+    $("#import-list").find('select').prop('disabled', true);
+    $("#import-list").find('input').prop('disabled', true);
 
+    var import_table_update_import_ids = new Array();
+    var import_table_import_state = new Array();
+    {% for import in object_list %}{% if import.state == 'IP' or import.state == 'PP' %}
+    import_table_update_import_ids.push("{{import.import_id}}");
+    {% if not import.importer_type.type_label %}{# group #}{% for sub in import.import_list %}
+    import_table_update_import_ids.push("{{sub.id}}");{% endfor %}
+    {% endif %}{% endif %}{% endfor %}
+    var need_refresh = false;
+    if (import_table_update_import_ids.length) need_refresh = true;
+
+    $(document).ready(function(){
+        if (need_refresh) setInterval(function(){
+            import_table_update_import_list(import_table_update_import_ids)
+        }, 3 * 1000);
+    });
 </script>
 <h2>{{page_name}}</h2>
 <div class='form' id="import-list">
@@ -37,7 +52,7 @@ $("#import-list").find('input').prop('disabled', true);
             <th>{% trans "Match" %}</th>
         </tr>
         {% for import in object_list %}
-        <tr{% if import.pk in refreshed_pks %} class='bg-info'{% endif %}>
+        <tr id="import-{{import.import_id}}"{% if import.pk in refreshed_pks %} class='bg-info'{% endif %}>
             <td>
                 {{import.name|default:"-"}}
             </td>
@@ -61,11 +76,13 @@ $("#import-list").find('input').prop('disabled', true);
             <td>
                 {{import.creation_date|date:"DATE_FORMAT"}} {{import.creation_date|time:"H:i"}} - {{import.user}}
             </td>
-            <td>
+            <td id="status-{{import.import_id}}">
                 {{import.status}}
             </td>
             <td>
-                <select class="form-control" name='import-action-{% if not import.importer_type.type_label %}group-{% endif %}{{import.pk}}'>
+                <select class="form-control"
+                        id='import-action-{{import.import_id}}'
+                        name='import-action-{{import.import_id}}'>
                     <option value=''>--------</option>
                     {% for action, lbl in import.get_actions %}
                     <option value='{{action}}'>{{lbl}}</option>
@@ -87,11 +104,12 @@ $("#import-list").find('input').prop('disabled', true);
                 <a href='{{import.match_file.url}}'>{% trans "File" context "not a directory" %}</a>
                 {% endif %}</td>
         </tr>
-        {% if import.importer_type.type_label and import.state == 'IP' or import.state == 'PP' and import.current_line %}
-        <tr>
+        {% if import.importer_type.type_label %}
+        <tr></tr>{# only for even and odd style #}
+        <tr id="progress-display-{{import.id}}"{% if sub.state != 'IP' and sub.state != 'PP' %} style="display:none"{% endif %}>
             <td colspan="11">
                 <div class="progress bg-secondary">
-                  <div class="progress-bar progress-bar-striped {% if import.state == 'IP'%}bg-success{% else %}bg-info{% endif %} progress-bar-animated" role="progressbar"
+                  <div id="progress-{{import.id}}" class="progress-bar progress-bar-striped {% if import.state == 'IP'%}bg-success{% else %}bg-info{% endif %} progress-bar-animated" role="progressbar"
                        aria-valuenow="{{import.current_line}}" aria-valuemin="0" aria-valuemax="{{import.number_of_line}}" style="width: {{import.progress_percent}}%">
                        &nbsp;{{import.current_line}} / {{import.number_of_line}}
                        </div>
@@ -101,7 +119,7 @@ $("#import-list").find('input').prop('disabled', true);
         {% endif %}
         {% if not import.importer_type.type_label %} {# group #}
         {% for sub in import.import_list %}
-        <tr>
+        <tr id="import-{{sub.import_id}}">
             <td></td>
             <td>{{sub.importer_type}}</td>
             <td>{% if sub.imported_file %}
@@ -113,7 +131,7 @@ $("#import-list").find('input').prop('disabled', true);
                 {% endif %}
             </td>
             <td></td>
-            <td>{{sub.status}}</td>
+            <td id="status-{{sub.import_id}}">{{sub.status}}</td>
             <td></td>
             <td>{% if sub.need_matching %}
                 <a href='{% url "import_link_unmatched" sub.pk %}'>{% trans "Match"%}</a>
@@ -128,18 +146,17 @@ $("#import-list").find('input').prop('disabled', true);
                 <a href='{{sub.match_file.url}}'>{% trans "File" context "not a directory" %}</a>
                 {% endif %}</td>
         </tr>
-        {% if sub.state == 'IP' or sub.state == 'PP' %}
-        <tr>
+        <tr></tr>{# only for even and odd style #}
+        <tr id="progress-display-{{sub.id}}"{% if sub.state != 'IP' and sub.state != 'PP' %} style="display:none"{% endif %}>
             <td colspan="11">
                 <div class="progress bg-secondary">
-                    <div class="progress-bar progress-bar-striped {% if sub.state == 'IP'%}bg-success{% else %}bg-info{% endif %} progress-bar-animated" role="progressbar"
+                    <div id="progress-{{sub.id}}" class="progress-bar progress-bar-striped {% if sub.state == 'IP'%}bg-success{% else %}bg-info{% endif %} progress-bar-animated" role="progressbar"
                          aria-valuenow="{{sub.current_line}}" aria-valuemin="0" aria-valuemax="{{sub.number_of_line}}" style="width: {{sub.progress_percent}}%">
                         &nbsp;{{sub.current_line}} / {{sub.number_of_line}}
                     </div>
                 </div>
             </td>
         </tr>
-        {% endif %}
         {% endfor %}
         {% endif %}
         {% endfor %}
-- 
cgit v1.2.3