node-red-contrib-uibuilder
Version:
Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.
159 lines (132 loc) • 5.54 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-Updating Template Example</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.example {
border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
}
.controls {
margin: 15px 0;
}
.controls button {
margin: 5px;
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.auto-update {
background-color: #e8f5e8;
}
.manual-update {
background-color: #f5f5e8;
}
.template-output {
border-left: 4px solid #007cba;
padding-left: 15px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Auto-Updating Template Example</h1>
<div class="example auto-update">
<h2>Auto-Updating Template</h2>
<p>This template automatically updates when variables change:</p>
<template id="auto-template">
<h3>User Profile</h3>
<p><strong>Name:</strong> {{userName}}</p>
<p><strong>Email:</strong> {{userEmail}}</p>
<p><strong>Messages:</strong> {{messageCount}}</p>
<p><strong>Last Login:</strong> {{lastLogin}}</p>
<p><strong>Status:</strong> {{status}}</p>
</template>
<div class="template-output" id="auto-output"></div>
<div class="controls">
<button onclick="changeUserName()">Change Name</button>
<button onclick="changeEmail()">Change Email</button>
<button onclick="addMessage()">Add Message</button>
<button onclick="updateLogin()">Update Login Time</button>
<button onclick="toggleStatus()">Toggle Status</button>
</div>
</div>
<div class="example manual-update">
<h2>Manual Template (No Auto-Update)</h2>
<p>This template only updates when manually refreshed:</p>
<div class="template-output" id="manual-output"></div>
<div class="controls">
<button onclick="manualRefresh()">Manual Refresh</button>
</div>
</div>
<script type="module">
// Mock UIBuilder for demonstration
const mockData = {
userName: 'John Doe',
userEmail: 'john.doe@example.com',
messageCount: 5,
lastLogin: new Date().toLocaleString(),
status: 'online'
}
const changeListeners = {}
// Import experimental module
import '../uibuilder/experimental.mjs'
// window.uibExp = uibExperimental
// Set up auto-updating template
const autoElement = document.getElementById('auto-output')
const template = document.getElementById('auto-template').innerHTML
// Initialize with auto-update
autoElement.innerHTML = uibExperimental.processTemplate(template, mockData, autoElement)
// Set up manual template
const manualElement = document.getElementById('manual-output')
manualElement.innerHTML = uibExperimental.processTemplate(template, mockData)
// Make functions global for button clicks
window.changeUserName = () => {
const names = ['John Doe', 'Jane Smith', 'Bob Johnson', 'Alice Williams', 'Charlie Brown']
const current = uibExperimental.get('userName')
const currentIndex = names.indexOf(current)
const newName = names[(currentIndex + 1) % names.length]
uibExperimental.set('userName', newName)
}
window.changeEmail = () => {
const domains = ['@example.com', '@test.org', '@demo.net', '@sample.io']
const userName = uibExperimental.get('userName').toLowerCase().replace(' ', '.')
const domain = domains[Math.floor(Math.random() * domains.length)]
uibExperimental.set('userEmail', userName + domain)
}
window.addMessage = () => {
const current = uibExperimental.get('messageCount')
uibExperimental.set('messageCount', current + 1)
}
window.updateLogin = () => {
uibExperimental.set('lastLogin', new Date().toLocaleString())
}
window.toggleStatus = () => {
const current = uibExperimental.get('status')
uibExperimental.set('status', current === 'online' ? 'offline' : 'online')
}
window.manualRefresh = () => {
const manualElement = document.getElementById('manual-output')
const currentData = {
userName: uibExperimental.get('userName'),
userEmail: uibExperimental.get('userEmail'),
messageCount: uibExperimental.get('messageCount'),
lastLogin: uibExperimental.get('lastLogin'),
status: uibExperimental.get('status')
}
manualElement.innerHTML = uibExperimental.processTemplate(template, currentData)
}
</script>
</body>
</html>