Commit 4669324a authored by Cédric F.'s avatar Cédric F.

Allow to change date of birth in Firefox

Firefox doesn't support input[type="date"] yet:
https://bugzilla.mozilla.org/show_bug.cgi?id=888320
parent 3a59777a
Pipeline #5385413 passed with stage
in 1 minute and 1 second
/elm-stuff/
/dist
/lifechart.js
/lifechart.min.js
......@@ -9,6 +9,7 @@ import DateExtra
type alias Model =
{ dateOfBirth : Date
, dateOfBirthString : String
, kidUntil : Int
, oldFrom : Int
, lifeExpectancy : Int
......@@ -39,7 +40,8 @@ type alias Event =
initialModel : Model
initialModel =
{ dateOfBirth = DateExtra.unsafeFromString "1988-07-14"
{ dateOfBirth = DateExtra.unsafeFromString "1988-07-24"
, dateOfBirthString = "1988-07-24"
, kidUntil = 18
, oldFrom = 70
, lifeExpectancy = 80
......@@ -55,6 +57,7 @@ mergeJsonModel : JsonModel -> Model
mergeJsonModel jsonModel =
{ initialModel
| dateOfBirth = jsonModel.dateOfBirth
, dateOfBirthString = DateExtra.toISOString jsonModel.dateOfBirth
, kidUntil = jsonModel.kidUntil
, oldFrom = jsonModel.oldFrom
, lifeExpectancy = jsonModel.lifeExpectancy
......
module Lifechart.Update exposing (init, update)
import Navigation
import Date
import DateExtra
import Color.Convert
import Lifechart.Model exposing (..)
......@@ -37,14 +38,16 @@ update msg model =
( newModel, Cmd.none )
NewDateOfBirth string ->
let
date =
DateExtra.fromStringWithFallback string model.dateOfBirth
newModel =
{ model | dateOfBirth = date }
in
( newModel, updateUrl newModel )
case Date.fromString string of
Ok date ->
let
newModel =
{ model | dateOfBirthString = string, dateOfBirth = date }
in
( newModel, updateUrl newModel )
Err _ ->
( { model | dateOfBirthString = string }, Cmd.none )
NewLifeExpectancy string ->
let
......
......@@ -85,7 +85,10 @@ form model =
[ input
[ class "form-control form-control-lg"
, type_ "date"
, value <| DateExtra.toISOString model.dateOfBirth
, required True
, placeholder "YYYY-MM-DD"
, pattern "[1-2]\\d{3}-[0-1]\\d-[0-3]\\d"
, value model.dateOfBirthString
, onInput NewDateOfBirth
]
[]
......@@ -97,6 +100,7 @@ form model =
[ input
[ class "form-control form-control-lg"
, type_ "number"
, required True
, value <| toString model.lifeExpectancy
, onInput NewLifeExpectancy
]
......@@ -123,6 +127,7 @@ newEvent model =
, input
[ class "form-control"
, type_ "date"
, required True
, onInput (UpdateNewEvent EventFrom)
]
[]
......@@ -134,6 +139,7 @@ newEvent model =
, input
[ class "form-control"
, type_ "date"
, required True
, onInput (UpdateNewEvent EventTo)
]
[]
......@@ -147,6 +153,7 @@ newEvent model =
, input
[ class "form-control"
, type_ "text"
, required True
, onInput (UpdateNewEvent EventLabel)
]
[]
......@@ -158,6 +165,7 @@ newEvent model =
, input
[ class "form-control"
, type_ "color"
, required True
, style [ ( "height", "2.5rem" ) ]
, onInput (UpdateNewEvent EventColor)
]
......
......@@ -2,7 +2,7 @@
Spend your time wisely.
https://infertux.com/labs/lifechart/index.html
https://infertux.com/labs/lifechart/
## Elm
......
- add polyfill for date inputs (Firefox)
- validate form for add event (non-empty label + dates)
- UI to edit events
- hideUnproductiveYears : Bool
https://www.reddit.com/r/GetMotivated/comments/1vyf9r/made_for_myself_thought_of_you_weeks_left/cexas8u
......
#!/bin/bash -eux
cd $(dirname $0)
elm-make Lifechart.elm --warn --output lifechart.js
uglifyjs --mangle --screw-ie8 --output lifechart.min.js -- lifechart.js
[ -d dist ] || mkdir dist
cp -v index.html lifechart.min.js dist/
......@@ -2,9 +2,22 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Visualize your life on a chart">
<title>Lifechart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
input:invalid {
box-shadow: 0 0 3px 1px red;
}
input:focus:invalid {
outline: none;
}
</style>
</head>
<body class="m-1">
......
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