How to output all the stored values at once?

#1

Hey guys, I have written a program that stores and outputs values. I have to buttons an “add” button and a submit button. The add button should clear the input field (so its ready for a new input) and the submit button should output all the stored values (stored with the add button). At the moment I implemented it so when I press the add button I immediately receive the value in the output. But it should only be stored at that moment and then when pressing the submit button int should output all the values.

import Browser
import Html exposing (Html, Attribute, button, text, h1, h2, h3, p, div, input, text)
import Html.Attributes exposing (style)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)




-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL
type alias Player =
  { player : String
  , strength : Int
  --, number : Int
  --, playernumber : Int
  --, placeholder : String
  --, counter : Int
  }


type alias Model =
  { content : String
  , teams : List Player
  , currentNumber : Int
  , currentPlayernumber: Int
  , currentPlayer : String
  , currentStrength : Int
  , placeholderPlayer : String
  , placeholderCounter : Int
  , placeholderStrength: Int
  }


  


init : Model
init =
  { content = ""
  , teams = []
  , currentNumber = 0
  , currentPlayernumber = 0
  , currentPlayer = ""
  , currentStrength = 0
  , placeholderPlayer = ""
  , placeholderCounter = 1
  , placeholderStrength = 0
   }



-- UPDATE


type Msg
  = Change String
  | ChangeNumber String
  | ChangePlayernumber String
  | ChangePlayer String
  | ChangeStrength String
  | Add  
  --| Submit String
   


  


update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }

    ChangeNumber number ->
      { model | currentNumber = Maybe.withDefault 0 (String.toInt number) }

    ChangePlayernumber playernumber ->
      { model | currentPlayernumber = Maybe.withDefault 0 (String.toInt playernumber) }
    
    
    ChangePlayer player ->
      { model | currentPlayer = player }

    ChangeStrength strength ->
      { model | currentStrength = Maybe.withDefault 0 (String.toInt strength) }
    
    Add ->
      { model | teams = ({player = model.currentPlayer, strength = model.currentStrength} :: model.teams), currentPlayer = "", currentStrength = 0 } 

   {- Submit player -> 
      { model | teams = } -}
    




-- VIEW

view : Model -> Html Msg
view model =
  let
    playername = "🏅 Player " ++ String.fromInt (List.length model.teams + 1)
  in
  div []
    [ h1 [style "font-family" "impact"] [ text "Team Creator" ]
    , p [style "font-family" "sans-serif", style "font-size" "15px", style "color" "grey"] [ text "With the Team Creator you can create teams. Insert information about the name and the strength(1-5) of every player and finally how many teams you want to have created by the Team Creator" ]
    ,  h2 [style "font-family" "impact"] [ text "Number of Teams:" ]
    , input [ placeholder  "Number", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value (String.fromInt model.currentNumber), onInput ChangeNumber] []
    ,  h2 [style "font-family" "impact"] [ text "Players per Team:" ]
    , input [ placeholder  "Playernumber", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value (String.fromInt model.currentPlayernumber), onInput ChangePlayernumber] []
    ,  h2 [style "font-family" "impact"] [ text "Name and Strength:" ]
    , div[] [ input [placeholder  playername, style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.currentPlayer, onInput ChangePlayer] [] ]
    , input [ placeholder  "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#4286F5", value (String.fromInt model.currentStrength), onInput ChangeStrength] []
    , div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "300px", style "border-radius" "25px", style "height" "40px", style "font-size" "20px", style "margin-right" "70px", onClick Add] [ text "+ADD Player" ] ]
    , div [] [ button [ style "background-color" "#4286F5", style "color" "white", style "margin-top" "10px", style "width" "300px", style "border-radius" "25px", style "height" "40px", style "font-size" "20px", style "margin-right" "70px"] [ text "SUBMIT!" ] ]
    ,  h2 [style "font-family" "impact", style "margin-top" "20px"] [ text "Generated Teams:" ]
    , div []  (List.map (\{ player} -> div [] [ text player ]) model.teams)
    ]
#2

You’ll need a piece of state in your model that indicates whether or not to show the list. The submit button would set that value to true, and the view function would only display the list if the value is true. Does that help?

#3

@rauxyo since I’m new to Elm I don’t really get just from only descriptions how to implement it. It would be great if you might provide some code.

The thing I have tried from your answer is to initialize a boolean value in the model (But I don’t know how to insert that at the submit button):

-- MODEL
type alias Player =
  { player : String
  , strength : Int
  , ...
  , activated : Bool
  }


type alias Model =
  { content : String
  , teams : List Player
  , ...
  , activatedOutput : Bool

   }

init : Model
init =
  { content = ""
  , teams = []
  , ...
  , activatedOutput = False

   }
#4

I understand that you want something like:

type alias Player =
  { ...
  , activated : Bool
  }

update msg mode =
     case msg of
         ...
         Submit ->
           -- Activate all added players
           {model | team = List.map (\p -> {p | activated = True}) model.team}

view players =
    players
      |> List.filter .activated
      |> List.map playerView

Although, this is UI is kind of odd, shouldn’t you show players as you add them?

closed #5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.