shiny_wisdot_crash_dashboard: WisDOTcrashdashboard

# https://convertio.co/png-svg/  ### convert to svg

#' The application User-Interface
#' 
#' @param request Internal parameter for `{shiny}`. 
#'     DO NOT REMOVE.
#' @import shiny shinydashboard
#' @importFrom shinyWidgets materialSwitch
#' @noRd
#' 
#' 
# layout is Bootstrap (i,e, row widths must add up to 12), helpful to know a little CSS, HTML

app_ui <- function(request) {
  tagList(
    shinybusy::add_busy_spinner(
      spin = "semipolar",
      position = "top-left",
      color = "#9F2042",
      # height = "400px",
      # width = "400px",
      margins = c(300, 500)
    ),
    # Leave this function for adding external resources
    golem_add_external_resources(),
    # List the first level UI elements here
    # adding icons on right side of header: https://stackoverflow.com/questions/31440564/adding-a-company-logo-to-shinydashboard-header
    dashboardPage(
      title = "WisDOT Crash Dashboard",
      # browser tab name
      dashboardHeader(
        title = logo_grey_light,
        # text for page title
        titleWidth = 330,
        # Set height of dashboardHeader
        tags$li(
          class = "dropdown",
          tags$style(".main-header {max-height: 50px}"),
          tags$style(".main-header .logo {height: 50px}")
        ),
        #horizontal-align: left;
        tags$li(class = "dropdown", style = "margin-top:15px;", tags$div(
          HTML(
            '<span><a href=mailto:CrashDataAnalysis@dot.wi.gov>Data requests or questions: CrashDataAnalysis@dot.wi.gov</a></span>'
          )
        ))
      ),
      dashboardSidebar(
        # .fa-car-band-aid {vertical-align: middle;}
        # Adjust the sidebar
        # tags$style(".left-side, .main-sidebar {padding-top: 20px}"),
        width = "250px",    # sidebar width
        
        sidebarMenu(
          # Remove the sidebar toggle element
          tags$script(
            htmlwidgets::JS(
              "document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"
            )
          ),
          # div(class = "inlay", style = "height:15px;width:100%;background-color: #ecf0f5;"),
          menuItem(
            strong(" Year"),
            tabName = "year",
            icon = icon("calendar"),
            mod_siderbar_select_year_ui("year") # Module
            # textOutput("out")
          ),
          menuItem(
            strong("Select Location"),
            # strong makes it bold
            tabName = "location",
            icon = icon("map-marked-alt"),
            startExpanded = TRUE,
            # start expanded
            # selected = as.character("Adams"),
            mod_siderbar_select_county_ui("cntycode_input"), # Module
            # actionButton("go", "Go")
            mod_siderbar_select_muni_ui("municode_input") # Module
          ),
          menuItem(
            strong(" Crash Severity"),
            tabName = "crash_type",
            icon = icon("car-crash"),
            # startExpanded = TRUE, # start expanded
            # materialSwitch(inputId = "fatal", label = span("Fatal", style = "color:#D50032"), status = "danger", value = TRUE),
            # set to each have 15 characters to fake left align: 1 space - &nbsp;  2 - &ensp; 4 - &emsp;
            materialSwitch(
              inputId = "Fatal",
              label = crsh_svr_labels("heartbeat", fatal_red, "Fatal&emsp;&emsp;&ensp;"),
              status = "danger",
              value = TRUE
            ),
            materialSwitch(
              inputId = "Injury",
              label = crsh_svr_labels("first-aid", inj_blue, "Injury&emsp;&emsp;&nbsp;"),
              status = "primary",
              value = TRUE
            ),
            materialSwitch(
              inputId = "Property Damage",
              label = crsh_svr_labels("car", pd_green, "Prop. Damage"),
              status = "success",
              value = TRUE
            ),
            tags$h5("")
          ),
          menuItem(
            strong(" Flags"),
            tabName = "crash_flags",
            icon = icon("flag"),
            startExpanded = FALSE,
            # start expanded
            # <br> add a break line
            tags$h5("Selection type:", style = "display:inline-block; margin-top: 10px; margin-right:-10px;"),
            tags$h5(
              switchInput(
                inputId = "any_or_all",
                value = TRUE,
                onLabel = "Any",
                offLabel = "All",
                onStatus = "primary",
                offStatus = "primary",
                size = "mini",
                inline = TRUE
              ),
              style = "display:inline-block; margin-top: 10px; padding: 0px;"
            ),
            tags$h5(" Driver behavior", style = "margin-top: 10px;"),
            # set to each have 15 characters to fake left align: 1 space - &nbsp;  2 - &ensp; 4 - &emsp;
            materialSwitch(
              inputId = "impaired_flag",
              label = tags$span(
                HTML(
                  '<i class="fa fa-glass-martini" style = "color:rgb(115,115,115);"></i> Alcohol/drug&nbsp;&nbsp;&nbsp;'
                )
              ),
              status = "primary"
            ),
            # materialSwitch(
            #   inputId = "DRUGFLAG",
            #   label = tags$span(
            #     HTML(
            #       '<i class="fa fa-pills" style = "color:rgb(115,115,115);"></i> Drug-related &ensp; &nbsp;'
            #     )
            #   ),
            #   status = "primary"
            # ),
            materialSwitch(
              inputId = "speed_flag",
              label = tags$span(
                HTML(
                  '<i class="fa fa-tachometer" style = "color:rgb(115,115,115);"></i> Speeding &emsp;&ensp; &nbsp;&nbsp; '
                )
              ),
              status = "primary"
            ),
            materialSwitch(
              inputId = "distracted_flag",
              label = tags$span(
                HTML(
                  '<i class="fa fa-mobile-alt" style = "color:rgb(115,115,115);"></i> Distracted &emsp;&ensp; &nbsp;&nbsp; '
                )
              ),
              status = "primary"
            ),
            materialSwitch(
              inputId = "lanedepflag",
              label = tags$span(
                HTML(
                  '<i class="fa fa-road" style = "color:rgb(115,115,115);"></i> Lane Departure'
                )
              ),
              status = "primary"
            ),
            tags$h5("Driver age"),
            materialSwitch(
              inputId = "teendriver_flag",
              label = tags$span(
                HTML(
                  '</svg><image class="driver_svg" src="www/icons8-driver-60.svg"/> Teen driver &emsp;&nbsp; &nbsp; '
                )
              ),
              status = "primary"
            ),
            materialSwitch(
              inputId = "olderdriver_flag",
              label = tags$span(
                HTML(
                  '</svg><image class="driver_svg" src="www/icons8-driver-60.svg"/> Older driver &ensp;&nbsp;&nbsp; &nbsp; '
                )
              ),
              status = "primary"
            ),
            tags$h5("Who's involved"),
            materialSwitch(
              inputId = "CYCLFLAG",
              label = tags$span(
                HTML(
                  '<i class="fa fa-motorcycle" style = "color:rgb(115,115,115);"></i> Motorcycle &emsp;&nbsp;&nbsp;&nbsp;'
                )
              ),
              status = "primary"
            ),
            materialSwitch(
              inputId = "PEDFLAG",
              label = tags$span(
                HTML(
                  '<i class="fa fa-walking" style = "color:rgb(115,115,115);"></i> Pedestrian &emsp;&ensp;&nbsp;&nbsp;'
                )
              ),
              status = "primary"
            ),
            materialSwitch(
              inputId = "BIKEFLAG",
              label = tags$span(
                HTML(
                  '<i class="fa fa-bicycle" style = "color:rgb(115,115,115);"></i> Bicycle &emsp;&emsp;&emsp;&nbsp;&nbsp;'
                )
              ),
              status = "primary"
            ),
            # tags$h5("Person behavior"),
            # materialSwitch(inputId = "seatbelt", label = tags$span(HTML('<i class="fa fa-car" style = "color:rgb(115,115,115);"></i> Seat belt (NO)')), status = "primary"),
            tags$h5("Other"),
            materialSwitch(
              inputId = "singlevehflag",
              label = tags$span(
                HTML(
                  '</svg><image class="traffic-accident_svg" src="www/icons8-traffic-accident-50.svg"/> Single Vehicle &nbsp;'
                )
              ),
              status = "primary"
            ),
            materialSwitch(
              inputId = "intersection_flag",
              label = tags$span(
                HTML(
                  '<i class="fa fa-times" style = "color:rgb(115,115,115);"></i> Intersection &nbsp;&ensp;'
                )
              ),
              status = "primary"
            ),
            materialSwitch(
              inputId = "deer_flag",
              label = tags$span(
                HTML(
                  '</svg><image class="deer_svg" src="www/icons8-deer-52.svg"/> Deer &emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;'
                )
              ),
              status = "primary"
            ),
            br()
          ),
          # <img src="www/icons8-deer-52.svg"">
          menuItem(
            strong(" Map Settings"),
            tabName = "map_sett",
            icon = icon("map"),
            # startExpanded = TRUE,  # start expanded
            materialSwitch(
              "hex",
              label = tags$span(
                HTML(
                  '</svg><image class="hexbin_svg" src="www/hexbin.svg"/> Hex Bins'
                )
              ),
              status = "primary",
              value = FALSE #tags$span(HTML('<i class="fa fa-car" style = "color:#4DB848;"></i><p style="display:inline-block;">xx</p>'))
            ),
            sliderInput(
              "hexsize",
              "Change Hex Size:",
              min = 1,
              max = 30,
              value = 10,
              ticks = FALSE
            )
          ),
          br(),
          # downloadButton("downloadData", "Download crash data"),
          br(), br(),
          tags$span(HTML( "<img src=www/tops-lab-logo.png style=height:8em;display:inline-block;background-color:rgb(248,248,248)>
            <img src=www/zero-logo.png style=height:8em;display:inline-block;background-color:rgb(248,248,248);>"))
        )
      ),
      dashboardBody(
        # the awesome theme
        theme_grey_light,
        column(
          # # for column, width = NULL
          width = 6,
          #style='padding:5px;',
          fluidRow(
            valueBoxOutput("tot_crash"),
            valueBoxOutput("tot_inj"),
            valueBoxOutput("tot_fatal")
          ),
          tabBox(
            title = NULL,
            width = NULL,
            # The id lets us use input$tabset1 on the server to find the current tab
            # id = "tabset1",
            # height = "600px",
            tabPanel(
              tagList(shiny::icon("paper-plane"), strong("Welcome")),
              tagList(tags$span(
                HTML(
                  "<h3>Welcome to the WisDOT Crash Statistics Dashboard.</h3>
        <h6 style=font-size:14px;>Explore crash statistics by county from 2017 - 2021. Click on the above tabs
          to display different charts and click of the sidebar tabs to select parameters.</h6>

          <h6 style=font-size:14px;> For a data request email BOTSTS at <a href=mailto:CrashDataAnalysis@dot.wi.gov>CrashDataAnalysis@dot.wi.gov</a> </h6>"
                )
              ))
            ),
            tabPanel(
              # NOTE   br(), adds space between charts
              tagList(shiny::icon("car-crash"), strong("Crash Trends")),
              mod_chart_crsh_svr_mth_ui("crsh_svr_mth"),
              br(),
              mod_chart_timeofday_heat_ui("timeofday_heat"),
              br(),
              mod_chart_flags_by_crshsvr_ui("flags_by_crshsvr")
              # mod_chart_wisinj_by_year_ui("wisinj_by_year")
            ),
            tabPanel(tagList(
              tags$span(
                HTML(
                  '<img src="www/icons8-car-crash-50.svg" class = "crash_type_svg" style="width:24px;height:24px;"></i>'
                )
              ), strong("Crash Types")
            ),
            mod_chart_mnrcoll_ui("mnrcoll")),
            tabPanel(
              tagList(shiny::icon("users"), strong("People Involved")),
              mod_chart_person_role_treemap_ui("person_role_treemap"),
              br(),
              mod_chart_person_age_gender_ui("person_age_gender"),
            ),
            tabPanel(
              tagList(tags$span(
                HTML(
                  '<img src="www/icons8-driver-60.svg" class = "driver_beh_svg" style="width:24px;height:24px;"></i>'
                )
              ), strong("Driver Behavior")),
              mod_chart_drvrpc_ui("drvrpc_chart")
            ),
            tabPanel(
              tagList(
                shiny::icon("bicycle"),
                shiny::icon("walking"),
                strong("Bike/Ped. Behavior")
              ),
              # splitLayout(cellWidths = c("50%", "50%"),
              mod_waffle_ggplot_chart_ui("ped_waffle"),
              mod_waffle_ggplot_chart_ui("bike_waffle"),
              # ),
              br(),
              mod_chart_nmtact_ui("nmtact_chart"),
              # br(),
              # nmtloc_chart_ui("nmtloc_chart")
            ),
            tabPanel(
              tagList(shiny::icon("car"), strong("Vehicles Involved")),
              mod_chart_vehicle_treemap_ui("vehicle_treemap")
            )
          )
        ),
        column(
          width = 6,
          # Text for 'xx crashes are not mapped'
          leafgl::leafglOutput("map1", height = "600px"),
          br(),
          box(width = NULL,
              tagList(tags$span(HTML(
                paste0(
                  "<span style=color:rgb(100,100,100);>",
                  textOutput("get_number_of_NA", inline = TRUE),
                  " crashes are not mapped due to unknown coordinates.</span>"
                )
              ))))
        )
      )
    )
  )
}
# Read shapefiles for map
# ctv <- st_read("map/ctv.shp")

#' 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$img(src = "www/icons8-driver-60.svg")
  tags$head(
    favicon(),
    bundle_resources(
      path = app_sys('app/www'),
      app_title = 'WisDOTcrashdashboard'
    )
    # Add here other external resources
    # for example, you can add shinyalert::useShinyalert() 
  )
}