MainPage refactor

Modules/Website/src/Color.elm

@@ -1,5 +1,7 @@
 module Color exposing (..)
 
+import Element exposing (rgb, rgba)
+
 white =
     Element.rgb 1 1 1
 

Modules/Website/src/Main.elm

@@ -15,81 +15,33 @@ import Element.Font as Font
 import Element.Input as Input
 import Element.Region as Region
 import Html exposing (header)
-
-white =
-    Element.rgb 1 1 1
-
-grey =
-    Element.rgb 0.9 0.9 0.9
+import MainPage
 
 
-blue =
-    Element.rgb 0 0 0.8
 
 
-red =
-    Element.rgb 0.8 0 0
-
-
-darkBlue =
-    Element.rgb 0 0 0.9
-
-type alias Form =
-    { url: String
-    }
-
 type Model 
-    = AddPage Form
-    | Quere 
+    = PageMain MainPage.Model
 
 type Msg 
-    = UpdateForm Form
-    | AddUrl Form
-    | UrlAdded (Result Http.Error UrlAddedResponse)
+    = MsgMain MainPage.Msg
 
 initModel : Model
 initModel =
-    AddPage
-        { url = ""
-        }
+    PageMain MainPage.initModel
 
-type alias UrlAddedResponse = { id: Int, status: String }
-urlAddDecoder : Decoder UrlAddedResponse
-urlAddDecoder =
-    succeed UrlAddedResponse
-        |> required "id" int
-        |> required "status" string
+combineModel : (MainPage.Model, Cmd MainPage.Msg) -> (Model, Cmd Msg)
+combineModel (mainPageModell, cmd) = 
+    (PageMain mainPageModell, Cmd.map MsgMain cmd)
 
-urlAddEncode : Form -> Encode.Value
-urlAddEncode form = Encode.object
-    [ ("url", Encode.string form.url)
-    ]
-
--- Http.header "Access-Control-Request-Method" "POST"
---                    , 
 update : Msg -> Model -> (Model, Cmd Msg)
 update msg model =
     case (msg, model) of
-        (UpdateForm new_form, AddPage _) ->
-            (AddPage new_form, Cmd.none)
+        (MsgMain l_msg, PageMain l_model) ->
+            combineModel (MainPage.update l_msg l_model)
 
-        (AddUrl form, AddPage _) ->
-            ( model
-            , Http.request
-                { method = "POST"
-                , headers = 
-                    [ 
-                    ] 
-                , url = "http://127.0.0.1/api/add"
-                , body = Http.jsonBody (urlAddEncode form)                    
-                , expect = Http.expectJson UrlAdded (urlAddDecoder)
-                , timeout = Nothing
-                , tracker = Nothing
-                }
-            )
-
-        ( _, _ ) ->
-            Debug.todo "branch '( Decrement, _ )' not implemented"
+--       ( _, _ ) ->
+--            Debug.todo "branch '( Decrement, _ )' not implemented"
 
 view : Model -> Html Msg
 view model =
@@ -98,53 +50,13 @@ view model =
             Font.size 20
         ]
     <| case (model) of
-        (AddPage form) -> 
-            Element.column
-                [ width (px 800)
-                , height shrink
-                , centerX
-                , centerY
-                , spacing 36
-                , padding 10
-                ]
-                [ el
-                    [ Region.heading 1
-                    , alignLeft
-                    , Font.size 36
-                    ]
-                    (text "localTube")
-                , Input.text
-                    [ spacing 12
-                    , below
-                        (el
-                            [ Font.color red
-                            , Font.size 14
-                            , alignRight
-                            , moveDown 6]
-                            (text "This one is wrong")
-                        )
-                    ]
-                    { text = form.url
-                    , placeholder = Just (Input.placeholder [] (text "http://youtube.com"))
-                    , onChange = \new -> UpdateForm { form | url = new }  
-                    , label = Input.labelAbove [ Font.size 14 ](text "Video Url")
-                    }
-                , Input.button
-                    [ Background.color blue
-                    , Font.color white
-                    , Border.color darkBlue
-                    , paddingXY 32 16
-                    , Border.rounded 3
-                    ]
-                    { onPress = Just (AddUrl form) 
-                    , label = Element.text "Add Link to Query"
-                    }
-                ]
-        
-        (_) -> 
-            el 
-                [ Region.heading 1
-                , Font.size 36](text "Non")
+        (PageMain mainModell) ->
+            MainPage.view mainModell |> Element.map MsgMain
+            
+--        (_) -> 
+--            el 
+--                [ Region.heading 1
+--                , Font.size 36](text "Non")
 
 
 main: Program () Model Msg

Modules/Website/src/MainPage.elm

@@ -0,0 +1,116 @@
+module MainPage exposing (..)
+
+import Http
+import Json.Decode exposing (Decoder, bool, int, list, string, succeed)
+import Json.Decode.Pipeline exposing(optional, required)
+import Json.Encode as Encode
+
+
+import Element exposing (..)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Element.Input as Input
+import Element.Region as Region
+import Html exposing (header)
+
+import Color exposing (..)
+
+type alias Form =
+    { url: String
+    }
+
+type alias Model
+    = { form: Form }
+
+initModel : Model
+initModel 
+    = { form =
+            { url = ""
+            }
+    }
+
+type Msg
+    = UpdateForm Form
+    | PostForm Form
+    | PostResult (Result Http.Error PostFormResponse)
+
+
+-- -- Request -- --
+
+type alias PostFormResponse = { id: Int, status: String }
+
+formDecoder : Decoder PostFormResponse
+formDecoder =
+    succeed PostFormResponse
+        |> required "id" int
+        |> required "status" string
+
+formPostEncoder : Form -> Encode.Value
+formPostEncoder form = Encode.object
+    [ ("url", Encode.string form.url)
+    ]
+
+-- -- Update -- --
+update : Msg -> Model -> (Model, Cmd Msg)
+update msg model =
+    case (msg) of
+        (UpdateForm new_form) ->
+            ( {model | form = new_form } , Cmd.none)
+
+        (PostForm form) ->
+            ( model
+            , Http.post
+                { url = "http://127.0.0.1/api/add"
+                , body = Http.jsonBody (formPostEncoder form)
+                , expect = Http.expectJson PostResult formDecoder
+                }
+            )
+
+        (_) -> ( model, Cmd.none )
+
+-- -- view -- --
+
+view : Model -> Element Msg
+view model =
+    Element.column
+        [ width (px 800)
+        , height shrink
+        , centerX
+        , centerY
+        , spacing 36
+        , padding 10
+        ]
+        [ el
+            [ Region.heading 1
+            , alignLeft
+            , Font.size 36
+            ]
+            (text "localTube")
+        , Input.text
+            [ spacing 12
+            , below
+                (el
+                    [ Font.color red
+                    , Font.size 14
+                    , alignRight
+                    , moveDown 6]
+                    (text "This one is wrong")
+                )
+            ]
+            { text = model.form.url
+            , placeholder = Just (Input.placeholder [] (text "http://youtube.com"))
+            , onChange = \new -> UpdateForm { model | form = { url = new } }.form
+            , label = Input.labelAbove [ Font.size 14 ](text "Video Url")
+            }
+        , Input.button
+            [ Background.color blue
+            , Font.color white
+            , Border.color darkBlue
+            , paddingXY 32 16
+            , Border.rounded 3
+            ]
+            { onPress = Just (PostForm model.form) 
+            , label = Element.text "Download"
+            }
+        ]