grunig-nodes/nodes/Visualization.html

Grünig Nodes Library

<script type="text/javascript">
    RED.nodes.registerType('Visualization', {
        category: 'Grunig',
        color: 'rgb(176, 223, 227)',
        defaults: {
            name: { value: "" },
            stmEnabled: { value: false },
            g370Enabled: { value: false },
            mag1Enabled: { value: false },
            mag2Enabled: { value: false },
            moduleEnabled: { value: false }
        },
        inputs: 1,
        outputs: 2,
        icon: "white-globe.svg",
        label: function() {
            return this.name || "Visualization";
        },
        oneditprepare: function() {
            // Diese Funktion wird ausgeführt, wenn das Formular zum Bearbeiten des Knotens geladen wird
            
            // Verweis auf das aktuelle Knotenobjekt
            var node = this;

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

            // Checkbox stm
            var stmInput = $("#node-config-input-stmenabled");
            stmInput.prop('checked', node.stmEnabled);

            // Checkbox g370
            var g370Input = $("#node-config-input-g370enabled");
            g370Input.prop('checked', node.g370Enabled);

            // Checkbox mag1
            var mag1Input = $("#node-config-input-mag1enabled");
            mag1Input.prop('checked', node.mag1Enabled);

            // Checkbox mag2
            var mag2Input = $("#node-config-input-mag2enabled");
            mag2Input.prop('checked', node.mag2Enabled);

            // Checkbox module
            var moduleInput = $("#node-config-input-moduleenabled");
            moduleInput.prop('checked', node.moduleEnabled);

            // Ä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 stmEnabled
            stmInput.on("change", function() {
                node.stmEnabled = stmInput.prop('checked');
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });

            // Änderungsereignis für g370Enabled
            g370Input.on("change", function() {
                node.g370Enabled = g370Input.prop('checked');
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });

            // Änderungsereignis für mag1Enabled
            mag1Input.on("change", function() {
                node.mag1Enabled = mag1Input.prop('checked');
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });
            
            // Änderungsereignis für mag2Enabled
            mag2Input.on("change", function() {
                node.mag2Enabled = mag2Input.prop('checked');
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });
            
            // Änderungsereignis für moduleEnabled
            moduleInput.on("change", function() {
                node.moduleEnabled = moduleInput.prop('checked');
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });
        }
    });
</script>

<!-- Styles -->
<style>
    div.form-row label {
        width: 140px;
        display: contents;
    }

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

<script type="text/html" data-template-name="Visualization">
    <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="Enter name">
    </div>

    <div class="form-row" style="height: 5px;"></div>

    <div class="form-row">
        <label for="node-config-input-stmenabled">
             STM
        </label>
        <input type="checkbox" id="node-config-input-stmenabled">
    </div>
    <div class="form-row">
        <label for="node-config-input-g370enabled">
            G370 
        </label>
        <input type="checkbox" id="node-config-input-g370enabled">
    </div>

    <div class="form-row" style="height: 50px;"></div>

    <div class="form-row">
        <label style="width: 300px;">
            Vorhandene Magazine / Module
        </label>
    </div>
    <div class="form-row">
        <label for="node-config-input-mag1enabled">
            Magazine 1 
        </label>
        <input type="checkbox" id="node-config-input-mag1enabled">
    </div>
    <div class="form-row">
        <label for="node-config-input-mag2enabled">
            Magazine 2 
        </label>
        <input type="checkbox" id="node-config-input-mag2enabled">
    </div>
    <div class="form-row">
        <label for="node-config-input-moduleenabled">
            Module 
        </label>
        <input type="checkbox" id="node-config-input-moduleenabled">
    </div>
</script>