inst/app/ui.R

In pmelgren/gameTracker: Web App to Track Rugby Games

library(shiny)
library(shinyjs)

# Set up the UI
fluidPage(
  
  # non-visible elements that set up other processes
  useShinyjs()
  ,hidden(numericInput("vidTime","",0))
  ,hidden(actionButton("maulends","Maul Ends"))
  ,tags$script(
    "$(document).on('click', '#Main_table button', function () {
      Shiny.onInputChange('lastClickId',this.id);
      Shiny.onInputChange('lastClick', Math.random())});")
  
  # script to control the youtube player using keystrokes 
  # 37 is left arrow, 39 is right arrow, 32 is spacebar
  ,tags$script(HTML(
    "$(function(){
      $(document).keyup(function(e) {
        if (e.which == 37) {
          player.seekTo(player.getCurrentTime()-5)
        } else if(e.which == 39){
          player.seekTo(player.getCurrentTime()+5)
        } else if (e.which == 32) {
          if (player.getPlayerState() == 1) {
            playerTime = player.getCurrentTime();
            player.pauseVideo();
          } else if (player.getPlayerState() == 2) {
            player.playVideo();
          }
        }
      });
    })"
  ))
  

  # Main UI code
  ,fluidRow(
    
    # title at top of page
    column(10
           ,headerPanel("UMRFC Game Tracker")) 
    ,column(2
            ,HTML(' ')
            ,conditionalPanel("typeof player != 'undefined'"
                              ,actionButton("export","Export Data")))
  )
  ,fluidRow(            
    # Prompt to enter game metadata before the charting begins
    conditionalPanel("typeof player == 'undefined'"
      ,fluidRow(
        column(1)
        ,column(3
               ,selectInput("home","Home Team"
                             ,choices = names(teams))
               ,selectInput("away","Away Team"
                            ,choices = names(teams))
        )
        ,column(3
                ,dateInput("gameDate","Game Date"
                           ,max = Sys.Date())
                ,textInput("location","Game Location")
        )
        ,column(2
                ,selectInput("type","Game Type"
                             ,choices = c("15s","7s"))
                ,selectInput("side","Match Side"
                             ,choices = c("A","B","C","Other"))
        )
        ,column(2
                ,numericInput("minutesPerHalf","Minutes Per Half",40)
        )
      )
      ,fluidRow(
        column(1)
        ,column(6
               ,textInput("link","Paste YouTube Link Here"
                          ,width = 650))
        ,column(1
                ,actionButton("videoLoad","Load Video"))
        ,column(4)
      )
    )
  )
  ,fluidRow(
    
    # controls sidebar on the left
    column(5
      ,conditionalPanel("typeof player != 'undefined'"
                     
        # picture of the pitch to collect X-Y coordinates data
        ,plotOutput("pitch", height = "auto",width = 540
                   ,click = "click"
                   ,dblclick = "dblclick"
        )
        
        # Possession Team Toggle (Will be updated to team names later)
        ,radioButtons("team","Possession",choices = list(Home = "H", Away = "A")
                     ,inline = TRUE)
        
        # Panel of all event buttons (only visible after the pitch is clicked)
        ,conditionalPanel("panelChoice == 1"
                          ,p(
                             actionButton("turnover","Turnover")
                             ,actionButton("knockon","Knock On")
                             ,actionButton("penalty","Penalty")
                             ,actionButton("intotouch","Into Touch")
                             ,actionButton("maul","Maul"))
                          ,p(
                             actionButton("receivekick","Receive Kick")
                             ,actionButton("kickoff","Kickoff")
                             ,actionButton("kick","Kick"))
                           ,p(
                             actionButton("lineout","Lineout")
                             ,actionButton("scrum","Scrum")
                             ,actionButton("restart","Tap Restart"))
                          ,p(
                            actionButton("try","Try")
                            ,actionButton("other","Held Up/Other")
                            )
        )
        # Panel with result events for rucks (2), lineouts (7) and scrums (8)
        ,conditionalPanel("panelChoice == 2 || panelChoice == 7 || panelChoice == 8"
                         ,p(
                           actionButton("setpieceturnover","Turnover"))
                         ,p(
                           actionButton("backs","Backs")
                           ,actionButton("forwards","Forwards")
                           ,actionButton("ruckpenalty","Penalty")
                           ,actionButton("pickandgo","Pick and Go")
                           ,conditionalPanel("panelChoice == 7"
                                             ,actionButton("maulfromlineout","Maul"))
                           ,conditionalPanel("panelChoice == 2"
                                             ,actionButton("boxkick","Box Kick"))
                         )
        )
        # Panel for Penalty result events
        ,conditionalPanel("panelChoice == 3"
                         ,actionButton("penaltykick","Kick")
                         ,actionButton("kickforpoints","Kick for Points")
                         ,actionButton("scrumfrompen","Scrum")
                         ,actionButton("restartfrompen","Tap Restart")
        )
        # Panel for conversion kick or kick for points
        ,conditionalPanel("panelChoice == 4"
                         ,p("Click on the Pitch image to select the kick location")
                         ,actionButton("madekick","Made")
                         ,actionButton("missedkick","Missed")
        )
        # Panel for after a kick has begun(ends in receive kick or into touch)
        ,conditionalPanel("panelChoice == 5"
                         ,p(paste0("Single click on the pitch image where the kick is received "
                                   ,"or where it goes into touch."))
        )
        # Panel for after a maul has begun
        ,conditionalPanel("panelChoice == 6"
                         ,p("Single click on the pitch image where the maul ends.")
        )
      )
    )  
    # main panel on the right that hosts the video and collected data
    ,column(7
            ,uiOutput("video")
            ,DT::dataTableOutput("Main_table")
    )
  )
)