app.js

// n8n Preview Mode Test Application
class PreviewModeTestApp {
    constructor() {
        this.iframe = null;
        this.isIframeReady = false;
        this.logs = [];
        this.currentOrigin = 'http://localhost:5678';
        
        this.initializeElements();
        this.bindEvents();
        this.setupMessageListener();
        
        this.log('Application initialized');
    }
    
    initializeElements() {
        this.iframe = document.getElementById('n8nIframe');
        this.status = document.getElementById('status');
        this.renderButton = document.getElementById('renderWorkflow');
        this.clearButton = document.getElementById('clearWorkflow');
        this.refreshButton = document.getElementById('refreshIframe');
        this.toggleLogsButton = document.getElementById('toggleLogs');
        this.originInput = document.getElementById('originInput');
        this.workflowTextarea = document.getElementById('workflowTextarea');
        this.exampleSelect = document.getElementById('exampleSelect');
        this.loadExampleButton = document.getElementById('loadExample');
        this.logsContainer = document.getElementById('logs');
        this.logEntries = document.getElementById('logEntries');
    }
    
    bindEvents() {
        this.renderButton.addEventListener('click', () => this.renderWorkflow());
        this.clearButton.addEventListener('click', () => this.clearWorkflow());
        this.refreshButton.addEventListener('click', () => this.refreshIframe());
        this.toggleLogsButton.addEventListener('click', () => this.toggleLogs());
        this.originInput.addEventListener('change', () => this.updateOrigin());
        this.loadExampleButton.addEventListener('click', () => this.loadExampleWorkflow());
        
        this.iframe.addEventListener('load', () => {
            this.log('Iframe loaded, waiting for n8n ready signal...');
            this.updateStatus('loading', 'Iframe loaded, waiting for n8n ready signal...');
        });
    }
    
    setupMessageListener() {
        window.addEventListener('message', (event) => {
            // Only accept messages from the configured n8n origin
            if (event.origin !== this.currentOrigin) {
                return;
            }
            
            try {
                const data = JSON.parse(event.data);
                this.log(`Received message: ${event.data}`);
                
                if (data.command === 'n8nReady') {
                    this.isIframeReady = true;
                    this.updateStatus('ready', `n8n Demo ready (version: ${data.version || 'unknown'})`);
                    this.renderButton.disabled = false;
                    this.clearButton.disabled = false;
                    this.log('n8n iframe is ready for commands');
                } else if (data.command === 'error') {
                    this.updateStatus('error', `Error: ${data.message}`);
                    this.log(`Error from iframe: ${data.message}`);
                } else if (data.command === 'openNDV') {
                    this.log('Node Details View opened');
                } else if (data.command === 'closeNDV') {
                    this.log('Node Details View closed');
                }
            } catch (error) {
                this.log(`Failed to parse message: ${error.message}`);
            }
        });
    }
    
    renderWorkflow() {
        if (!this.isIframeReady) {
            this.log('Cannot render workflow: iframe not ready');
            return;
        }
        
        const workflowText = this.workflowTextarea.value.trim();
        if (!workflowText) {
            this.log('No workflow JSON provided');
            this.updateStatus('error', 'Please paste a workflow JSON in the textarea');
            return;
        }
        
        try {
            const workflow = JSON.parse(workflowText);
            this.sendWorkflowToIframe(workflow);
        } catch (error) {
            this.log(`Failed to parse workflow JSON: ${error.message}`);
            this.updateStatus('error', `Invalid JSON: ${error.message}`);
        }
    }
    
    updateOrigin() {
        const newOrigin = this.originInput.value.trim();
        if (!newOrigin) {
            this.log('Origin cannot be empty');
            return;
        }
        
        // Validate URL format
        try {
            new URL(newOrigin);
            this.currentOrigin = newOrigin;
            this.log(`Origin updated to: ${newOrigin}`);
            
            // Update iframe src to match new origin
            const currentPath = new URL(this.iframe.src).pathname + new URL(this.iframe.src).search;
            this.iframe.src = newOrigin + currentPath;
            
            // Reset ready state
            this.isIframeReady = false;
            this.renderButton.disabled = true;
            this.clearButton.disabled = true;
            this.updateStatus('loading', 'Updating origin and reloading iframe...');
        } catch (error) {
            this.log(`Invalid origin URL: ${error.message}`);
            this.updateStatus('error', `Invalid origin URL: ${error.message}`);
        }
    }
    
