171 lines
4.6 KiB
HTML
171 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Powerbar Control</title>
|
|
<style>
|
|
/* Add your custom CSS styles here */
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#powerbars {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.powerbar {
|
|
width: 300px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.powerbar h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.outlets {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.outlet {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.outlet h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.outlet p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.outlet-buttons {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.outlet-buttons button {
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Powerbar Control</h1>
|
|
<div id="powerbars"></div>
|
|
|
|
<script>
|
|
// Fetch data from the /powerbars endpoint
|
|
fetch('/powerbars')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Render powerbars
|
|
renderPowerbars(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
|
|
function renderPowerbars(data) {
|
|
const powerbarsContainer = document.getElementById('powerbars');
|
|
|
|
// Loop through each powerbar
|
|
for (const powerbarKey in data) {
|
|
const powerbar = data[powerbarKey];
|
|
|
|
// Create powerbar container
|
|
const powerbarContainer = document.createElement('div');
|
|
powerbarContainer.classList.add('powerbar');
|
|
|
|
// Create powerbar title
|
|
const powerbarTitle = document.createElement('h2');
|
|
powerbarTitle.textContent = powerbar.name;
|
|
powerbarContainer.appendChild(powerbarTitle);
|
|
|
|
// Create outlets container
|
|
const outletsContainer = document.createElement('div');
|
|
outletsContainer.classList.add('outlets');
|
|
|
|
// Loop through each outlet
|
|
for (const outletKey in powerbar.outlets) {
|
|
const outlet = powerbar.outlets[outletKey];
|
|
|
|
// Create outlet container
|
|
const outletContainer = document.createElement('div');
|
|
outletContainer.classList.add('outlet');
|
|
|
|
// Create outlet name
|
|
const outletName = document.createElement('h3');
|
|
outletName.textContent = outlet.name;
|
|
outletContainer.appendChild(outletName);
|
|
|
|
// Create outlet state
|
|
const outletState = document.createElement('p');
|
|
outletState.textContent = `State: ${outlet.state}`;
|
|
outletContainer.appendChild(outletState);
|
|
|
|
// Create outlet buttons container
|
|
const outletButtonsContainer = document.createElement('div');
|
|
outletButtonsContainer.classList.add('outlet-buttons');
|
|
|
|
// Create on button
|
|
const onButton = document.createElement('button');
|
|
onButton.textContent = 'On';
|
|
onButton.addEventListener('click', () => {
|
|
fetch(outlet.on_url, { method: 'GET' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update outlet state
|
|
outletState.textContent = `State: ${data.state}`;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
outletButtonsContainer.appendChild(onButton);
|
|
|
|
// Create off button
|
|
const offButton = document.createElement('button');
|
|
offButton.textContent = 'Off';
|
|
offButton.addEventListener('click', () => {
|
|
fetch(outlet.off_url, { method: 'GET' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update outlet state
|
|
outletState.textContent = `State: ${data.state}`;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
outletButtonsContainer.appendChild(offButton);
|
|
|
|
// Add outlet buttons container to outlet container
|
|
outletContainer.appendChild(outletButtonsContainer);
|
|
|
|
// Add outlet container to outlets container
|
|
outletsContainer.appendChild(outletContainer);
|
|
}
|
|
|
|
// Add outlets container to powerbar container
|
|
powerbarContainer.appendChild(outletsContainer);
|
|
|
|
// Add powerbar container to powerbars container
|
|
powerbarsContainer.appendChild(powerbarContainer);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|