shinyjs ts

michaelbgarcia · Mar 8, 2024 · 51afb71 · 51afb71
1 parent 6db3d4b
commit 51afb71
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 11 deletions.
diff --git a/app/main.R b/app/main.R
@@ -1,25 +1,38 @@
 # app/main.R
 
 box::use(
-  shiny[reactive, observe, selectInput, updateSelectInput, bindEvent, moduleServer, NS, req],
+  shiny[...],
+  shinyjs[...],
   bslib[page_sidebar, sidebar, card, card_header],
-  dplyr[filter],
-  readr[read_rds]
+  dplyr[filter, mutate],
+  readr[read_rds],
 )
 
 box::use(
   app/view/map,
   app/view/table,
-  app/logic/data_fetch[get_data_live]
+  app/logic/data_fetch[get_data_live],
 )
 
+
 #' @export
 ui <- function(id) {
   ns <- NS(id)
   page_sidebar(
+    tags$head(
+      tags$link(rel = "stylesheet", href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css")
+    ),
+    useShinyjs(),
+    extendShinyjs("static/shinyjs.js",functions = c("backgroundCol")),
     title = "Disney World Wait Times",
     sidebar = sidebar(
-      selectInput(ns("park_select"), "Select Park", choices = NULL)
+      selectInput(ns("park_select"), "Select Park", choices = NULL),
+      selectInput(ns("col"), "Colour",
+                  c("green", "yellow", "red", "blue", "white")),
+      selectInput(ns("selector"), "Element", c("sport", "name", "button")),
+      p(id = ns("name"), "My name is Dean"),
+      p(id = ns("sport"), "I like soccer"),
+      actionButton(ns("button"), "Go")
     ),
     card(
       card_header("Ride Detail"),
@@ -36,23 +49,36 @@ ui <- function(id) {
 server <- function(id) {
   moduleServer(id, function(input, output, session) {
     parks_data = read_rds("app/static/parks_data.rds")
-
+    ns <- session$ns
     observe({
       updateSelectInput(session, "park_select", choices = unique(parks_data$parks_name))
     })
 
+    observeEvent(input$button, {
+      js$backgroundCol(input$selector, input$col, ns(""))
+    })
+
     live_data <- reactive({
       get_data_live(parks_data)
     })
 
     live_data_park <- reactive({
       req(input$park_select)
       live_data() |>
-        filter(parks_name %in% input$park_select)
+        filter(parks_name %in% input$park_select) |>
+        mutate(Details = id)
     }) |>
       bindEvent(input$park_select)
 
     map$server("map", data = live_data_park)
-    table$server("table", data = live_data_park)
+    modalVal = table$server("table", data = live_data_park)
+
+    observe({
+      showModal(modalDialog(
+        title = "Modal Title",
+        paste("You clicked on:", modalVal())
+      ))
+    })
+
   })
 }
diff --git a/app/static/shinyjs.js b/app/static/shinyjs.js
@@ -0,0 +1,11 @@
+shinyjs.backgroundCol = function(params) {
+  var defaultParams = {
+    id : null,
+    col : "red",
+    ns : null
+  };
+  params = shinyjs.getParams(params, defaultParams);
+
+  var el = $("#" + params.ns + params.id);
+  el.css("background-color", params.col);
+}
diff --git a/app/view/table.R b/app/view/table.R
@@ -1,7 +1,7 @@
 # app/view/table.R
 
 box::use(
-  shiny[NS, moduleServer],
+  shiny[NS, moduleServer, reactive, actionButton, icon, req],
   reactable[reactable, reactableOutput, renderReactable, colDef],
   reactablefmtr[fivethirtyeight, merge_column, pill_buttons]
 )
@@ -15,6 +15,8 @@ ui <- function(id){
 #' @export
 server <- function(id, data){
   moduleServer(id, function(input, output, session){
+    ns <- session$ns
+
     output$table <- renderReactable({
       reactable::reactable(
         data = data(),
@@ -24,9 +26,23 @@ server <- function(id, data){
         highlight = TRUE,
         compact = TRUE,
         selection = "single",
-        onClick = "select",
-        defaultSelected = 1,
+        onClick = "expand",
+        # defaultSelected = 1,
         columns = list(
+          Details =
+            colDef(
+              cell = function(value, index) {
+                actionButton(inputId = ns(paste("btn", index, sep = "_")),
+                             label = "",
+                             icon = icon("exclamation"),
+                             onclick = sprintf(
+                               "Shiny.setInputValue('%s', '%s');",
+                               ns("selectedValue"),
+                               value
+                             )
+                )
+              },
+              html = TRUE),
           id = colDef(show = FALSE),
           parks_name = colDef(show = FALSE),
           latitude = colDef(show = FALSE),
@@ -57,5 +73,10 @@ server <- function(id, data){
       )
     })
 
+
+    return(reactive({
+      req(input$selectedValue)
+      input$selectedValue
+    }))
   })
 }
diff --git a/dependencies.R b/dependencies.R
@@ -9,4 +9,5 @@ library(reactable)
 library(reactablefmtr)
 library(readr)
 library(shiny)
+library(shinyjs)
 library(themeparkr)
diff --git a/renv.lock b/renv.lock
@@ -1397,6 +1397,19 @@
       ],
       "Hash": "c2eae3d8c670fa9dfa35a12066f4a1d5"
     },
+    "shinyjs": {
+      "Package": "shinyjs",
+      "Version": "2.1.0",
+      "Source": "Repository",
+      "Repository": "CRAN",
+      "Requirements": [
+        "R",
+        "digest",
+        "jsonlite",
+        "shiny"
+      ],
+      "Hash": "802e4786b353a4bb27116957558548d5"
+    },
     "sourcetools": {
       "Package": "sourcetools",
       "Version": "0.1.7",