ui: Add friendly date to Mailbox message view

- Refactor some date stuff

ui/src/Data/Date.elm

@@ -0,0 +1,21 @@
+module Data.Date exposing (..)
+
+import Date exposing (Date)
+import Json.Decode as Decode exposing (..)
+
+
+{-| Decode an ISO 8601 date
+-}
+date : Decoder Date
+date =
+    let
+        convert : String -> Decoder Date
+        convert raw =
+            case Date.fromString raw of
+                Ok date ->
+                    succeed date
+
+                Err error ->
+                    fail error
+    in
+        string |> andThen convert

ui/src/Data/Message.elm

@@ -1,5 +1,7 @@
 module Data.Message exposing (..)
 
+import Data.Date exposing (date)
+import Date exposing (Date)
 import Json.Decode as Decode exposing (..)
 import Json.Decode.Pipeline exposing (..)
 
@@ -10,7 +12,7 @@ type alias Message =
     , from : String
     , to : List String
     , subject : String
-    , date : String
+    , date : Date
     , size : Int
     , seen : Bool
     , text : String
@@ -34,7 +36,7 @@ decoder =
         |> optional "from" string ""
         |> required "to" (list string)
         |> optional "subject" string ""
-        |> required "date" string
+        |> required "date" date
         |> required "size" int
         |> required "seen" bool
         |> required "text" string

ui/src/Data/MessageHeader.elm

@@ -1,5 +1,6 @@
 module Data.MessageHeader exposing (..)
 
+import Data.Date exposing (date)
 import Date exposing (Date)
 import Json.Decode as Decode exposing (..)
 import Json.Decode.Pipeline exposing (..)
@@ -28,18 +29,3 @@ decoder =
         |> required "date" date
         |> required "size" int
         |> required "seen" bool
-
-
-date : Decoder Date
-date =
-    let
-        convert : String -> Decoder Date
-        convert raw =
-            case Date.fromString raw of
-                Ok date ->
-                    succeed date
-
-                Err error ->
-                    fail error
-    in
-        string |> andThen convert

ui/src/Page/Mailbox.elm

@@ -5,6 +5,7 @@ import Data.MessageHeader as MessageHeader exposing (MessageHeader)
 import Data.Session as Session exposing (Session)
 import Date exposing (Date)
 import DateFormat.Relative as Relative
+import DateFormat
 import Json.Decode as Decode exposing (Decoder)
 import Html exposing (..)
 import Html.Attributes
@@ -538,7 +539,7 @@ viewMessage message bodyMode =
                 , dt [] [ text "To:" ]
                 , dd [] (List.map text message.to)
                 , dt [] [ text "Date:" ]
-                , dd [] [ text message.date ]
+                , dd [] [ verboseDate message.date ]
                 , dt [] [ text "Subject:" ]
                 , dd [] [ text message.subject ]
                 ]
@@ -615,6 +616,27 @@ relativeDate model date =
     Relative.relativeTime model.now date |> text
 
 
+verboseDate : Date -> Html Msg
+verboseDate date =
+    DateFormat.format
+        [ DateFormat.monthNameFull
+        , DateFormat.text " "
+        , DateFormat.dayOfMonthSuffix
+        , DateFormat.text ", "
+        , DateFormat.yearNumber
+        , DateFormat.text " "
+        , DateFormat.hourNumber
+        , DateFormat.text ":"
+        , DateFormat.minuteFixed
+        , DateFormat.text ":"
+        , DateFormat.secondFixed
+        , DateFormat.text " "
+        , DateFormat.amPmUppercase
+        ]
+        date
+        |> text
+
+
 
 -- UTILITY
 

ui/src/Page/Monitor.elm

@@ -94,19 +94,15 @@ view session model =
 viewMessage : MessageHeader -> Html Msg
 viewMessage message =
     tr [ Events.onClick (OpenMessage message) ]
-        [ td [] [ text (timestamp message.date) ]
+        [ td [] [ shortDate message.date ]
         , td [ class "desktop" ] [ text message.from ]
         , td [] [ text message.mailbox ]
         , td [] [ text message.subject ]
         ]
 
 
-
--- UTILITY
-
-
-timestamp : Date -> String
-timestamp =
+shortDate : Date -> Html Msg
+shortDate date =
     format
         [ dayOfMonthFixed
         , DateFormat.text "-"
@@ -118,3 +114,5 @@ timestamp =
         , DateFormat.text " "
         , amPmUppercase
         ]
+        date
+        |> text