powerbar
This commit is contained in:
parent
44726f433b
commit
303351b904
1 changed files with 99 additions and 3 deletions
|
|
@ -2,10 +2,12 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Powerbar Control</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: Arial, sans-serif;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -41,6 +43,8 @@
|
|||
|
||||
.outlet {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #ccc; /* Add separator */
|
||||
padding-bottom: 10px; /* Add separator */
|
||||
}
|
||||
|
||||
.outlet h3 {
|
||||
|
|
@ -59,13 +63,64 @@
|
|||
|
||||
.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
|
||||
fetch('/powerbars')
|
||||
|
|
@ -87,16 +142,17 @@
|
|||
|
||||
// Create powerbar container
|
||||
const powerbarContainer = document.createElement('div');
|
||||
powerbarContainer.classList.add('powerbar');
|
||||
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');
|
||||
outletsContainer.classList.add('outlets', 'card-content');
|
||||
|
||||
// Loop through each outlet
|
||||
for (const outletKey in powerbar.outlets) {
|
||||
|
|
@ -108,11 +164,13 @@
|
|||
|
||||
// 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);
|
||||
|
||||
|
|
@ -123,6 +181,7 @@
|
|||
// 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())
|
||||
|
|
@ -139,6 +198,7 @@
|
|||
// 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())
|
||||
|
|
@ -166,6 +226,42 @@
|
|||
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';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue