simplify ui.R by merging outputs into a single HTML div at the server

daroczig · daroczig · commit 556fdbe91157 · 2023-04-23T13:10:49.000+02:00
diff --git a/apps/countdown/server.R b/apps/countdown/server.R
@@ -10,20 +10,19 @@ server <- function(input, output, session) {
         schedule = as.POSIXct('2023-04-24 11:30:00')
     )
 
-    output$title <- renderText(settings$title)
-    output$subtitle <- renderText(settings$subtitle)
-    output$countdown <- renderText({
-        ## need to reset the cached/reactive value so that it gets updated from time to time,
-        ## as there's no external dependency triggering changes here (e.g. an input change)
-        ## that would automatically update this object to reactive
+    output$countdown <- renderUI({
         invalidateLater(250)
         color <- ifelse(settings$schedule > Sys.time(), 'black', 'red')
-        as.character(span(
+        remaining <- span(
             round(as.period(abs(settings$schedule - Sys.time()))),
-            style = paste('color', color, sep = ':')))
-    })
-    output$start <- renderText({
-        paste('at', settings$schedule, Sys.timezone())
+            style = paste('color', color, sep = ':'))
+        div(
+            h1(settings$title),
+            h2(settings$subtitle),
+            h3('starts in'),
+            h1(tags$b(remaining)),
+            h4(paste('at', settings$schedule, Sys.timezone())),
+            class = 'center')
     })
 
     observeEvent(input$settings_show, {
diff --git a/apps/countdown/ui.R b/apps/countdown/ui.R
@@ -10,12 +10,6 @@ ui <- basicPage(
     particles(),
     actionBttn('settings_show', 'Settings', icon = icon('gear'), style = 'material-circle'),
 
-    div(
-        h1(uiOutput('title')),
-        h2(uiOutput('subtitle')),
-        h3('starts in'),
-        h1(uiOutput('countdown')),
-        h4(uiOutput('start')),
-        class = 'center')
+    uiOutput('countdown')
 
 )
