powerbar.ti
All checks were successful
Deploy powerbar.ti Frontend Portal / Deploy-Tinance2-Frontend-Portal-Production (push) Successful in 6s
All checks were successful
Deploy powerbar.ti Frontend Portal / Deploy-Tinance2-Frontend-Portal-Production (push) Successful in 6s
This commit is contained in:
parent
94d10f9e67
commit
408a393f1d
3 changed files with 508 additions and 277 deletions
293
app/templates/index copy.html
Normal file
293
app/templates/index copy.html
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Powerbar.ti</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">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<style>
|
||||
/* Add your custom CSS styles here */
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#powerbars {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.powerbar {
|
||||
width: 300px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.powerbar h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.outlets {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.outlet {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.outlet h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.outlet p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.outlet-buttons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.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.ti (0.1.4)</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
|
||||
function fetchPowerbars() {
|
||||
fetch('/powerbars')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Render powerbars
|
||||
renderPowerbars(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPowerbars(data) {
|
||||
const powerbarsContainer = document.getElementById('powerbars');
|
||||
powerbarsContainer.innerHTML = ''; // Clear existing powerbars
|
||||
|
||||
// Loop through each powerbar
|
||||
for (const powerbarKey in data) {
|
||||
const powerbar = data[powerbarKey];
|
||||
|
||||
// Create powerbar container
|
||||
const powerbarContainer = document.createElement('div');
|
||||
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', 'card-content');
|
||||
|
||||
// Loop through each outlet
|
||||
for (const outletKey in powerbar.outlets) {
|
||||
const outlet = powerbar.outlets[outletKey];
|
||||
|
||||
// Create outlet container
|
||||
const outletContainer = document.createElement('div');
|
||||
outletContainer.classList.add('outlet');
|
||||
|
||||
// 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);
|
||||
|
||||
// Create outlet buttons container
|
||||
const outletButtonsContainer = document.createElement('div');
|
||||
outletButtonsContainer.classList.add('outlet-buttons');
|
||||
|
||||
// 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())
|
||||
.then(data => {
|
||||
// Update outlet state
|
||||
outletState.textContent = `State: ${data.state}`;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
outletButtonsContainer.appendChild(onButton);
|
||||
|
||||
// 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())
|
||||
.then(data => {
|
||||
// Update outlet state
|
||||
outletState.textContent = `State: ${data.state}`;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
outletButtonsContainer.appendChild(offButton);
|
||||
|
||||
// Add outlet buttons container to outlet container
|
||||
outletContainer.appendChild(outletButtonsContainer);
|
||||
|
||||
// Add outlet container to outlets container
|
||||
outletsContainer.appendChild(outletContainer);
|
||||
}
|
||||
|
||||
// Add outlets container to powerbar container
|
||||
powerbarContainer.appendChild(outletsContainer);
|
||||
|
||||
// Add powerbar container to powerbars container
|
||||
powerbarsContainer.appendChild(powerbarContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// Search outlet
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
searchInput.value = localStorage.getItem('searchValue') || ''; // Set the value from localStorage if available
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem('searchValue', searchValue); // Store the value in localStorage
|
||||
});
|
||||
|
||||
// Filter outlets by state
|
||||
const stateFilter = document.getElementById('stateFilter');
|
||||
stateFilter.value = localStorage.getItem('filterValue') || ''; // Set the value from localStorage if available
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem('filterValue', filterValue); // Store the value in localStorage
|
||||
});
|
||||
|
||||
// Refresh powerbars and their states
|
||||
function refreshPowerbars() {
|
||||
fetchPowerbars();
|
||||
}
|
||||
|
||||
// Initial fetch and render
|
||||
fetchPowerbars();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,293 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Powerbar.ti</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">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<style>
|
||||
/* Add your custom CSS styles here */
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
<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"
|
||||
/>
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#powerbars {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.powerbar {
|
||||
width: 300px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.powerbar h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.outlets {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.outlet {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.outlet h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.outlet p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.outlet-buttons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.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>
|
||||
<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>
|
||||
<h1>Powerbar.ti (0.1.4)</h1>
|
||||
<div class="search-container">
|
||||
<div class="container">
|
||||
<input type="text" id="searchInput" placeholder="Search outlet...">
|
||||
|
||||
<div class="container">
|
||||
<h1 class="mt-3">powerbar.ti (0.0.5)</h1>
|
||||
<hr>
|
||||
</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 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>
|
||||
|
||||
<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>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</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>
|
||||
// Fetch data from the /powerbars endpoint
|
||||
function fetchPowerbars() {
|
||||
fetch('/powerbars')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Render powerbars
|
||||
renderPowerbars(data);
|
||||
function toggleOutlet(on_url, off_url, checked) {
|
||||
const url = checked ? on_url : off_url;
|
||||
fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('Outlet toggled successfully');
|
||||
} else {
|
||||
console.error('Failed to toggle outlet');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
console.error('An error occurred while toggling outlet:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPowerbars(data) {
|
||||
const powerbarsContainer = document.getElementById('powerbars');
|
||||
powerbarsContainer.innerHTML = ''; // Clear existing powerbars
|
||||
|
||||
// Loop through each powerbar
|
||||
for (const powerbarKey in data) {
|
||||
const powerbar = data[powerbarKey];
|
||||
|
||||
// Create powerbar container
|
||||
const powerbarContainer = document.createElement('div');
|
||||
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', 'card-content');
|
||||
|
||||
// Loop through each outlet
|
||||
for (const outletKey in powerbar.outlets) {
|
||||
const outlet = powerbar.outlets[outletKey];
|
||||
|
||||
// Create outlet container
|
||||
const outletContainer = document.createElement('div');
|
||||
outletContainer.classList.add('outlet');
|
||||
|
||||
// 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);
|
||||
|
||||
// Create outlet buttons container
|
||||
const outletButtonsContainer = document.createElement('div');
|
||||
outletButtonsContainer.classList.add('outlet-buttons');
|
||||
|
||||
// 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())
|
||||
.then(data => {
|
||||
// Update outlet state
|
||||
outletState.textContent = `State: ${data.state}`;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
outletButtonsContainer.appendChild(onButton);
|
||||
|
||||
// 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())
|
||||
.then(data => {
|
||||
// Update outlet state
|
||||
outletState.textContent = `State: ${data.state}`;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
});
|
||||
outletButtonsContainer.appendChild(offButton);
|
||||
|
||||
// Add outlet buttons container to outlet container
|
||||
outletContainer.appendChild(outletButtonsContainer);
|
||||
|
||||
// Add outlet container to outlets container
|
||||
outletsContainer.appendChild(outletContainer);
|
||||
}
|
||||
|
||||
// Add outlets container to powerbar container
|
||||
powerbarContainer.appendChild(outletsContainer);
|
||||
|
||||
// Add powerbar container to powerbars container
|
||||
powerbarsContainer.appendChild(powerbarContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// Search outlet
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
searchInput.value = localStorage.getItem('searchValue') || ''; // Set the value from localStorage if available
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem('searchValue', searchValue); // Store the value in localStorage
|
||||
});
|
||||
|
||||
// Filter outlets by state
|
||||
const stateFilter = document.getElementById('stateFilter');
|
||||
stateFilter.value = localStorage.getItem('filterValue') || ''; // Set the value from localStorage if available
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem('filterValue', filterValue); // Store the value in localStorage
|
||||
});
|
||||
|
||||
// Refresh powerbars and their states
|
||||
function refreshPowerbars() {
|
||||
fetchPowerbars();
|
||||
}
|
||||
|
||||
// Initial fetch and render
|
||||
fetchPowerbars();
|
||||
|
||||
</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>
|
||||
|
|
|
|||
13
app/views.py
13
app/views.py
|
|
@ -29,7 +29,18 @@ def vaild_outlet (powerbar, outlet):
|
|||
|
||||
@routes.route('/')
|
||||
def home():
|
||||
return render_template('index.html')
|
||||
|
||||
all_groups = []
|
||||
|
||||
for powerbar in powerbars:
|
||||
for outlet in powerbars[powerbar]['outlets']:
|
||||
powerbars[powerbar]['outlets'][outlet]['state'] = powerbars[powerbar]['outlets'][outlet].get('state', 'unknown')
|
||||
|
||||
for group in powerbars[powerbar]['groups']:
|
||||
all_groups.append(group)
|
||||
|
||||
|
||||
return render_template('index.html', powerbars=powerbars, all_groups=all_groups)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue