This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
Easily create interactive UIs for complex data structures
version 1.0.1
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.1
Committed At 2017-05-29 20:39:17 UTC
rtfeldman/elm-css-helpers 2.1.0 <= v < 3.0.0 2.1.0
rtfeldman/elm-css 8.2.0 <= v < 9.0.0 8.2.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1
abadi199/datetimepicker 3.0.1 <= v < 4.0.0 3.0.4

Modules

README

elm-debug-controls

This package helps you easily build interactive UIs for complex data structures. The resulting controls are not meant for building end-user UIs, but they are useful for quickly building debugging consoles, documentation, and style guides.

Demo

https://avh4.github.io/elm-debug-controls/

Usage

Suppose we have an Elm data structure like the following and want to create a simple debugging tool to experiment with different values:

import Date exposing (Date)

type alias UploadRequest =
    { path : String
    , mode : WriteMode
    , autorename : Bool
    , clientModified : Maybe Date
    , mute : Bool
    , content : String
    }

type WriteMode
    = Add
    | Overwrite
    | Update String

Using elm-debug-controls, we can quickly create an interactive UI to create UploadRequest values:

elm-package install avh4/elm-debug-controls
import Debug.Control exposing (bool, choice, field, map, record, string, value)

type alias Model =
    { ...
    , uploadRequest : Debug.Control.Control UploadRequest
    }

init : Model
init =
    { ...
    , uploadRequest =
        record UploadRequest
            |> field "path" (string "/demo.txt")
            |> field "mode"
                (choice
                    [ ( "Add", value Add )
                    , ( "Overwrite", value Overwrite )
                    , ( "Update rev", map Update <| string "123abcdef" )
                    ]
                )
            |> field "autorename" (bool False)
            |> field "clientModified"
                (maybe False <| date <| Date.fromTime 0)
            |> field "mute" (bool False)
            |> field "content" (string "HELLO.")
    }

Now we can hook the control up to our view:

type Msg
    = ...
    | ChangeUploadRequest (Debug.Control.Control UploadRequest)

update : Msg -> Model -> Model
update msg model =
    case msg of
        ...
        ChangeUploadRequest uploadRequest ->
            { model | uploadRequest = uploadRequest }

view : Model -> Html Msg
view model =
    ...
    Debug.Control.view ChangeUploadRequest model.uploadRequest

We now have an interactive UI that looks like this:

Screen capture of the interactive UI

Finally, we can use the UploadResponse value elsewhere in our program with:

Debug.Control.currentValue model.uploadRequest