281 lines
8 KiB
HTML
281 lines
8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Powerbar.ti</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
|
<style>
|
|
/* Add your custom CSS styles here */
|
|
body {
|
|
font-family: 'Roboto', 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;
|
|
border-bottom: 1px solid #ccc; /* Add separator */
|
|
padding-bottom: 10px; /* Add separator */
|
|
}
|
|
|
|
.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;
|
|
padding: 5px 10px;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.outlet-buttons button.on {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.outlet-buttons button.off {
|
|
background-color: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.search-container {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.search-container input {
|
|
padding: 5px;
|
|
width: 200px;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.filter-container {
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.filter-container select {
|
|
padding: 5px;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Powerbar Control</h1>
|
|
<div class="search-container">
|
|
<div class="container">
|
|
<input type="text" id="searchInput" placeholder="Search outlet...">
|
|
</div>
|
|
</div>
|
|
<div class="filter-container">
|
|
<select id="stateFilter">
|
|
<option value="">All</option>
|
|
<option value="on">On</option>
|
|
<option value="off">Off</option>
|
|
</select>
|
|
</div>
|
|
<div id="powerbars"></div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
<script>
|
|
// Fetch data from the /powerbars endpoint
|
|
function fetchPowerbars() {
|
|
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');
|
|
powerbarsContainer.innerHTML = ''; // Clear existing 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', 'card');
|
|
|
|
// Create powerbar title
|
|
const powerbarTitle = document.createElement('h2');
|
|
powerbarTitle.classList.add('card-title');
|
|
powerbarTitle.textContent = powerbar.name;
|
|
powerbarContainer.appendChild(powerbarTitle);
|
|
|
|
// Create outlets container
|
|
const outletsContainer = document.createElement('div');
|
|
outletsContainer.classList.add('outlets', 'card-content');
|
|
|
|
// 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.classList.add('outlet-name');
|
|
outletName.textContent = outlet.name;
|
|
outletContainer.appendChild(outletName);
|
|
|
|
// Create outlet state
|
|
const outletState = document.createElement('p');
|
|
outletState.classList.add('outlet-state');
|
|
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.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', '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.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', '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);
|
|
}
|
|
}
|
|
|
|
// Search outlet
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.addEventListener('input', () => {
|
|
const searchValue = searchInput.value.toLowerCase();
|
|
const outlets = document.getElementsByClassName('outlet');
|
|
|
|
for (let i = 0; i < outlets.length; i++) {
|
|
const outlet = outlets[i];
|
|
const outletName = outlet.getElementsByClassName('outlet-name')[0].textContent.toLowerCase();
|
|
|
|
if (outletName.includes(searchValue)) {
|
|
outlet.style.display = 'block';
|
|
} else {
|
|
outlet.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Filter outlets by state
|
|
const stateFilter = document.getElementById('stateFilter');
|
|
stateFilter.addEventListener('change', () => {
|
|
const filterValue = stateFilter.value;
|
|
const outlets = document.getElementsByClassName('outlet');
|
|
|
|
for (let i = 0; i < outlets.length; i++) {
|
|
const outlet = outlets[i];
|
|
const outletState = outlet.getElementsByClassName('outlet-state')[0].textContent.toLowerCase();
|
|
|
|
if (filterValue === '' || outletState.includes(filterValue)) {
|
|
outlet.style.display = 'block';
|
|
} else {
|
|
outlet.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Refresh powerbars and their states
|
|
function refreshPowerbars() {
|
|
fetchPowerbars();
|
|
}
|
|
|
|
// Initial fetch and render
|
|
fetchPowerbars();
|
|
|
|
// Refresh every 5 seconds
|
|
setInterval(refreshPowerbars, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|