grunig-nodes/nodes/AlarmOutput.html

Grünig Nodes Library

<script type="text/javascript">
    RED.nodes.registerType('AlarmOutput', {
        category: 'Grunig',
        color: 'rgb(176, 223, 227)',
        defaults: {
            name: { value: "" },
            mqttPath: { value: "" },
            language: { value: 0 },
            alarmList: { value: "" },
        },
        inputs: 1,
        outputs: 1,
        icon: "alert.svg",
        label: function() {
            return this.name || "AlarmOutput";
        },
        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);
            
            // Eingabefeld für den Pfad
            var pathInput = $("#node-config-input-path");
            pathInput.val(node.mqttPath);

            // Eingabefeld für den Pfad
            var languageInput = $("#node-config-input-language");
            languageInput.val(node.language);

            // Eingabefeld für alarmList
            var alarmListInput = $("#alarmListInput");
            alarmListInput.val(node.alarmList);

            // Ä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 den Pfad
            pathInput.on("change", function() {
                node.mqttPath = pathInput.val();
                RED.nodes.dirty(true);
                RED.nodes.node(node.id).changed = true;
            });

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

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

            // Änderungsereignis für alarmList
            alarmListInput.on("input", function() {
                try {
                    JSON.parse(alarmListInput.val());
                    // Wenn das JSON erfolgreich geparst werden kann, entferne die Fehlerklasse
                    alarmListInput.classList.remove("is-invalid");
                    node.alarmList = alarmListInput.val();
                } catch (error) {
                    // Wenn das JSON nicht geparst werden kann, füge die Fehlerklasse hinzu
                    alarmListInput.classList.add("is-invalid");
                }
            });
        }
    });
</script>



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

    .form-row {
        margin-bottom: 10px;
    }
    #jsonModal {
        height: calc(100% - 110px);
        width: 100%;
    }
    .modal-content {
        height: 100%;
        width: 100%;
    }
    .modal-body {
        height: calc(100% - 50px);
        width: 100%;
    }
    #alarmListInput {
        height: 100%;
        width: 100%;
    }
    .is-invalid {
        border-color: #dc3545;
    }
</style>

<script type="text/html" data-template-name="AlarmOutput">
    <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">
        <label for="node-config-input-path">
            <i class="fa fa-folder-open"></i> MQTT Path
        </label>
        <input type="text" id="node-config-input-path" placeholder="Enter path">
    </div>
    <div class="form-row">
        <label for="node-config-input-language">
            <i class="fa fa-gear"></i> Language
        </label>
        <select id="node-config-input-language">
            <option value=0>English</option>
            <option value=1>Deutsch</option>
        </select>
    </div>

    <div style="height: 20px;"></div> <!-- Platzhalter für den Abstand -->


    <!-- Modalfenster für die Alarm-Liste -->
    <div class="modal" id="jsonModal">
        <div class="modal-content">
            
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Edit Alarm List</h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <!-- Textfeld für die Eingabe der Alarmliste -->
                <textarea id="alarmListInput" class="form-control" rows="5"></textarea>
            </div>
        
        </div>
    </div>
</script>