Add date picker to silence form views

ui/app/elm.json

@@ -16,11 +16,13 @@
             "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "rtfeldman/elm-iso8601-date-strings": "1.1.2",
-            "NoRedInk/elm-json-decode-pipeline": "1.0.0"
+            "NoRedInk/elm-json-decode-pipeline": "1.0.0",
+            "justinmimbs/time-extra": "1.1.0"
         },
         "indirect": {
             "elm/virtual-dom": "1.0.0",
-            "elm/random": "1.0.0"
+            "elm/random": "1.0.0",
+            "justinmimbs/date": "3.2.0"
         }
     },
     "test-dependencies": {

ui/app/lib/elm-datepicker/css/elm-datepicker.css

@@ -0,0 +1,140 @@
+.cursor-pointer {cursor: pointer;}
+
+.month {
+    height: 270px;
+}
+
+.calendar_ .date-container {
+}
+
+.calendar_ .weekheader {
+    margin-top: 5px;
+}
+
+.calendar_ .date {
+    color: #C0C0C0;
+    cursor: pointer;
+    height: 30px;
+    width: 40px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: .75rem;
+    background-color: #fff;
+}
+
+.calendar_ .date.thismonth {
+    color: #22292f;
+}
+
+.calendar_ .date.front {
+    background-color: rgba(0,0,0,0);
+}
+
+.calendar_ .date.back {
+    margin-bottom: 5px;
+}
+
+.calendar_ .date.front.mouseover {
+    background-color: #EEEEEE;
+    border-radius: 50%;
+}
+
+.calendar_ .date.front.start {
+    background-color: #b0c4de;
+    border-radius: 50%;
+}
+
+.calendar_ .date.front.end {
+    background-color: #b0c4de;
+    border-radius: 50%;
+}
+
+.calendar_ .date.back.start {
+    background-color: #b0c4de;
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+}
+
+.calendar_ .date.back.end {
+    background-color: #b0c4de;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+}
+
+.calendar_ .date.back.between {
+    background-color: #b0c4de;
+}
+
+.timepicker {
+    height:60px;
+    width:80%;
+    margin-top: 10px;
+}
+
+.timepicker .subject {
+    padding:10px;
+    width:20%;
+    vertical-align:middle;
+}
+
+.timepicker .hour {
+    width:10%;
+}
+
+.timepicker .minute {
+    width:10%;
+}
+
+.timepicker .view {
+    width:100%;
+    height:50%;
+    text-align:center;
+    border: 0px none;
+}
+
+.timepicker .up-button {
+    width:100%;
+    height:25%;
+    border: 0px none;
+}
+
+.timepicker .down-button {
+    width:100%;
+    height:25%;
+    border: 0px none;
+}
+
+.timepicker .colon {
+    width: 5%;
+}
+
+.timepicker .timeview {
+    width:50%;
+}
+
+.month-header {
+    width:70%;
+    margin: 0 auto;
+}
+
+.month-header .prev-month {
+    width:20%;
+}
+
+.month-header .month-text {
+    width:60%;
+    font-weight: bold;
+    font-size: 12px;
+    text-align: center;
+}
+
+.month-header .next-month {
+    width:20%;
+}
+
+.d-flex-center {
+    display:flex;
+    align-items: center;
+    justify-content: space-around;
+}

ui/app/src/Main.elm

@@ -101,6 +101,7 @@ init flags url key =
             libUrl
             Loading
             Loading
+            Loading
             defaultCreator
             groupExpandAll
             key

ui/app/src/Types.elm

@@ -23,6 +23,7 @@ type alias Model =
     , libUrl : String
     , bootstrapCSS : ApiData String
     , fontAwesomeCSS : ApiData String
+    , elmDatepickerCSS : ApiData String
     , defaultCreator : String
     , expandAll : Bool
     , key : Key
@@ -49,6 +50,7 @@ type Msg
     | UpdateFilter String
     | BootstrapCSSLoaded (ApiData String)
     | FontAwesomeCSSLoaded (ApiData String)
+    | ElmDatepickerCSSLoaded (ApiData String)
     | SetDefaultCreator String
     | SetGroupExpandAll Bool
 

ui/app/src/Updates.elm

@@ -121,6 +121,9 @@ update msg ({ basePath, apiUrl } as model) =
         FontAwesomeCSSLoaded css ->
             ( { model | fontAwesomeCSS = css }, Cmd.none )
 
+        ElmDatepickerCSSLoaded css ->
+            ( { model | elmDatepickerCSS = css }, Cmd.none )
+
         SetDefaultCreator name ->
             ( { model | defaultCreator = name }, Cmd.none )
 

ui/app/src/Utils/DateTimePicker/Types.elm

@@ -0,0 +1,70 @@
+module Utils.DateTimePicker.Types exposing
+    ( DateTimePicker
+    , InputHourOrMinute(..)
+    , Msg(..)
+    , StartOrEnd(..)
+    , initDateTimePicker
+    , initFromStartAndEndTime
+    )
+
+import Time exposing (Posix)
+import Utils.DateTimePicker.Utils exposing (floorMinute)
+
+
+type alias DateTimePicker =
+    { month : Maybe Posix
+    , mouseOverDay : Maybe Posix
+    , startDate : Maybe Posix
+    , endDate : Maybe Posix
+    , startTime : Maybe Posix
+    , endTime : Maybe Posix
+    }
+
+
+type Msg
+    = NextMonth
+    | PrevMonth
+    | MouseOverDay Posix
+    | OnClickDay
+    | ClearMouseOverDay
+    | SetInputTime StartOrEnd InputHourOrMinute Int
+    | IncrementTime StartOrEnd InputHourOrMinute Int
+
+
+type StartOrEnd
+    = Start
+    | End
+
+
+type InputHourOrMinute
+    = InputHour
+    | InputMinute
+
+
+initDateTimePicker : DateTimePicker
+initDateTimePicker =
+    { month = Nothing
+    , mouseOverDay = Nothing
+    , startDate = Nothing
+    , endDate = Nothing
+    , startTime = Nothing
+    , endTime = Nothing
+    }
+
+
+initFromStartAndEndTime : Maybe Posix -> Maybe Posix -> DateTimePicker
+initFromStartAndEndTime start end =
+    let
+        startTime =
+            Maybe.map (\s -> floorMinute s) start
+
+        endTime =
+            Maybe.map (\e -> floorMinute e) end
+    in
+    { month = start
+    , mouseOverDay = Nothing
+    , startDate = start
+    , endDate = end
+    , startTime = startTime
+    , endTime = endTime
+    }