    loadExampleWorkflow() {
        const selectedTemplate = this.exampleSelect.value;
        if (!selectedTemplate) {
            this.log('No example workflow selected');
            return;
        }
        
        const workflow = this.getWorkflowTemplate(selectedTemplate);
        if (!workflow) {
            this.log('Example workflow not found');
            return;
        }
        
        this.workflowTextarea.value = JSON.stringify(workflow, null, 2);
        this.log(`Loaded example workflow: ${workflow.name}`);
    }
    
    sendWorkflowToIframe(workflow) {
        const message = {
            command: 'openWorkflow',
            workflow: workflow,
            canOpenNDV: true,
            hideNodeIssues: false,
            projectId: null
        };
        
        this.log(`Sending workflow to iframe: ${workflow.name}`);
        this.iframe.contentWindow.postMessage(JSON.stringify(message), this.currentOrigin);
    }
    
    clearWorkflow() {
        if (!this.isIframeReady) {
            this.log('Cannot clear workflow: iframe not ready');
            return;
        }
        
        const emptyWorkflow = {
            name: 'Empty Workflow',
            nodes: [],
            connections: {},
            active: false,
            settings: {},
            tags: []
        };
        
        this.sendWorkflowToIframe(emptyWorkflow);
        this.log('Sent empty workflow to clear canvas');
    }
    
    refreshIframe() {
        this.isIframeReady = false;
        this.renderButton.disabled = true;
        this.clearButton.disabled = true;
        this.updateStatus('loading', 'Refreshing iframe...');
        this.log('Refreshing iframe...');
        
        this.iframe.src = this.iframe.src;
    }
    
    toggleLogs() {
        const isVisible = this.logsContainer.style.display !== 'none';
        this.logsContainer.style.display = isVisible ? 'none' : 'block';
        this.toggleLogsButton.textContent = isVisible ? 'Show Logs' : 'Hide Logs';
    }
    
    updateStatus(type, message) {
        this.status.className = `status ${type}`;
        this.status.textContent = message;
    }
    
    log(message) {
        const timestamp = new Date().toLocaleTimeString();
        this.logs.push({ timestamp, message });
        
        const logEntry = document.createElement('div');
        logEntry.className = 'log-entry';
        logEntry.innerHTML = `<span class="log-timestamp">[${timestamp}]</span> ${message}`;
        
        this.logEntries.appendChild(logEntry);
        this.logEntries.scrollTop = this.logEntries.scrollHeight;
        
        // Keep only last 100 log entries
        if (this.logEntries.children.length > 100) {
            this.logEntries.removeChild(this.logEntries.firstChild);
        }
        
        console.log(`[Preview Test] ${message}`);
    }
    
