node-red-contrib-vocalrec/vocalrec-metadata.html

Nodos personalizados de Node-RED para la API de VocalRec

<script type="text/javascript">
    RED.nodes.registerType('vocalrec-metadata', {
        category: 'VocalRec',
        color: '#cae2c9',
        defaults: {
            name: { value: "" },
            server: { value: "", type: "vocalrec-config", required: true },
            transactionId: { value: "" },
            metadata: { value: [{ key: "", value: "" }] }
        },
        inputs: 1,
        outputs: 1,
        icon: "icons/logo-vr.png",
        label: function() {
            return this.name || "Metadata";
        },
        paletteLabel: "Metadata",
        oneditprepare: function() {
            var node = this;
            
            // Inicializar la lista de metadatos si no existe
            if (!node.metadata || node.metadata.length === 0) {
                node.metadata = [{ key: "", value: "" }];
            }
            
            function generateMetadataRow(metadata, index) {
                var row = $('<div class="metadata-row" style="margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">');
                
                var keyInput = $('<input type="text" style="flex: 1; min-width: 120px;" placeholder="Clave">')
                    .val(metadata.key)
                    .on('change keyup', function() {
                        node.metadata[index].key = $(this).val();
                    });
                
                var valueInput = $('<input type="text" style="flex: 1; min-width: 120px;" placeholder="Valor">')
                    .val(metadata.value)
                    .on('change keyup', function() {
                        node.metadata[index].value = $(this).val();
                    });
                
                var deleteBtn = $('<button type="button" class="red-ui-button red-ui-button-small" style="margin-left: 5px;"><i class="fa fa-trash"></i></button>')
                    .on('click', function() {                        
                        node.metadata.splice(index, 1);
                        refreshMetadataList();
                    });
                
                row.append(keyInput).append(valueInput).append(deleteBtn);
                return row;
            }
            
            function refreshMetadataList() {
                var container = $('#metadata-container');
                container.empty();
                
                node.metadata.forEach(function(metadata, index) {
                    container.append(generateMetadataRow(metadata, index));
                });
            }
            
            function addMetadataRow() {
                node.metadata.push({ key: "", value: "" });
                refreshMetadataList();
            }
            
            // Configurar el botón de añadir
            $('#add-metadata-btn').on('click', addMetadataRow);
            
            // Inicializar la lista
            refreshMetadataList();
        },
        oneditsave: function() {
            // Filtrar elementos vacíos y asegurar que hay al menos uno
            this.metadata = this.metadata.filter(function(item) {
                return item.key.trim() !== "" || item.value.trim() !== "";
            });
            
            if (this.metadata.length === 0) {
                this.metadata = [{ key: "", value: "" }];
            }
        }
    });
</script>

<script type="text/html" data-template-name="vocalrec-metadata">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Nombre</label>
        <input type="text" id="node-input-name" placeholder="Nombre del nodo">
    </div>
    <div class="form-row">
        <label for="node-input-server"><i class="fa fa-server"></i> Servidor</label>
        <input type="text" id="node-input-server" placeholder="Configuración del servidor">
    </div>
    <div class="form-row">
        <label for="node-input-transactionId"><i class="fa fa-id-card"></i> Transaction ID</label>
        <input type="text" id="node-input-transactionId" placeholder="ID de transacción">
    </div>
    
    <div class="form-row">
        <label style="width: 100%; margin-bottom: 10px;"><i class="fa fa-list"></i> Metadatos (Key/Value)</label>
        <div id="metadata-container" style="border: 1px solid #ccc; padding: 10px; border-radius: 4px; background-color: #f9f9f9;">
            <!-- Los elementos se generarán dinámicamente aquí -->
        </div>
        <div style="margin-top: 10px; text-align: right;">
            <button type="button" id="add-metadata-btn" class="red-ui-button">
                <i class="fa fa-plus"></i> Añadir metadato
            </button>
        </div>
    </div>
</script>

<script type="text/html" data-help-name="vocalrec-metadata">
    <p>Establece múltiples metadatos para una grabación identificada por el TransactionID.</p>
    <h3>Entradas</h3>
    <dl class="message-properties">
        <dt>transactionId <span class="property-type">string</span></dt>
        <dd>ID de la transacción de grabación a modificar</dd>
        <dt>payload.metadata <span class="property-type">array</span></dt>
        <dd>Array de objetos con propiedades key y value: [{"key": "clave1", "value": "valor1"}, {"key": "clave2", "value": "valor2"}]</dd>
    </dl>
    <h3>Salidas</h3>
    <dl class="message-properties">
        <dt>payload <span class="property-type">object</span></dt>
        <dd>Respuesta de la API confirmando la actualización de los metadatos</dd>
    </dl>
    <h3>Detalles</h3>
    <p>Este nodo envía múltiples POST para establecer varios metadatos (key-value) en una grabación usando su TransactionID.</p>
    <p>Puede configurar múltiples pares clave-valor en la interfaz del nodo. Use el botón "Añadir metadato" para agregar nuevos elementos y el botón de papelera para eliminar elementos existentes.</p>
    <p>Debe mantener al menos un elemento de metadatos configurado.</p>
</script>