mirror of
https://github.com/jhillyerd/inbucket.git
synced 2025-12-17 17:47:03 +00:00
ui: Refactor page view/framing to handle titles
This commit is contained in:
@@ -255,10 +255,7 @@ setRoute route model =
|
|||||||
|
|
||||||
Route.Status ->
|
Route.Status ->
|
||||||
( { model | page = Status Status.init }
|
( { model | page = Status Status.init }
|
||||||
, Cmd.batch
|
, Cmd.map StatusMsg Status.load
|
||||||
[ Ports.windowTitle "Inbucket Status"
|
|
||||||
, Cmd.map StatusMsg Status.load
|
|
||||||
]
|
|
||||||
, Session.none
|
, Session.none
|
||||||
)
|
)
|
||||||
in
|
in
|
||||||
@@ -313,27 +310,30 @@ view model =
|
|||||||
, recentActive = mailbox
|
, recentActive = mailbox
|
||||||
}
|
}
|
||||||
|
|
||||||
frame =
|
framePage :
|
||||||
Page.frame controls model.session
|
ActivePage
|
||||||
|
-> (msg -> Msg)
|
||||||
|
-> { title : String, content : Html msg }
|
||||||
|
-> Document Msg
|
||||||
|
framePage page toMsg { title, content } =
|
||||||
|
Document title
|
||||||
|
[ content
|
||||||
|
|> Html.map toMsg
|
||||||
|
|> Page.frame controls model.session page
|
||||||
|
]
|
||||||
in
|
in
|
||||||
Document "Inbucket Document"
|
case model.page of
|
||||||
[ case model.page of
|
Home subModel ->
|
||||||
Home subModel ->
|
framePage Page.Other HomeMsg (Home.view model.session subModel)
|
||||||
Html.map HomeMsg (Home.view model.session subModel)
|
|
||||||
|> frame Page.Other
|
|
||||||
|
|
||||||
Mailbox subModel ->
|
Mailbox subModel ->
|
||||||
Html.map MailboxMsg (Mailbox.view model.session subModel)
|
framePage Page.Mailbox MailboxMsg (Mailbox.view model.session subModel)
|
||||||
|> frame Page.Mailbox
|
|
||||||
|
|
||||||
Monitor subModel ->
|
Monitor subModel ->
|
||||||
Html.map MonitorMsg (Monitor.view model.session subModel)
|
framePage Page.Monitor MonitorMsg (Monitor.view model.session subModel)
|
||||||
|> frame Page.Monitor
|
|
||||||
|
|
||||||
Status subModel ->
|
Status subModel ->
|
||||||
Html.map StatusMsg (Status.view model.session subModel)
|
framePage Page.Status StatusMsg (Status.view model.session subModel)
|
||||||
|> frame Page.Status
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -19,12 +19,7 @@ type alias Model =
|
|||||||
|
|
||||||
init : ( Model, Cmd Msg )
|
init : ( Model, Cmd Msg )
|
||||||
init =
|
init =
|
||||||
( Model ""
|
( Model "", cmdGreeting )
|
||||||
, Cmd.batch
|
|
||||||
[ Ports.windowTitle "Inbucket"
|
|
||||||
, cmdGreeting
|
|
||||||
]
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
cmdGreeting : Cmd Msg
|
cmdGreeting : Cmd Msg
|
||||||
@@ -57,12 +52,15 @@ update session msg model =
|
|||||||
-- VIEW --
|
-- VIEW --
|
||||||
|
|
||||||
|
|
||||||
view : Session -> Model -> Html Msg
|
view : Session -> Model -> { title : String, content : Html Msg }
|
||||||
view session model =
|
view session model =
|
||||||
div [ id "page" ]
|
{ title = "Inbucket"
|
||||||
[ Html.node "rendered-html"
|
, content =
|
||||||
[ class "greeting"
|
div [ id "page" ]
|
||||||
, property "content" (Encode.string model.greeting)
|
[ Html.node "rendered-html"
|
||||||
|
[ class "greeting"
|
||||||
|
, property "content" (Encode.string model.greeting)
|
||||||
|
]
|
||||||
|
[]
|
||||||
]
|
]
|
||||||
[]
|
}
|
||||||
]
|
|
||||||
|
|||||||
@@ -87,8 +87,7 @@ init mailboxName selection =
|
|||||||
load : String -> Cmd Msg
|
load : String -> Cmd Msg
|
||||||
load mailboxName =
|
load mailboxName =
|
||||||
Cmd.batch
|
Cmd.batch
|
||||||
[ Ports.windowTitle (mailboxName ++ " - Inbucket")
|
[ Task.perform Tick Time.now
|
||||||
, Task.perform Tick Time.now
|
|
||||||
, getList mailboxName
|
, getList mailboxName
|
||||||
]
|
]
|
||||||
|
|
||||||
@@ -463,29 +462,32 @@ getMessage mailboxName id =
|
|||||||
-- VIEW
|
-- VIEW
|
||||||
|
|
||||||
|
|
||||||
view : Session -> Model -> Html Msg
|
view : Session -> Model -> { title : String, content : Html Msg }
|
||||||
view session model =
|
view session model =
|
||||||
div [ id "page", class "mailbox" ]
|
{ title = model.mailboxName ++ " - Inbucket"
|
||||||
[ viewMessageList session model
|
, content =
|
||||||
, main_
|
div [ id "page", class "mailbox" ]
|
||||||
[ id "message" ]
|
[ viewMessageList session model
|
||||||
[ case model.state of
|
, main_
|
||||||
ShowingList _ NoMessage ->
|
[ id "message" ]
|
||||||
text
|
[ case model.state of
|
||||||
("Select a message on the left,"
|
ShowingList _ NoMessage ->
|
||||||
++ " or enter a different username into the box on upper right."
|
text
|
||||||
)
|
("Select a message on the left,"
|
||||||
|
++ " or enter a different username into the box on upper right."
|
||||||
|
)
|
||||||
|
|
||||||
ShowingList _ (ShowingMessage { message }) ->
|
ShowingList _ (ShowingMessage { message }) ->
|
||||||
viewMessage message model.bodyMode
|
viewMessage message model.bodyMode
|
||||||
|
|
||||||
ShowingList _ (Transitioning { message }) ->
|
ShowingList _ (Transitioning { message }) ->
|
||||||
viewMessage message model.bodyMode
|
viewMessage message model.bodyMode
|
||||||
|
|
||||||
_ ->
|
_ ->
|
||||||
text ""
|
text ""
|
||||||
|
]
|
||||||
]
|
]
|
||||||
]
|
}
|
||||||
|
|
||||||
|
|
||||||
viewMessageList : Session -> Model -> Html Msg
|
viewMessageList : Session -> Model -> Html Msg
|
||||||
|
|||||||
@@ -32,12 +32,7 @@ type alias Model =
|
|||||||
|
|
||||||
init : ( Model, Cmd Msg )
|
init : ( Model, Cmd Msg )
|
||||||
init =
|
init =
|
||||||
( Model False []
|
( Model False [], Ports.monitorCommand True )
|
||||||
, Cmd.batch
|
|
||||||
[ Ports.windowTitle "Inbucket Monitor"
|
|
||||||
, Ports.monitorCommand True
|
|
||||||
]
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -95,32 +90,35 @@ update session msg model =
|
|||||||
-- VIEW
|
-- VIEW
|
||||||
|
|
||||||
|
|
||||||
view : Session -> Model -> Html Msg
|
view : Session -> Model -> { title : String, content : Html Msg }
|
||||||
view session model =
|
view session model =
|
||||||
div [ id "page" ]
|
{ title = "Inbucket Monitor"
|
||||||
[ h1 [] [ text "Monitor" ]
|
, content =
|
||||||
, p []
|
div [ id "page" ]
|
||||||
[ text "Messages will be listed here shortly after delivery. "
|
[ h1 [] [ text "Monitor" ]
|
||||||
, em []
|
, p []
|
||||||
[ text
|
[ text "Messages will be listed here shortly after delivery. "
|
||||||
(if model.connected then
|
, em []
|
||||||
"Connected."
|
[ text
|
||||||
|
(if model.connected then
|
||||||
|
"Connected."
|
||||||
|
|
||||||
else
|
else
|
||||||
"Disconnected!"
|
"Disconnected!"
|
||||||
)
|
)
|
||||||
|
]
|
||||||
|
]
|
||||||
|
, table [ id "monitor" ]
|
||||||
|
[ thead []
|
||||||
|
[ th [] [ text "Date" ]
|
||||||
|
, th [ class "desktop" ] [ text "From" ]
|
||||||
|
, th [] [ text "Mailbox" ]
|
||||||
|
, th [] [ text "Subject" ]
|
||||||
|
]
|
||||||
|
, tbody [] (List.map viewMessage model.messages)
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
, table [ id "monitor" ]
|
}
|
||||||
[ thead []
|
|
||||||
[ th [] [ text "Date" ]
|
|
||||||
, th [ class "desktop" ] [ text "From" ]
|
|
||||||
, th [] [ text "Mailbox" ]
|
|
||||||
, th [] [ text "Subject" ]
|
|
||||||
]
|
|
||||||
, tbody [] (List.map viewMessage model.messages)
|
|
||||||
]
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
viewMessage : MessageHeader -> Html Msg
|
viewMessage : MessageHeader -> Html Msg
|
||||||
|
|||||||
@@ -217,38 +217,41 @@ getMetrics =
|
|||||||
-- VIEW --
|
-- VIEW --
|
||||||
|
|
||||||
|
|
||||||
view : Session -> Model -> Html Msg
|
view : Session -> Model -> { title : String, content : Html Msg }
|
||||||
view session model =
|
view session model =
|
||||||
div [ id "page" ]
|
{ title = "Inbucket Status"
|
||||||
[ h1 [] [ text "Status" ]
|
, content =
|
||||||
, case model.metrics of
|
div [ id "page" ]
|
||||||
Nothing ->
|
[ h1 [] [ text "Status" ]
|
||||||
div [] [ text "Loading metrics..." ]
|
, case model.metrics of
|
||||||
|
Nothing ->
|
||||||
|
div [] [ text "Loading metrics..." ]
|
||||||
|
|
||||||
Just metrics ->
|
Just metrics ->
|
||||||
div []
|
div []
|
||||||
[ framePanel "General Metrics"
|
[ framePanel "General Metrics"
|
||||||
[ viewMetric model.sysMem
|
[ viewMetric model.sysMem
|
||||||
, viewMetric model.heapSize
|
, viewMetric model.heapSize
|
||||||
, viewMetric model.heapUsed
|
, viewMetric model.heapUsed
|
||||||
, viewMetric model.heapObjects
|
, viewMetric model.heapObjects
|
||||||
, viewMetric model.goRoutines
|
, viewMetric model.goRoutines
|
||||||
, viewMetric model.webSockets
|
, viewMetric model.webSockets
|
||||||
|
]
|
||||||
|
, framePanel "SMTP Metrics"
|
||||||
|
[ viewMetric model.smtpConnOpen
|
||||||
|
, viewMetric model.smtpConnTotal
|
||||||
|
, viewMetric model.smtpReceivedTotal
|
||||||
|
, viewMetric model.smtpErrorsTotal
|
||||||
|
, viewMetric model.smtpWarnsTotal
|
||||||
|
]
|
||||||
|
, framePanel "Storage Metrics"
|
||||||
|
[ viewMetric model.retentionDeletesTotal
|
||||||
|
, viewMetric model.retainedCount
|
||||||
|
, viewMetric model.retainedSize
|
||||||
|
]
|
||||||
]
|
]
|
||||||
, framePanel "SMTP Metrics"
|
]
|
||||||
[ viewMetric model.smtpConnOpen
|
}
|
||||||
, viewMetric model.smtpConnTotal
|
|
||||||
, viewMetric model.smtpReceivedTotal
|
|
||||||
, viewMetric model.smtpErrorsTotal
|
|
||||||
, viewMetric model.smtpWarnsTotal
|
|
||||||
]
|
|
||||||
, framePanel "Storage Metrics"
|
|
||||||
[ viewMetric model.retentionDeletesTotal
|
|
||||||
, viewMetric model.retainedCount
|
|
||||||
, viewMetric model.retainedSize
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
viewMetric : Metric -> Html Msg
|
viewMetric : Metric -> Html Msg
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ port module Ports exposing
|
|||||||
, monitorMessage
|
, monitorMessage
|
||||||
, onSessionChange
|
, onSessionChange
|
||||||
, storeSession
|
, storeSession
|
||||||
, windowTitle
|
|
||||||
)
|
)
|
||||||
|
|
||||||
import Data.Session exposing (Persistent)
|
import Data.Session exposing (Persistent)
|
||||||
@@ -20,6 +19,3 @@ port onSessionChange : (Value -> msg) -> Sub msg
|
|||||||
|
|
||||||
|
|
||||||
port storeSession : Persistent -> Cmd msg
|
port storeSession : Persistent -> Cmd msg
|
||||||
|
|
||||||
|
|
||||||
port windowTitle : String -> Cmd msg
|
|
||||||
|
|||||||
@@ -34,8 +34,3 @@ function sessionObject() {
|
|||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
// Window title.
|
|
||||||
app.ports.windowTitle.subscribe(function (title) {
|
|
||||||
document.title = title
|
|
||||||
})
|
|
||||||
|
|||||||
Reference in New Issue
Block a user