Format date to something readable

src/Api.elm

@@ -6,6 +6,7 @@ import Http
 import Json.Decode as Json exposing (..)
 import Task
 import String
+import Date exposing (..)
 
 
 -- Internal Imports
@@ -77,10 +78,24 @@ alertDecoder =
         (field "labels" (Json.keyValuePairs Json.string))
         (field "inhibited" Json.bool)
         (Json.maybe (field "silenced" Json.int))
-        (field "startsAt" Json.string)
+        (field "startsAt" stringToDate)
         (field "generatorURL" Json.string)
 
 
+stringToDate : Decoder Date.Date
+stringToDate =
+    Json.string
+        |> andThen
+            (\val ->
+                case Date.fromString val of
+                    Err err ->
+                        Json.fail err
+
+                    Ok date ->
+                        Json.succeed <| date
+            )
+
+
 showResponseDecoder : Json.Decoder Silence
 showResponseDecoder =
     (Json.at [ "data" ] silenceDecoder)

src/Types.elm

@@ -3,6 +3,7 @@ module Types exposing (..)
 -- External Imports
 
 import Http exposing (Error)
+import Date exposing (Date)
 
 
 -- Internal Imports
@@ -45,7 +46,7 @@ type alias Alert =
     , silenced :
         Maybe Int
         -- TODO: See how to rename this on parsing from API to silenceId
-    , startsAt : String
+    , startsAt : Date
     , generatorUrl : String
     }
 

src/Utils/Date.elm

@@ -0,0 +1,42 @@
+module Utils.Date exposing (..)
+
+import Date exposing (Month(..))
+
+
+dateFormat : Date.Date -> String
+dateFormat date =
+  let
+   time = String.join ":" <| List.map toString [Date.hour date, Date.minute date, Date.second date]
+   d = String.join "/" <| List.map toString [dateToInt <| Date.month date, Date.day date, Date.year date]
+  in
+      String.join " " ["Since", d, "at", time]
+
+
+dateToInt : Date.Month -> Int
+dateToInt month =
+  case month of
+    Jan ->
+      1
+    Feb ->
+      2
+    Mar ->
+      3
+    Apr ->
+      4
+    May ->
+      5
+    Jun ->
+      6
+    Jul ->
+      7
+    Aug ->
+      8
+    Sep ->
+      9
+    Oct ->
+      10
+    Nov ->
+      11
+    Dec ->
+      12
+

src/Views.elm

@@ -7,6 +7,7 @@ import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import String
 import Tuple
+import Utils.Date exposing (..)
 
 
 -- Internal Imports
@@ -90,7 +91,7 @@ blockView block =
 
 alertView : Alert -> Html msg
 alertView alert =
-    div [] [ text alert.startsAt ]
+    div [] [ text <| Utils.Date.dateFormat alert.startsAt ]