TimeAgo.hs

{-|
Module: IHP.View.TimeAgo
Description: View Helpers for dealing with Time and Dates
Copyright: (c) digitally induced GmbH, 2020
-}
module IHP.View.TimeAgo (timeAgo, dateTime, date, time) where

import Prelude
import Data.Text (Text)
import Data.Time.Clock (UTCTime)
import Data.Time.Format (formatTime, defaultTimeLocale)
import Data.String.Conversions (cs)
import Data.Time.Format.ISO8601 (iso8601Show)
import IHP.HSX.ConvertibleStrings ()
import Text.Blaze.Html5 (Html, (!))
import qualified Text.Blaze.Html5 as H
import qualified Text.Blaze.Html5.Attributes as A

-- | __Display time like @5 minutes ago@__
--
-- Render's a @\<time\>@ HTML-Element. Will be displayed like @5 minutes ago@, @1 day ago@, etc..
-- 
-- Requires the javascript helpers to be available. Then the time will displayed in the current browser
-- timezone.
--
-- When the js helper is not available, the time will be displayed with the format: DD.MM.YYYY, HH:MM
--
-- __Example:__ Generated HTML
--
-- >>> <div>{timeAgo (project.createdAt)}</div>
-- <div><time class="time-ago">31.08.2007, 16:47</time></div>
--
-- __Example:__ HTML after javascript helpers have been applied
--
-- >>> <div>{timeAgo (project.createdAt)}</div>
-- <div><time class="time-ago">a while ago</time></div>
timeAgo :: UTCTime -> Html
timeAgo = timeElement "time-ago"

-- | __Display time like @31.08.2007, 16:47@__
--
-- Render's a @\<time\>@ HTML-Element for displaying time and date.
-- 
-- Requires the javascript helpers to be available. Then the date and time will displayed in the current browser
-- timezone.
--
-- The js helper uses `toLocaleDateString` to display the date in the browsers locale format.
--
-- __Example:__ Generated HTML
--
-- >>> <div>{dateTime (project.createdAt)}</div>
-- <div><time class="date-time">31.08.2007, 16:47</time></div>
--
-- __Example:__ HTML after javascript helpers have been applied
--
-- >>> <div>{dateTime (project.createdAt)}</div>
-- <div><time class="date-time">31.08.2007, 16:47 Uhr</time></div>
dateTime :: UTCTime -> Html
dateTime = timeElement "date-time"

-- | __Display date like @31.08.2007@__
--
-- Render's a @\<time\>@ HTML-Element for displaying the date.
-- 
-- Requires the javascript helpers to be available. Then the date will displayed in the current browser
-- locale format and timezone.
--
-- The js helper uses `toLocaleDateString` to display the date in the browsers locale format.
--
-- __Example:__ Generated HTML
--
-- >>> <div>{date (project.createdAt)}</div>
-- <div><time class="date">31.08.2007, 16:47</time></div>
--
-- __Example:__ HTML after javascript helpers have been applied
--
-- >>> <div>{date (project.createdAt)}</div>
-- <div><time class="date">31.08.2007</time></div>
date :: UTCTime -> Html
date = timeElement "date"

-- | __Display time like @16:47@__
--
-- Render's a @\<time\>@ HTML-Element for displaying the time.
-- 
-- Requires the javascript helpers to be available. Then the time will displayed in the current browser
-- timezone.
--
-- The js helper uses `toLocaleDateString` to display the date in the browsers locale format.
--
-- __Example:__ Generated HTML
--
-- >>> <div>{time (project.createdAt)}</div>
-- <div><time class="time">16:47</time></div>
--
-- __Example:__ HTML after javascript helpers have been applied
--
-- >>> <div>{time (project.createdAt)}</div>
-- <div><time class="time">16:47 Uhr</time></div>
time :: UTCTime -> Html
time = timeElement "time"

timeElement :: Text -> UTCTime -> Html
timeElement className dateTime = H.time ! A.class_ (cs className) ! A.datetime (cs $ iso8601Show dateTime) $ cs (beautifyUtcTime dateTime)

beautifyUtcTime :: UTCTime -> String
beautifyUtcTime utcTime = formatTime defaultTimeLocale "%d.%m.%Y, %H:%M" utcTime