Add a tab to switch between editor and rendered view
This commit is contained in:
parent
bb18c8bd8c
commit
d9f9522365
40
src/Main.elm
40
src/Main.elm
|
@ -2,8 +2,8 @@ module Main exposing (main)
|
||||||
|
|
||||||
import Browser
|
import Browser
|
||||||
import Html exposing (Html)
|
import Html exposing (Html)
|
||||||
import Html.Events exposing (onInput)
|
import Html.Events exposing (onInput, onClick)
|
||||||
import Html.Attributes exposing (type_, class, value)
|
import Html.Attributes exposing (type_, class, classList, value)
|
||||||
import Bergamot.Syntax exposing (..)
|
import Bergamot.Syntax exposing (..)
|
||||||
import Bergamot.Search exposing (..)
|
import Bergamot.Search exposing (..)
|
||||||
import Bergamot.Rules exposing (..)
|
import Bergamot.Rules exposing (..)
|
||||||
|
@ -14,22 +14,49 @@ import Maybe
|
||||||
import Tuple
|
import Tuple
|
||||||
import Debug
|
import Debug
|
||||||
|
|
||||||
|
type Tab
|
||||||
|
= Editor
|
||||||
|
| Rendered
|
||||||
|
|
||||||
|
tabEq : Tab -> Tab -> Bool
|
||||||
|
tabEq t1 t2 =
|
||||||
|
case (t1, t2) of
|
||||||
|
(Editor, Editor) -> True
|
||||||
|
(Rendered, Rendered) -> True
|
||||||
|
_ -> False
|
||||||
|
|
||||||
type alias Model =
|
type alias Model =
|
||||||
{ program : String
|
{ program : String
|
||||||
, query : String
|
, query : String
|
||||||
|
, tab: Tab
|
||||||
}
|
}
|
||||||
type alias Flags = { rules: String, query: String }
|
type alias Flags = { rules: String, query: String }
|
||||||
type Msg
|
type Msg
|
||||||
= SetProgram String
|
= SetProgram String
|
||||||
| SetQuery String
|
| SetQuery String
|
||||||
|
| SetTab Tab
|
||||||
|
|
||||||
init : Flags -> (Model, Cmd Msg)
|
init : Flags -> (Model, Cmd Msg)
|
||||||
init fs = ({ program = fs.rules, query = fs.query }, Cmd.none)
|
init fs = ({ program = fs.rules, query = fs.query, tab = Editor }, Cmd.none)
|
||||||
|
|
||||||
viewSection : String -> Html Msg -> Html Msg
|
viewSection : String -> Html Msg -> Html Msg
|
||||||
viewSection name content =
|
viewSection name content =
|
||||||
Html.div [ class "bergamot-section" ] [ Html.em [ class "bergamot-section-heading" ] [ Html.text name ], content ]
|
Html.div [ class "bergamot-section" ] [ Html.em [ class "bergamot-section-heading" ] [ Html.text name ], content ]
|
||||||
|
|
||||||
|
viewTab : Tab -> Html Msg -> Html Msg -> Html Msg
|
||||||
|
viewTab tab editor rendered =
|
||||||
|
case tab of
|
||||||
|
Editor -> editor
|
||||||
|
Rendered -> rendered
|
||||||
|
|
||||||
|
viewTabSelector : Tab -> List (Tab, String) -> Html Msg
|
||||||
|
viewTabSelector tab tabNames = Html.div [ class "bergamot-tab-selector" ] <|
|
||||||
|
List.map (\(tabp, name) ->
|
||||||
|
Html.button
|
||||||
|
[ classList [("active", tabEq tab tabp)]
|
||||||
|
, onClick (SetTab tabp)
|
||||||
|
] [ Html.text name ]) tabNames
|
||||||
|
|
||||||
viewRule : Rule -> Html Msg
|
viewRule : Rule -> Html Msg
|
||||||
viewRule = latex << ruleToLatex
|
viewRule = latex << ruleToLatex
|
||||||
|
|
||||||
|
@ -56,9 +83,11 @@ viewProofTree progs querys = viewSection "Proof Tree" <|
|
||||||
|
|
||||||
view : Model -> Html Msg
|
view : Model -> Html Msg
|
||||||
view m = Html.div [ class "bergamot-root" ]
|
view m = Html.div [ class "bergamot-root" ]
|
||||||
[ viewSection "Rules" <| Html.textarea [ onInput SetProgram ] [ Html.text m.program ]
|
[ viewTabSelector m.tab [(Editor, "Rule Editor"), (Rendered, "Rendered Rules")]
|
||||||
|
, viewTab m.tab
|
||||||
|
(viewSection "Rules" <| Html.textarea [ onInput SetProgram ] [ Html.text m.program ])
|
||||||
|
(viewRules m.program)
|
||||||
, viewSection "Query" <| Html.input [ type_ "text", onInput SetQuery, value m.query ] []
|
, viewSection "Query" <| Html.input [ type_ "text", onInput SetQuery, value m.query ] []
|
||||||
, viewRules m.program
|
|
||||||
, viewProofTree m.program m.query
|
, viewProofTree m.program m.query
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -67,6 +96,7 @@ update msg m =
|
||||||
case msg of
|
case msg of
|
||||||
SetProgram prog -> ({ m | program = prog }, Cmd.none)
|
SetProgram prog -> ({ m | program = prog }, Cmd.none)
|
||||||
SetQuery query -> ({ m | query = query }, Cmd.none)
|
SetQuery query -> ({ m | query = query }, Cmd.none)
|
||||||
|
SetTab tab -> ({ m | tab = tab }, Cmd.none)
|
||||||
|
|
||||||
subscriptions : Model -> Sub Msg
|
subscriptions : Model -> Sub Msg
|
||||||
subscriptions _ = Sub.none
|
subscriptions _ = Sub.none
|
||||||
|
|
Loading…
Reference in New Issue
Block a user