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

5 files changed, 55 insertions, 24 deletions

diff --git a/client/index.html b/client/index.html
index facf4e98623c..df63ffa062eb 100644
--- a/client/index.html
+++ b/client/index.html
@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="google-signin-client_id" content="580018768696-4beppspj6cu7rhjnfgok8lbmh9a4n3ok.apps.googleusercontent.com">
     <title>Elm SPA</title>
-    <link rel="stylesheet" href="./output.css" />
+    <link rel="stylesheet" type="text/css" href="./output.css" />
+    <link rel="stylesheet" type="text/css" href="./print.css" media="print" />
     <script src="https://apis.google.com/js/platform.js" async defer></script>
     <script src="./Main.min.js"></script>
   </head>
@@ -27,7 +28,11 @@
        });
      }
 
-     Elm.Main.init({node: document.getElementById("mount")});
+     var app = Elm.Main.init({node: document.getElementById("mount")});
+
+     app.ports.printPage.subscribe(function() {
+       window.print();
+     });
     </script>
   </body>
 </html>
diff --git a/client/print.css b/client/print.css
new file mode 100644
index 000000000000..3cfb279230cb
--- /dev/null
+++ b/client/print.css
@@ -0,0 +1,3 @@
+.no-print {
+  display: none;
+}
diff --git a/client/src/State.elm b/client/src/State.elm
index d3db7ddf2967..a8970df24d03 100644
--- a/client/src/State.elm
+++ b/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 ->
diff --git a/client/src/UI.elm b/client/src/UI.elm
index f96dcd8b5cc3..f959b0cc7836 100644
--- a/client/src/UI.elm
+++ b/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 ]
diff --git a/client/src/User.elm b/client/src/User.elm
index 48aca865231d..660c3aa7dce0 100644
--- a/client/src/User.elm
+++ b/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
                 ]
         )