Matthew Frost
bcb97819f1
All checks were successful
Deploy powerbar.ti Frontend Portal / Deploy-Tinance2-Frontend-Portal-Production (push) Successful in 36s
305 lines
16 KiB
HTML
305 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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"
|
|
/>
|
|
|
|
</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>
|
|
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="mt-3"> <img style="height: 50px; width: 50px;" src="data:image/png;base64,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" alt="Techinc Logo"> powerbar.ti (2.2.3)</h1>
|
|
<hr>
|
|
<div class="alert alert-primary" role="alert">
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
|
|
<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() %}
|
|
|
|
{% if not outlet[1].password %}
|
|
<li class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-md-8">{{outlet[1].name}}<br><span class="badge badge-secondary">Outlet: {{outlet[0]}}</span>
|
|
{% if outlet[1].state == "on" %}
|
|
<span id="{{powerbar[0]}}-{{outlet[0]}}-badge" class="badge badge-success">On</span>
|
|
{% else %}
|
|
<span id="{{powerbar[0]}}-{{outlet[0]}}-badge" class="badge badge-danger">Off</span>
|
|
{% endif %}</div>
|
|
<div class="col-md-2">
|
|
<label class="switch">
|
|
{% if outlet[1].state == "on" %}
|
|
<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>
|
|
{% else %}
|
|
<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)">
|
|
{% endif %}
|
|
<span id="{{powerbar[0]}}-{{outlet[0]}}-slider" class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-md-2">
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% 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>
|
|
<ul class="list-group list-group-flush">
|
|
{% for group in all_groups %}
|
|
<li class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-md-6">{{group.name}}</div>
|
|
<div class="col-md-6">
|
|
<div class="btn-group" role="group" aria-label="Powerbar Controls">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Bootstrap JS -->
|
|
|
|
<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
|
|
socket.on('power-event', function (message) {
|
|
console.log('Received message from server in /powerupdates namespace:', message);
|
|
checkboxid = message.powerbar + "-" + message.outlet;
|
|
badgeid = message.powerbar + "-" + message.outlet + "-badge";
|
|
sliderid = message.powerbar + "-" + message.outlet + "-slider";
|
|
|
|
var checkbox = document.getElementById(checkboxid);
|
|
var badge = document.getElementById(badgeid);
|
|
var slider = document.getElementById(sliderid);
|
|
|
|
if (message.action == "on") {
|
|
checkbox.setAttribute('checked','');
|
|
badge.textContent = "On";
|
|
badge.classList.replace("badge-danger","badge-success");
|
|
} else {
|
|
console.log(checkbox)
|
|
checkbox.removeAttribute('checked');
|
|
badge.textContent = "Off";
|
|
badge.classList.replace("badge-success","badge-danger");
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
function getUrl(url) {
|
|
return fetch(url)
|
|
.then(response => {
|
|
if (response.ok) {
|
|
console.log('GET request successful');
|
|
return response.json(); // Return the response as JSON
|
|
} else {
|
|
console.error('Failed to make GET request');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('An error occurred while making GET request:', error);
|
|
});
|
|
}
|
|
|
|
function toggleOutlet(id, on_url, off_url, checked) {
|
|
const url = checked ? on_url : off_url;
|
|
|
|
checkboxid = id;
|
|
var checkbox = document.getElementById(checkboxid);
|
|
|
|
if (checked) {
|
|
checkbox.setAttribute('checked','');
|
|
} else {
|
|
checkbox.removeAttribute('checked');
|
|
}
|
|
|
|
getUrl(url)
|
|
.then(data => {
|
|
// Handle the response data
|
|
console.log('Response data:', data);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- Add an input field for search -->
|
|
|
|
<script>
|
|
function search() {
|
|
// Get the input value
|
|
const searchValue = document.getElementById('searchInput').value.toLowerCase();
|
|
|
|
// Get all the list items
|
|
const listItems = document.querySelectorAll('li');
|
|
|
|
// Loop through each list item
|
|
listItems.forEach(item => {
|
|
const itemText = item.textContent.toLowerCase();
|
|
|
|
// 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
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add event listener to the search input
|
|
document.getElementById('searchInput').addEventListener('input', search);
|
|
</script>
|
|
|