show ota update progress in bytes

src/c3nav/mesh/consumers.py

@@ -595,6 +595,9 @@ class MeshUIConsumer(AsyncJsonWebsocketConsumer):
         if content.get("subscribe", None) == "ranging":
             await self.channel_layer.group_add("mesh_msg_received", self.channel_name)
             self.msg_received_filter = {"msg_type": MeshMessageType.LOCATE_RANGE_RESULTS.name}
+        if content.get("subscribe", None) == "ota":
+            await self.channel_layer.group_add("mesh_msg_received", self.channel_name)
+            self.msg_received_filter = {"msg_type": MeshMessageType.OTA_STATUS.name}
         if "send_msg" in content:
             msg_to_send = self.scope["session"].pop("mesh_msg_%s" % content["send_msg"], None)
             if not msg_to_send:

src/c3nav/mesh/templates/mesh/fragment_mesh_websocket.html

@@ -25,6 +25,8 @@ function connect() {
             ws.send(JSON.stringify({"send_msg": JSON.parse(document.getElementById('send-uuid').textContent)}));
         {% elif ranging_form %}
             ws.send(JSON.stringify({"subscribe": "ranging"}));
+        {% elif update %}
+            ws.send(JSON.stringify({"subscribe": "ota-{{ update.pk }}"}));
         {% else %}
             ws.send(JSON.stringify({"subscribe": "log"}));
         {% endif %}
@@ -155,6 +157,12 @@ function connect() {
                         }
                     }
                 {% endif %}
+                {% if update %}
+                    var row = document.querySelector(`#ota-recipients-${data.msg.update_id} [id="recipient-${data.msg.src}"]`);
+                    if (!row) break;
+                    row.querySelector('.received_bytes').innerText = data.msg.received_bytes;
+                    row.querySelector('progress').value = data.msg.received_bytes;
+                {% endif %}
                 {% if send_uuid and msg_type == "MESH_ROUTE_REQUEST" %}
                     if (data.msg.route) {
                         line = document.createElement('tr');

src/c3nav/mesh/templates/mesh/ota_detail.html

@@ -18,20 +18,25 @@
             <strong>Created:</strong> {{ update.created }}
         </div>
         <div>
-            <table>
+            <table id="ota-recipients-{{ update.pk }}">
                 <tr>
                     <th>{% trans 'Node' %}</th>
                     <th>{% trans 'Status' %}</th>
                     <th>{% trans 'Progress' %}</th>
                 </tr>
             {% for recipient in update.recipients.all %}
-                <tr>
+                <tr id="recipient-{{ recipient.node_id }}">
                     <td>{% mesh_node recipient.node %}</td>
-                    <td>{{ recipient.get_status_display}}</td>
-                    <td></td>
+                    <td>{{ recipient.get_status_display }}</td>
+                    <td>
+                        <span class="received_bytes">??</span> of {{ update.build.binary.size }} bytes
+                        <br>
+                        <progress id="file" max="{{ update.build.binary.size }}" value="0"></progress>
+                    </td>
                 </tr>
             {% endfor %}
             </table>
         </div>
     </div>
+    {% include "mesh/fragment_mesh_websocket.html" %}
 {% endblock %}