Matthew Frost
f9a182eaca
All checks were successful
Deploy powerbar.ti Frontend Portal / Deploy-Tinance2-Frontend-Portal-Production (push) Successful in 6s
271 lines
7.5 KiB
HTML
271 lines
7.5 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">powerbar.ti (0.0.8)</h1>
|
|
<hr>
|
|
<div class="alert alert-primary" role="alert">
|
|
For the API vist '/powerbars'
|
|
</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() %}
|
|
|
|
<li class="list-group-item">
|
|
<div class="row">
|
|
<div class="col-md-8">{{outlet[1].name}}</div>
|
|
<div class="col-md-4">
|
|
<label class="switch">
|
|
{% if outlet[1].state == "on" %}
|
|
<input type="checkbox" class="default" id="{{powerbar[0]}}-{{outlet[0]}}" onchange="toggleOutlet('/{{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]}}/on', '/{{powerbar[0]}}/{{outlet[0]}}/off', this.checked)">
|
|
{% endif %}
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-md-2">
|
|
{% if outlet[1].state == "on" %}
|
|
<span class="badge badge-success">On</span>
|
|
{% else %}
|
|
<span class="badge badge-danger">Off</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{% 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('/{{group.powerbar}}/groups/{{group.name}}/off')">Off</button>
|
|
<button class="btn btn-primary" onclick="getUrl('/{{group.powerbar}}/groups/{{group.name}}/on')">On</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script type="text/javascript" src="node_modules/mdbootstrap/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="node_modules/mdbootstrap/js/popper.min.js"></script>
|
|
<script type="text/javascript" src="node_modules/mdbootstrap/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="node_modules/mdbootstrap/js/mdb.min.js"></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');
|
|
}
|
|
})
|
|
.then(data => {
|
|
// Handle the response data
|
|
console.log('Response data:', data);
|
|
location.reload(); // Refresh the page
|
|
})
|
|
.catch(error => {
|
|
console.error('An error occurred while making GET request:', error);
|
|
});
|
|
}
|
|
|
|
function toggleOutlet(on_url, off_url, checked) {
|
|
const url = checked ? on_url : off_url;
|
|
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>
|