Add landing page

2024-11-14 19:19:30 +00:00 · 2020-05-02 22:37:54 -04:00 · 2020-05-02 22:37:54 -04:00 · 36f06bff2d
commit 36f06bff2d
parent a4b1c6c3ca
3 changed files with 113 additions and 4 deletions
--- a/assets/elm.json
+++ b/assets/elm.json
@ -8,7 +8,8 @@
        "direct": {
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
-            "elm/html": "1.0.0"
+            "elm/html": "1.0.0",
+            "mdgriffith/elm-ui": "1.1.5"
        },
        "indirect": {
            "elm/json": "1.1.3",
--- a/assets/src/Main.elm
+++ b/assets/src/Main.elm
@ -1,7 +1,116 @@
 module Main exposing (main)

-import Html exposing (h1, text)
+import Browser
+import Element exposing (..)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Element.Input as Input
+import Html exposing (Html)
+
+
+type User
+    = Moderator { name : String }
+
+
+type alias Model =
+    { name : String
+    , user : Maybe User
+    , error : Maybe String
+    }
+
+
+type Msg
+    = NameChanged String
+    | CreateRoom
+
+
+init : () -> ( Model, Cmd Msg )
+init _ =
+    ( { name = ""
+      , user = Nothing
+      , error = Nothing
+      }
+    , Cmd.none
+    )


 main =
-    h1 [] [ text "Welcome to Planning Poker!" ]
+    Browser.element
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = \_ -> Sub.none
+        }
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        NameChanged newName ->
+            ( { model | name = newName }, Cmd.none )
+
+        CreateRoom ->
+            ( { model | error = Just "Oops." }, Cmd.none )
+
+
+view : Model -> Html Msg
+view model =
+    Element.layout [] <|
+        column
+            [ width fill, centerY, spacing 30 ]
+            [ el [ centerX ] (text "Oh, hey!")
+            , el [ centerX ] (text "Tell us who you are")
+            , Input.text [ centerX, width (px 300) ]
+                { onChange = NameChanged
+                , text = model.name
+                , label = Input.labelHidden "Your name"
+                , placeholder = Just (Input.placeholder [] (text "Your name"))
+                }
+            , el [ centerX ] (text "then")
+            , let
+                ready =
+                    not (String.isEmpty model.name)
+
+                ( color, event ) =
+                    if ready then
+                        ( blue, Just CreateRoom )
+
+                    else
+                        ( lightGrey, Nothing )
+              in
+              Input.button
+                [ centerX
+                , padding 20
+                , Background.color color
+                , Font.color white
+                ]
+                { onPress = event
+                , label = text "Make a room!"
+                }
+            , el
+                [ centerX
+                , Background.color red
+                , padding 20
+                , Font.color white
+                , transparent (model.error == Nothing)
+                ]
+              <|
+                text (Maybe.withDefault " " model.error)
+            ]
+
+
+blue =
+    rgb255 100 100 255
+
+
+red =
+    rgb255 255 100 100
+
+
+white =
+    rgb255 255 255 255
+
+
+lightGrey =
+    rgb255 200 200 200
--- a/lib/planningpoker_web/templates/layout/app.html.eex
+++ b/lib/planningpoker_web/templates/layout/app.html.eex
@ -5,7 +5,6 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Planningpoker · Phoenix Framework</title>
-    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </head>
  <body>