Support printing user's itinerary

- Define print.css with media=print type (note: could've been handled with
  @media queries)
- Define printPage port to interop with window.print() JS function
- Support UI.wrapNoPrint to wrap components with a the no-print CSS

client/src/State.elm

@@ -1,4 +1,4 @@
-module State exposing (..)
+port module State exposing (..)
 
 import Array exposing (Array)
 import Browser
@@ -39,6 +39,7 @@ type Msg
     | UpdateTripComment String
     | ClearErrors
     | ToggleLoginForm
+    | PrintPage
       -- SPA
     | LinkClicked Browser.UrlRequest
     | UrlChanged Url.Url
@@ -476,11 +477,14 @@ userHome flags url key =
     )
 
 
+port printPage : () -> Cmd msg
+
+
 {-| The initial state for the application.
 -}
 init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
 init flags url key =
-    prod flags url key
+    userHome flags url key
 
 
 {-| Now that we have state, we need a function to change the state.
@@ -591,6 +595,9 @@ update msg model =
             , Cmd.none
             )
 
+        PrintPage ->
+            ( model, printPage () )
+
         LinkClicked urlRequest ->
             case urlRequest of
                 Browser.Internal url ->

client/src/UI.elm

@@ -310,3 +310,8 @@ datePicker { mDate, prompt, prefix, picker, onUpdate } =
     in
     div [ [ "w-1/2", "py-4", "mx-auto" ] |> Tailwind.use |> class ]
         [ DatePicker.view mDate settings picker |> Html.map onUpdate ]
+
+
+wrapNoPrint : Html State.Msg -> Html State.Msg
+wrapNoPrint component =
+    div [ [ "no-print" ] |> Tailwind.use |> class ] [ component ]

client/src/User.elm

@@ -78,19 +78,20 @@ renderTrip trip =
             |> Tailwind.use
             |> class
         ]
-        [ p []
-            [ text
-                (Date.toIsoString trip.startDate
-                    ++ " - "
-                    ++ Date.toIsoString trip.endDate
-                    ++ " -> "
-                    ++ trip.destination
-                )
-            ]
-        , UI.textButton
-            { label = "Delete"
-            , handleClick = State.AttemptDeleteTrip trip.destination trip.startDate
-            }
+        [ UI.paragraph
+            (Date.toIsoString trip.startDate
+                ++ " - "
+                ++ Date.toIsoString trip.endDate
+                ++ " -> "
+                ++ trip.destination
+            )
+        , UI.paragraph ("\"" ++ trip.comment ++ "\"")
+        , UI.wrapNoPrint
+            (UI.textButton
+                { label = "Delete"
+                , handleClick = State.AttemptDeleteTrip trip.destination trip.startDate
+                }
+            )
         ]
 
 
@@ -109,7 +110,15 @@ trips model =
                 UI.paragraph ("Error: " ++ Utils.explainHttpError e)
 
             RemoteData.Success xs ->
-                ul [] (xs |> List.map renderTrip)
+                div [ [ "mb-10" ] |> Tailwind.use |> class ]
+                    [ ul [ [ "my-4" ] |> Tailwind.use |> class ] (xs |> List.map renderTrip)
+                    , UI.wrapNoPrint
+                        (UI.simpleButton
+                            { label = "Print iternary"
+                            , handleClick = State.PrintPage
+                            }
+                        )
+                    ]
         ]
 
 
@@ -126,13 +135,15 @@ render model =
                         |> Tailwind.use
                     )
                 ]
-                [ UI.header 2 ("Welcome, " ++ session.username ++ "!")
-                , createTrip model
+                [ UI.wrapNoPrint (UI.header 2 ("Welcome, " ++ session.username ++ "!"))
+                , UI.wrapNoPrint (createTrip model)
                 , trips model
-                , UI.textButton
-                    { label = "Logout"
-                    , handleClick = State.AttemptLogout
-                    }
+                , UI.wrapNoPrint
+                    (UI.textButton
+                        { label = "Logout"
+                        , handleClick = State.AttemptLogout
+                        }
+                    )
                 , Common.allErrors model
                 ]
         )