radar2/ui.R

jsc <- '
$(document).ready(function () {
  $("#allInput").parent().parent().parent().parent().css({ "width": "600px" });
  $("#specialtyInput").css({ "width": "590px" });
  $("#materialInput").parent().parent().css({ "width": "200px" });
  $("#materialInput").css({ "width": "190px" });
});
'

ui <- dashboardPage(
  title = "RadaR2",
  skin = "black",
  # HEADER ------------------------------------------------------------------

  dashboardHeader(
    title = span(img(src = "radar.png", height = 30), strong("RadaR2")),
    titleWidth = 358,

    tags$li(
      a(
        strong(trnslt("About RadaR2")),
        height = 40,
        href = "https://www.jmir.org/2019/6/e12843/",
        title = "",
        target = "_blank"
      ),
      class = "dropdown",
    )
  ),

  # SIDEBAR -----------------------------------------------------------------

  dashboardSidebar(
    disable = TRUE,
    width = 400,
    sidebarMenu(
      id = "sidebar_id",
      menuItem(
        icon = icon("user-nurse"),
        div(
          materialSwitch(
            inputId = "allInput",
            label = trnslt("All specialties selected"),
            value = TRUE,
            status = "danger"
          ),
          checkboxGroupInput(
            # tags$head(tags$style("width: 400px; max-width: 400px;")),
            inputId = "specialtyInput",
            label = trnslt("Select specialties"),
            choices = sort(unique(radar_data$specialty_shiny)),
          )
        )
      ),
      menuItem(
        icon = icon("hospital"),
        div(
          materialSwitch(
            inputId = "allDepartments",
            label = trnslt("All deparmtents selected"),
            value = TRUE,
            status = "danger"
          ),
          checkboxGroupInput(
            inputId = "departmentInput",
            label = trnslt("Select departments"),
            choices = sort(unique(radar_data$department))
          )
        )
      ),
      menuItem(
        icon = icon("flask"),
        div(
          checkboxGroupInput(
            inputId = "materialInput",
            label = trnslt("Select material"),
            choices = sort(unique(radar_data$Materiaal))
          )
        )
      )
    )
  ),

  
  # BODY --------------------------------------------------------------------
  
  dashboardBody(
    tags$head(tags$script(jsc)),
    
    # fluidRow(
    #   column = 12,
    # infoBoxOutput(outputId = "no_tests", width = 4),
    # infoBoxOutput(outputId = "no_pos", width = 4),
    # infoBoxOutput(outputId = "top_mo", width = 4)
    # ),
    # br(),
    fluidRow(
      tags$style(
      ".nav-tabs {background-color: white;}
      .nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {background-color: transparent; border-color: transparent;}
      .nav-tabs-custom .nav-tabs li.active {border-top-color: black;}"),
      tabBox(
        id = 'RadaRtabs',
        width = '100%',
        # column(width = 6, 'Instructie'),
        # column(width = 6, 'Disclaimer, blabla blab la bla lbal bla lbal blablal', style="height: 300px;")
        tabPanel(
          'Start', 
          div(
            h3('Disclaimer'), 
            paste('blabla bla bla, legal legal legal.',
                  'Ok, someone needs to write some wise stuff here.',
                  "Like only use for surveillance, not intended for ",
                  "individual patients' clinical support, etc. etc. ",
                  "Yadda yadda yadda"),
            hr()
            ),
          fluidRow(
            column(2, checkboxInput('cbDisclaimerRead', "I understand"), 
                   style = 'margin-left: 10px;'), 
            column(2, actionButton('btnDisclaimerUnderstood', 
                                 label = 'confirm', 
                                 icon = icon("legal", class = "opt")))
          ),
          fluidRow(
            hr()
          ),
          div(
            h3('Instruction'), 
            tags$ul(tags$li('do this'), 
                    tags$li('do that'), 
                    tags$li('do such'), 
                    tags$li('do so'))
          ),
        ),
        tabPanel(
          'Data', 
          style = "width: 100%;",
          div(
            id = "resistance", 
            column(
              width = 6,
              uiOutput("box2")
            ),
            column(
              width = 6,
              uiOutput("box1")
            ),
            column(
              width = 6,
              uiOutput("box3")
            ),
            column(
              width = 6,
              uiOutput("box4")
            )
          )
        )
      )
    )
  )
)