github.com/simpleiot/simpleiot@v0.18.3/frontend/src/Components/NodeRaw.elm (about)

     1  module Components.NodeRaw exposing (view)
     2  
     3  import Api.Point as Point exposing (Point)
     4  import Components.NodeOptions exposing (NodeOptions, oToInputO)
     5  import Element exposing (..)
     6  import Element.Background as Background
     7  import Element.Border as Border
     8  import Element.Font as Font
     9  import UI.Button as Button
    10  import UI.NodeInputs as NodeInputs
    11  import UI.Style as Style
    12  
    13  
    14  view : NodeOptions msg -> Element msg
    15  view o =
    16      column
    17          [ width fill
    18          , Border.widthEach { top = 2, bottom = 0, left = 0, right = 0 }
    19          , Border.color Style.colors.black
    20          , spacing 6
    21          ]
    22      <|
    23          let
    24              description =
    25                  Point.getText o.node.points Point.typeDescription ""
    26          in
    27          wrappedRow [ spacing 10 ]
    28              [ Element.el [ Background.color Style.colors.yellow ] <| Element.text <| "Node type: " ++ o.node.typ
    29              , text description
    30              ]
    31              :: (if o.expDetail then
    32                      let
    33                          opts =
    34                              oToInputO o 0
    35                      in
    36                      [ viewPoints opts
    37                      ]
    38  
    39                  else
    40                      []
    41                 )
    42  
    43  
    44  viewPoints : NodeInputs.NodeInputOptions msg -> Element msg
    45  viewPoints o =
    46      table [ padding 7 ]
    47          { data = o.node.points |> Point.filterTombstone |> List.sortWith Point.sort |> List.map renderPoint
    48          , columns =
    49              let
    50                  cell =
    51                      el [ paddingXY 15 5, Border.width 0 ]
    52              in
    53              [ { header = cell <| el [ Font.bold, centerX ] <| text "Point"
    54                , width = fill
    55                , view = \m -> cell <| text m.desc
    56                }
    57              , { header = cell <| el [ Font.bold, centerX ] <| text "Value"
    58                , width = fill
    59                , view = \m -> cell <| el [ alignRight ] <| NodeInputs.nodeNumberInput o m.p.key m.p.typ ""
    60                }
    61              , { header = cell <| el [ Font.bold, centerX ] <| text "Text"
    62                , width = fill
    63                , view =
    64                      \m ->
    65                          cell <|
    66                              el [ alignRight ] <|
    67                                  NodeInputs.nodeTextInput o m.p.key m.p.typ "" ""
    68                }
    69              , { header = cell <| el [ Font.bold, centerX ] <| text ""
    70                , width = fill
    71                , view =
    72                      \m ->
    73                          Button.x <|
    74                              o.onEditNodePoint [ Point m.p.typ m.p.key o.now 0 "" 1 ]
    75                }
    76              ]
    77          }
    78  
    79  
    80  renderPoint : Point -> { desc : String, value : Float, text : String, p : Point }
    81  renderPoint p =
    82      let
    83          key =
    84              p.key
    85  
    86          value =
    87              p.value
    88  
    89          text =
    90              p.text
    91      in
    92      { desc = p.typ ++ ":" ++ key, value = value, text = text, p = p }