291 lines
11 KiB
PHP
291 lines
11 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Your Title</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto';
|
|
background-color: #f0f0f0;
|
|
color: #4D869C;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.sidebar {
|
|
height: 100%;
|
|
width: 250px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #EEF7FF;
|
|
overflow-x: hidden;
|
|
padding-top: 20px;
|
|
z-index: 1;
|
|
text-align: justify;
|
|
transition: all 0.3s ease;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Menambahkan efek bayangan */
|
|
}
|
|
|
|
.sidebar ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sidebar a {
|
|
padding: 10px 15px;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
color: #0f0c0c;
|
|
display: block;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.sidebar a:hover, .sidebar .active {
|
|
background-color: #7AB2B2;
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 2px 2px 2px #888888;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 250px;
|
|
padding: 20px;
|
|
transition: margin-left 0.3s ease;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: #ffffff;
|
|
color: #0f0c0c;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.navbar-brand {
|
|
color: #970767;
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
color: #970767;
|
|
}
|
|
|
|
.navbar-nav .nav-link:hover {
|
|
color: #ccc;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #333;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 20px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#content {
|
|
padding: 20px;
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.btn-custom {
|
|
background-color: #7AB2B2;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
|
|
.btn-custom:hover {
|
|
background-color: #4D869C;
|
|
color: #fff;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar ul {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.sidebar li {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.footer {
|
|
position: relative;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Sidebar -->
|
|
<div class="sidebar">
|
|
<div class="user-info text-center mb-4">
|
|
@if (Auth::check())
|
|
<p class="text-black">Selamat datang, {{ Auth::user()->name }}!</p>
|
|
@endif
|
|
</div>
|
|
<ul>
|
|
<li><a href="#" id="ui"><i class="fas fa-eye"></i>Live Monitoring</a></li>
|
|
<li><a href="#" id="kontrol"><i class="fas fa-cogs"></i> Kontrol</a></li>
|
|
<li><a href="#" id="monitoring"><i class="fas fa-chart-line"></i>Monitoring Data</a></li>
|
|
<li><a href="#" id="blog"><i class="fas fa-newspaper"></i> Daftar Katalog</a></li>
|
|
{{-- <li><a href="#" id="riwayat"><i class="fas fa-history"></i> Riwayat Data</a></li> --}}
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="content">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-md-12">
|
|
@if (Auth::check())
|
|
<!-- Removed user info from here -->
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8" id="content" style="text-align: center;">
|
|
<h2 style="margin-bottom: 20px;">Selamat datang di halaman utama dari aplikasi website monitoring dan kontrol Mesin Nutrisi</h2>
|
|
<p>Pilih menu sesuai kebutuhan anda. Menu terletak di sebelah kiri.</p>
|
|
|
|
<div style="margin-top: 20px;">
|
|
<button class="btn btn-custom" onclick="getLocation()">
|
|
<i class="fas fa-map-marker-alt"></i> Tampilkan Lokasi Hidroponik
|
|
</button>
|
|
</div>
|
|
|
|
<div id="lokasi-terpilih" style="margin-top: 20px;">
|
|
<!-- Informasi lokasi akan ditampilkan di sini -->
|
|
</div>
|
|
<img src="/images/hidro.png" alt="Tanaman Hidroponik" style="margin-top: 20px; width: 100%; max-width: 400px;">
|
|
</div>
|
|
|
|
<script>
|
|
function getLocation() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(showPosition, showError);
|
|
} else {
|
|
document.getElementById("lokasi-terpilih").innerHTML = "Geolokasi tidak didukung oleh browser ini.";
|
|
}
|
|
}
|
|
|
|
function showPosition(position) {
|
|
var latitude = position.coords.latitude;
|
|
var longitude = position.coords.longitude;
|
|
|
|
// Gunakan layanan geocoding untuk mengonversi koordinat ke alamat
|
|
fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=id`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
var address = data.localityInfo.administrative[3].name + ", " + // Desa
|
|
data.localityInfo.administrative[2].name + ", " + // Kecamatan
|
|
data.localityInfo.administrative[1].name + ", " + // Kabupaten
|
|
data.localityInfo.administrative[0].name; // Kota
|
|
var fullAddress = "Lokasi Hidroponik Anda: " + address;
|
|
var coordinates = "Koordinat: " + latitude + ", " + longitude;
|
|
document.getElementById("lokasi-terpilih").innerHTML = "<p>" + fullAddress + "</p>" +
|
|
"<p>" + coordinates + "</p>";
|
|
})
|
|
.catch(error => {
|
|
document.getElementById("lokasi-terpilih").innerHTML = "<p>Tidak dapat mendapatkan alamat lokasi.</p>";
|
|
});
|
|
}
|
|
|
|
function showError(error) {
|
|
switch(error.code) {
|
|
case error.PERMISSION_DENIED:
|
|
document.getElementById("lokasi-terpilih").innerHTML = "Pengguna menolak permintaan geolokasi."
|
|
break;
|
|
case error.POSITION_UNAVAILABLE:
|
|
document.getElementById("lokasi-terpilih").innerHTML = "Informasi lokasi tidak tersedia."
|
|
break;
|
|
case error.TIMEOUT:
|
|
document.getElementById("lokasi-terpilih").innerHTML = "Permintaan untuk mendapatkan lokasi pengguna habis."
|
|
break;
|
|
case error.UNKNOWN_ERROR:
|
|
document.getElementById("lokasi-terpilih").innerHTML = "Terjadi kesalahan yang tidak diketahui."
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- External JavaScript -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$("#monitoring").click(function(e) {
|
|
e.preventDefault();
|
|
$(".sidebar a").removeClass("active");
|
|
$(this).addClass("active");
|
|
// Menggunakan AJAX untuk memuat data monitoring
|
|
$.get("/monitoring", function(data) {
|
|
$(".content").html(data);
|
|
});
|
|
});
|
|
|
|
$("#kontrol").click(function(e) {
|
|
e.preventDefault();
|
|
$(".sidebar a").removeClass("active");
|
|
$(this).addClass("active");
|
|
// Menggunakan AJAX untuk memuat UI dari alamat lokal
|
|
$(".content").html('<iframe src="http://localhost:1880/ui/#!/0?socketid=ghkc4MLjCQ4dDomWAAAF" style="width:100%; height:100vh;" frameborder="0"></iframe>');
|
|
});
|
|
|
|
$("#ui").click(function(e) {
|
|
e.preventDefault();
|
|
$(".sidebar a").removeClass("active");
|
|
$(this).addClass("active");
|
|
// Menggunakan AJAX untuk memuat UI dari alamat lokal
|
|
$(".content").html('<iframe src="http://localhost:1880/ui/#!/1?socketid=ghkc4MLjCQ4dDomWAAAF" style="width:100%; height:100vh;" frameborder="0"></iframe>');
|
|
});
|
|
|
|
$("#blog").click(function(e) {
|
|
e.preventDefault();
|
|
$(".sidebar a").removeClass("active");
|
|
$(this).addClass("active");
|
|
// Ganti dengan URL yang benar untuk tampilan blog
|
|
$.get("/blogs", function(data) {
|
|
$(".content").html(data);
|
|
});
|
|
});
|
|
|
|
$("#riwayat").click(function(e) {
|
|
e.preventDefault();
|
|
$(".sidebar a").removeClass("active");
|
|
$(this).addClass("active");
|
|
// Menggunakan AJAX untuk memuat data riwayat
|
|
$.get("/riwayat", function(data) {
|
|
$(".content").html(data);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|