change to mobile-friendly only using shinyMobile Framework7

app.R

@@ -1,4 +1,5 @@
 library(shiny)
+library(shinyMobile)
 library(shinyalert)
 library(shinyWidgets)
 library(glue)
@@ -6,67 +7,143 @@ library(dplyr)
 library(dbplyr)
 library(stringr)
 
-# source("dbconnect.R")
-# menu <- pg_con |> 
-#   dbReadTable("menu") |> 
-#   mutate(across(karbo:gejala, ~if_else(.x == "", "-", .x)))
-# dbDisconnect(pg_con)
-  
-ui <- fluidPage(
-  h2("SIMPASI Ibrahim"), 
-  # br(), 
-  tabsetPanel(
-    tabPanel("Input Menu", 
-             br(), 
-             # selectInput("anak", "Anak", choices = c("Ara", "Ibrahim")), 
-             dateInput("tgl", "Tanggal", width = "100%"), 
-             textInput("karbo", "Karbohidrat", width = "100%"), 
-             textInput("protein_hewani", "Protein Hewani", width = "100%"), 
-             textInput("protein_nabati", "Protein Nabati", width = "100%"), 
-             textInput("buah_sayur", "Buah/Sayur", width = "100%"), 
-             textInput("lemak_tambahan", "Lemak Tambahan", width = "100%"), 
-             textAreaInput("camilan", "Camilan", width = "100%"), 
-             textAreaInput("gejala", "Gejala Alergi", width = "100%"), 
-             dateInput("tgl_gejala", "Tanggal Terjadi Gejala", width = "100%"),
-             actionButton("save", "Simpan", icon = icon("paper-plane"), width = "100%"), 
-             br(), 
-             helpText("Copyright (C) Aep Hidayatuloh 2024", style = "text-align: center")
-             ), 
-    tabPanel("Cari Catatan", 
-             br(), 
-             selectInput("komponen", "Cari berdasarkan:", width = "100%", 
-                         choices = list("Tanggal" = "tanggal", "Karbohidrat" = "karbo", "Protein Hewani" = "protein_hewani", "Protein Nabati" = "protein_nabati", "Buah/Sayur" = "buah_sayur", "Lemak Tambahan" = "lemak_tambahan", "Camilan" = "camilan", "Gejala Alergi" = "gejala")), 
-             conditionalPanel("input.komponen == 'tanggal'", 
-                              div(style="display:flex;margin:auto 0px;", 
-                                  # column(1, 
-                                         actionButton("prev", "<", style="width:5rem;height:3.4rem;"), 
-                                         # ), 
-                                  # column(1, 
-                                         airDatepickerInput("cari_date", NULL, width = "100%", value = Sys.Date()), 
-                                         # ),
-                                  # column(1, 
-                                         actionButton("nex", ">", style="width:5rem;height:3.4rem;")
-                                         # )
-                              ), 
-                              # column(12, 
-                                     wellPanel(style="background-color:transparent;", 
-                                               uiOutput("out_cari_tgl")
-                                     )
-                              # )
-             ), 
-             conditionalPanel("input.komponen != 'tanggal'", 
-                              textInput("keyword", "Kata kunci", width = "100%"), 
-                              # column(12,
-                                     uiOutput("out_cari_komponen")
-                              # )
-             )
-             ), 
-    tabPanel("Edit Gejala", 
-             br(), 
-             dateInput("edit_tgl_gejala", "Tanggal Terjadi Gejala", width = "100%"), 
-             textInput("edit_gejala", "Gejala Alergi", width = "100%"), 
-             dateInput("edit_tanggal", "Tanggal Pemberian MPASI", width = "100%"), 
-             actionButton("update_edit", "Update", icon = icon("paper-plane"), width = "100%")
+word_wrap <- function(x){
+  str_split(x, ",") |> 
+    unlist() |> 
+    str_trim("both") |> 
+    sapply(FUN = function(z){
+      if_else(nchar(z) > 90,
+              paste(substring(z, 1, 30), substring(z, 31, 60), substring(z, 61, 90), substring(z, 91), sep = "<br>"),
+              if_else(nchar(z) > 60, paste(substring(z, 1, 30), substring(z, 31, 60), substring(z, 61), sep = "<br>"),
+                      if_else(nchar(z) > 30, paste(substring(z, 1, 30), substring(z, 31), sep = "<br>"),
+                              z)))
+    }) |> 
+    str_c(collapse = ",<br>") |> 
+    HTML()
+}
+
+ui <- f7Page(
+  options = list(theme = "ios", dark = FALSE, skeletonOnLoad = TRUE), 
+  allowPWA = TRUE, 
+  f7TabLayout(
+    navbar = f7Navbar(title = "SIMPASI"), 
+    f7Tabs(animated = T, 
+           id = "tabs", 
+           f7Tab(tabName = "input_menu", title = "Input Menu", active = TRUE, icon = f7Icon("book"), 
+                 # Content 
+                 f7Card(
+                   h4(span(f7Icon("calendar"), "Tanggal"), style="margin:0px 0px 10px 0px;"),
+                   f7DatePicker("tgl", NULL), 
+                   hr()
+                   ), 
+                 f7Card(
+                   h4(span(f7Icon("tray"), "Karbohidrat"), style="margin:0px 0px 10px 0px;"),
+                   f7TextArea("karbo", NULL, resize = TRUE), 
+                   hr()
+                 ), 
+                 f7Card(
+                   h4(span(f7Icon("poultry_leg"), "Protein Hewani"), style="margin:0px 0px 10px 0px;"),
+                   f7TextArea("protein_hewani", NULL, resize = TRUE), 
+                   hr()
+                 ), 
+                 f7Card(
+                   h4(span(f7Icon("tree"), "Protein Nabati"), style="margin:0px 0px 10px 0px;"),
+                   f7TextArea("protein_nabati", NULL, resize = TRUE), 
+                   hr()
+                 ), 
+                 f7Card(
+                   h4(span(f7Icon("leaf_arrow_circlepath"), "Buah/Sayur"), style="margin:0px 0px 10px 0px;"),
+                   f7TextArea("buah_sayur", NULL, resize = TRUE), 
+                   hr()
+                 ), 
+                 f7Card(
+                   h4(span(f7Icon("drop"), "Lemak Tambahan"), style="margin:0px 0px 10px 0px;"),
+                   f7TextArea("lemak_tambahan", NULL, resize = TRUE), 
+                   hr()
+                 ), 
+                 f7Card(
+                   h4(span(f7Icon("circle_grid_hex"), "Camilan"), style="margin:0px 0px 10px 0px;"),
+                   f7TextArea("camilan", NULL, resize = TRUE), 
+                   hr()
+                 ), 
+                 f7Card(
+                   h4(span(f7Icon("bandage"), "Gejala Alergi"), style="margin:0px 0px 10px 0px;"),
+                   f7TextArea("gejala", NULL, resize = TRUE), 
+                   hr()
+                 ), 
+                 f7Card(
+                   h4(span(f7Icon("calendar_today"), "Tanggal Terjadi Gejala"), style="margin:0px 0px 10px 0px;"),
+                   f7DatePicker("tgl_gejala", NULL),
+                   hr()
+                 ),
+                 
+                 f7Card(
+                   f7Button("save", "Simpan", size = "large"), 
+                   br(), 
+                   p("Copyright (C) 2024 aephidayatuloh", style = "text-align: center")
+                 )
+                 ), 
+           f7Tab(tabName = "cari", title = "Cari Catatan", icon = f7Icon("doc_text_search"),
+                 # Content 
+                 f7Card(
+                   f7Select("komponen", "Cari berdasarkan:", width = "100%", 
+                                         choices = list("Tanggal" = "tanggal", 
+                                                        "Karbohidrat" = "karbo", 
+                                                        "Protein Hewani" = "protein_hewani", 
+                                                        "Protein Nabati" = "protein_nabati", 
+                                                        "Buah/Sayur" = "buah_sayur", 
+                                                        "Lemak Tambahan" = "lemak_tambahan", 
+                                                        "Camilan" = "camilan", 
+                                                        "Gejala Alergi" = "gejala"))
+                   ), 
+                     conditionalPanel("input.komponen == 'tanggal'", 
+                                      f7Card(
+                                        h4(span(f7Icon("calendar"), "Tanggal MPASI"), style="margin:0px 0px 10px 0px;"), 
+                                        f7DatePicker("cari_date", NULL, value = Sys.Date()), 
+                                        hr()
+                                        ), 
+                                      f7Card(
+                                        f7Segment(container = "row", 
+                                                  f7Button("prev", "< Prev", size = "large"), 
+                                                  f7Button("nex", "Next >", size = "large")
+                                                  )
+                                        ), 
+                                      f7Card(uiOutput("out_cari_tgl"))
+                                      
+                     ), 
+                     conditionalPanel("input.komponen != 'tanggal'", 
+                                      f7Card(
+                                        p("Kata Kunci", style="text-align:center;"),
+                                        f7Text("keyword", NULL, value = ""), 
+                                        hr(style="margin:5px 0px;")
+                                        ), 
+                                      uiOutput("out_cari_komponen")
+                                      
+                     )
+                   
+                 
+           ), 
+           f7Tab(tabName = "update_gejala", title = "Update Gejala", icon = f7Icon("bubble_left_bubble_right"), 
+                 # Content
+                 f7Card(
+                   h4(span(f7Icon("calendar_today"), "Tanggal Terjadi Gejala"), style="margin:0px 0px 10px 0px;"),
+                   f7DatePicker("edit_tgl_gejala", NULL),
+                   hr()
+                   ), 
+                 f7Card(
+                   h4(span(f7Icon("bandage"), "Gejala Alergi"), style="margin:0px 0px 10px 0px;"),
+                   f7TextArea("edit_gejala", NULL, resize = TRUE), 
+                   hr()
+                 ), 
+                 f7Card(
+                   h4(span(f7Icon("bandage"), "Tanggal Pemberian MPASI"), style="margin:0px 0px 10px 0px;"),
+                   f7DatePicker("edit_tanggal", NULL), 
+                   hr()
+                 ), 
+                 f7Card(
+                   f7Button("edit_update", "Update", size = "large")
+                 )
+                 )
     )
   )
 )
@@ -82,252 +159,290 @@ server <- function(input, output, session){
   })
 
   observeEvent(input$save, {
-    shinyalert(text = "Yakin ingin menyimpan?", type = "info", showCancelButton = TRUE, 
+    shinyalert(text = "Yakin ingin menyimpan?", type = "info", showCancelButton = TRUE,
                callbackR = function(x){
                  if(x  != FALSE){
                    shinyalert(text = "Menyimpan data ...", type = "info", showConfirmButton = FALSE, closeOnEsc = FALSE, closeOnClickOutside = FALSE)
                    tgl_gejala <- if_else(input$gejala %in% c(NA, NULL, "", "-"), NA , as.Date(input$tgl_gejala))
-                   
+
                    # source("dbconnect.R")
-                   # query <- glue("INSERT INTO public.menu (id_parent, id_anak, tanggal, karbo, protein_hewani, protein_nabati, buah_sayur, lemak_tambahan, camilan, gejala, tgl_gejala, created_date) 
+                   # query <- glue("INSERT INTO public.menu (id_parent, id_anak, tanggal, karbo, protein_hewani, protein_nabati, buah_sayur, lemak_tambahan, camilan, gejala, tgl_gejala, created_date)
                    #                   VALUES (1, 2, '{input$tgl}', '{input$karbo}', '{input$protein_hewani}', '{input$protein_nabati}', '{input$buah_sayur}', '{input$lemak_tambahan}', '{input$camilan}', '{input$gejala}', {tgl_gejala}, '{Sys.time()}')")
                    menu_data <- tribble(
-                     ~id_parent, ~id_anak, ~tanggal, ~karbo, ~protein_hewani, ~protein_nabati, ~buah_sayur, ~lemak_tambahan, ~camilan, ~gejala, ~tgl_gejala, ~created_date, 
+                     ~id_parent, ~id_anak, ~tanggal, ~karbo, ~protein_hewani, ~protein_nabati, ~buah_sayur, ~lemak_tambahan, ~camilan, ~gejala, ~tgl_gejala, ~created_date,
                      1, 2, input$tgl, input$karbo, input$protein_hewani, input$protein_nabati, input$buah_sayur, input$lemak_tambahan, input$camilan, input$gejala, tgl_gejala, Sys.time()
                    )
-                   
-                   pg_con |> 
+
+                   pg_con |>
                      dbAppendTable(name = "menu", value = menu_data)
                    # dbDisconnect(pg_con)
-                   updateTextInput(session, "karbo", "Karbohidrat", value = "")
-                   updateTextInput(session, "protein_hewani", "Protein Hewani", value = "")
-                   updateTextInput(session, "protein_nabati", "Protein Nabati", value = "") 
-                   updateTextInput(session, "buah_sayur", "Buah/Sayur", value = "") 
-                   updateTextInput(session, "lemak_tambahan", "Lemak Tambahan", value = "") 
-                   updateTextAreaInput(session, "camilan", "Camilan", value = "") 
-                   updateTextAreaInput(session, "gejala", "Gejala Alergi", value = "") 
-                   updateDateInput(session, "tgl_gejala", "Tanggal Terjadi Gejala", value = Sys.Date())
+                   updateF7DatePicker(session = session, "tgl", NULL, value = Sys.Date())
+                   updateF7TextArea(session = session, "karbo", NULL, value = "")
+                   updateF7TextArea(session = session, "protein_hewani", NULL, value = "")
+                   updateF7TextArea(session = session, "protein_nabati", NULL, value = "")
+                   updateF7TextArea(session = session, "buah_sayur", NULL, value = "")
+                   updateF7TextArea(session = session, "lemak_tambahan", NULL, value = "")
+                   updateF7TextArea(session = session, "camilan", NULL, value = "")
+                   updateF7TextArea(session = session, "gejala", NULL, value = "")
+                   updateF7DatePicker(session = session, "tgl_gejala", NULL, value = Sys.Date())
                    # closeAlert()
                    shinyalert(text = "Data berhasil disimpan.", type = "success", immediate = TRUE)
-                   
+
                  }
                })
   })
-  
+
   observeEvent(input$prev, {
     date_val <- reactiveValues()
     date_val$curr_dt <- input$cari_date
-    updateAirDateInput(session, "cari_date", NULL, value = date_val$curr_dt - 1)
-    }
+    updateF7DatePicker("cari_date", NULL, value = date_val$curr_dt - 1, session = session)
+  }
   )
-  
+
   observeEvent(input$nex, {
     date_val <- reactiveValues()
     date_val$curr_dt <- input$cari_date
-    updateAirDateInput(session, "cari_date", NULL, value = date_val$curr_dt + 1)
+    updateF7DatePicker("cari_date", NULL, value = date_val$curr_dt + 1, session = session)
   }
   )
-  
+
   observeEvent(input$prev_history, {
-    date_val <- reactiveValues()
-    date_val$curr_dt_history <- input$history_date
-    updateAirDateInput(session, "history_date", NULL, value = date_val$curr_dt_history - 1)
+    date_val_history <- reactiveValues()
+    date_val_history$curr_dt_history <- as.Date(input$history_date)
+    updateF7DatePicker(inputId = "history_date", NULL, value = date_val_history$curr_dt_history - 1, session = session)
   }
   )
-  
+
   observeEvent(input$nex_history, {
-    date_val <- reactiveValues()
-    date_val$curr_dt_history <- input$history_date
-    updateAirDateInput(session, "history_date", NULL, value = date_val$curr_dt_history + 1)
+    message("Next sampai sini bisa")
+    date_val_history <- reactiveValues()
+    message("Next sampai reactivevalues() bisa")
+    date_val_history$curr_dt_history <- as.Date(input$history_date)
+    message("Next sampai update reactiveValues bisa")
+    updateF7DatePicker(inputId = "history_date", NULL, value = date_val_history$curr_dt_history + 1, session = session)
   }
   )
   
   output$out_cari_tgl <- renderUI({
-    cari_menu <- menu_tbl() |> 
+    cari_menu <- menu_tbl() |>
       collect() |>
-      mutate(across(karbo:gejala, ~if_else(.x == "", "-", .x))) |> 
-      filter(tanggal == input$cari_date) |> 
+      mutate(across(karbo:gejala, ~if_else(.x == "", "-", .x))) |>
+      filter(tanggal == input$cari_date) |>
       mutate(tgl_gejala = tgl_gejala |> as.Date() |> format("%d %b %Y"))
-    
+
     if(nrow(cari_menu) == 0){
       p("Tidak ada catatan", style="text-align: center;")
     } else {
-      tagList(
-        h5("Tanggal"), 
-        h4(format(input$cari_date, "%d %b %Y"), style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Karbohidrat"), 
-        h4(cari_menu$karbo, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Protein Hewani"), 
-        h4(cari_menu$protein_hewani, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Protein Nabati"), 
-        h4(cari_menu$protein_nabati, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Buah/Sayur"), 
-        h4(cari_menu$buah_sayur, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Lemak Tambahan"), 
-        h4(cari_menu$lemak_tambahan, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Camilan"), 
-        h4(cari_menu$camilan, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Gejala Alergi"), 
-        h4(cari_menu$gejala, style="margin: 5px 0px 20px;color: red;"),
-        # br()
-        h5("Tanggal Terjadi Gejala"), 
-        h4(ifelse(is.na(cari_menu$tgl_gejala), "-", cari_menu$tgl_gejala), style="margin: 5px 0px 20px;color: red;")#,
-        
+      f7List(
+        f7ListItem(media = f7Icon("calendar"), 
+                   header = "Tanggal", 
+                   h5(format(input$cari_date, "%d %b %Y"), style="margin: 5px 0px;")
+                   ), 
+        f7ListItem(media = f7Icon("tray"), 
+                   header = "Karbohidrat", 
+                   h5(word_wrap(cari_menu$karbo), style="margin: 5px 0px;")
+        ), 
+        f7ListItem(media = f7Icon("poultry_leg"), 
+                   header = "Protein Hewani", 
+                   h5(word_wrap(cari_menu$protein_hewani), style="margin: 5px 0px;")
+        ), 
+        f7ListItem(media = f7Icon("tree"), 
+                   header = "Protein Nabati", 
+                   h5(word_wrap(cari_menu$protein_nabati), style="margin: 5px 0px;")
+        ), 
+        f7ListItem(media = f7Icon("leaf_arrow_circlepath"), 
+                   header = "Buah/Sayur", 
+                   h5(word_wrap(cari_menu$buah_sayur), style="margin: 5px 0px;")
+        ), 
+        f7ListItem(media = f7Icon("drop"), 
+                   header = "Lemak Tambahan", 
+                   h5(word_wrap(cari_menu$lemak_tambahan), style="margin: 5px 0px;")
+        ), 
+        f7ListItem(media = f7Icon("circle_grid_hex"), 
+                   header = "Camilan", 
+                   h5(word_wrap(cari_menu$camilan), style="margin: 5px 0px;")
+        ), 
+        f7ListItem(media = f7Icon("bandage"), 
+                   header = "Gejala Alergi", 
+                   h5(word_wrap(cari_menu$gejala), style="margin: 5px 0px;color: red;")
+        ), 
+        f7ListItem(media = f7Icon("calendar_today"), 
+                   header = "Tanggal Terjadi Gejala", 
+                   h5(ifelse(is.na(cari_menu$tgl_gejala), "-", cari_menu$tgl_gejala), style="margin: 5px 0px;color: red;")
+        )
       )
     }
   })
-  
+
   cari_history <- reactive({
     if(input$keyword != ""){
-      menu_tbl() |> 
+      menu_tbl() |>
         collect() |>
-        mutate(across(karbo:gejala, ~if_else(.x == "", "-", .x))) |> 
-        mutate(tgl_gejala = tgl_gejala |> as.Date() |> format("%d %b %Y")) |> 
+        mutate(across(karbo:gejala, ~if_else(.x == "", "-", .x))) |>
+        mutate(tgl_gejala = tgl_gejala |> as.Date() |> format("%d %b %Y")) |>
         mutate(kolom := tolower(!!sym(input$komponen))) |> #slice(1)
-        filter(str_detect(kolom, tolower(input$keyword)))
+        filter(str_detect(kolom, tolower(input$keyword))) |> 
+        arrange(tanggal)
     } else {
       x <- data.frame(x = 0)
       return(x)
     }
   })
-  
+
   history <- reactive({
-    cari_history() |> 
-      filter(as.Date(tanggal) == input$history_date)
+    cari_history() |>
+      slice(input$index_history_komponen)
   })
-  
+
   output$out_history <- renderUI({
     if(ncol(cari_history()) == 1 | input$keyword == "" | nrow(history()) == 0){
-      wellPanel(style="background-color:transparent;", 
+      wellPanel(style="background-color:transparent;",
                 p("Tidak ada catatan", style="text-align: center;")
       )
     } else if(ncol(cari_history()) >= 1){
-      tagList(
-        wellPanel(style="background-color:transparent;", 
-                  h5("Tanggal"),
-        h4(format(as.Date(history()$tanggal), "%d %b %Y"), style="margin: 5px 0px 20px;"),
-        # br(),
-        h5("Karbohidrat"),
-        h4(history()$karbo, style="margin: 5px 0px 20px;"),
-        # br(),
-        h5("Protein Hewani"),
-        h4(history()$protein_hewani, style="margin: 5px 0px 20px;"),
-        # br(),
-        h5("Protein Nabati"),
-        h4(history()$protein_nabati, style="margin: 5px 0px 20px;"),
-        # br(),
-        h5("Buah/Sayur"),
-        h4(history()$buah_sayur, style="margin: 5px 0px 20px;"),
-        # br(),
-        h5("Lemak Tambahan"),
-        h4(history()$lemak_tambahan, style="margin: 5px 0px 20px;"),
-        # br(),
-        h5("Camilan"),
-        h4(history()$camilan, style="margin: 5px 0px 20px;"),
-        # br(),
-        h5("Gejala Alergi"),
-        h4(history()$gejala, style="margin: 5px 0px 20px;color: red;"),
-        # br()
-        h5("Tanggal terjadi Gejala"),
-        h4(ifelse(is.na(history()$tgl_gejala), "-", history()$tgl_gejala), style="margin: 5px 0px 20px;color: red;")#,
-        
+      f7Card(
+        f7List(
+          
+          f7ListItem(media = f7Icon("calendar"), 
+                     header = "Tanggal", 
+                     h5(format(as.Date(history()$tanggal), "%d %b %Y"), style="margin: 5px 0px;")
+          ), 
+          f7ListItem(media = f7Icon("tray"), 
+                     header = "Karbohidrat", 
+                     h5(word_wrap(history()$karbo), 
+                        style="margin: 5px 0px;max-width: 300px;overflow-wrap: inherit;word-wrap: inherit;hyphens: auto;")
+          ), 
+          f7ListItem(media = f7Icon("poultry_leg"), 
+                     header = "Protein Hewani", 
+                     h5(word_wrap(history()$protein_hewani), 
+                        style="margin: 5px 0px;max-width: 300px;overflow-wrap: inherit;word-wrap: inherit;hyphens: auto;")
+          ), 
+          f7ListItem(media = f7Icon("tree"), 
+                     header = "Protein Nabati", 
+                     h5(word_wrap(history()$protein_nabati), style="margin: 5px 0px;max-width: 300px;")
+          ), 
+          f7ListItem(media = f7Icon("leaf_arrow_circlepath"), 
+                     header = "Buah/Sayur", 
+                     h5(word_wrap(history()$buah_sayur), style="margin: 5px 0px;")
+          ), 
+          f7ListItem(media = f7Icon("drop"), 
+                     header = "Lemak Tambahan", 
+                     h5(word_wrap(history()$lemak_tambahan), style="margin: 5px 0px;")
+          ), 
+          f7ListItem(media = f7Icon("circle_grid_hex"), 
+                     header = "Camilan", 
+                     h5(word_wrap(history()$camilan), style="margin: 5px 0px;")
+          ), 
+          f7ListItem(media = f7Icon("bandage"), 
+                     header = "Gejala Alergi", 
+                     h5(word_wrap(history()$gejala), style="margin: 5px 0px;color: red;")
+          ), 
+          f7ListItem(media = f7Icon("calendar_today"), 
+                     header = "Tanggal Terjadi Gejala", 
+                     h5(ifelse(is.na(history()$tgl_gejala), "-", history()$tgl_gejala), style="margin: 5px 0px;color: red;")
+          )
         )
-        
       )
     }
   })
   output$out_cari_komponen <- renderUI({
-    
+
     if(ncol(cari_history()) == 1 | input$keyword == "" | nrow(cari_history()) == 0){
-      p("Tidak ada catatan", style="text-align: center;")
+      f7Card(p("Tidak ada catatan", style="text-align: center;"))
     } else if(nrow(cari_history()) > 1){
+      n_history_komponen <- nrow(cari_history())
       tagList(
-        div(style="display:flex;margin:auto 0px;", 
-          # column(1, 
-                 actionButton("prev_history", "<", style="width:5rem;height:3.4rem;"), 
-          # ), 
-          # column(10, 
-                 airDatepickerInput("history_date", NULL, width = "100%", 
-                                    value = min(cari_history()$tanggal)), 
-          # ),
-          # column(1, 
-                 actionButton("nex_history", ">", style="width:5rem;height:3.4rem;")
-          # )
-      ),
-      uiOutput("out_history")
+        # f7DatePicker("history_date", NULL, 
+        #                    value = min(cari_history()$tanggal)),
+        div(style="margin-left: 120px;width:150%;", 
+            f7Stepper("index_history_komponen", label = NULL, value = 1, min = 1, max = n_history_komponen, step = 1, 
+                  raised = TRUE, rounded = TRUE, size = "small", fill = TRUE, color = "blue", wraps = TRUE)
+            ), 
+        # f7Segment(container = "segment", 
+        #     f7Button("prev_history", "< Prev"),
+        #     f7Button("nex_history", "Next >")
+        # ),
+        uiOutput("out_history")
       )
-      
+
     } else {
-      tagList(
-        wellPanel(style="background-color:transparent;", 
-                  h5("Tanggal"), 
-        h4(format(as.Date(cari_history()$tanggal), "%d %b %Y"), style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Karbohidrat"), 
-        h4(cari_history()$karbo, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Protein Hewani"), 
-        h4(cari_history()$protein_hewani, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Protein Nabati"), 
-        h4(cari_history()$protein_nabati, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Buah/Sayur"), 
-        h4(cari_history()$buah_sayur, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Lemak Tambahan"), 
-        h4(cari_history()$lemak_tambahan, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Camilan"), 
-        h4(cari_history()$camilan, style="margin: 5px 0px 20px;"), 
-        # br(), 
-        h5("Gejala Alergi"), 
-        h4(cari_history()$gejala, style="margin: 5px 0px 20px;color: red;"),
-        # br()
-        h5("Tanggal terjadi Gejala"), 
-        h4(ifelse(is.na(cari_history()$tgl_gejala), "-", cari_history()$tgl_gejala), style="margin: 5px 0px 20px;color: red;")#,
-        
+      f7Card(
+        f7List(
+          f7ListItem(media = f7Icon("calendar"), 
+                     header = "Tanggal", 
+                     h5(format(as.Date(cari_history()$tanggal), "%d %b %Y"), style="margin: 5px 0px;")
+          ), 
+          f7ListItem(media = f7Icon("tray"), 
+                     header = "Karbohidrat", 
+                     h5(word_wrap(cari_history()$karbo), 
+                        style="margin: 5px 0px;max-width: 300px;overflow-wrap: inherit;word-wrap: inherit;hyphens: auto;")
+          ), 
+          f7ListItem(media = f7Icon("poultry_leg"), 
+                     header = "Protein Hewani", 
+                     h5(word_wrap(cari_history()$protein_hewani), 
+                        style="margin: 5px 0px;max-width: 300px;overflow-wrap: inherit;word-wrap: inherit;hyphens: auto;")
+          ), 
+          f7ListItem(media = f7Icon("tree"), 
+                     header = "Protein Nabati", 
+                     h5(word_wrap(cari_history()$protein_nabati), style="margin: 5px 0px;max-width: 300px;")
+          ), 
+          f7ListItem(media = f7Icon("leaf_arrow_circlepath"), 
+                     header = "Buah/Sayur", 
+                     h5(word_wrap(cari_history()$buah_sayur), style="margin: 5px 0px;")
+          ), 
+          f7ListItem(media = f7Icon("drop"), 
+                     header = "Lemak Tambahan", 
+                     h5(word_wrap(cari_history()$lemak_tambahan), style="margin: 5px 0px;")
+          ), 
+          f7ListItem(media = f7Icon("circle_grid_hex"), 
+                     header = "Camilan", 
+                     h5(word_wrap(cari_history()$camilan), style="margin: 5px 0px;")
+          ), 
+          f7ListItem(media = f7Icon("bandage"), 
+                     header = "Gejala Alergi", 
+                     h5(word_wrap(cari_history()$gejala), style="margin: 5px 0px;color: red;")
+          ), 
+          f7ListItem(media = f7Icon("calendar_today"), 
+                     header = "Tanggal Terjadi Gejala", 
+                     h5(ifelse(is.na(cari_history()$tgl_gejala), "-", cari_history()$tgl_gejala), style="margin: 5px 0px;color: red;")
+          )
         )
       )
     }
-  
+
   })
-  
-  observeEvent(input$update_edit, {
-    shinyalert(type = "info", 
-               text = "Anda yakin ingin memperbarui data?", 
-               showCancelButton = TRUE, showConfirmButton = TRUE, 
+
+  observeEvent(input$edit_update, {
+    shinyalert(type = "info",
+               text = "Anda yakin ingin memperbarui data?",
+               showCancelButton = TRUE, showConfirmButton = TRUE,
                callbackR = function(x){
                  if(x != FALSE){
-                   shinyalert(type = "info", text = "Sedang diproses...", immediate = TRUE, 
+                   shinyalert(type = "info", text = "Sedang diproses...", immediate = TRUE,
                               showConfirmButton = FALSE, closeOnEsc = FALSE, closeOnClickOutside = FALSE)
-                   
+
                    qr <- glue("UPDATE public.menu SET gejala = '{input$edit_gejala}', tgl_gejala = '{input$edit_tgl_gejala}' WHERE tanggal = '{input$edit_tanggal}'")
                    r <- dbSendQuery(pg_con, qr)
                    dbClearResult(r)
-                   
-                   updateDateInput(session, "edit_tgl_gejala", "Tanggal Terjadi Gejala", value = Sys.Date())
-                   updateTextInput(session, "edit_gejala", "Gejala Alergi", value = "")
-                   updateDateInput(session, "edit_tanggal", "Tanggal Pemberian MPASI", value = Sys.Date())
-                   
-                   shinyalert(type = "success", text = "Data berhasil diperbarui", immediate = TRUE, 
-                              showConfirmButton = TRUE, closeOnEsc = FALSE, closeOnClickOutside = FALSE)
-                   
+
+                   updateF7DatePicker("edit_tgl_gejala", NULL, value = Sys.Date(), session = session)
+                   updateF7TextArea("edit_gejala", NULL, value = "", session = session)
+                   updateF7DatePicker("edit_tanggal", NULL, value = Sys.Date(), session = session)
+
+                   shinyalert(type = "success", text = "Data berhasil diperbarui", immediate = TRUE,
+                              showCancelButton = FALSE, showConfirmButton = TRUE, 
+                              closeOnEsc = FALSE, closeOnClickOutside = FALSE)
+
                  }
                })
   })
 }
 
-shinyApp(ui, server, onStart = function(){
-  source("dbconnect.R")
-  onStop(function(){
-    dbDisconnect(pg_con)
-  })
-})
+shinyApp(ui, server, 
+         onStart = function(){
+           source("dbconnect.R")
+           onStop(function(){
+             dbDisconnect(pg_con)
+             })
+           }
+         )