Commit 68cdd649 authored by Cédric F.'s avatar Cédric F.

Overlay location events

parent b22f20af
Pipeline #5434587 passed with stage
in 1 minute and 36 seconds
......@@ -38,6 +38,7 @@ type alias Event =
, to : Date
, color : Color
, label : String
, location : Bool
}
......@@ -46,6 +47,7 @@ type alias EventForm =
, to : String
, color : String
, label : String
, location : Bool
}
......@@ -60,7 +62,7 @@ initialModel =
, hideUnproductiveYears = False
, events = []
, eventFormOpen = -1
, eventForm = EventForm "" "" "" ""
, eventForm = EventForm "" "" "" "" False
, modalOpen = False
, now = 0
}
......@@ -105,11 +107,12 @@ type NewEventField
type Msg
= Tick Time
| NewUrl Navigation.Location
| NewDateOfBirth String
| NewBirthDate String
| NewLifeExpectancy String
| HideUnproductiveYears Bool
| ShowEventForm Int
| UpdateEvent NewEventField String
| UpdateEventLocation Bool
| SaveEvent
| DeleteEvent
| NewConfig String
......
......@@ -79,16 +79,18 @@ encodeEvent event =
, ( "to", encodeDate event.to )
, ( "color", encodeColor event.color )
, ( "label", Encode.string event.label )
, ( "location", Encode.bool event.location )
]
eventDecoder : Decode.Decoder Event
eventDecoder =
Decode.map4 Event
Decode.map5 Event
(Decode.field "from" dateDecoder)
(Decode.field "to" dateDecoder)
(Decode.field "color" colorDecoder)
(Decode.field "label" Decode.string)
(Decode.field "location" Decode.bool)
encodeDate : Date -> Encode.Value
......
......@@ -39,7 +39,7 @@ update msg model =
in
( newModel, Cmd.none )
NewDateOfBirth string ->
NewBirthDate string ->
case Date.fromString string of
Ok date ->
let
......@@ -102,6 +102,7 @@ update msg model =
, to = DateExtra.toISOString <| Date.fromTime model.now
, color = Color.Convert.colorToHex fallbackColor
, label = ""
, location = False
}
Just event ->
......@@ -109,6 +110,7 @@ update msg model =
, to = DateExtra.toISOString event.to
, color = Color.Convert.colorToHex event.color
, label = event.label
, location = event.location
}
in
( { model | eventFormOpen = newId, eventForm = eventForm }, Cmd.none )
......@@ -135,6 +137,16 @@ update msg model =
in
( { model | eventForm = newForm }, Cmd.none )
UpdateEventLocation bool ->
let
form =
model.eventForm
newForm =
{ form | location = bool }
in
( { model | eventForm = newForm }, Cmd.none )
SaveEvent ->
let
eventForm =
......@@ -148,6 +160,7 @@ update msg model =
, color =
Color.Convert.hexToColor eventForm.color |> Maybe.withDefault fallbackColor
, label = eventForm.label
, location = eventForm.location
}
newEvents =
......
......@@ -39,7 +39,7 @@ legendWidth =
weekWidth : number
weekWidth =
9
10
weekBorder : number
......@@ -208,6 +208,11 @@ week model year week =
events =
List.filter match model.events
|> List.filter (\event -> not event.location)
locations =
List.filter match model.events
|> List.filter .location
colors =
List.map .color events
......@@ -229,9 +234,36 @@ week model year week =
firstColor
(List.drop 1 colors)
filled color =
square color =
Collage.square weekWidth |> Collage.filled color
letter =
List.head locations
|> Maybe.andThen
(\location ->
Just
(location.label
|> String.left 1
|> String.toUpper
|> Text.fromString
|> Text.monospace
|> Text.height weekWidth
|> Text.bold
|> Text.color Color.white
|> Collage.text
|> Collage.moveY 1
)
)
filled color =
Collage.group <|
case letter of
Nothing ->
[ square color ]
Just letter ->
[ square color, letter ]
outlined =
Collage.square (weekWidth - weekBorder) |> Collage.outlined lineStyle
in
......
......@@ -7,7 +7,7 @@ import DateExtra
import Color.Convert
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick, onSubmit)
import Html.Events exposing (..)
import Lifechart.Model exposing (..)
import Lifechart.Serializer as Serializer
......@@ -67,7 +67,7 @@ links : Model -> List (Html Msg)
links model =
let
demo =
"ewogICJiaXJ0aC1kYXRlIjogIjE5ODgtMDctMjQiLAogICJsaWZlLWV4cGVjdGFuY3kiOiA4MCwKICAia2lkLXVudGlsIjogMTgsCiAgIm9sZC1mcm9tIjogNzAsCiAgImhpZGUtdW5wcm9kdWN0aXZlLXllYXJzIjogZmFsc2UsCiAgImV2ZW50cyI6IFsKICAgIHsKICAgICAgImZyb20iOiAiMjAxMC0wOS0xNCIsCiAgICAgICJ0byI6ICIyMDE0LTAyLTAxIiwKICAgICAgImNvbG9yIjogIiNmNTc5MDAiLAogICAgICAibGFiZWwiOiAiY29sbGVnZSIKICAgIH0sCiAgICB7CiAgICAgICJmcm9tIjogIjIwMTUtMDYtMDEiLAogICAgICAidG8iOiAiMjAxNi0wNS0zMSIsCiAgICAgICJjb2xvciI6ICIjNzNkMjE2IiwKICAgICAgImxhYmVsIjogInRyaXAiCiAgICB9CiAgXQp9Cg=="
"ewogICJiaXJ0aC1kYXRlIjogIjE5ODgtMDctMjQiLAogICJsaWZlLWV4cGVjdGFuY3kiOiA4MCwKICAia2lkLXVudGlsIjogMTgsCiAgIm9sZC1mcm9tIjogNzAsCiAgImhpZGUtdW5wcm9kdWN0aXZlLXllYXJzIjogZmFsc2UsCiAgImV2ZW50cyI6IFsKICAgIHsKICAgICAgImZyb20iOiAiMjAxMC0wOS0xNCIsCiAgICAgICJ0byI6ICIyMDE0LTAyLTAxIiwKICAgICAgImNvbG9yIjogIiNmNTc5MDAiLAogICAgICAibGFiZWwiOiAiY29sbGVnZSIsCiAgICAgICJsb2NhdGlvbiI6IGZhbHNlCiAgICB9LAogICAgewogICAgICAiZnJvbSI6ICIyMDE1LTA2LTAxIiwKICAgICAgInRvIjogIjIwMTYtMDUtMzEiLAogICAgICAiY29sb3IiOiAiIzczZDIxNiIsCiAgICAgICJsYWJlbCI6ICJ0cmlwIiwKICAgICAgImxvY2F0aW9uIjogZmFsc2UKICAgIH0KICBdCn0K"
current =
Serializer.serialize model
......@@ -89,7 +89,7 @@ config model =
(List.append dateInputAttributes
[ class "form-control form-control-lg"
, value model.birthDateString
, onInput NewDateOfBirth
, onInput NewBirthDate
]
)
[]
......@@ -187,7 +187,12 @@ eventForm model index =
index == 0
delete =
a [ href "javascript:void(0)", onClick DeleteEvent ] [ text "delete" ]
a
[ class "btn btn-danger"
, href "javascript:void(0)"
, onClick DeleteEvent
]
[ text "Delete" ]
submit =
input
......@@ -207,6 +212,9 @@ eventForm model index =
[ submit ]
else
[ delete, submit ]
webkitHack =
style [ ( "width", "171px" ) ]
in
li [ class <| "list-group-item" ++ visibility ]
[ Html.form [ onSubmit SaveEvent ]
......@@ -218,6 +226,7 @@ eventForm model index =
(List.append dateInputAttributes
[ class "form-control"
, value event.from
, webkitHack
, onInput (UpdateEvent EventFrom)
]
)
......@@ -244,26 +253,51 @@ eventForm model index =
[ span [ class "input-group-addon" ] [ text "Label" ]
, input
[ class "form-control"
, placeholder "label"
, type_ "text"
, required True
, value event.label
, webkitHack
, onInput (UpdateEvent EventLabel)
]
[]
]
]
, div [ class "col-xs-2" ]
[ input
[ class "form-control"
, div [ class "col-xs-6" ]
[ label
[ class "form-check-inline"
, style [ ( "line-height", "2.5rem" ) ]
]
[ input
[ class "form-check-input"
, type_ "checkbox"
, checked event.location
, onCheck UpdateEventLocation
]
[]
, text " location (overlay)"
]
, input
[ class <|
"float-xs-right"
++ if event.location then
" hidden-xs-up"
else
""
, type_ "color"
, required True
, value event.color
, style [ ( "height", "2.5rem" ) ]
, style
[ ( "height", "2.5rem" )
, ( "width", "2.5rem" )
]
, onInput (UpdateEvent EventColor)
]
[]
]
, div [ class "col-xs-4 text-xs-right" ] actions
]
, div [ class "row form-group" ]
[ div [ class "col-xs-12 text-xs-right" ] actions
]
]
]
......@@ -282,11 +316,30 @@ events model =
, style
[ ( "width", "1rem" )
, ( "height", "1rem" )
, ( "line-height", "1rem" )
, ( "font-weight", "bold" )
, ( "color", "#FFFFFF" )
, ( "margin", "3px 0.5rem 0 0" )
, ( "background-color", Color.Convert.colorToHex event.color )
, ( "padding"
, if event.location then
"0 0 3px 3px"
else
"0"
)
, ( "background-color"
, if event.location then
"#000000"
else
Color.Convert.colorToHex event.color
)
]
]
[]
[ text <|
if event.location then
String.left 1 event.label
else
""
]
, span [] [ text event.label ]
]
, div [ class "col-xs-7 text-xs-right text-muted" ]
......
- UI to edit events
- responsive
- store location / countries
- birthDate input is glitchy on Firefox/Safari
- fail if event.from > event.to
- store goals
- responsive
......@@ -9,13 +9,15 @@
"from": "2010-09-14",
"to": "2014-02-01",
"color": "#f57900",
"label": "college"
"label": "college",
"location": false
},
{
"from": "2015-06-01",
"to": "2016-05-31",
"color": "#73d216",
"label": "trip"
"label": "trip",
"location": false
}
]
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment