module Timer.View exposing ( view ) import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (..) import Time exposing (Time) import Maybe import List import String import Msg exposing (Msg) import Model exposing (..) import Model.Id exposing (..) import Timer.Model exposing (..) import Timer.Model.State exposing (..) import Timer.Update exposing (..) import Timer.Msg as Timer import Edition.Model exposing (..) import Edition.Model.Name exposing (..) import Edition.Model.Time exposing (..) import Update exposing (..) import Utils.Maybe exposing (..) view : Model -> (Id, Timer) -> Html Msg view model (id, timer) = div [ [ ("timer", True) , ("isRinging", timer.state == Ringing) , ("isRunning", timer.state == Running) ] |> classList ] [ renderMaybeEdition model id Name (nameBlockReadOnly id timer) (nameBlockEdition id timer) , renderMaybeEdition model id Time (timeBlockReadOnly (id, timer)) (timeBlockEdition (id, timer)) , playPauseTimer (id, timer) , stopTimer (id, timer) , removeTimer (id, timer) ] nameBlockReadOnly : Id -> Timer -> Html Msg nameBlockReadOnly id timer = div [ class "name" , onClick (Msg.Edit id Name) ] [ text (timerName id timer) ] nameBlockEdition : Id -> Timer -> Edition -> Html Msg nameBlockEdition id timer edition = div [ [ ("name", True) , ("edition", True) , ("empty", isEmpty edition) ] |> classList ] [ if isEmpty edition then text (timerName id timer) else edition.chars |> renderNameEdition |> flip String.append "_" |> text ] timerName : Id -> Timer -> String timerName id = Maybe.withDefault ("Timer " ++ toString id) << .name timeBlockReadOnly : (Id, Timer) -> Html Msg timeBlockReadOnly (id, timer) = div [ class "time" ] [ timeWithProgressBar (id, timer) ] timeBlockEdition : (Id, Timer) -> Edition -> Html Msg timeBlockEdition (id, timer) edition = div [ [ ("time", True) , ("edition", True) , ("empty", isEmpty edition) ] |> classList ] [ if isEmpty edition then timeWithProgressBar (id, timer) else text (editionView edition.chars) ] editionView : List Char -> String editionView numbers = let (minutes, seconds) = toMinutesAndSeconds numbers in minutes ++ " : " ++ seconds timeView : Time -> String timeView time = let totalSeconds = ceiling (time / 1000) totalMinutes = totalSeconds // 60 restSeconds = totalSeconds `rem` 60 in (String.padLeft 2 '0' (toString totalMinutes)) ++ " : " ++ (String.padLeft 2 '0' (toString restSeconds)) timeWithProgressBar : (Id, Timer) -> Html Msg timeWithProgressBar (id, timer) = div [] [ span [ class "progressBar" , let width = 1 - (timer.time / timer.initialTime) |> (*) 100 |> toString |> flip String.append "%" in style [ ("width", width) ] , onClick (if timer.state == Ringing then Msg.UpdateTimer id Timer.Stop else Msg.NoOp) ] [] , span [ class "text" , onClick (Msg.Edit id Time) ] [ text (timeView timer.time) ] ] playPauseTimer : (Id, Timer) -> Html Msg playPauseTimer (id, timer) = button [ class <| "playPause" , onClick (Msg.UpdateTimer id Timer.ToggleRunning) ] [ let icon = if timer.state == Running then "fa-pause" else "fa-play" in i [ class <| "fa fa-fw " ++ icon ] [] ] stopTimer : (Id, Timer) -> Html Msg stopTimer (id, timer) = button [ class <| "stop" , onClick (Msg.UpdateTimer id Timer.Stop) ] [ i [ class "fa fa-fw fa-stop" ] [] ] removeTimer : (Id, Timer) -> Html Msg removeTimer (id, timer) = button [ class <| "remove" , onClick (Msg.RemoveTimer id) ] [ i [ class "fa fa-fw fa-remove" ] [] ] renderMaybeEdition : Model -> Id -> Kind -> Html Msg -> (Edition -> Html Msg) -> Html Msg renderMaybeEdition model id kind readOnlyView editionView = let maybeEdition = filterMaybe (\edition -> edition.id == id) model.edition in case maybeEdition of Just edition -> if edition.kind == kind then editionView edition else readOnlyView Nothing -> readOnlyView