Как распечатать содержимое списка с событием OnClick? - PullRequest
Новая
       14

Как распечатать содержимое списка с событием OnClick?

0 голосов
/ 21 февраля 2019

Я создал функцию, которая добавляет строки в список при нажатии кнопки.Теперь проблема в том, что я не могу вывести информацию, которая была помещена в список.Я начал писать функцию «Отправить», но я не понимаю, какую модель мне нужно туда включить.Я хочу, чтобы вывод был в последнем div, так что там, где сейчас находится "model.currentPlayer".В части Msg я на самом деле не понимаю, какую переменную мне нужно использовать, так как полный список должен быть просто вставлен в div, где я хочу получить свой вывод. 

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"{-, value model.teams, onClick Submit-}] [ text "SUBMIT!" ] ]
    ,  h2 [style "font-family" "impact", style "margin-top" "20px"] [ text "Generated Teams:" ]
    , div []  (List.map (\{ player } -> div [] [ text player ]) model.teams)
    ]

1 Ответ

0 голосов
/ 21 февраля 2019

Вы можете определить функцию просмотра, которая печатает имена каждого игрока в списке элементов div следующим образом: 

playerListView : List Player -> Html Msg
playerListView players =
    let
        playerRow player =
            div [] [ text player.player ]
    in
    div [] (List.map playerRow players)

Использование этого параметра вместо последней строки в вашем примере будет выглядеть так: 

, playerListView model.teams

Или, если вы хотите сохранить все это в одной строке, последняя строка в вашем примере может быть: 

, div [] (List.map (\{ player } -> div [] [ text player ]) model.teams)
...