techinc/ti-powerbar
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

powerbar

Browse source
This commit is contained in:
Matthew Frost 2023-11-19 02:42:51 +01:00
parent 44726f433b
commit 303351b904
1 changed files with 99 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
app/templates/index.html
View file

@ -2,10 +2,12 @@
<html> <html>
<head> <head>
<title>Powerbar Control</title> <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> <style>
/* Add your custom CSS styles here */ /* Add your custom CSS styles here */
body { body {
font-family: Arial, sans-serif; font-family: 'Roboto', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -41,6 +43,8 @@
.outlet { .outlet {
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid #ccc; /* Add separator */
padding-bottom: 10px; /* Add separator */
} }
.outlet h3 { .outlet h3 {
@ -59,13 +63,64 @@
.outlet-buttons button { .outlet-buttons button {
margin-right: 5px; 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> </style>
</head> </head>
<body> <body>
<h1>Powerbar Control</h1> <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> <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> <script>
// Fetch data from the /powerbars endpoint // Fetch data from the /powerbars endpoint
fetch('/powerbars') fetch('/powerbars')
@ -87,16 +142,17 @@
// Create powerbar container // Create powerbar container
const powerbarContainer = document.createElement('div'); const powerbarContainer = document.createElement('div');
powerbarContainer.classList.add('powerbar'); powerbarContainer.classList.add('powerbar', 'card');
// Create powerbar title // Create powerbar title
const powerbarTitle = document.createElement('h2'); const powerbarTitle = document.createElement('h2');
powerbarTitle.classList.add('card-title');
powerbarTitle.textContent = powerbar.name; powerbarTitle.textContent = powerbar.name;
powerbarContainer.appendChild(powerbarTitle); powerbarContainer.appendChild(powerbarTitle);
// Create outlets container // Create outlets container
const outletsContainer = document.createElement('div'); const outletsContainer = document.createElement('div');
outletsContainer.classList.add('outlets'); outletsContainer.classList.add('outlets', 'card-content');
// Loop through each outlet // Loop through each outlet
for (const outletKey in powerbar.outlets) { for (const outletKey in powerbar.outlets) {
@ -108,11 +164,13 @@
// Create outlet name // Create outlet name
const outletName = document.createElement('h3'); const outletName = document.createElement('h3');
outletName.classList.add('outlet-name');
outletName.textContent = outlet.name; outletName.textContent = outlet.name;
outletContainer.appendChild(outletName); outletContainer.appendChild(outletName);
// Create outlet state // Create outlet state
const outletState = document.createElement('p'); const outletState = document.createElement('p');
outletState.classList.add('outlet-state');
outletState.textContent = `State: ${outlet.state}`; outletState.textContent = `State: ${outlet.state}`;
outletContainer.appendChild(outletState); outletContainer.appendChild(outletState);
@ -123,6 +181,7 @@
// Create on button // Create on button
const onButton = document.createElement('button'); const onButton = document.createElement('button');
onButton.textContent = 'On'; onButton.textContent = 'On';
onButton.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', 'on');
onButton.addEventListener('click', () => { onButton.addEventListener('click', () => {
fetch(outlet.on_url, { method: 'GET' }) fetch(outlet.on_url, { method: 'GET' })
.then(response => response.json()) .then(response => response.json())
@ -139,6 +198,7 @@
// Create off button // Create off button
const offButton = document.createElement('button'); const offButton = document.createElement('button');
offButton.textContent = 'Off'; offButton.textContent = 'Off';
offButton.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', 'off');
offButton.addEventListener('click', () => { offButton.addEventListener('click', () => {
fetch(outlet.off_url, { method: 'GET' }) fetch(outlet.off_url, { method: 'GET' })
.then(response => response.json()) .then(response => response.json())
@ -166,6 +226,42 @@
powerbarsContainer.appendChild(powerbarContainer); 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> </script>
</body> </body>
</html> </html>