port module UrlBar exposing (main)
import Html exposing (Html, input, div, button, text, form)
import Html.Attributes exposing (class, type', defaultValue, placeholder)
import Html.Events exposing (onInput, onSubmit)
import Html.App as App
import Base.Dropdown as Dropdown
-- APP
main : Program DataModel
main =
App.programWithFlags
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
-- MODEL
type alias Model =
{ data : DataModel
, dropdown : Dropdown.Model
}
type alias DataModel =
{ url : String
, method : String
}
init : DataModel -> ( Model, Cmd Msg )
init flags =
let
dropdownDefaults =
Dropdown.init
button =
{ text = flags.method
, class = ""
}
buildItem method =
{ text = method
, icon = Nothing
, value = method
, class = "method-" ++ method
}
items =
List.map buildItem getMethods
dropdown =
{ dropdownDefaults | button = button, items = items }
in
{ dropdown = dropdown, data = flags } ! []
-- UPDATE
type Msg
= SendRequest
| NewUrl String
| NewData DataModel
| DropdownMessage Dropdown.Msg
port onSendRequest : Bool -> Cmd msg
port onUrlChange : String -> Cmd msg
port onMethodChange : String -> Cmd msg
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NewUrl url ->
let
data =
model.data
newData =
{ data | url = url }
in
{ model | data = newData } ! [ onUrlChange url ]
NewData data ->
let
dropdown =
Dropdown.updateButtonText model.dropdown data.method
in
{ model | data = data, dropdown = dropdown } ! []
SendRequest ->
model ! [ onSendRequest True ]
DropdownMessage dropdownMsg ->
let
( dropdownModel, dropdownAction ) =
Dropdown.update dropdownMsg model.dropdown
cmd =
case dropdownAction of
Dropdown.OnClick method ->
onMethodChange method
Dropdown.NoOp ->
Cmd.none
in
{ model | dropdown = dropdownModel } ! [ cmd ]
-- SUBSCRIPTIONS
port replaceModel : (DataModel -> msg) -> Sub msg
subscriptions : Model -> Sub Msg
subscriptions model =
replaceModel NewData
-- VIEW
view : Model -> Html Msg
view model =
div [ class "urlbar" ]
[ App.map DropdownMessage <| Dropdown.view model.dropdown
, form [ onSubmit SendRequest ]
[ div [ class "form-control" ]
[ input
[ type' "text"
, defaultValue model.data.url
, onInput NewUrl
, placeholder "https://api.myproduct.com/v1/users"
]
[]
]
, button [ type' "submit" ] [ text "Send" ]
]
]
-- UTIL
getMethods =
[ "GET"
, "POST"
, "PUT"
, "PATCH"
, "DELETE"
, "OPTIONS"
, "HEAD"
, "PURGE"
, "FIND"
, "DELETEHARD"
]