radar2/ui.R
2023-02-07 16:49:16 +01:00

164 lines
4.6 KiB
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")
)
)
)
)
)
)
)