diff options
| -rw-r--r-- | client/index.html | 9 | ||||
| -rw-r--r-- | client/print.css | 3 | ||||
| -rw-r--r-- | client/src/State.elm | 11 | ||||
| -rw-r--r-- | client/src/UI.elm | 5 | ||||
| -rw-r--r-- | client/src/User.elm | 51 |
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 ] ) |