inst/debiApp/ui.R

In MartinGoros/debi: Dashboard Application for Biostatistics Group

####
# Author: Martin W. Goros
# UT Health San Antonio

ui <- dashboardPage(title = "DEBi",
   dashboardHeader(title = tags$a(href='http://ceb.uthscsa.edu/',
                           tags$img(src='DEBiLogo.png')),
                   titleWidth = 100,
                   disable = FALSE
                   ),
   dashboardSidebar(width = 50,tags$head(tags$style("#stopshiny{color: grey; font-size: 14px;}")),
    sidebarMenu(
      br(),
      menuItem("", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("", tabName = "mytime", icon = icon("server"))#,
      #menuItem("", tabName = "report", icon = icon("file-text-o"))
    )),
   dashboardBody(
   useShinyjs(),    
   tabItems(
       tabItem("dashboard",   
      tags$head(tags$style(HTML('
        /* logo */
        .skin-black .main-header .logo {
                              background-color: #ffffff;
                              }

        /* logo when hovered */
        .skin-black .main-header .logo:hover {
                              background-color: #ffffff;
                              }

        /* navbar (rest of the header) */
        .skin-black .main-header .navbar {
                              background-color: #ffffff;
                              }        

        /* main sidebar */
        .skin-black .main-sidebar {
                              background-color: #ffffff;
                              }

        /* active selected tab in the sidebarmenu */
        .skin-black .main-sidebar .sidebar .sidebar-menu .active a{
                              background-color: #f4f6f7;
                              }

        /* other links in the sidebarmenu */
        .skin-black .main-sidebar .sidebar .sidebar-menu a{
                              background-color: #ffffff;
                              color: #000000;
                              }

        /* other links in the sidebarmenu when hovered */
         .skin-black .main-sidebar .sidebar .sidebar-menu a:hover{
                              background-color: #f4f6f7;
                              }
        /* toggle button when hovered  */                    
         .skin-black .main-header .navbar .sidebar-toggle:hover{
                              background-color: #ffffff;
                              }
                              '))),
     
     
     # value box----------------------------------------------------------------
     tags$style(".small-box.bg-yellow { background-color: #BEC3C7 !important; color: #ffffff !important;}"),
     tags$style(".small-box.bg-green { background-color: #5ec97b !important; color: #ffffff !important; }"),
     tags$style(".small-box.bg-red { background-color: #E84C3D !important; color: #ffffff !important; }"),
     tags$style(".small-box.bg-purple { background-color: #8D44AD !important; color: #ffffff !important; }"),
     tags$style(".small-box.bg-orange { background-color: #E77E22 !important; color: #ffffff !important; }"),
     tags$style(".small-box.bg-blue { background-color: #3297DB !important; color: #ffffff !important; }"),
     tags$head(tags$style(HTML("div.col-sm-2 {padding: 0px;margin-bottom: -10px;margin-top: 0px;margin-right: 0px; }; "))),
     tags$style("#intake {width:309px;}"),
     tags$style("#active {width:309px;}"),
     tags$style("#inactive {width:309px;}"),
     tags$style("#hold {width:309px;}"),
     tags$style("#manus {width:309px;}"),
     tags$style("#grant {width:309px;}"),
     
     fluidRow(
      column(width=2,valueBoxOutput("intake",width=12)),
      column(width=2,valueBoxOutput("active",width=12)),
      column(width=2,valueBoxOutput("inactive",width=12)),
      column(width=2,valueBoxOutput("hold",width=12)),
      column(width=2,valueBoxOutput("manus",width=12)),
      column(width=2,valueBoxOutput("grant",width=12))
     ),
     
     # graphics-----------------------------------------------------------------
     tags$head(tags$style(HTML("div.col-sm-3 {padding: 5px;margin-top: -15px;margin-bottom: -15px;}; "))),
     fluidRow(
     box(title='Hours Last 7 Days',width=3,ggvisOutput("hours"),height='360px',solidHeader=TRUE),
     box(title='Assigned Faculty',width=3,plotlyOutput("assigned_fac",height='300px'),solidHeader=TRUE),
     box(title='Assigned Staff',width=3,plotlyOutput("assigned_staff",height='300px'),solidHeader=TRUE),
     box(title='Intake Count',width=3,plotlyOutput("intake_count",height='300px'),solidHeader=TRUE)
     ),
     
     # table -------------------------------------------------------------------     
     tags$head(tags$style(HTML("div.col-sm-12 {padding: 5px;margin-top: -10px;margin-right: -15px;}; "))),
     fluidRow(
     box(title='Dashboard',dataTableOutput("table1"),width=12,solidHeader=TRUE)
     )
),
tabItem("mytime",

tags$head(tags$style(HTML("div.col-sm-6 {padding: 1px;margin-top: 0px;}; "))),
#tags$head(tags$style(HTML("div.col-sm-5 {padding: 1px;margin-top: 0px;};"))),
fluidRow(
column(width=6,
box(title='Projects',width=12,height='1000px',solidHeader=TRUE,
DT::dataTableOutput("responses")
)
),#end column
column(width=6,
tabBox(width=12,height='1000px',
tabPanel("Time", icon=icon('database'),

fillCol(height = '100%', width = '900', flex = c(NA, NA),

wellPanel(
  tags$style(HTML("#shiny-notification-panel {
                    width: 300px;
                    position: absolute;
                    margin: auto;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    height: 200px;
                    }
                    .shiny-notification { opacity: 0.95; }
                    h2 { padding-left: 15px; }")),

  h4(uiOutput('sel_proj2')),br(),

  fluidRow(
    column(width=2,
    numericInput('week_num',"Week",width='60px',value=as.numeric(strftime(as.POSIXlt(Sys.Date()),format="%W")),min=1,max=52)
    ),
    column(width=2,
    numericInput('year_num',"Year",width='80px',value=as.numeric(format(Sys.Date(),format='%Y')))
    )
  ),
  fluidRow(
    column(width=4,
    h4("Selected week:"),
    h4(textOutput('date_today')),
    br()
    )
  ),

  conditionalPanel(condition = "input.responses_rows_selected != ''",
  fluidRow(
    column(width = 2, align="center",
    h5(uiOutput('monday'))
    ),
    column(width = 2, align="center",
    numericInput('mon_hours', "Hours","",width='60px',min=0) #Monday
    ),
    conditionalPanel(condition = "input.mon_hours != null",
    column(width = 2, align="center",
    textInput('mon_hours_note', "Hours Note*","",width='150px') #Monday
    )),
    column(width = 2, align="center",
    selectInput('mon_phase', "Phase",c("","Intake","Active","Inactive","Hold","Manuscript Writing","Grant Writing","Completed"),multiple=FALSE,width='100px') #Monday
    ),
    conditionalPanel(condition = "input.mon_phase != ''",
    column(width = 2, align="center",
    textInput('mon_phase_note', "Phase Note*","",width='150px') #Monday
    ))
  ),
  fluidRow(
    column(width = 2, align="center",
    h5(uiOutput('tuesday'))
    ),
    column(width = 2, align="center",
    numericInput('tue_hours', "Hours","",width='60px',min=0) #Tuesday
    ),
    conditionalPanel(condition = "input.tue_hours != null",
    column(width = 2, align="center",
    textInput('tue_hours_note', "Hours Note*","",width='150px') #Tuesday
    )),
    column(width = 2, align="center",
    selectInput('tue_phase', "Phase",c("","Intake","Active","Inactive","Hold","Manuscript Writing","Grant Writing","Completed"),multiple=FALSE,width='100px') #Tuesday
    ),
    conditionalPanel(condition = "input.tue_phase != ''",
    column(width = 2, align="center",
    textInput('tue_phase_note', "Phase Note*","",width='150px') #Tuesday
    ))
  ),
  fluidRow(
    column(width = 2, align="center",
    h5(uiOutput('wednesday'))
    ),
    column(width = 2, align="center",
    numericInput('wed_hours', "Hours","",width='60px',min=0) #Wednesday
    ),
    conditionalPanel(condition = "input.wed_hours != null",
    column(width = 2, align="center",
    textInput('wed_hours_note', "Hours Note*","",width='150px') #Wednesday
    )),
    column(width = 2, align="center",
    selectInput('wed_phase', "Phase",c("","Intake","Active","Inactive","Hold","Manuscript Writing","Grant Writing","Completed"),multiple=FALSE,width='100px') #Wednesday
    ),
    conditionalPanel(condition = "input.wed_phase != ''",
    column(width = 2, align="center",
    textInput('wed_phase_note', "Phase Note*","",width='150px') #Wednesday
    ))
  ),
  fluidRow(
    column(width = 2, align="center",
    h5(uiOutput('thursday'))
    ),
    column(width = 2, align="center",
    numericInput('thu_hours', "Hours","",width='60px',min=0) #Thursday
    ),
    conditionalPanel(condition = "input.thu_hours != null",
    column(width = 2, align="center",
    textInput('thu_hours_note', "Hours Note*","",width='150px') #Thursday
    )),
    column(width = 2, align="center",
    selectInput('thu_phase', "Phase",c("","Intake","Active","Inactive","Hold","Manuscript Writing","Grant Writing","Completed"),multiple=FALSE,width='100px') #Thursday
    ),
    conditionalPanel(condition = "input.thu_phase != ''",
    column(width = 2, align="center",
    textInput('thu_phase_note', "Phase Note*","",width='150px') #Thursday
    ))
  ),
  fluidRow(
    column(width = 2, align="center",
    h5(uiOutput('friday'))
    ),
    column(width = 2, align="center",
    numericInput('fri_hours', "Hours","",width='60px',min=0) #Friday
    ),
    conditionalPanel(condition = "input.fri_hours != null",
    column(width = 2, align="center",
    textInput('fri_hours_note', "Hours Note*","",width='150px') #Friday
    )),
    column(width = 2, align="center",
    selectInput('fri_phase', "Phase",c("","Intake","Active","Inactive","Hold","Manuscript Writing","Grant Writing","Completed"),multiple=FALSE,width='100px') #Friday
    ),
    conditionalPanel(condition = "input.fri_phase != ''",
    column(width = 2, align="center",
    textInput('fri_phase_note', "Phase Note*","",width='150px') #Friday
    ))
  ),
  fluidRow(
    column(width = 2, align="center",
    h5(uiOutput('saturday'))
    ),
    column(width = 2, align="center",
    numericInput('sat_hours', "Hours","",width='60px',min=0) #Saturday
    ),
    conditionalPanel(condition = "input.sat_hours != null",
    column(width = 2, align="center",
    textInput('sat_hours_note', "Hours Note*","",width='150px') #Saturday
    )),
    column(width = 2, align="center",
    selectInput('sat_phase', "Phase",c("","Intake","Active","Inactive","Hold","Manuscript Writing","Grant Writing","Completed"),multiple=FALSE,width='100px') #Saturday
    ),
    conditionalPanel(condition = "input.sat_phase != ''",
    column(width = 2, align="center",
    textInput('sat_phase_note', "Phase Note*","",width='150px') #Saturday
    ))
  ),
  fluidRow(
    column(width = 2, align="center",
    h5(uiOutput('sunday'))
    ),
    column(width = 2, align="center",
    numericInput('sun_hours', "Hours","",width='60px',min=0) #Sunday
    ),
    conditionalPanel(condition = "input.sun_hours != null",
    column(width = 2, align="center",
    textInput('sun_hours_note', "Hours Note*","",width='150px') #Sunday
    )),
    column(width = 2, align="center",
    selectInput('sun_phase', "Phase",c("","Intake","Active","Inactive","Hold","Manuscript Writing","Grant Writing","Completed"),multiple=FALSE,width='100px') #Sunday
    ),
    conditionalPanel(condition = "input.sun_phase != ''",
    column(width = 2, align="center",
    textInput('sun_phase_note', "Phase Note*","",width='150px') #Sunday
    ))
  ),
  fluidRow(
    h3(actionButton("submit","Save Changes")),
    br(),
    span("* must provide value",style="color:red")
  )
)
),
h2(uiOutput('modif'))
)



),


tabPanel("History", icon=icon('folder-open'),
inputPanel(
  selectInput("dataset", "",choices = c("Hours", "Phases"))
),
DT::dataTableOutput('history', width = "100%"),
h4(uiOutput('total'))
),
tabPanel("Details", icon=icon('info'),
br(),
tableOutput("details")
)
)
)#end column
)#end fluid row
),


tabItem("report",
tags$head(tags$style(HTML("div.col-sm-4 {padding: 2px;margin-top: 0px;}; "))),
tags$head(tags$style(HTML("div.col-sm-8 {padding: 2px;margin-top: 0px;}; "))),
fluidRow(
column(width=4,
box(width=12,solidHeader=TRUE,
h4("Filter"),
br(),
dateRangeInput("dates", 
    "Date range:",
    start = min(as.Date(as.character(full_data$request_date),format='%Y-%m-%d'),na.rm=TRUE), 
    end = max(as.Date(as.character(full_data$request_date),format='%Y-%m-%d'),na.rm=TRUE),
    width = '200px'
),
column(width=3,
selectInput("mod_work",
            "Hours Contributor:",
            c("All",
            unique(as.character(full_data$modifier_work))),
            width='300px',multiple=TRUE,selected="All")
)
,
column(width=2,
selectInput("staff",
            "Staff:",
            c("All",
            unique(as.character(full_data$assigned_staff))),
            width='100px',multiple=TRUE,selected="All")
)
,
column(width=3,
selectInput("fac",
            "Assigned Faculty:",
            c("All",
            unique(as.character(full_data$assigned_faculty))),
            width='300px',multiple=TRUE,selected="All")
)
,
column(width=3,
selectInput("funding",
            "Funding Source:",
            c("All",
            unique(as.character(full_data$funding_type))),
            width='300px',multiple=TRUE,selected="All")
)
#,
# Create a new row for the table.
#dataTableOutput(outputId="table")
)
),
column(width=8,
box(width=12,solidHeader=TRUE,
h4("Report"),h4(textOutput("report_dates")),br(),
uiOutput("report")
)
)
)
)#end tabitem

))
,skin = "black"
)

shinyUI(ui)

### END ###