node-red-fd-testnodes/button-bar.html at main · flexdash/node-red-fd-testnodes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!-- Node-RED editor code for the FlexDash ButtonBar widget -->

<script type="module">
  // fetch the widget info: a bunch of JSON produced by gen-widget-node.js
  import widgetInfo from './resources/@flexdash/node-red-fd-testnodes/button-bar-info.js'

  // construct defaults for the node, setting all but bool to null so widget defaults happen
  const widgetDefaults = Object.fromEntries(Object.values(widgetInfo.props).map(p =>
    [p.name, {value: p.default}]
  ))
  //console.log(widgetInfo.name, "widgetDefaults", widgetDefaults)

  // construct the palette label
  const paletteLabel = widgetInfo.name_text.toLocaleLowerCase()

  // update the text for the help sidebar
  const helpHtml = flexdash.load_help_html(widgetInfo, paletteLabel)

  // prepare the general edit tab
  flexdash.insert_general_edit("fd-button-bar", "fd-tab-general", true)

  // prepare output-related properties if the widget outputs messages
  let out_prop = {}
  if (true) out_prop = {
    fd_output_topic: { value: null },
    fd_loopback: { value: false },
  }

  RED.nodes.registerType(widgetInfo.type_kebab, {
    // properties of the NR node used by NR itself
    category: 'flexdash',
    color: "#F0E4B8",
    inputs: 1,
    outputs: widgetInfo.output ? 1 : 0,
    icon: "font-awesome/fa-rocket", // icon in flow editor
    paletteLabel,

    // node config properties that the user can edit in the flow editor
    defaults: {
      // required fields for FlexDash Widget nodes
      fd_container: {
        type: "flexdash container", value: "", required: true, // grid/panel
        validate: flexdash.validate_widget_container },
      fd_cols: { value: 1, validate(v) { return v>0 && v<=20 } }, // widget width
      fd_rows: { value: 1, validate(v) { return v>0 && v<=100 } }, // widget height
      fd_array: { value: false }, // create array of this widget
      fd_array_max: { value: 10, validate(v) { return v>0 && v<1000} }, // max array size
      ...out_prop, // output-related property
      // name field of Node-RED node (standard)
      name: { value: '' },

      // widget fields, i.e. values being transmitted to the FlexDash Widget as props
      ...widgetDefaults,
    },

    // Node-RED node label
    label() {
      const lbl = this.name || paletteLabel
      return this.fd_array ? lbl+'[ ]' : lbl // indicate whether this is an array-widget
    },
    labelStyle() { return this.name ? "node_label_italic" : "" },

    oneditprepare() {
      // fetch the html to edit the widget props and insert into DOM
      flexdash.load_props_edit(this, widgetInfo, "fd-tab-props")
      // select last-used container
      flexdash.select_last_container()
      // add help button
      flexdash.add_help_button()
      // display the node ID in the general tab
      $('#nr-node-id').text(this.id || "n/a")

      // manage tabs
      const tabs = RED.tabs.create({id: "fd-tabs", onchange: function(tab) {
        $("#fd-tabs-content").children().hide()
        $("#" + tab.id).show()
        RED.tray.resize()
      }})
      tabs.addTab({ id: "fd-tab-general", label: "General" })
      tabs.addTab({ id: "fd-tab-props", label: "Widget input props" })
      tabs.activateTab(this.fd_container ? "fd-tab-props" : "fd-tab-general")
    },

    oneditsave() { // save the typedInput props so we get the types right
      flexdash.save_props_edit(this, widgetInfo, "fd-tab-props")
    },
  })
</script>

<script type="text/html" data-template-name="fd-button-bar">
  <div class="form-row">
    <ul id="fd-tabs" style="min-width: 600px; margin-bottom: 20px;"></ul>
  </div>
  <div id="fd-tabs-content" style="min-height: calc(100% - 95px);">
    <!-- general properties tab -->
    <div id="fd-tab-general" style="display:none"><!-- dynamically loaded --></div>
    <!-- widget props -->
    <div id="fd-tab-props" style="display:none"><!-- dynamically loaded --></div>
  </div>
  <!-- non-tab alternative, remove all above, remove 'manage tabs' code, and use this:
  <div id="fd-tab-general" style="display:contents"></div>
  <div id="fd-tab-props" style="display:contents"></div>
  -->
</script>

<script type="text/markdown" data-help-name="fd-button-bar">
  <p id="fd-button-bar-help-text"><i>Ooops, this should have filled-in dynamically...</i></p>
</script>