質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Elm

Elmは、Functional Reactive Programming(FRP)という概念を持つプログラミング言語です。JavaScriptにコンパイルされており、高度な対話型プログラムを簡単に作成するこができます。

Q&A

0回答

862閲覧

concouseのweb uiをカスタマイズしたい

tuioku

総合スコア42

Elm

Elmは、Functional Reactive Programming(FRP)という概念を持つプログラミング言語です。JavaScriptにコンパイルされており、高度な対話型プログラムを簡単に作成するこができます。

0グッド

0クリップ

投稿2020/10/01 00:56

今、concouse uiのweb uiの部分をカスタマイズしております。
しかし、型が厳密に決まっており、思うようにいきません。

どの部分を改修いているかと言いますと、下記の画像のパイプラインごとにタグを登録する機能を実装しようとしています。
挙動としてはテキストフィールドにタグ名を入力したら「タグを追加」というボタンを押したら後、タグが追加されるようにしたいです。

下記のような機能はtodoアプリのようにテキストを入力して、ボタンを押したらリストにデータが入っていくソースです。

elm

1module Main exposing (main) 2 3import Browser 4import Html exposing (..) 5import Html.Attributes exposing (..) 6import Html.Events exposing (onClick, onInput) 7 8import Debug exposing (log) 9 10main = 11 Browser.sandbox { init = init, update = update, view = view } 12 13--Model 14 15-- Todoのリストの構造 16type alias Todo = 17 { description : String 18 } 19 20-- Todoリストそのもの型 21-- List型っていうこと 22type alias Model = 23 { todos : List Todo 24 , input : Todo 25 } 26 27init : Model 28init = 29 { todos = [] 30 , input = Todo "" 31 } 32 33type Msg = Add | Change String 34 35--Update 36 37update : Msg -> Model -> Model 38update msg model = 39 case msg of 40 Add -> 41 { model | todos = model.input :: model.todos } 42 Change str -> 43 { model | input = Todo str } 44 45-- View 46 47view : Model -> Html Msg 48view model = 49 div [] 50 [ input [ type_ "text", placeholder "What will you do?", onInput Change] [] 51 , button [ onClick Add ] [ text "Add" ] 52 , ul [] (List.map viewLi model.todos) 53 ] 54 55viewLi : Todo -> Html Msg 56viewLi todo = 57 li [] [ text todo.description ] 58

上記の部分を少し改修して、下記の「Group.elm」に入れたら、intellijで「Type mismatch. Required: Html Message Found: Html Msg。」というメッセージが出てしまいました。
concourseを改修して、下記のようにしたら出ます。

■Group.elm

elm

