<${Setting} title="Log Level" type="select"
value=${localConfig.log_level} setfn=${mksetfn('log_level')}
options=${logOptions} disabled=${!device.online}/>
${saveResult && html`<${Notification} ok=${saveResult === 'Success!'}
text=${saveResult} close=${() => setSaveResult(null)} />`}
<${Button} icon=${Icons.save} onclick=${onSave}
title="Save Settings" disabled=${!device.online} />
<${FirmwareUpdate} deviceID=${device.id} publishFn=${publishFn}
disabled=${!device.online}
info=${[localConfig.crnt_fw, localConfig.prev_fw]} />
`;
}
const App = function() {
const [devices, setDevices] = useState([]);
const [currentDevID, setCurrentDevID] = useState(localStorage.getItem('currentDevID') || '');
const [loading, setLoading] = useState(true);
const [url, setUrl] = useState(localStorage.getItem('url') || DefaultUrl);
const [topic, setTopic] = useState(localStorage.getItem('topic') || DefaultTopic);
const [error, setError] = useState(null);
const [connected, setConnected] = useState(false);
const responseHandlers = useRef({});
function addResponseHandler(correlationId, handler) {
responseHandlers[correlationId] = handler;
}
function removeResponseHandler(correlationId) {
delete responseHandlers[correlationId];
}
const onRefresh = ev => window.location.reload();
const initConn = () => {
MqttClient = mqtt.connect(url, {connectTimeout: 5000, reconnectPeriod: 0});
MqttClient.on('connect', () => {
//console.log('Connected to the broker');
setLoading(false);
setError(null); // Reset error state upon successful connection
setConnected(true);
const statusTopic = topic + '/+/status'
const txTopic = topic + '/+/tx'
const subscribe = (topic) => {
MqttClient.subscribe(topic, (err) => {
if (err) {
console.error('Error subscribing to topic:', err);
setError('Error subscribing to topic');
} else {
//console.log('Successfully subscribed to ', topic);
}
});
};
subscribe(statusTopic)
subscribe(txTopic)
});
MqttClient.on('message', (topic, message) => {
// console.log(`Received message from ${topic}: ${message.toString()}`);
if (message.length == 0) return;
let response;
try {
response = JSON.parse(message.toString());
} catch (err) {
console.error(err);
return;
}
if (topic.endsWith('/status')) {
let device = {topic: topic, id: topic.split('/')[1], config: DefaultDeviceConfig};
const params = response.params;
if (!params) {
console.error('Invalid response');
return;
}
device.online = params.status === 'online'
if (device.online) {
device.config = params;
if (!device.config.pins) device.config.pins = [];
}
setDevice(device)
} else if (topic.endsWith('/tx')) {
if (!response.id) {
console.error('Invalid response');
return;
}
const handler = responseHandlers[response.id];
if (handler) {
handler(response);
removeResponseHandler(response.id);
}
}
});
MqttClient.on('error', (err) => {
console.error('Connection error:', err);
setError('Connection cannot be established.');
});
MqttClient.on('close', () => {
if (!connected) {
console.error('Failed to connect to the broker.');
setError('Connection cannot be established.');
setLoading(false);
}
});
};
useEffect(() => initConn(), []);
const handlePublish = (methodName, parameters, timeout = 5000) => {
return new Promise((resolve, reject) => {
const randomIdGenerator = function(length) {
return Math.random().toString(36).substring(2, length + 2);
};
const randomID = randomIdGenerator(40);
const timeoutID = setTimeout(() => {
removeResponseHandler(randomID);
reject(new Error('Request timed out'));
}, timeout);
addResponseHandler(randomID, (messageData) => {
clearTimeout(timeoutID);
resolve(messageData);
});
if (currentDevID) {
const rxTopic = topic + `/${currentDevID}/rx`;
const rpcPayload = {method: methodName, id: randomID};
if (parameters) {
rpcPayload.params = parameters;
}
MqttClient.publish(rxTopic, JSON.stringify(rpcPayload));
}
});
};
const getDeviceByID = (deviceID) => devices.find(d => d.id === deviceID);
const setDevice = (devData) => {
setDevices(prevDevices => {
const devIndex =
prevDevices.findIndex(device => device.id === devData.id);
if (devIndex !== -1) {
if (!devData.online && !devData.config) {
const updatedDevices = [...prevDevices];
updatedDevices[devIndex].online = false;
return updatedDevices;
} else {
return prevDevices.map(device => device.id === devData.id ? devData : device);
}
} else {
return [...prevDevices, devData];
}
});
};
const setDeviceConfig = (deviceID, config) => {
setDevices(prevDevices => {
return prevDevices.map(device => {
if (device.id === deviceID) {
return {...device, config: config};
}
return device;
});
});
};
const onDeviceClick = (deviceID) => {
const device = getDeviceByID(deviceID);
if (device) {
setCurrentDevID(device.id);
localStorage.setItem('currentDevID', device.id);
}
};
if (error) {
return html`
<${Header}/>
Connection Error
Unable to connect to the MQTT broker.
<${Button} title="Retry" onclick=${onRefresh}
icon=${Icons.refresh} class="absolute top-4 right-4" />
`;
}
return html`
<${Header}
topic=${topic} setTopic=${setTopic} url=${url}
setUrl=${setUrl} connected=${connected}
/>
<${Sidebar} devices=${devices} onclick=${onDeviceClick} />
<${DeviceControlPanel}
device=${getDeviceByID(currentDevID)} connected=${connected}
setDeviceConfig=${setDeviceConfig} publishFn=${handlePublish}
/>
`;
};
window.onload = () => render(h(App), document.body);