I have the following scenario:
when a user stops typing in the text area, I want to wait for 2 seconds and if the user didn't change anything in the textarea within those 2 seconds, I want to save the content of the textarea to the server. If the user changes something in the textarea within those 2 seconds, I want to restart the wait timeout.
In JavaScript, I would implement it something like this
http://codepen.io/ondrejsevcik/pen/LRxWQP
// Html
<textarea id="textarea"></textarea>
<pre id="server"></pre>
// JavaScript
var textarea = document.querySelector('#textarea');
var textValue = "";
textarea.oninput = function (e) {
textValue = e.target.value;
setSaveTimeout();
}
let saveTimeout;
function setSaveTimeout() {
if (saveTimeout) {
clearTimeout(saveTimeout);
}
saveTimeout = setTimeout(saveToServer, 2000);
}
function saveToServer() {
document.querySelector('#server').innerText =
'Value saved to server: ' + textValue;
}
One way to achieve the behavior is to..
Hook onInput event
Within onInput handler,
create a task which fires 2 sec later,
with a current value of textarea.
Also store the textarea contents.
check if the value has
changed or not, and save it if value did not change.
Here, it doesn't cancel the Task, so it may not be efficient.
-- MODEL
type alias Model =
{ str : String
, saved : String
}
init : (Model, Cmd Msg)
init =
(Model "" "", Cmd.none)
-- UPDATE
type Msg
= ChangeText String
| Save String
| NoOp ()
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
NoOp _ -> (model, Cmd.none)
Save str ->
let
_ = Debug.log "save" str
newmodel =
if model.str /= str
then model
else { model | saved = str }
in (newmodel, Cmd.none)
ChangeText str ->
let
_ = Debug.log "textarea" str
cmd = Task.perform NoOp Save <|
Process.sleep (2 * Time.second)
`Task.andThen`
\_ -> Task.succeed str
in ({ model | str = str }, cmd)
-- VIEW
view : Model -> Html Msg
view model =
Html.div []
[ Html.textarea [ onInput ChangeText ] []
, Html.div [] [ Html.text <| "saved: " ++ model.saved ]
]
Related
I’m tyring to understand why is this not working. I’m trying to debounce, but not a user event from view. By idea this should go into the continiuos flow, which will happen once, but every few seconds. Main idea of this architecture is that events might be triggered from various places, but it will happen only once. I have made a simple example app:
module Main exposing (main)
import Html exposing (Html)
import Html
import Process
import Task
import Debug
import Time
import Control exposing (Control)
import Control.Debounce as Debounce
main : Program Never Model Msg
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
type alias Model =
{ counter : Int
, state : Control.State Msg
}
init : ( Model, Cmd Msg )
init =
{ counter = 0, state = Control.initialState }
! [ delay (Time.second * 3) <| ContinuousDebouncing ]
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
type Msg
= Deb (Control Msg)
| ContinuousDebouncing
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Deb debMsg ->
Control.update (\s -> { model | state = s }) model.state debMsg
ContinuousDebouncing ->
let
x = Debug.log "ContinuousDebouncing"
_ = debounce ContinuousDebouncing
in
( { model | counter = model.counter + 1 }, Cmd.none )
debounce : Msg -> Msg
debounce =
let
x = Debug.log "debounce"
in
Debounce.trailing Deb (3 * Time.second)
delay : Time.Time -> msg -> Cmd msg
delay time msg =
Process.sleep time
|> Task.andThen (always <| Task.succeed msg)
|> Task.perform identity
view : Model -> Html Msg
view model =
Html.text (toString model.counter)
https://ellie-app.com/tvQ3L6dGrqa1
In your example app, you only fired the ContinuousDebouncing msg once in the init function, so as expected, the counter only increments once. You probably want to fire ContinuousDebouncing again in the update function.
I think this achieves what you're after:
module Main exposing (main)
import Html exposing (Html)
import Html
import Process
import Task
import Debug
import Time
import Control exposing (Control)
import Control.Debounce as Debounce
main : Program Never Model Msg
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
type alias Model =
{ counter : Int
, state : Control.State Msg
}
init : ( Model, Cmd Msg )
init =
{ counter = 0, state = Control.initialState }
! [ incrementCounter ]
incrementCounter : Cmd Msg
incrementCounter = Cmd.map debounce <| delay (Time.second * 3) <| ContinuousDebouncing
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
type Msg
= Deb (Control Msg)
| ContinuousDebouncing
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Deb debMsg ->
Control.update (\s -> { model | state = s }) model.state debMsg
ContinuousDebouncing ->
let
x = Debug.log "ContinuousDebouncing"
in
( { model | counter = model.counter + 1 }, incrementCounter )
debounce : Msg -> Msg
debounce =
let
x = Debug.log "debounce"
in
Debounce.trailing Deb (3 * Time.second)
delay : Time.Time -> msg -> Cmd msg
delay time msg =
Process.sleep time
|> Task.andThen (always <| Task.succeed msg)
|> Task.perform identity
view : Model -> Html Msg
view model =
Html.text (toString model.counter)
https://ellie-app.com/tPymgfNwYda1
I am trying to get the width and height of an image, so give a URL, what is the width and height of that image
I don't believe that there is a way to do this in elm. Ports are one possible solution. You can read about them here. I've written a small example of your use case which you can run your self on ellie. In this example I use the JS example you gave in your comment, but there are other possible solutions such as event listeners or querying the DOM.
Main.elm
port module Main exposing (main)
import Html exposing (..)
import Html.Attributes exposing (..)
main : Program Never Model Msg
main =
Html.program
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}
type alias Model =
{ imageUrl : String
, dim : Maybe ( Int, Int )
}
testImg : String
testImg =
"https://images-na.ssl-images-amazon.com/images/I/71TcaVWvBsL._SY355_.jpg"
init : ( Model, Cmd msg )
init =
Model testImg Nothing
! [ getDim testImg ]
type Msg
= UpdateDim ( Int, Int )
update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
UpdateDim xy ->
{ model | dim = Just xy } ! []
view : Model -> Html msg
view model =
case model.dim of
Nothing ->
div [] []
Just dims ->
div []
[ img [ src model.imageUrl ] []
, text <|
"size: "
++ toString dims
]
subscriptions : Model -> Sub Msg
subscriptions model =
newDim UpdateDim
-- this port handles our incomming height and width
-- and passes it to a Msg constructor
port newDim : (( Int, Int ) -> msg) -> Sub msg
-- this port passes our string out of Elm and into
-- js land
port getDim : String -> Cmd msg
index.html
<html>
<head>
<style>
/* you can style your program here */
</style>
</head>
<body>
<script>
var app = Elm.Main.fullscreen()
// you can use ports and stuff here
app.ports.getDim.subscribe(function(url){
// recieve the url for the image through
// the `getDim` port in Main.elm
let img = new Image()
img.src = url
img.onload = function() {
// send the height and width back to elm through
// the `newDim` port in Main.elm
app.ports.newDim.send([img.height, img.width])
}
})
</script>
</body>
</html>
I mentioned in a comment that if you display the image, you can do this without ports. This is the solution I was talking about:
module Main exposing (main)
import Browser
import Debug exposing (toString)
import Html exposing (Html, div, img, text)
import Html.Attributes exposing (src)
import Html.Events exposing (on)
import Json.Decode as Decode
type alias Model =
{ imageDimensions : Maybe ImgDimensions }
initialModel : Model
initialModel =
{ imageDimensions = Nothing }
type Msg
= ImgLoaded ImgDimensions
update : Msg -> Model -> Model
update msg model =
case msg of
ImgLoaded dimensions ->
{ model | imageDimensions = Just dimensions }
type alias ImgDimensions =
{ width : Int
, height : Int
}
decodeImgLoad msg =
Decode.map msg <|
Decode.field "target" <|
Decode.map2 ImgDimensions
(Decode.field "width" Decode.int)
(Decode.field "height" Decode.int)
view : Model -> Html Msg
view model =
div []
[ text <| "Image Loaded = " ++ toString model.imageDimensions
, img
[ on "load" (decodeImgLoad ImgLoaded)
, src "https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bd07f82e-a30d-4e93-a2cf-0c16ea2b7f40/08-owl-opt.jpg"
]
[]
]
main : Program () Model Msg
main =
Browser.sandbox
{ init = initialModel
, view = view
, update = update
}
https://ellie-app.com/3FCdcDqy4gqa1
i have the following type User:
type alias User =
{ id : Int
, name : String
, age : Maybe Int
, deleted : Bool
}
User is a type used in my Model:
type alias Model =
{ users : List User
, name : String
, age : String
, message : String
}
When I iterate over "List User" using List.map like this...
Delete id ->
let
newUserList =
List.map
(\user ->
if user.id == id then
{ user | deleted = True }
else
user
)
model.users
in
( { model | users = newUserList }, Cmd.none )
... the Compiler tells me:
The 2nd argument to function `map` is causing a mismatch.
List.map
(\user ->
if user.id == id then
{ user | deleted = True }
else
user
)
model.users
Function `map` is expecting the 2nd argument to be:
List { a | id : Int, name : String }
But it is:
List (Bool -> User)
That is pretty strange for me.
Why does my map function change the Type User...?
I do not change it, I just iterate over, map each user and if I found the right one, by its id, I change deleted value to True...
I am a bit confused...
Can anyone help?
kind regards :)
UPDATE: It does not seem to me a problem of the List.map function but of the type alias User declaration.
As soon as I add another value this breaks...
Here is the whole code for it. It is kept pretty simple.
Note: As soon as you uncomment the Users property "deleted" the compiler throws an error
module Main exposing (..)
import Html exposing (Html, text, h1, div, img, input, form, ul, li, i, hr, br)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.App as App
import String
import Random
--import Debug
--import Uuid
main : Program Never
main =
App.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
--MODEL
type alias Model =
{ users : List User
, name : String
, age : String
, message : String
}
type alias User =
{ id : Int
, name : String
, age :
Maybe Int
-- , deleted : Bool
}
init : ( Model, Cmd Msg )
init =
( initModel, Cmd.none )
initModel : Model
initModel =
{ users = []
, name = ""
, age = ""
, message = ""
}
--UPDATE
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
InsertName username ->
( { model | name = username }, Cmd.none )
InsertAge age ->
let
newAge =
case String.toInt age of
Err err ->
""
Ok value ->
toString value
newMessage =
case String.toInt age of
Err err ->
"Age must be a number!"
Ok int ->
""
in
( { model | age = newAge, message = newMessage }, Cmd.none )
InitNewUser ->
( model, Random.generate AddNewUser (Random.int 1 9999) )
AddNewUser randomId ->
if String.isEmpty model.name then
( { model | message = "Please give a name" }, Cmd.none )
else
let
ageAsInt =
case String.toInt model.age of
Err err ->
Nothing
Ok int ->
Just int
newUser =
User randomId model.name ageAsInt
newUserList =
newUser :: model.users
in
( { model | users = newUserList, name = "", age = "" }, Cmd.none )
Delete id ->
let
newUserList =
List.map
(\user ->
if user.id == id then
{ user | name = "--deleted--" }
else
user
)
model.users
in
( { model | users = newUserList }, Cmd.none )
--VIEW
type Msg
= InsertName String
| InsertAge String
| AddNewUser Int
| InitNewUser
| Delete Int
userListView : Model -> Html Msg
userListView model =
let
newList =
List.filter (\user -> (user.name /= "--deleted--")) model.users
in
newList
|> List.sortBy .name
|> List.map userView
|> ul []
userView : User -> Html Msg
userView user =
let
ageAsString =
case user.age of
Just val ->
val |> toString
Nothing ->
"-"
in
li []
[ div [] [ text ("ID: " ++ toString user.id) ]
, div [] [ text ("Name: " ++ user.name) ]
, div [] [ text ("Age: " ++ ageAsString) ]
, input [ type' "button", value "Delete", onClick (Delete user.id) ] []
]
view : Model -> Html Msg
view model =
div [ class "wrapper" ]
[ h1 [] [ text ("We have " ++ toString (List.length model.users) ++ " Users") ]
, Html.form []
[ input [ type' "text", onInput InsertName, placeholder "Name", value model.name ] []
, input [ type' "text", onInput InsertAge, placeholder "Age", value model.age ] []
, input [ type' "button", onClick InitNewUser, value "Add new user" ] []
]
, div [] [ text model.message ]
, userListView model
, hr [] []
, div [] [ text (toString model) ]
]
The problem is this part of the AddNewUser message:
newUser =
User randomId model.name ageAsInt
It is missing False as the forth argument when you use the deleted property.
If you do not include it, the User function will return a partially applied function that still needs a Bool to return a proper user. The compiler seems to get thrown off by this even though all your types and functions have proper annotations.
Another way that leads to a better error message would be to define newUser like this:
newUser =
{ id = randomId
, name = model.name
, age = ageAsInt
, deleted = False
}
I am exploring ELM and trying to access web api. I followed the this link.
I am able to hit my service and getting the response (Showing in browser network tab), but failure code portion is executing from elm update.
Implementation
---Model
type alias Model =
{
message : String,
}
model:Model
model = {
message = "Hello"
}
--update
postRequest : Http.Request
postRequest =
{ verb = "POST"
, headers =
[("Content-Type", "application/json")
]
, url = "http://xyz/events/list"
, body = Http.string """{ "domainId": 1 }"""
}
getEventList: Cmd Msg
getEventList =
Task.perform Messages.FetchFail Messages.FetchSucceed (Http.fromJson decodeString (Http.send Http.defaultSettings postRequest))
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Messages.NoOp ->
( model, Cmd.none )
Messages.FetchSucceed xy->
({model| message = "success"},Cmd.none)
Messages.FetchFail _->
({model |message = "fail"} ,Cmd.none)
API response :
{ "message": "", "data": [
{
"eventId": 104,
"title": "private Events",
"description": "abc",
"businessId": 51,
"businessTitle": "VampireDA_Adda",
"startDate": "2016-07-08"
},
{
"eventId": 107,
"title": "Event weekly Midnight",
"description": "xyz",
"businessId": 44,
"businessTitle": "Spanish Scotch",
"startDate": "2016-07-08"
}] }
Please help me, if i have implement any thing wrong.
and also how i can decode json to model (fill model with response json)?
you are probably getting the error because the decoding is not working out. But first try to get used to piping
Http.send Http.defaultSettings postRequest
|> Http.fromJson decodeString
|> Task.perform Messages.FetchFail Messages.FetchSucceed
To decode you need an Elm record
type alias DataItem =
{ eventId: Int
, title: String
, description : String
, businessId : Int
, businessTitle : String
, startDate: String
}
The decoder will then look something like
dataDecoder =
object6 DataItem
("eventId" := int)
("title" := string)
("description" := string)
("businessId" := int)
("businessTitle" := string)
("startDate" := string)
decoder = at ["data"] (list dataDecoder)
Decoders take a bit of getting used to, so I created a site to help you practise: http://simonh1000.github.io/decoder/
I have an input like this :
input [ type' "number", onInput NewValue ] [ text <| toString model.value ]
How to update the model ? I have something like this:
NewValue nb ->
( { model | value = nb }, Cmd.none )
I don't know if in input type number the value is an Int or a String.
I also try this:
NewValue nb ->
let
nb = Result.withDefault 0 (String.toInt nb)
in
( { model | value = nb }, Cmd.none )
WIth the second version I got this error:
The return type of function `withDefault` is being used in unexpected ways.
44| nb = Result.withDefault 0 (String.toInt nb)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The function results in this type of value:
Int
Which is fine, but the surrounding context wants it to be:
String
Change the function name nb to something else as it is already assigned as a String and you can't overwrite it.
NewValue nb ->
let
newInt = Result.withDefault 0 (String.toInt nb)
in
( { model | value = newInt }, Cmd.none )