how to add my ui and server modules with golem?

86 views Asked by At

I am working with golem framework and trying to add my modules to app_ui and app_server yet, I do not succeed to get what I want -the page with Start button and logo .

Hre is the app_ui which I call in the first_page_module_ui:

#' The application User-Interface
#'
#' @param request Internal parameter for `{shiny}`.
#'     DO NOT REMOVE.
#' @import shiny
#' @noRd
app_ui <- function(request) {

  tagList(
    golem_add_external_resources(),
    fluidPage(
        first_page_module1_ui("first_page_module1_ui_1")
    )
  )

}


#' Add external Resources to the Application
#'
#' This function is internally used to add external
#' resources inside the Shiny application.
#'
#' @import shiny
#' @importFrom golem add_resource_path activate_js favicon bundle_resources
#' @noRd
golem_add_external_resources <- function() {
  add_resource_path(
    "www",
    app_sys("app/www")
  )

  tags$head(
    favicon(),
    bundle_resources(
      path = app_sys("app/www"),
      app_title = "fec"
    )
    # Add here other external resources
    # for example, you can add shinyalert::useShinyalert()
  )
}

Here is my app_server where I call first_page_module1_server:

#' The application server-side
#'
#' @param input,output,session Internal parameters for {shiny}.
#'     DO NOT REMOVE.
#' @import shiny
#' @noRd
app_server <- function(input, output, session) {

  # Load the modules
  first_page_module1_server("first_page_module1_server_1")


}

Here is my actual first_page where I store my both modules

#' first_page_module1_ui UI Function
#'
#' @description A shiny Module.
#'
#' @param id,input,output,session Internal parameters for {shiny}.
#'
#' @noRd
#'
#' @importFrom shiny NS tagList
first_page_module1_ui <- function(id) {

  ns <- NS(id)
  tagList(
    fluidPage(
      tags$head(
        tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")),
      titlePanel(" "),
      uiOutput("page")))

}

#' first_page_module1_server Functions
#'
#' @noRd
first_page_module1_server <- function(id){
  moduleServer( id, function(input, output, session){
    ns <- session$ns
    output$page <- renderUI({
      if (is.null(input$currentPage)) {
        tagList(
          div(class = "input-container",
              actionButton("startButton", "Start", style = "font-size: 50px; color: navy")),
          tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
        )
      }
    })
  })
}

here is my css file just in case:

/* styles.css */
body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  margin: 5px 0;
  background-color: navy; /* Set background color for the body */
  position: relative; /* Add position relative for the logo */
}
.input-container {
  width: 100%;
  text-align: center;
  background-color: navy; /* Set background color for the input container */
  padding: 20px; /* Add padding for better visibility */

}
.input-container input[type='text'],
.input-container input[type='number'],
.input-container .btn {
  width: 100%;
  padding: 15px;
  margin: 5px 0;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  color: navy; /* Text color navy */

}
.input-container .btn {
  margin-top: 20px;
  color: white;

}
/* Style for Your Details text */
.details-container {
  text-align: center;

}
.details-text {
  color: white;
  font-size: 24px;
  margin-bottom: 15px;
  text-align: center;
  display: inline-block;

}
.logo {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px; /* Adjust the width of the logo */
  height: auto; /* Maintain aspect ratio */

}
div#corner-triangle {
  display: block;
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #ffffff transparent transparent transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  color: white;
  text-shadow: 0 0 25px 9px #fff;
}

I should have a Start page (exclude the following pages) with a logo just like in this link first page with Start button and logo

Can someone help?

0

There are 0 answers