More select fields, show checked/live timestamps

Author: Developer

app/assets/builds/application.js

@@ -3,4 +3,9 @@ def user_color(user)
     colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2']
     colors[user.id % colors.length]
   end
+
+  def time_ago_in_words_with_nil(time)
+    return 'Never' if time.nil?
+    "#{time_ago_in_words(time)} ago"
+  end
 end

app/assets/builds/application.js.map

@@ -47,6 +47,15 @@ export class ActionCableManager {
       case 'cell_updated':
         this.controller.cellRenderer.updateCell(data.cell_id, data.field, data.value, data.stream_id)
         break
+      case 'stream_updated':
+        // Handle updates to non-editable fields like last_checked_at and last_live_at
+        if (data.last_checked_at !== undefined) {
+          this.controller.cellRenderer.updateTimeAgoField(data.stream_id, 'last_checked_at', data.last_checked_at)
+        }
+        if (data.last_live_at !== undefined) {
+          this.controller.cellRenderer.updateTimeAgoField(data.stream_id, 'last_live_at', data.last_live_at)
+        }
+        break
     }
   }
 }

app/helpers/application_helper.rb

@@ -25,13 +25,6 @@ export class CellEditor {
     if (fieldType === 'select') {
       this.controller.cellRenderer.showSelectDropdown(cell)
     } else {
-      // For status field and other fields with special formatting, 
-      // replace content with plain text for editing
-      if (field === 'status') {
-        const currentValue = cell.dataset.originalValue || cell.textContent.trim()
-        cell.textContent = currentValue
-      }
-      
       // Make cell editable
       cell.contentEditable = true
       cell.focus()
@@ -73,11 +66,6 @@ export class CellEditor {
     // Make cell non-editable
     cell.contentEditable = false
 
-    // For status field, restore the formatted display with current value
-    if (field === 'status') {
-      this.controller.cellRenderer.formatStatusCell(cell)
-    }
-    
     // Clear edit timeout
     this.controller.editTimeoutManager.clearEditTimeout(cellId)
   }

app/javascript/controllers/collaborative_spreadsheet/action_cable_manager.js

@@ -112,9 +112,59 @@ export class CellRenderer {
     cell.appendChild(span)
   }
 
+  updateTimeAgoField(streamId, field, timeValue) {
+    const elementId = `stream_${streamId}_${field}`
+    const element = document.getElementById(elementId)
+    if (!element) {
+      console.warn(`Time field element not found: ${elementId}`)
+      return
+    }
+    
+    // Update the time display
+    if (timeValue) {
+      const date = new Date(timeValue)
+      const now = new Date()
+      const diffSeconds = Math.floor((now - date) / 1000)
+      
+      let timeAgo = ''
+      if (diffSeconds < 60) {
+        timeAgo = 'less than a minute ago'
+      } else if (diffSeconds < 3600) {
+        const minutes = Math.floor(diffSeconds / 60)
+        timeAgo = `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`
+      } else if (diffSeconds < 86400) {
+        const hours = Math.floor(diffSeconds / 3600)
+        timeAgo = `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`
+      } else {
+        const days = Math.floor(diffSeconds / 86400)
+        timeAgo = `${days} ${days === 1 ? 'day' : 'days'} ago`
+      }
+      
+      element.textContent = timeAgo
+    } else {
+      element.textContent = 'Never'
+    }
+    
+    // Flash update animation
+    element.classList.add('bg-green-50')
+    setTimeout(() => {
+      element.classList.remove('bg-green-50')
+    }, 500)
+  }
+
   showSelectDropdown(cell) {
     const cellId = cell.dataset.cellId
-    const currentValue = cell.dataset.originalValue || cell.textContent.trim()
+    const field = cell.dataset.field
+    let currentValue = cell.dataset.originalValue || cell.textContent.trim()
+    
+    // For status field, get the actual value from the span
+    if (field === 'status') {
+      const span = cell.querySelector('span')
+      if (span) {
+        currentValue = span.textContent.trim()
+      }
+    }
+    
     const selectOptions = JSON.parse(cell.dataset.selectOptions || '{}')
 
     // Create dropdown container
@@ -202,7 +252,11 @@ export class CellRenderer {
 
       // Update cell display but NOT the originalValue yet
       // Let saveCell handle updating originalValue after successful save
-      cell.textContent = newValue
+      if (field === 'status') {
+        this.formatStatusCell(cell, newValue)
+      } else {
+        cell.textContent = newValue
+      }
 
       // Save the change
       this.controller.cellEditor.saveCell(cell)

app/javascript/controllers/collaborative_spreadsheet/cell_editor.js

@@ -62,7 +62,10 @@ class Stream < ApplicationRecord
 
   # Callbacks for broadcasting
   after_create_commit -> { broadcast_prepend_later_to "streams", target: "streams", partial: "admin/streams/stream", locals: { stream: self } }
-  after_update_commit -> { broadcast_replace_later_to "streams", target: "stream_#{id}", partial: "admin/streams/stream", locals: { stream: self } }
+  after_update_commit -> { 
+    broadcast_replace_later_to "streams", target: "stream_#{id}", partial: "admin/streams/stream", locals: { stream: self }
+    broadcast_time_updates if saved_change_to_last_checked_at? || saved_change_to_last_live_at?
+  }
   after_destroy_commit -> { broadcast_remove_to "streams", target: "stream_#{id}" }
 
   # Validations
@@ -212,6 +215,15 @@ def duration_in_words
     end
   end
 
+  def broadcast_time_updates
+    ActionCable.server.broadcast('collaborative_streams', {
+      action: 'stream_updated',
+      stream_id: id,
+      last_checked_at: last_checked_at&.iso8601,
+      last_live_at: last_live_at&.iso8601
+    })
+  end
+
   private
 
   def normalize_link

app/javascript/controllers/collaborative_spreadsheet/cell_renderer.js

@@ -50,6 +50,12 @@
           <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
             Started At
           </th>
+          <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Last Checked
+          </th>
+          <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Last Live
+          </th>
           <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
             Actions
           </th>
@@ -114,7 +120,9 @@
                    data-cell-id="stream_<%= stream.id %>_platform"
                    data-stream-id="<%= stream.id %>"
                    data-field="platform"
+                   data-field-type="select"
                    data-original-value="<%= stream.platform %>"
+                   data-select-options='<%= Stream.platforms.to_json %>'
                    class="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-2 py-1 rounded transition-colors min-h-[1.5rem]">
                 <%= stream.platform || '-' %>
               </div>
@@ -126,7 +134,9 @@
                    data-cell-id="stream_<%= stream.id %>_status"
                    data-stream-id="<%= stream.id %>"
                    data-field="status"
+                   data-field-type="select"
                    data-original-value="<%= stream.status %>"
+                   data-select-options='<%= Stream.statuses.to_json %>'
                    class="text-sm cursor-pointer hover:bg-gray-100 px-2 py-1 rounded transition-colors min-h-[1.5rem]">
                 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                   <%= stream.status == 'Live' ? 'bg-green-100 text-green-800' : 
@@ -181,24 +191,35 @@
                    data-cell-id="stream_<%= stream.id %>_orientation"
                    data-stream-id="<%= stream.id %>"
                    data-field="orientation"
+                   data-field-type="select"
                    data-original-value="<%= stream.orientation %>"
+                   data-select-options='<%= Stream.orientations.to_json %>'
                    class="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-2 py-1 rounded transition-colors min-h-[1.5rem]">
                 <%= stream.orientation || '-' %>
               </div>
             </td>
 
-            <!-- Started At -->
-            <td class="px-3 py-4 whitespace-nowrap relative">
-              <div data-collaborative-spreadsheet-target="cell"
-                   data-cell-id="stream_<%= stream.id %>_started_at"
-                   data-stream-id="<%= stream.id %>"
-                   data-field="started_at"
-                   data-original-value="<%= stream.started_at&.iso8601 %>"
-                   class="text-sm text-gray-500 cursor-pointer hover:bg-gray-100 px-2 py-1 rounded transition-colors min-h-[1.5rem]">
+            <!-- Started At (non-editable) -->
+            <td class="px-3 py-4 whitespace-nowrap">
+              <div class="text-sm text-gray-500 px-2 py-1">
                 <%= stream.started_at&.strftime('%b %d, %Y %I:%M %p') || '-' %>
               </div>
             </td>
 
+            <!-- Last Checked (non-editable) -->
+            <td class="px-3 py-4 whitespace-nowrap">
+              <div id="stream_<%= stream.id %>_last_checked_at" class="text-sm text-gray-500 px-2 py-1">
+                <%= time_ago_in_words_with_nil(stream.last_checked_at) %>
+              </div>
+            </td>
+            
+            <!-- Last Live (non-editable) -->
+            <td class="px-3 py-4 whitespace-nowrap">
+              <div id="stream_<%= stream.id %>_last_live_at" class="text-sm text-gray-500 px-2 py-1">
+                <%= time_ago_in_words_with_nil(stream.last_live_at) %>
+              </div>
+            </td>
+            
             <!-- Actions -->
             <td class="px-3 py-4 whitespace-nowrap text-right text-sm font-medium">
               <div class="flex items-center space-x-2">