2023-11-19 01:30:54 +00:00
<!DOCTYPE html>
2023-11-19 16:06:40 +00:00
< html lang = "en" >
2023-11-19 01:30:54 +00:00
< head >
2023-11-19 16:06:40 +00:00
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > powerbar.ti< / title >
<!-- Bootstrap CSS -->
<!-- Font Awesome -->
< link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
< link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700& display=swap"
rel="stylesheet"
/>
<!-- MDB -->
< link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.2/mdb.min.css"
rel="stylesheet"
/>
2023-11-19 01:30:54 +00:00
2023-11-19 16:06:40 +00:00
< / head >
< style >
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input.default:checked + .slider {
background-color: #444;
}
input.primary:checked + .slider {
background-color: #2196F3;
}
input.success:checked + .slider {
background-color: #8bc34a;
}
input.info:checked + .slider {
background-color: #3de0f5;
}
input.warning:checked + .slider {
background-color: #FFC107;
}
input.danger:checked + .slider {
background-color: #f44336;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
< / style >
2023-11-19 01:30:54 +00:00
2023-11-19 01:42:51 +00:00
2023-11-19 16:06:40 +00:00
< body >
< div class = "container" >
2024-02-28 19:10:53 +00:00
< h1 class = "mt-3" > < img style = "height: 50px; width: 50px;" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA/CAYAAABZ9m6wAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9wEDRQMLVyHEDwAABHySURBVHja7Zp5WJV1Fsc/572XHTFJJR1T1DIhW0zLmja1vVFTEMotBcsUakqWNIW0wB00yzUTTBMTAXWesdFyyWZaNEt7XNDU3FNRUFDWe+975o97wX2ZiTCfmfPXXX7b+33P8j3n/OD/8geQUVl3APBu9h/uaFKjuyXnCLAepS3wC4khzf9ogFhrdju1usBQhMA/ovIaNbqbiQ2R6YCgnP4/IFYTTP6KCEBpta2blHWdAjIsDAzsqB4E/Ktx5cYkZQ8hKfvO6wsQAIsdkG+r1X+JsR4Yi/ATyTk3XF+AvBUOorkgQnL2gN8WvhfDgn+Cal1EFAUUy/UFCICSjygoI3k3u94F/4+4Sn4yvBvszksBLKDHEOlAYkj+dcFDwhjMIiY5v0xbFkR+eRMw9oCmguUjwAO0DDiC4TiGo+gX3u53BWeaE4jwC+hxyq0NSHrOweRl8Ppf/riAPM0MljMQgH7EtTQxwhXjzo9njx1UUkaTMWVhcS2Mw+IrpWaRehvbzMbe62wtvLY6mjTMN+tuBsdXGI5shocccYEAiSEwPtudcslH1BckkISQfTXGVCOJI42U/2jhCOJId83pS/xzILFBt+09/eprmZs8POhRUUGgCKCcUgsBPgMpLZuKpx1aWIT73eBhi3DTj/ZGm3qeevPeHY7Ag4j9PRJCNpCUHQ0MQ6QhSiqJIXE1Tt0jie0NdFNkWDopO65mTj/iHgBSnnpi3fbQsH82s9tZZR1Esm06QwTGqqIiCHCzdxQHK+eVTQXPaOfn4hnUspqMEajb6VSC5fOKtjciuhq0E2g7EF9sRjHvdK05QCKIaS4YuxRVgWN2uMlE9JPztCaSGNKYyMvEW20wrlnTQ4FDhmb42O3M9Ykmo3Jc8TSeF0hV5U/AmhMP0rHR3Vc+R8k0pjowbvbFjJAo8knK2YthtmJ492pjvcbVBQVLkTP9EFGob0FWuqOeTrDiXdowmDQmEkGsnx39cvDgBWXxb2aUe7zC095Nz4BRNA18olioykAREOGmRndD8ZTLn6FsOt6qdLdgdi6Fo/lT3TuC7BeTkmuS7UYQdyvoWwKPKTQG8gR5No0JP1QuE0HMDYbImvfen/S9YZgrfaLJvMzbvg9Yp4qJ4OUTRcXl9i+ehp8oeQoeIqBwaI3tzjmdikbeDdqVxFB7jaf/0cQxlRQiiY1VZKyTbeoagVUgC0E/nTo9dZsJ430GseWyDziVFsAOEVSV+3yi2XAFc+kE/A0FFVSU5iJ0WmdvcXP7wrFNDbE/bzq8lBGda466TyWF/rxOGqmpgrYVtFSQDgp2hbfHTZi6HpMpVwLDZYeFrjctAmOLJ18WjDtUWQKIComGUqfMg71eUUy5z/Jz/kSfjw6Y6vY2IzrDyMXXrkAUQVwT0C/SSW1ROp0upslS4ChCF58o1l9ubulMrKYdG4AIx4F6KHhHX2AqDUU5iIAqRSLU9z7PvEqnkflA4QTZZG8+nsSQ768JdY8gBnDbD7L53aY9Q1RZCqgIAQKtr1gacWCKEwxQ6qrifjYYhROh7EMsAjsVRBUR6H4+GMUzwSuK8I214+u6iW0WydlevJNT84CkM5F0xqgipTGxC7ornEIQVVBlRsk05pVMp/bF5i5evBifKEzgOMpRUyyrD3v9uVZmZmZVYlY7Bhw2vgW8RVAR9qqwuviDc9fyecVlVkpMTq1RK1DLS4wIuVYmE9vs5kZ5E4cOm/cLyjhgIcJmVV6t2kCYqMpwn2jKSuaBdx/n71lZ2f42w7e3xSx9yaJlVkNtp1QstR3iUQhMa1swak2A7cftgJcziSXAN5q8y52nYhqr65+YW+ek6dOexNDCGq+pOrC8ERefcdI7ihjXT+1ddr9GlGycESQGiCmZxuPefViVlZVlKCS7m4VtuhwNXemAYAULsBwoBgJLrAF+X/m/949y44bezx15JhFhvm8UeaUzwGvgJRzvVLBB1GSfmX36no5/Glh40YHv5sDbIdVvMpHE1qrtc/pBN3dHg3MONgN8oshBuB/F4SJfirKyaLpPZ4Xv2p0YebJjXqSH1Yv3TcEBOBQmeEfT0TuaZl7m0bxn83qc/L7wdMvPArI3dGurKfmz/C8JBoB3QQ4+UWx/0ePr1gb2QVV/JJ/nT94OgaTs5iRnt+XdJQajc6pHQxS5o829278y4Zzihbfr0N5RrCueRlOUTcCNiKxfUW9u9GPHB6yy2PKLfV+jOdCsZCr3GBb2tx9DGRBb+iGTTBtvehatfJSCoh0HK8wpA8h+58aXC0ZkZmYSHh5+8QMlhkBSdsDy8reX+0lJyMnk7D8Du1A5TlKOgagFlYaIJqHSC1UwHGMYFjqsWgCxY3nomWe+q+0ziH9daoxPFAfLZhBgmkxZdePMlfkb8xp4NMy3+byGFWgEbPOO5hagHTAM6KF21ni78RD2oo2INs48Zqx9/Abzl0WLFjUKCws7eMkDJWc1RI3vulVE/Gg3yrZi920Hmg2mIHiB+IE63WaV55TgavMh7mJ7rF69EtuVxnkOxJGZlfMaDsfOdaO+s70CQYADsAFtXMXmQ8C80mk8ojBGjuYMAcKNhI9Mc0TvRwbs9Fq6qKX5sffonKdKTPxAg1FpB9oMkYagDVBpjFptTf80tDViL8/tSTRJOT0RbYNKGeh+kMWo/orQAxU/DDO6WgCJJNbd07Pc12a7ut6KgVm/YOfpDzypKD4JRSfgrTrw/nnDch0wzbdwyXDE7GQkzPVTPMKpVTubsnLraRNPT9HJJSpRiCjietWqlfFSwSYO03Oz1XK6NSO+vAfJD0DlIRJDvgFgdCYMCwcYD8DIzOpxqop4e3qVezjslw+DZwX37j+9v6vFW8y2AV5A6nFwP3+YbxRR2M1OJIS8qkiWsmQhZRX5IE9/WSgLH6qt66pWVFVQE5EKhBTQuxDd+/P27580hG3idjSNhNDGVWBAJRhnZGR4dQFiWD08bKLKgYvVTs8UiGIrJ9x/Oq8koDElaSa0UIgxYGseeB0DCs51jvMshPgDWy20N1D9CtBvT9H8YT8VYC+wGJEemPiSEOJBQmg8ymYSQpsyKuiIgiliL6kxHiJO1q1iIJGuekgaE+hLDB8zkReJsVgwnhToEkFsE8NN8gGvSOIq4tAB6aR+sGTevIxH+/SZq/CZP6QXAXaXQzHRApDPTOr0NRLndjWTXqylSmIzD06QGNL04lEm9IIO0O9O3V9meOVHW0W5m0WEhoo+DDopgthAAxkRSVyhFbEJugwYCHQsOVa+x/sGzyOAG/D4t8fWit3La30ooS9s4Hb7CdhgB09/4ASgLEbQb0FnK1JG7v772tRij8Keq31nqhatNkAiibugYAwwi1FEEPcUsN7NzTFGld6vvbYoXOENQX4RZCTgh7OyVhWQfl5wYH2rgc02KSSDe9+Da/NSgfubELhyjvWRhY+nkwH8PR861alM/sj5RuAbgQPcdnOvJ2prF0QOXaUKG2p67atOk2kZQWyGICtBVynaMoK4V4BbBbWCzB09Py2rdAeTGjQ8fo/TTWgByEHQIuC0wH6FdSaa06xLw1LvAM8poJrOmMQuHovj/tb5666CpG6cM32QCCsFGgh4F8Aa4IQgcXXo+5B4OSwYxmd+FtPLMIyCrKwsunfvfnmOZPcpBmPLf+cOLp607QVp4mTc4oxoCKCqSCnoLsXyxoP3//R0hc3qvuGHoF7ppNSPIAbBSporqp0tWVlZvX9eeKDBrkWHyk1IM2DxNwtT+hoOkv7Zk8kGTAXSFHYJfKWgbtC2zSc+t7xpnXPfOj5Z8bVjqfu2Xixr9Qls6X3xBwqaT7Oi04/0PZQ3eCOJ3ZZUk4bISdAmLhBmCzLShJOClAGmAS
2023-11-19 16:06:40 +00:00
< hr >
2023-11-19 16:53:35 +00:00
< div class = "alert alert-primary" role = "alert" >
2023-11-22 09:09:11 +00:00
For the API vist '/powerbars' and '/groups' | A project brought to you by Piele & Mattronix for the code vist < a href = "https://code.techinc.nl/techinc/ti-powerbar" > code.techinc.nl< / a >
2023-11-19 16:53:35 +00:00
< / div >
2024-02-08 00:35:37 +00:00
< div class = "alert alert-danger" role = "alert" >
Power Outlets take up to 6 Seconds to Toggle due to consistency over speed (double clicking issue is resolved by this delay)
< / div >
2023-11-19 16:06:40 +00:00
< / div >
2023-11-19 01:42:51 +00:00
2023-11-19 16:06:40 +00:00
< div class = "mt-4 container" >
< div class = "card" >
< div class = "input-group" >
< div class = "form-outline" >
< input type = "search" id = "searchInput" class = "form-control" , placehholder = "Search Outlet" / >
< label class = "form-label" for = "form1" > Search< / label >
< / div >
< button type = "button" class = "btn btn-primary" >
< i class = "fas fa-search" > < / i >
< / button >
< / div >
< / div >
< / div >
2023-11-19 01:42:51 +00:00
2023-11-19 16:06:40 +00:00
< div class = "container" >
< div class = "row" >
{% for powerbar in powerbars.items() %}
< div class = "col-md-4" >
< div class = "col-md-12" >
< div class = "card" style = "margin:10px 0" >
<!-- Default panel contents -->
< div class = "card-header" > < h2 > {{powerbar[1].name}}< / h2 > < / div >
<!-- List group -->
< ul class = "list-group list-group-flush" >
{% for outlet in powerbar[1].outlets.items() %}
2024-01-27 15:01:13 +00:00
{% if not outlet[1].password %}
2023-11-19 16:06:40 +00:00
< li class = "list-group-item" >
< div class = "row" >
2023-11-20 12:35:33 +00:00
< div class = "col-md-8" > {{outlet[1].name}}< br > < span class = "badge badge-secondary" > Outlet: {{outlet[0]}}< / span >
{% if outlet[1].state == "on" %}
2023-12-02 18:00:33 +00:00
< span id = "{{powerbar[0]}}-{{outlet[0]}}-badge" class = "badge badge-success" > On< / span >
2023-11-20 12:35:33 +00:00
{% else %}
2023-12-02 18:00:33 +00:00
< span id = "{{powerbar[0]}}-{{outlet[0]}}-badge" class = "badge badge-danger" > Off< / span >
2023-11-20 12:35:33 +00:00
{% endif %}< / div >
2023-11-19 20:33:17 +00:00
< div class = "col-md-2" >
2023-11-19 16:06:40 +00:00
< label class = "switch" >
{% if outlet[1].state == "on" %}
2024-02-02 12:59:17 +00:00
< input type = "checkbox" class = "default" id = "{{powerbar[0]}}-{{outlet[0]}}" onchange = "toggleOutlet('{{powerbar[0]}}-{{outlet[0]}}', '/{{powerbar[0]}}/{{outlet[0]}}/on', '/{{powerbar[0]}}/{{outlet[0]}}/off', this.checked)" checked >
2023-11-19 16:06:40 +00:00
{% else %}
2024-02-02 12:59:17 +00:00
< input type = "checkbox" class = "default" id = "{{powerbar[0]}}-{{outlet[0]}}" onchange = "toggleOutlet('{{powerbar[0]}}-{{outlet[0]}}', '/{{powerbar[0]}}/{{outlet[0]}}/on', '/{{powerbar[0]}}/{{outlet[0]}}/off', this.checked)" >
2023-11-19 16:06:40 +00:00
{% endif %}
2024-02-02 12:59:17 +00:00
< span id = "{{powerbar[0]}}-{{outlet[0]}}-slider" class = "slider" > < / span >
2023-11-19 16:06:40 +00:00
< / label >
< / div >
2023-11-19 17:00:11 +00:00
< div class = "col-md-2" >
< / div >
2023-11-19 16:06:40 +00:00
< / div >
< / li >
2024-01-27 15:01:13 +00:00
{% endif %}
2023-11-19 16:06:40 +00:00
{% endfor %}
< / ul >
< / ul >
< / div >
< / div >
< / div >
{% endfor %}
2023-11-19 16:49:38 +00:00
{% if all_groups %}
< div class = "col-md-4" >
< div class = "col-md-12" >
< div class = "card" style = "margin:10px 0" >
< div class = "card-header" > < h2 > Groups< / h2 > < / div >
2023-11-19 16:51:36 +00:00
< ul class = "list-group list-group-flush" >
2023-11-19 16:49:38 +00:00
{% for group in all_groups %}
< li class = "list-group-item" >
< div class = "row" >
2023-11-19 16:51:36 +00:00
< div class = "col-md-6" > {{group.name}}< / div >
< div class = "col-md-6" >
2023-11-19 16:49:38 +00:00
< div class = "btn-group" role = "group" aria-label = "Powerbar Controls" >
2023-11-22 09:09:11 +00:00
< button class = "btn btn-success" onclick = "getUrl('/groups/{{group.name}}/off')" > Off< / button >
< button class = "btn btn-primary" onclick = "getUrl('/groups/{{group.name}}/on')" > On< / button >
2023-11-19 16:49:38 +00:00
< / div >
< / div >
< / div >
< / li >
{% endfor %}
2023-11-19 16:51:36 +00:00
< / ul >
2023-11-19 16:49:38 +00:00
< / div >
< / div >
{% endif %}
2023-11-19 01:42:51 +00:00
< / div >
< / div >
2023-11-19 01:30:54 +00:00
2023-11-19 16:06:40 +00:00
<!-- Bootstrap JS -->
2023-12-02 17:17:42 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js" > < / script >
< script >
document.addEventListener('DOMContentLoaded', function () {
// Connect to the /powerupdates namespace
var socket = io.connect('http://' + document.domain + ':' + location.port + '/powerupdates');
// Listen for messages from the server in the /powerupdates namespace
2023-12-02 18:00:33 +00:00
socket.on('power-event', function (message) {
2023-12-02 17:17:42 +00:00
console.log('Received message from server in /powerupdates namespace:', message);
2023-12-02 18:00:33 +00:00
checkboxid = message.powerbar + "-" + message.outlet;
badgeid = message.powerbar + "-" + message.outlet + "-badge";
2024-02-02 12:59:17 +00:00
sliderid = message.powerbar + "-" + message.outlet + "-slider";
2023-12-02 18:00:33 +00:00
var checkbox = document.getElementById(checkboxid);
var badge = document.getElementById(badgeid);
2024-02-02 12:59:17 +00:00
var slider = document.getElementById(sliderid);
2023-12-02 18:00:33 +00:00
if (message.action == "on") {
2023-12-02 18:13:06 +00:00
checkbox.setAttribute('checked','');
2023-12-02 18:00:33 +00:00
badge.textContent = "On";
badge.classList.replace("badge-danger","badge-success");
} else {
2024-02-02 12:59:17 +00:00
console.log(checkbox)
2023-12-02 18:00:33 +00:00
checkbox.removeAttribute('checked');
badge.textContent = "Off";
badge.classList.replace("badge-success","badge-danger");
}
2023-12-02 17:17:42 +00:00
});
});
< / script >
2023-11-19 01:30:54 +00:00
< script >
2023-11-19 16:49:38 +00:00
function getUrl(url) {
return fetch(url)
2023-11-19 16:06:40 +00:00
.then(response => {
if (response.ok) {
2023-11-19 16:49:38 +00:00
console.log('GET request successful');
return response.json(); // Return the response as JSON
2023-11-19 16:06:40 +00:00
} else {
2023-11-19 16:49:38 +00:00
console.error('Failed to make GET request');
2023-11-19 16:06:40 +00:00
}
2023-11-19 01:46:47 +00:00
})
.catch(error => {
2023-11-19 16:49:38 +00:00
console.error('An error occurred while making GET request:', error);
});
}
2024-02-02 12:59:17 +00:00
function toggleOutlet(id, on_url, off_url, checked) {
2023-11-19 16:49:38 +00:00
const url = checked ? on_url : off_url;
2024-02-02 12:59:17 +00:00
checkboxid = id;
var checkbox = document.getElementById(checkboxid);
if (checked) {
checkbox.setAttribute('checked','');
} else {
checkbox.removeAttribute('checked');
}
2023-11-19 16:49:38 +00:00
getUrl(url)
.then(data => {
// Handle the response data
console.log('Response data:', data);
2023-11-19 01:46:47 +00:00
});
}
2023-11-19 16:06:40 +00:00
< / script >
2023-11-19 01:30:54 +00:00
2023-11-19 16:06:40 +00:00
< / body >
< / html >
<!-- Add an input field for search -->
2023-11-19 01:42:51 +00:00
2023-11-19 16:06:40 +00:00
< script >
function search() {
// Get the input value
const searchValue = document.getElementById('searchInput').value.toLowerCase();
2023-11-19 01:50:13 +00:00
2023-11-19 16:06:40 +00:00
// Get all the list items
const listItems = document.querySelectorAll('li');
2023-11-19 01:42:51 +00:00
2023-11-19 16:06:40 +00:00
// Loop through each list item
listItems.forEach(item => {
const itemText = item.textContent.toLowerCase();
2023-11-19 01:42:51 +00:00
2023-11-19 16:06:40 +00:00
// Check if the item text contains the search value
if (itemText.includes(searchValue)) {
item.style.display = 'block'; // Show the item
} else {
item.style.display = 'none'; // Hide the item
2023-11-19 01:42:51 +00:00
}
});
2023-11-19 16:06:40 +00:00
}
2023-11-19 01:46:47 +00:00
2023-11-19 16:06:40 +00:00
// Add event listener to the search input
document.getElementById('searchInput').addEventListener('input', search);
< / script >
2023-12-02 17:17:42 +00:00
