shiny-demo: show sliders for start and end year

Change-Id: I19eabbc6c3e1f2b4de64d54a4c790a64987b1d32
diff --git a/demo/shiny-apps/frequency_curves/server.R b/demo/shiny-apps/frequency_curves/server.R
index a7b3b37..d1e3da4 100644
--- a/demo/shiny-apps/frequency_curves/server.R
+++ b/demo/shiny-apps/frequency_curves/server.R
@@ -1,6 +1,8 @@
 rsr <- new("KorAPConnection", verbose = TRUE)
-years <- c(1995:2020)
 vc <- "(textType = /Zeit.*/ | textTypeRef=Plenarprotokoll) & availability!=QAO-NC-LOC:ids & creationDate in"
+years <- c(2005:2020)
+from <- 2005
+to <- 2020
 query <- "Aluhut"
 logfile <- file("frequency_curves.log", open = "a")
 
@@ -43,7 +45,8 @@
   hc
 }
 
-generateHighchart <- function(wordParam) {
+generateHighchart <- function(wordParam, from=2005, to=2020) {
+  years <<- c(from:to)
   if (wordParam != "") {
     query <<- str_split(wordParam, " *, *", simplify = TRUE)
     withProgress(message = 'Berechnung läuft: ', value = 0, {
@@ -57,18 +60,30 @@
 function(input, output, session) {
   observe({
     queryParams <- parseQueryString(session$clientData$url_search)
+    if (!is.null(queryParams[['from']])) {
+      from <- queryParams[['from']]
+      updateSliderInput(session, "from", value = from)
+    } else {
+      from <- 2005
+    }
+    if (!is.null(queryParams[['to']])) {
+      to <- queryParams[['to']]
+      updateSliderInput(session, "to", value = to)
+    } else {
+      to <- 2020
+    }
     if (!is.null(queryParams[['q']])) {
       paramWord <- queryParams[['q']]
       updateTextInput(session, "q", value = paramWord)
       output$hcontainer <-
-        renderHighchart(generateHighchart(paramWord))
+        renderHighchart(generateHighchart(paramWord, from, to))
     }
   })
-  
+
   observeEvent(input$goButton,
                {
                  output$hcontainer <-
-                   renderHighchart(generateHighchart(isolate(input$q)))
+                   renderHighchart(generateHighchart(isolate(input$q), isolate(input$from), isolate(input$to)))
                })
-  
+
 }
diff --git a/demo/shiny-apps/frequency_curves/ui.R b/demo/shiny-apps/frequency_curves/ui.R
index 2e1adee..7e1c300 100644
--- a/demo/shiny-apps/frequency_curves/ui.R
+++ b/demo/shiny-apps/frequency_curves/ui.R
@@ -20,9 +20,21 @@
                                     placeholder = "Mit Komma getrennte Liste")),
         column(
           width = 1,
+          offset = 0,
           style = "margin-top: 25px;",
           actionButton("goButton", "Mit KorAP suchen", icon("search"), class = "btn btn-primary")
+        ),
+        column(width = 2, offset=3,
+          sliderInput("from", "Von", sep = "",
+                    min = 1949, max = 2020,
+                    value = 2005)
+        ),
+        column(width = 2, offset=0,
+               sliderInput("to", "Bis", sep = "",
+                           min = 1949, max = 2020,
+                           value = 2020)
         )
+
       ),
       fluidRow(height = 10,
                highchartOutput("hcontainer", height = "600px"))
diff --git a/demo/shiny-apps/frequency_curves/www/frequency_curves.css b/demo/shiny-apps/frequency_curves/www/frequency_curves.css
index 8f9ddc1..1a6e82c 100644
--- a/demo/shiny-apps/frequency_curves/www/frequency_curves.css
+++ b/demo/shiny-apps/frequency_curves/www/frequency_curves.css
@@ -8,7 +8,7 @@
 .btn-primary {
   background-color: #9BAD09;
   border-color: #626F06
-  
+
 }
 
 .btn-primary:hover {
@@ -16,14 +16,19 @@
 }
 
 .shiny-notification {
-  position: fixed; 
+  position: fixed;
   top: 50%;
-  left: 50%;  
-  width: 250px; 
+  left: 50%;
+  width: 250px;
   margin-top: -100px;
   margin-left: -125px;
 }
-  
+
+.highcharts-anchor {
+  fill: blue;
+  color: blue;
+}
+
 .progress-bar {
   background-color: #9BAD09
-} 
\ No newline at end of file
+}