bogdan Initial commit

7bb6a82 2 weeks ago History

<script type="text/x-red" data-template-name="msg-status">
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
  </div>
  <div class="form-row">
    <label for="node-input-msgPath"><i class="fa fa-code"></i> Message path</label>
    <input type="text" id="node-input-msgPath" placeholder="msg.payload.state">
  </div>
  <div class="form-row">
    <label for="node-input-prefix">Prefix (optional)</label>
    <input type="text" id="node-input-prefix" placeholder="State:">
  </div>
  <div class="form-row">
    <label for="node-input-suffix">Suffix (optional)</label>
    <input type="text" id="node-input-suffix" placeholder="(live)">
  </div>
  <div class="form-row">
    <label for="node-input-showTime">Show time</label>
    <input type="checkbox" id="node-input-showTime" style="width:auto; vertical-align:middle;">
  </div>
  <div class="form-row">
    <label for="node-input-fill">Status color</label>
    <select id="node-input-fill">
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="red">Red</option>
      <option value="yellow">Yellow</option>
      <option value="grey">Grey</option>
    </select>
  </div>
  <div class="form-row">
    <label for="node-input-shape">Status shape</label>
    <select id="node-input-shape">
      <option value="dot">Dot</option>
      <option value="ring">Ring</option>
    </select>
  </div>
</script>

<script type="text/x-red" data-help-name="msg-status">
  <p>
    Displays a configurable part of the incoming message in the node status.
  </p>
  <h3>Configuration</h3>
  <dl class="message-properties">
    <dt>Message path
      <span class="property-type">string</span>
    </dt>
    <dd>
      Dot-notation path to the value to display (e.g., <code>msg.payload.state</code>, <code>msg.topic</code>, <code>msg.payload</code>).
      Supports nested paths like <code>msg.data.nested.value</code>.
    </dd>
    <dt>Prefix <span class="property-type">string (optional)</span></dt>
    <dd>Text to prepend to the status value (e.g., "State: ").</dd>
    <dt>Suffix <span class="property-type">string (optional)</span></dt>
    <dd>Text to append to the status value (e.g., " (live)").</dd>
    <dt>Show time <span class="property-type">boolean</span></dt>
    <dd>When enabled, prefixes the status text with the local time of the last received message in <code>HH:MM:SS</code> format.</dd>
    <dt>Status color
      <span class="property-type">string</span>
    </dt>
    <dd>Color of the status indicator: blue, green, red, yellow, or grey.</dd>
    <dt>Status shape
      <span class="property-type">string</span>
    </dt>
    <dd>Shape of the status indicator: dot or ring.</dd>
  </dl>

  <h3>Example</h3>
  <p>
    If a message with <code>msg.payload.state = "active"</code> arrives, and you configure:
  </p>
  <ul>
    <li>Message path: <code>msg.payload.state</code></li>
    <li>Prefix: <code>State:</code></li>
    <li>Color: green</li>
  </ul>
  <p>
    The node status will display: <code>12:34:56 State: active</code> with a green dot.
  </p>
</script>

<script>
  RED.nodes.registerType("msg-status", {
    category: "function",
    color: "#87ceeb",
    defaults: {
      name: {value: ""},
      msgPath: {value: "", required: true},
      prefix: {value: ""},
      suffix: {value: ""},
      showTime: {value: true},
      fill: {value: "blue"},
      shape: {value: "dot"}
    },
    inputs: 1,
    outputs: 1,
    icon: "font-awesome/fa-info-circle",
    label: function() {
      return this.name || (this.msgPath ? "status: " + this.msgPath : "msg-status");
    },
    paletteLabel: "msg status"
  });
</script>