Fix broadcasting

Only update the progressbar and bytes transferred

app/helpers/syncs_helper.rb

@@ -1,18 +1,8 @@
 module SyncsHelper
-  def sync_progress_bar(sync)
+  def sync_progress_classes(sync)
     css_class = "progress-bar"
     css_class << " bg-danger" if sync.errored?
     css_class << " bg-success" if sync.succeeded?
-
-    content_tag :div, class: "progress" do
-      content_tag(
-        :div,
-        "#{sync.progress.round}%",
-        style: "width: #{sync.progress}%",
-        class: css_class,
-        aria: { valuenow: sync.progress, valuemin: 0, valuemax: 100 },
-        role: "progressbar"
-      )
-    end
+    css_class
   end
 end

app/models/sync.rb

@@ -1,5 +1,8 @@
 class Sync < ApplicationRecord
-  after_update_commit -> { broadcast_replace_later_to "sync_detail_#{id}", partial: "syncs/sync_detail" }
+  after_update_commit -> { broadcast_replace_later_to "list_progress_#{id}", partial: "syncs/list_progress", target: "list_progress_#{id}" }
+  after_update_commit -> { broadcast_replace_later_to "list_files_and_bytes_#{id}", partial: "syncs/list_files_and_bytes", target: "list_files_and_bytes_#{id}" }
+  after_update_commit -> { broadcast_replace_later_to "detail_progress_#{id}", partial: "syncs/detail_progress", target: "detail_progress_#{id}" }
+  after_update_commit -> { broadcast_replace_later_to "detail_files_and_bytes_#{id}", partial: "syncs/detail_files_and_bytes", target: "detail_files_and_bytes_#{id}" }
   broadcasts inserts_by: :prepend
 
   has_many :sent_files

app/views/receiver/payloads/index.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Payloads" %>
+<%= turbo_stream_from :receiver_payloads %>
 
 <ul class="list-group" id="receiver_payloads">
   <%= render @payloads %>

app/views/sender/payloads/index.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Payloads" %>
+<%= turbo_stream_from :sender_payloads %>
 
 <ul class="list-group" id="sender_payloads">
   <%= render @payloads %>

app/views/syncs/_detail_files_and_bytes.html.erb

@@ -0,0 +1,4 @@
+<h4 class="mt-3" id="detail_files_and_bytes_<%= sync.id %>">
+  <%= pluralize(sync.sent_files.count, "file") %> transferred
+  <span class="h6 text-muted"><%= number_to_human_size(sync.bytes_transferred) %></span>
+</h4>

app/views/syncs/_detail_progress.html.erb

@@ -0,0 +1,5 @@
+<div class="progress" id="detail_progress_<%= sync.id %>">
+  <div class="<%= sync_progress_classes(sync) %>" style="width: <%= sync.progress %>%" aria-valuenow="<%= sync.progress %>" aria-valuemin="0" aria-valuemax="100" role="progressbar">
+    <%= sync.progress.round %>%
+  </div>
+</div>

app/views/syncs/_list_files_and_bytes.html.erb

@@ -0,0 +1,5 @@
+<span class="ml-4" id="list_files_and_bytes_<%= sync.id %>">
+  <b>
+    <%= pluralize(sync.sent_files.count, "files") %> (<%= number_to_human_size(sync.bytes_transferred) %>)
+  </b>
+</span>

app/views/syncs/_list_progress.html.erb

@@ -0,0 +1,20 @@
+<% if sync.errored? %>
+  <div class="status-icon text-center text-danger" id="list_progress_<%= sync.id %>">
+    <i class="bi bi-exclamation" style="font-size: 3em"></i>
+  </div>
+<% elsif sync.succeeded? %>
+  <div class="status-icon text-center text-success" id="list_progress_<%= sync.id %>">
+    <i class="bi bi-check2" style="font-size: 3em"></i>
+  </div>
+<% else %>
+  <div class="pie-wrapper progress-<%= sync.progress.round %> style-2" id="list_progress_<%= sync.id %>">
+    <span class="label">
+      <%= sync.progress.round %><span class="smaller">%</span>
+    </span>
+    <div class="pie">
+      <div class="left-side half-circle"></div>
+      <div class="right-side half-circle"></div>
+    </div>
+    <div class="pie-shadow"></div>
+  </div>
+<% end %>

app/views/syncs/_sync.html.erb

@@ -1,35 +1,14 @@
+<%= turbo_stream_from "list_progress_#{sync.id}" unless sync.finished? %>
+<%= turbo_stream_from "list_files_and_bytes_#{sync.id}" unless sync.finished? %>
 
 <li class="list-group-item p-3 d-flex align-items-center" id="<%= dom_id(sync) %>">
-  <% if sync.errored? %>
-    <div class="status-icon text-center text-danger">
-      <i class="bi bi-exclamation" style="font-size: 3em"></i>
-    </div>
-  <% elsif sync.succeeded? %>
-    <div class="status-icon text-center text-success">
-      <i class="bi bi-check2" style="font-size: 3em"></i>
-    </div>
-  <% else %>
-    <div class="pie-wrapper progress-<%= sync.progress.round %> style-2">
-      <span class="label">
-        <%= sync.progress.round %><span class="smaller">%</span>
-      </span>
-      <div class="pie">
-        <div class="left-side half-circle"></div>
-        <div class="right-side half-circle"></div>
-      </div>
-      <div class="pie-shadow"></div>
-    </div>
-  <% end %>
+  <%= render 'syncs/list_progress', sync: sync %>
   <h4 class="m-0 ml-3">
     <%= link_to sync do %>
     #<%= sync.id %>
     <% end %>
   </h4>
-  <span class="ml-4">
-    <b>
-      <%= pluralize(sync.sent_files.count, "files") %> (<%= number_to_human_size(sync.bytes_transferred) %>)
-    </b>
-  </span>
+  <%= render 'syncs/list_files_and_bytes', sync: sync %>
   <span class="ms-auto">
     <% if sync.finished? && !sync.errored? %>
       Took <%= distance_of_time_in_words sync.started_at, sync.finished_at, include_seconds: true %>

app/views/syncs/_sync_detail.html.erb

@@ -1,65 +1,65 @@
-<%= content_tag :div, id: dom_id(sync) do %>
-  <%= sync_progress_bar(sync) %>
-  <div class="row mt-2">
+<%= turbo_stream_from "detail_progress_#{sync.id}" unless sync.finished? %>
+<%= turbo_stream_from "detail_files_and_bytes_#{sync.id}" unless sync.finished? %>
+
+<%= render 'syncs/detail_progress', sync: sync %>
+<div class="row mt-2">
+  <% if sync.started_at %>
     <div class="started-at">
       <b>Started at:</b>
-      <%= time_tag sync.created_at, title: sync.created_at do %>
+      <%= time_tag sync.started_at, title: sync.started_at do %>
         <%= I18n.l sync.started_at, format: :long %>
       <% end %>
     </div>
-    <% if sync.finished_at %>
-      <div class="finished-at">
-        <b>Finished at:</b> <%= I18n.l sync.finished_at, format: :long %>
-      </div>
-    <% end %>
-    <% if sync.errored_at %>
-      <div class="errored-at">
-        <b>Errored at:</b> <%= I18n.l sync.errored_at, format: :long %>
-      </div>
-    <% end %>
-  </div>
-
-  <% if sync.errored? %>
-    <h4 class="mt-3">
-      Error
-    </h4>
-    <div class="alert alert-danger p-2" role="alert">
-      <pre class="m-0"><code><%= sync.error_message %></code></pre>
+  <% end %>
+  <% if sync.finished_at %>
+    <div class="finished-at">
+      <b>Finished at:</b> <%= I18n.l sync.finished_at, format: :long %>
+    </div>
+  <% end %>
+  <% if sync.errored_at %>
+    <div class="errored-at">
+      <b>Errored at:</b> <%= I18n.l sync.errored_at, format: :long %>
     </div>
   <% end %>
+</div>
 
-  <div class="mt-3 d-flex justify-content-between">
-    <h4 class="mt-3">
-      <%= pluralize(sync.sent_files.count, "file") %> transferred
-      <span class="h6 text-muted"><%= number_to_human_size(sync.bytes_transferred) %></span>
-    </h4>
-    <%= bootstrap_form_tag method: :get, data: { turbo: !Rails.env.test? } do |f| %>
-      <%= f.text_field :filename, value: params[:filename], hide_label: true, placeholder: "Search files" %>
-    <% end %>
+<% if sync.errored? %>
+  <h4 class="mt-3">
+    Error
+  </h4>
+  <div class="alert alert-danger p-2" role="alert">
+    <pre class="m-0"><code><%= sync.error_message %></code></pre>
   </div>
+<% end %>
 
-  <ul class="list-group file-list">
-    <% if sent_files.empty? && params[:filename].present? %>
-      <div class="text-center">
-        <em>No files found containing <b><%= params[:filename] %></b></em>
-        <br />
-        <%= link_to "Reset filter", sync_path(@sync) %>
+<div class="mt-3 d-flex justify-content-between">
+  <%= render 'syncs/detail_files_and_bytes', sync: sync %>
+  <%= bootstrap_form_tag method: :get, data: { turbo: !Rails.env.test? } do |f| %>
+    <%= f.text_field :filename, value: params[:filename], hide_label: true, placeholder: "Search files" %>
+  <% end %>
+</div>
+
+<ul class="list-group file-list">
+  <% if sent_files.empty? && params[:filename].present? %>
+    <div class="text-center">
+      <em>No files found containing <b><%= params[:filename] %></b></em>
+      <br />
+      <%= link_to "Reset filter", sync_path(@sync) %>
+    </div>
+  <% end %>
+  <% if sync.running? %>
+    <div class="text-center">
+      <em>Files are only displayed once the synchronization is finished</em>
+    </div>
+  <% end %>
+  <% sent_files.ordered.limit(50).each do |sent_file| %>
+    <li class="list-group-item d-flex align-items-center">
+      <div class="filename" title="<%= sent_file.path %>">
+        <%= sent_file.path %>
       </div>
-    <% end %>
-    <% if sync.running? %>
-      <div class="text-center">
-        <em>Files are only displayed once the synchronization is finished</em>
+      <div class="ms-auto filesize">
+        <b><%= number_to_human_size(sent_file.size) %></b>
       </div>
-    <% end %>
-    <% sent_files.ordered.limit(50).each do |sent_file| %>
-      <li class="list-group-item d-flex align-items-center">
-        <div class="filename" title="<%= sent_file.path %>">
-          <%= sent_file.path %>
-        </div>
-        <div class="ms-auto filesize">
-          <b><%= number_to_human_size(sent_file.size) %></b>
-        </div>
-      </li>
-    <% end %>
-  </ul>
-<% end %>
+    </li>
+  <% end %>
+</ul>

app/views/syncs/index.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Synchronizations" %>
+<%= turbo_stream_from :syncs %>
 
 <ul class="list-group" id="<%= Sync.model_name.plural %>">
   <%= render @syncs %>

app/views/syncs/show.html.erb

@@ -1,3 +1,4 @@
 <% content_for :title, "Synchronization ##{@sync.id}" %>
+<%= turbo_stream_from "sync_detail_#{@sync.id}" unless @sync.finished? %>
 
 <%= render "syncs/sync_detail", sync: @sync, sent_files: @sent_files %>