1pipelineCardView : 2 { a | userState : UserState, favoritedPipelines : Set Concourse.DatabaseID } 3 -> 4 { b 5 | dragState : DragState 6 , dropState : DropState 7 , now : Maybe Time.Posix 8 , hovered : HoverState.HoverState 9 , pipelineRunningKeyframes : String 10 , pipelinesWithResourceErrors : Set ( String, String ) 11 , pipelineLayers : Dict ( String, String ) (List (List Concourse.JobIdentifier)) 12 , pipelineJobs : Dict ( String, String ) (List Concourse.JobIdentifier) 13 , jobs : Dict ( String, String, String ) Concourse.Job 14 } 15 -> PipelinesSection 16 -> 17 { bounds : PipelineGrid.Bounds 18 , pipeline : Pipeline 19 } 20 -> String 21 -> Html Message 22pipelineCardView session params section { bounds, pipeline } teamName = 23 Html.div 24 ([ class "pipeline-wrapper" 25 , style "position" "absolute" 26 , style "transform" 27 ("translate(" 28 ++ String.fromFloat bounds.x 29 ++ "px," 30 ++ String.fromFloat bounds.y 31 ++ "px)" 32 ) 33 , style 34 "width" 35 (String.fromFloat bounds.width 36 ++ "px" 37 ) 38 , style "height" 39 (String.fromFloat bounds.height 40 ++ "px" 41 ) 42 , onMouseOver <| 43 Hover <| 44 Just <| 45 PipelineWrapper 46 { pipelineName = pipeline.name 47 , teamName = pipeline.teamName 48 } 49 , onMouseOut <| Hover Nothing 50 ] 51 ++ (if params.dragState /= NotDragging then 52 [ style "transition" "transform 0.2s ease-in-out" ] 53 54 else 55 [] 56 ) 57 ++ (let 58 hoverStyle id = 59 if 60 (id.pipelineName == pipeline.name) 61 && (id.teamName == pipeline.teamName) 62 then 63 [ style "z-index" "1" ] 64 65 else 66 [] 67 in 68 case HoverState.hoveredElement params.hovered of 69 Just (JobPreview _ jobID) -> 70 hoverStyle jobID 71 72 Just (PipelineWrapper pipelineID) -> 73 hoverStyle pipelineID 74 75 _ -> 76 [] 77 ) 78 ) 79 [ Html.div 80 ([ class "card" 81 , style "width" "100%" 82 , style "height" "100%" 83 , attribute "data-pipeline-name" pipeline.name 84 ] 85 ++ (if section == AllPipelinesSection && not pipeline.stale then 86 [ attribute 87 "ondragstart" 88 "event.dataTransfer.setData('text/plain', '');" 89 , draggable "true" 90 , on "dragstart" 91 (Json.Decode.succeed (DragStart pipeline.teamName pipeline.name)) 92 , on "dragend" (Json.Decode.succeed DragEnd) 93 ] 94 95 else 96 [] 97 ) 98 ++ (if params.dragState == Dragging pipeline.teamName pipeline.name then 99 [ style "width" "0" 100 , style "margin" "0 12.5px" 101 , style "overflow" "hidden" 102 ] 103 104 else 105 [] 106 ) 107 ++ (if params.dropState == DroppingWhileApiRequestInFlight teamName then 108 [ style "opacity" "0.45", style "pointer-events" "none" ] 109 110 else 111 [ style "opacity" "1" ] 112 ) 113 ) 114 [ Pipeline.pipelineView 115 { now = params.now 116 , pipeline = pipeline 117 , resourceError = 118 params.pipelinesWithResourceErrors 119 |> Set.member ( pipeline.teamName, pipeline.name ) 120 , existingJobs = 121 params.pipelineJobs 122 |> Dict.get ( pipeline.teamName, pipeline.name ) 123 |> Maybe.withDefault [] 124 |> List.filterMap (lookupJob params.jobs) 125 , layers = 126 params.pipelineLayers 127 |> Dict.get ( pipeline.teamName, pipeline.name ) 128 |> Maybe.withDefault [] 129 |> List.map (List.filterMap <| lookupJob params.jobs) 130 , hovered = params.hovered 131 , pipelineRunningKeyframes = params.pipelineRunningKeyframes 132 , userState = session.userState 133 , favoritedPipelines = session.favoritedPipelines 134 , section = section 135 } 136 , Html.div 137 (class "tag-list" :: Styles.tagList) 138 [ 139 --ul [] (List.map viewLi model.todos) 140 Html.div 141 [class "tag-list-tag"] 142 [ 143 Html.text "#tag1" 144 ] 145 ] 146 , Html.div 147 (class "tag-list" :: Styles.tagList) 148 [ 149 Html.div 150 (class "tag-input-bord" :: Styles.tagInputBord) 151 [ 152 Html.div 153 [class "tag-input-bord-wrapper"] 154 [ 155 Html.input 156 ([ 157 placeholder "例)tag1" 158 ]) 159 [] 160 ] 161 ], 162 Html.button 163 (class "tag-list-button" :: Styles.tagListButton) 164 [ 165 Html.text "タグを追加" 166 ] 167 ] 168 ] 169 ]

上記の場合だと関数の返却の型が「-> Html Message」になっているのですが、typescriptみたいにanyとかにできないみたいです。
この場合どうすればいいでしょうか??

https://github.com/concourse/concourse/blob/master/web/elm/src/Dashboard/Group.elm

イメージ説明

■concourseのgithubのURL
https://github.com/concourse/concourse/tree/master/web/elm

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問