Add a tab to switch between editor and rendered view

src/Main.elm

@@ -2,8 +2,8 @@ module Main exposing (main)
 
 import Browser
 import Html exposing (Html)
-import Html.Events exposing (onInput)
-import Html.Attributes exposing (type_, class, value)
+import Html.Events exposing (onInput, onClick)
+import Html.Attributes exposing (type_, class, classList, value)
 import Bergamot.Syntax exposing (..)
 import Bergamot.Search exposing (..)
 import Bergamot.Rules exposing (..)
@@ -14,22 +14,49 @@ import Maybe
 import Tuple
 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 =
     { program : String
     , query : String
+    , tab: Tab
     }
 type alias Flags = { rules: String, query: String }
 type Msg
     = SetProgram String
     | SetQuery String
+    | SetTab Tab
 
 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 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 = latex << ruleToLatex
 
@@ -56,9 +83,11 @@ viewProofTree progs querys = viewSection "Proof Tree" <|
 
 view : Model -> Html Msg
 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 ] []
-    , viewRules m.program
     , viewProofTree m.program m.query
     ]
 
@@ -67,6 +96,7 @@ update msg m =
     case msg of
         SetProgram prog -> ({ m | program = prog }, Cmd.none)
         SetQuery query -> ({ m | query = query }, Cmd.none)
+        SetTab tab -> ({ m | tab = tab }, Cmd.none)
 
 subscriptions : Model -> Sub Msg
 subscriptions _ = Sub.none