245 lines
9.2 KiB
HTML
245 lines
9.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="esp-style.css">
|
|
<title>LighTouch Dashboard</title>
|
|
<style>
|
|
/* Gaya untuk sidebar */
|
|
.sidebar {
|
|
height: 100%;
|
|
width: 300px; /* Lebar sidebar */
|
|
position: fixed;
|
|
top: 0;
|
|
left: -300px; /* Mulai tersembunyi di luar layar */
|
|
background-color: #1e2a38; /* Warna latar belakang sidebar */
|
|
color: #fff;
|
|
padding-top: 30px;
|
|
transition: left 0.3s ease; /* Transisi animasi */
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Bayangan untuk sidebar */
|
|
z-index: 1000; /* Agar sidebar berada di atas konten */
|
|
}
|
|
|
|
.sidebar h2 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
color: #f1f1f1; /* Warna teks */
|
|
}
|
|
|
|
.sidebar a {
|
|
padding: 15px 20px;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
color: #b0bec5; /* Warna tautan */
|
|
display: block;
|
|
border-bottom: 1px solid #334755; /* Garis bawah tautan */
|
|
}
|
|
|
|
.sidebar a:hover {
|
|
background-color: #334755; /* Warna latar belakang tautan saat hover */
|
|
color: #fff; /* Warna teks tautan saat hover */
|
|
}
|
|
|
|
.sidebar .exit-button {
|
|
padding: 15px 20px;
|
|
text-align: center;
|
|
background-color: #ff4d4d; /* Warna tombol Exit */
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: 5px; /* Sudut membulat tombol */
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Bayangan tombol */
|
|
margin-top: 20px; /* Jarak dari menu sebelumnya */
|
|
margin-bottom: 30px; /* Jarak dari bawah sidebar */
|
|
}
|
|
|
|
.sidebar .exit-button:hover {
|
|
background-color: #e60000; /* Warna tombol Exit saat hover */
|
|
}
|
|
|
|
.open-btn {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 20px;
|
|
font-size: 24px;
|
|
background: #1e2a38;
|
|
color: white;
|
|
border: none;
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
border-radius: 5px; /* Sudut membulat tombol */
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Bayangan tombol */
|
|
z-index: 1001; /* Agar tombol berada di atas konten */
|
|
}
|
|
|
|
.open-btn:hover {
|
|
background: #334755; /* Warna latar belakang tombol saat hover */
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
font-size: 30px;
|
|
cursor: pointer;
|
|
color: #b0bec5; /* Warna ikon close */
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: #fff; /* Warna ikon close saat hover */
|
|
}
|
|
|
|
.content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.main-content {
|
|
transition: margin-left 0.3s ease;
|
|
}
|
|
|
|
/* Responsif untuk tampilan smartphone */
|
|
@media screen and (max-width: 600px) {
|
|
.sidebar {
|
|
width: 100%; /* Lebar penuh pada smartphone */
|
|
left: -100%; /* Mulai tersembunyi di luar layar */
|
|
}
|
|
|
|
.open-btn {
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.main-content {
|
|
transition: none; /* Menghilangkan transisi untuk tampilan mobile */
|
|
}
|
|
|
|
.sidebar .exit-button {
|
|
position: relative;
|
|
margin-top: 20px; /* Jarak dari menu sebelumnya */
|
|
margin-bottom: 20px; /* Jarak dari bawah sidebar */
|
|
width: calc(100% - 40px); /* Lebar tombol Exit disesuaikan dengan padding */
|
|
left: 20px;
|
|
background-color: #ff4d4d; /* Warna tombol Exit */
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="open-btn" onclick="toggleSidebar()">☰</button>
|
|
|
|
<div id="mySidebar" class="sidebar">
|
|
<span class="close-btn" onclick="toggleSidebar()">×</span>
|
|
<h2>Account</h2>
|
|
<a href="#">Profile</a>
|
|
<a href="#">Settings</a>
|
|
<a href="#">Support</a>
|
|
<button class="exit-button" onclick="window.location.href='logout.php'">Exit</button>
|
|
</div>
|
|
|
|
<div id="main" class="main-content">
|
|
<h2>LighTouch</h2>
|
|
<?php echo $html_buttons; ?>
|
|
<br><br>
|
|
<?php echo $html_boards; ?>
|
|
<br><br>
|
|
<div>
|
|
<form onsubmit="return createOutput();">
|
|
<h3>Create New Output</h3>
|
|
<label for="outputName">Name</label>
|
|
<input type="text" name="name" id="outputName"><br>
|
|
<label for="outputBoard">Board ID</label>
|
|
<input type="number" name="board" min="0" id="outputBoard">
|
|
<label for="outputGpio">GPIO Number</label>
|
|
<input type="number" name="gpio" min="0" id="outputGpio">
|
|
<label for="outputState">Initial GPIO State</label>
|
|
<select id="outputState" name="state">
|
|
<option value="0">0 = OFF</option>
|
|
<option value="1">1 = ON</option>
|
|
</select>
|
|
<input type="submit" value="Create Output">
|
|
<p><strong> <img class="warning-icon" src="logo.png" alt="Warning icon" style="vertical-align: middle;"> Note:</strong> </p>
|
|
In some devices, you might need to refresh the page to see your newly created buttons or to remove deleted buttons.
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var isHalfOpen = false;
|
|
|
|
function toggleSidebar() {
|
|
var sidebar = document.getElementById("mySidebar");
|
|
var mainContent = document.getElementById("main");
|
|
var screenWidth = window.innerWidth;
|
|
|
|
if (screenWidth <= 600) {
|
|
// Jika tampilan pada smartphone
|
|
if (sidebar.style.left === "0px") {
|
|
sidebar.style.left = isHalfOpen ? "0" : "-100%"; /* Tutup seluruhnya */
|
|
isHalfOpen = !isHalfOpen; /* Toggle status separuh terbuka */
|
|
} else {
|
|
sidebar.style.left = "0";
|
|
isHalfOpen = false; /* Set status separuh terbuka ke false saat sidebar dibuka */
|
|
}
|
|
} else {
|
|
// Jika tampilan pada desktop
|
|
if (sidebar.style.left === "0px") {
|
|
sidebar.style.left = isHalfOpen ? "0" : "-300px"; /* Tutup seluruhnya */
|
|
isHalfOpen = !isHalfOpen; /* Toggle status separuh terbuka */
|
|
} else {
|
|
sidebar.style.left = "0";
|
|
isHalfOpen = false; /* Set status separuh terbuka ke false saat sidebar dibuka */
|
|
}
|
|
mainContent.style.marginLeft = sidebar.style.left === "0px" ? "300px" : "0";
|
|
}
|
|
}
|
|
|
|
function updateOutput(element) {
|
|
var xhr = new XMLHttpRequest();
|
|
var state = element.checked ? 1 : 0;
|
|
xhr.open("GET", `esp-outputs-action.php?action=output_update&id=${element.id}&state=${state}`, true);
|
|
xhr.send();
|
|
}
|
|
|
|
function deleteOutput(element) {
|
|
var result = confirm("Want to delete this output?");
|
|
if (result) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", `esp-outputs-action.php?action=output_delete&id=${element.id}`, true);
|
|
xhr.send();
|
|
xhr.onload = function() {
|
|
if (xhr.status === 200) {
|
|
alert("Output deleted");
|
|
setTimeout(function() { window.location.reload(); }, 1000); // Menunggu 1 detik sebelum me-refresh
|
|
} else {
|
|
alert("Failed to delete output");
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
function createOutput() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "esp-outputs-action.php", true);
|
|
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
|
|
alert("Output created");
|
|
setTimeout(function() { window.location.reload(); }, 1000); // Menunggu 1 detik sebelum me-refresh
|
|
}
|
|
};
|
|
|
|
var outputName = document.getElementById("outputName").value;
|
|
var outputBoard = document.getElementById("outputBoard").value;
|
|
var outputGpio = document.getElementById("outputGpio").value;
|
|
var outputState = document.getElementById("outputState").value;
|
|
var httpRequestData = `action=output_create&name=${encodeURIComponent(outputName)}&board=${outputBoard}&gpio=${outputGpio}&state=${outputState}`;
|
|
xhr.send(httpRequestData);
|
|
|
|
return false; // Mencegah pengiriman formulir secara default
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|