replace body instead of reloading entire page

joelhawksley · joelhawksley · commit 55ed368af2e1 · 2024-12-18T11:12:06.000-07:00
diff --git a/app/controllers/displays_controller.rb b/app/controllers/displays_controller.rb
@@ -3,18 +3,16 @@ class DisplaysController < ApplicationController
   layout "display"
 
   def thirteen
-    @refresh = params[:refresh] || ""
-
     render "thirteen", locals: {view_object: DisplayContent.new.call}
   rescue => e
     render "error", locals: {klass: e.class.to_s, message: e.message, backtrace: e.backtrace}
   end
 
   def mira
-    @refresh = params[:refresh] || 2
+    @refresh = params[:refresh] != "false"
 
     begin
-      render "mira", locals: {view_object: DisplayContent.new.call}
+      render("mira", locals: {view_object: DisplayContent.new.call}, layout: params[:layout] != "false")
     rescue => e
       render "error", locals: {klass: e.class.to_s, message: e.message, backtrace: e.backtrace}
     end
diff --git a/app/views/displays/mira.html.erb b/app/views/displays/mira.html.erb
@@ -1,3 +1,4 @@
+<div class="fade-bottom"></div>
 <style>
   html { font-size: 46px }
   body { padding: 0 2rem }
diff --git a/app/views/displays/thirteen.html.erb b/app/views/displays/thirteen.html.erb
@@ -1,3 +1,4 @@
+<div class="fade-bottom"></div>
 <div class="timestamp" style="position: absolute; bottom: .25rem; right: .25rem; font-size: .4rem; color: #777; z-index: 10">
   <%= view_object[:timestamp] %>
 </div>
diff --git a/app/views/layouts/display.html.erb b/app/views/layouts/display.html.erb
@@ -3,11 +3,28 @@
   <head>
     <title>Timeframe</title>
     <link rel="stylesheet" href="/css/display.css">
-    <meta http-equiv="refresh" content="<%= @refresh %>">
+    <% if @refresh %>
+      <script>
+        setInterval(function() {
+          fetch(window.location.origin + window.location.pathname + '?layout=false')
+            .then(response => {
+              if (!response.ok) {
+                throw new Error('Network response was not ok');
+              }
+              return response.text();
+            })
+            .then(data => {
+              document.body.innerHTML = data
+            })
+            .catch(error => {
+              console.error('There was a problem with the fetch operation:', error);
+            });
+        }, 1000);
+      </script>
+    <% end %>
   </head>
 
   <body>
-    <div class="fade-bottom"></div>
     <%= yield %>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<div class="fade-bottom"></div>`
`1`	`2`	`<style>`
`2`	`3`	`html { font-size: 46px }`
`3`	`4`	`body { padding: 0 2rem }`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<div class="fade-bottom"></div>`
`1`	`2`	`<div class="timestamp" style="position: absolute; bottom: .25rem; right: .25rem; font-size: .4rem; color: #777; z-index: 10">`
`2`	`3`	`<%= view_object[:timestamp] %>`
`3`	`4`	`</div>`