    getWorkflowTemplate(template) {
        const templates = {
            simple: {
                name: 'Simple HTTP Request',
                nodes: [
                    {
                        id: 'start-node',
                        name: 'Start',
                        type: 'n8n-nodes-base.start',
                        typeVersion: 1,
                        position: [100, 200]
                    },
                    {
                        id: 'http-node',
                        name: 'HTTP Request',
                        type: 'n8n-nodes-base.httpRequest',
                        typeVersion: 4.2,
                        position: [300, 200],
                        parameters: {
                            url: 'https://jsonplaceholder.typicode.com/posts/1',
                            options: {}
                        }
                    }
                ],
                connections: {
                    'Start': {
                        main: [
                            [
                                {
                                    node: 'HTTP Request',
                                    type: 'main',
                                    index: 0
                                }
                            ]
                        ]
                    }
                },
                active: false,
                settings: {},
                tags: []
            },
            
            webhook: {
                name: 'Webhook + Set Workflow',
                nodes: [
                    {
                        id: 'webhook-node',
                        name: 'Webhook',
                        type: 'n8n-nodes-base.webhook',
                        typeVersion: 2,
                        position: [100, 200],
                        parameters: {
                            path: 'test-webhook',
                            responseMode: 'onReceived',
                            options: {}
                        }
                    },
                    {
                        id: 'set-node',
                        name: 'Set',
                        type: 'n8n-nodes-base.set',
                        typeVersion: 3.4,
                        position: [300, 200],
                        parameters: {
                            assignments: {
                                assignments: [
                                    {
                                        id: '1',
                                        name: 'message',
                                        value: 'Hello from n8n preview!',
                                        type: 'string'
                                    },
                                    {
                                        id: '2',
                                        name: 'timestamp',
                                        value: '={{ new Date().toISOString() }}',
                                        type: 'string'
                                    }
                                ]
                            },
                            options: {}
                        }
                    }
                ],
                connections: {
                    'Webhook': {
                        main: [
                            [
                                {
                                    node: 'Set',
                                    type: 'main',
                                    index: 0
                                }
                            ]
                        ]
                    }
                },
                active: false,
                settings: {},
                tags: []
            },
            
            schedule: {
                name: 'Schedule + Email Workflow',
                nodes: [
                    {
                        id: 'schedule-node',
                        name: 'Schedule Trigger',
                        type: 'n8n-nodes-base.scheduleTrigger',
                        typeVersion: 1.2,
                        position: [100, 200],
                        parameters: {
                            rule: {
                                interval: [
                                    {
                                        field: 'hours',
                                        value: 1
                                    }
                                ]
                            }
                        }
                    },
                    {
                        id: 'set-node',
                        name: 'Prepare Data',
                        type: 'n8n-nodes-base.set',
                        typeVersion: 3.4,
                        position: [300, 200],
                        parameters: {
                            assignments: {
                                assignments: [
                                    {
                                        id: '1',
                                        name: 'to',
                                        value: 'test@example.com',
                                        type: 'string'
                                    },
                                    {
                                        id: '2',
                                        name: 'subject',
                                        value: 'Scheduled Report',
                                        type: 'string'
                                    }
                                ]
                            }
                        }
                    },
                    {
                        id: 'email-node',
                        name: 'Send Email',
                        type: 'n8n-nodes-base.emailSend',
                        typeVersion: 2.1,
                        position: [500, 200],
                        parameters: {
                            toEmail: '={{ $json.to }}',
                            subject: '={{ $json.subject }}',
                            text: 'This is a scheduled email from n8n preview mode test.',
                            options: {}
                        }
                    }
                ],
                connections: {
                    'Schedule Trigger': {
                        main: [
                            [
                                {
                                    node: 'Prepare Data',
                                    type: 'main',
                                    index: 0
                                }
                            ]
                        ]
                    },
                    'Prepare Data': {
                        main: [
                            [
                                {
                                    node: 'Send Email',
                                    type: 'main',
                                    index: 0
                                }
                            ]
                        ]
                    }
                },
                active: false,
                settings: {},
                tags: []
            },
            
            custom: {
                name: 'Custom Test Workflow',
                nodes: [
                    {
                        id: 'start-node',
                        name: 'Start',
                        type: 'n8n-nodes-base.start',
                        typeVersion: 1,
                        position: [100, 200]
                    },
                    {
                        id: 'code-node',
                        name: 'Code',
                        type: 'n8n-nodes-base.code',
                        typeVersion: 2,
                        position: [300, 200],
                        parameters: {
                            jsCode: 'return [{\\n  json: {\\n    message: "Hello from preview mode!",\\n    timestamp: new Date().toISOString(),\\n    randomNumber: Math.floor(Math.random() * 100)\\n  }\\n}];'
                        }
                    }
                ],
                connections: {
                    'Start': {
                        main: [
                            [
                                {
                                    node: 'Code',
                                    type: 'main',
                                    index: 0
                                }
                            ]
                        ]
                    }
                },
                active: false,
                settings: {},
                tags: []
            }
        };
        
        return templates[template];
    }
}

// Initialize the application when the page loads
document.addEventListener('DOMContentLoaded', () => {
    new PreviewModeTestApp();
});