grunig-nodes/nodes/Move-Beam.html

Grünig Nodes Library

<script type="text/javascript">
    RED.nodes.registerType('Move-Beam', {
        category: 'Grunig',
        color: 'rgb(176, 223, 227)',
        defaults: {
            name: { value: ""},
            maxLength: { value: 190},
            magFormat: { value: "width"},

        },
        description: "Test",
        inputs:1,
        outputs:1,
        icon: "inject.svg",
        label: function() {
            return this.name || "Move-Beam";
        },
        oneditprepare: function() {
            // Diese Funktion wird ausgeführt, wenn das Formular zum Bearbeiten des Knotens geladen wird

            // Verweis auf das aktuelle Knotenobjekt
            var node = this;

            node.dirty = true;

            // Eingabefeld für den Namen
            var nameInput = $("#node-config-input-name");
            nameInput.val(node.name);

            // Maximaler Längenwert der Maschine
            var maxLength = $("#node-config-input-maxlength");
            maxLength.val(node.maxLength);

            // Selector für magFormat
            var magFormatInput = $("#node-config-input-magformatinput");
            magFormatInput.val(node.magFormat);

            // Änderungsereignis für den Namen
            nameInput.on("change", function() {
                node.name = nameInput.val();
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });

            // Änderungsereignis für maxLength
            maxLength.on("change", function() {
                node.maxLength = maxLength.val();
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });

            // Änderungsereignis für magFormat
            magFormatInput.on("change", function() {
                node.magFormat = magFormatInput.val();
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });
        }
    });
</script>

<!-- Styles -->
<style>
    div.form-row label {
        width: 180px;
        display: contents;
    }
    div.form-row input {
        width: 60%;
    }

    .form-row {
        margin-bottom: 10px;
    }
</style>

<script type="text/html" data-template-name="Move-Beam">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-config-input-maxlength"><i class="fa fa-arrows-h"></i>Maximaler Längenwert</label>
        <input type="number" id="node-config-input-maxlength" placeholder="Maximaler Längenwert">
    </div>
    <div class="form-row">
        <label for="node-config-input-magformatinput"><i class="fa fa-cogs"></i> Magazinformat</label>
        <select id="node-config-input-magformatinput">
            <option value="height">Hochformat</option>
            <option value="width">Querformat</option>
        </select>
    </div>
</script>