File: /var/www/farm.kosmicfarms/app/views/index.phtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<title>
Kosmic Farm's Farm Manager
</title>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,900" />
<!-- Nucleo Icons -->
<?php $this->assets->outputCss('nucleo'); ?>
<!-- Font Awesome Icons -->
<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
<!-- CSS Files -->
<?php $this->assets->outputCss('pagestyle'); ?>
</head>
<body class="g-sidenav-show bg-gray-100">
<?php
echo $this->getContent();
?>
<!-- Core JS Files -->
<?= $this->assets->outputJs('footer') ?>
<?php if (!empty($dashboard_js)){ ?>
<!-- Core JS Files -->
<script src="/assets/js/plugins/chartjs.min.js"></script>
<script>
var ctx = document.getElementById("chart-bars").getContext("2d");
new Chart(ctx, {
type: "bar",
data: {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [{
label: "Views",
tension: 0.4,
borderWidth: 0,
borderRadius: 4,
borderSkipped: false,
backgroundColor: "#43A047",
data: [50, 45, 22, 28, 50, 60, 76],
barThickness: 'flex'
}, ],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5],
color: '#e5e5e5'
},
ticks: {
suggestedMin: 0,
suggestedMax: 500,
beginAtZero: true,
padding: 10,
font: {
size: 14,
lineHeight: 2
},
color: "#737373"
},
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
borderDash: [5, 5]
},
ticks: {
display: true,
color: '#737373',
padding: 10,
font: {
size: 14,
lineHeight: 2
},
}
},
},
},
});
var ctx2 = document.getElementById("chart-line").getContext("2d");
new Chart(ctx2, {
type: "line",
data: {
labels: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
datasets: [{
label: "Sales",
tension: 0,
borderWidth: 2,
pointRadius: 3,
pointBackgroundColor: "#43A047",
pointBorderColor: "transparent",
borderColor: "#43A047",
backgroundColor: "transparent",
fill: true,
data: [120, 230, 130, 440, 250, 360, 270, 180, 90, 300, 310, 220],
maxBarThickness: 6
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
tooltip: {
callbacks: {
title: function(context) {
const fullMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return fullMonths[context[0].dataIndex];
}
}
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [4, 4],
color: '#e5e5e5'
},
ticks: {
display: true,
color: '#737373',
padding: 10,
font: {
size: 12,
lineHeight: 2
},
}
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
borderDash: [5, 5]
},
ticks: {
display: true,
color: '#737373',
padding: 10,
font: {
size: 12,
lineHeight: 2
},
}
},
},
},
});
var ctx3 = document.getElementById("chart-line-tasks").getContext("2d");
new Chart(ctx3, {
type: "line",
data: {
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Tasks",
tension: 0,
borderWidth: 2,
pointRadius: 3,
pointBackgroundColor: "#43A047",
pointBorderColor: "transparent",
borderColor: "#43A047",
backgroundColor: "transparent",
fill: true,
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
maxBarThickness: 6
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
}
},
interaction: {
intersect: false,
mode: 'index',
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [4, 4],
color: '#e5e5e5'
},
ticks: {
display: true,
padding: 10,
color: '#737373',
font: {
size: 14,
lineHeight: 2
},
}
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
borderDash: [4, 4]
},
ticks: {
display: true,
color: '#737373',
padding: 10,
font: {
size: 14,
lineHeight: 2
},
}
},
},
},
});
</script>
<script>
var win = navigator.platform.indexOf('Win') > -1;
if (win && document.querySelector('#sidenav-scrollbar')) {
var options = {
damping: '0.5'
}
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
}
</script>
<?php } else { ?>
<!-- Core JS Files -->
<script>
var win = navigator.platform.indexOf('Win') > -1;
if (win && document.querySelector('#sidenav-scrollbar')) {
var options = {
damping: '0.5'
}
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
}
</script>
<?php } ?>
<!-- Github buttons -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="/assets/js/material-dashboard.min.js?v=3.2.0"></script>
<script>
$(document).ready(function() {
$('.edit-btn').click(function() {
event.preventDefault();
var id = $(this).data('id');
$.ajax({
url: '/water/'+ id ,
type: 'GET',
data: {id: id},
dataType: 'json',
success: function(response) {
if (response.status === "success") {
$("#addWaterTank").attr("action", "/water/" + response.data.id + "/update");
$("#waterTankForm").text("Edit Water Tank: " + response.data.name);
$("addWaterTankLocation").val(response.data.location);
$("#addWaterTankName").val(response.data.name);
$("#addWaterTankMaxCapacity").val(response.data.max_capacity);
$("#addWaterTankCurrentCapacity").val(response.data.current_capacity);
$("#addWaterTankInstallDate").val(response.data.installDate);
$("#addWaterTank").find('input[name="tank_status"]').val([''+ response.data.tank_status +'']);
$('#waterFormModal').modal('show');
} else {
alert("Error: " + response.message);
// Display specific error messages in the UI
}
},
error: function(xhr, status, error) {
// Handle any errors during the AJAX call
alert("An error occurred: " + error);
}
});
});
$('#add-btn').click(function() {
$("#addWaterTank").attr("/water/addtank");
$("#waterTankForm").text("Add Water Tank");
$("#addWaterTankLocation").prop('selectedIndex', 0);
$("#addWaterTankName").val("");
$("#addWaterTankMaxCapacity").val('');
$("#addWaterTankCurrentCapacity").val('');
$("#addWaterTankInstallDate").val('');
$("#addWaterTank").find('input[name="tank_status"]').prop('checked', false);
});
$('#add-pump-btn').click(function() {
$("#addWaterTank").attr("/water/addtank");
$("#waterTankForm").text("Add Water Tank");
$("#addWaterTankLocation").prop('selectedIndex', 0);
$("#addWaterTankName").val("");
$("#addWaterTankMaxCapacity").val('');
$("#addWaterTankCurrentCapacity").val('');
$("#addWaterTankInstallDate").val('');
$("#addWaterTank").find('input[name="tank_status"]').prop('checked', false);
});
$("#addWaterTank").submit(function(event) {
// Stop the form from submitting the traditional way
event.preventDefault();
// Get form data
var formData = $(this).serialize(); // or use FormData for file uploads
// Perform the AJAX request
$.ajax({
type: "POST", // HTTP method
url: $(this).attr('action'), // The Phalcon route/action
data: formData, // Data to be sent to the server
dataType: "json", // Expected response type
encode: true,
success: function(response) {
// Handle the success response from the server
if (response.status === "success") {
//alert("Success: " + response.message);
// Clear the form or redirect
// *Optional: Display a success message (e.g., in a specific div)*
//$('#messageArea').html('<div class="alert alert-success">Form submitted successfully!</div>');
// 3. Close the form (e.g., a jQuery UI dialog or Bootstrap modal)
// If using jQuery UI Dialog:
// $('#myFormContainer').dialog('close');
// If using Bootstrap Modal:
// $('#myModal').modal('hide');
// 4. Refresh the entire page
window.location.reload();
} else {
alert("Error: " + response.message);
// Display specific error messages in the UI
}
},
error: function(xhr, status, error) {
// Handle any errors during the AJAX call
alert("An error occurred: " + error);
Swal.fire({
icon: "error",
title: 'Cancelled',
text: 'An error occurred: ' + error
});
}
});
});
$(".delete-btn").click(function(event){
// Prevent the default link behavior immediately
event.preventDefault();
// Get the item ID from the data attribute (optional)
var id = $(this).data("id");
Swal.fire({
title: 'Are you sure?',
text: 'You will not be able to revert this!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel', // Optional
}).then((result) => {
if (result.isConfirmed) {
// Code to run if the user clicks "Yes, delete it!"
$.ajax({
type: "POST",
url: '/water/'+ id + '/delete' ,
data: { id: id },
success: function(response) {
Swal.fire(
'Deleted!',
response.message,
'success'
)
// Handle success (e.g., reload the page or remove the item from the DOM)
location.reload();
},
error: function(xhr, status, error) {
// Handle any errors during the AJAX call
alert("An error occurred: " + error);
Swal.fire({
icon: "error",
title: 'Cancelled',
text: 'An error occurred: ' + error
});
}
});
// You can add further actions here, such as an AJAX call or form submission
}
});
});
/*
Swal.fire({
title: 'Are you sure?',
text: 'You will not be able to revert this!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel', // Optional
}).then((result) => {
if (result.isConfirmed) {
// Code to run if the user clicks "Yes, delete it!"
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
// You can add further actions here, such as an AJAX call or form submission
} else if (result.dismiss === Swal.DismissReason.cancel) {
// Code to run if the user clicks "No, cancel" or dismisses the dialog
Swal.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
});
*/
});
</script>
</body>
</html>