File: /var/www/farm.kosmicfarms/app/views/water/index.phtml
<div class="container-fluid py-2">
<div class="row">
<div class="ms-3">
<h3 class="mb-0 h4 font-weight-bolder"><?php echo $this->escaper->escapeHtml($page_title); ?></h3>
<p class="mb-4">
Water level monitoring dashboard
</p>
</div>
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
<div class="card">
<div class="card-header p-2 ps-3">
<div class="d-flex justify-content-between">
<div>
<p class="text-sm mb-0 text-capitalize">Max Water Capacity</p>
<h4 class="mb-0"><?php echo $this->escaper->escapeHtml($max_water_capacity); ?></h4>
</div>
</div>
</div>
<hr class="dark horizontal my-0">
<div class="card-footer p-2 ps-3">
<p class="mb-0 text-sm"><span class="text-success font-weight-bolder"> </span>Total Volume of all Water Tanks</p>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
<div class="card">
<div class="card-header p-2 ps-3">
<div class="d-flex justify-content-between">
<div>
<p class="text-sm mb-0 text-capitalize">Total Water Volume</p>
<h4 class="mb-0"><?php echo $this->escaper->escapeHtml($total_water_volume); ?></h4>
</div>
</div>
</div>
<hr class="dark horizontal my-0">
<div class="card-footer p-2 ps-3">
<p class="mb-0 text-sm"><span class="text-success font-weight-bolder"></span>Total Volume of Water Stored</p>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
<div class="card">
<div class="card-header p-2 ps-3">
<div class="d-flex justify-content-between">
<div>
<p class="text-sm mb-0 text-capitalize">Active Water Tanks</p>
<h4 class="mb-0"><?php echo $this->escaper->escapeHtml($active_tanks); ?></h4>
</div>
</div>
</div>
<hr class="dark horizontal my-0">
<div class="card-footer p-2 ps-3">
<p class="mb-0 text-sm"><span class="text-danger font-weight-bolder"></span> Total Active Water Tanks</p>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card">
<div class="card-header p-2 ps-3">
<div class="d-flex justify-content-between">
<div>
<p class="text-sm mb-0 text-capitalize">Active Water Pumps</p>
<h4 class="mb-0"><?php echo $this->escaper->escapeHtml($active_pumps); ?></h4>
</div>
</div>
</div>
<hr class="dark horizontal my-0">
<div class="card-footer p-2 ps-3">
<p class="mb-0 text-sm"><span class="text-success font-weight-bolder">Total </span>Active Pumps</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 mt-4 mb-4">
<div class="card ">
<div class="card-body">
<h6 class="mb-0 "> Water Consumptions </h6>
<p class="text-sm "> (<span class="font-weight-bolder">+15%</span>) increase in today sales. </p>
<div class="pe-2">
<div class="chart">
<canvas id="chart-line" class="chart-canvas" height="170"></canvas>
</div>
</div>
<hr class="dark horizontal">
<div class="d-flex ">
<i class="material-symbols-rounded text-sm my-auto me-1">schedule</i>
<p class="mb-0 text-sm"> updated 4 min ago </p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 mt-4 mb-4">
<div class="card">
<div class="card-header pb-0">
<div class="row">
<div class="col-lg-6 col-7">
<h6>Water Tanks</h6>
<p class="text-sm mb-0">
<i class="fa fa-check text-info" aria-hidden="true"></i>
<span class="font-weight-bold ms-1">30 done</span> this month
</p>
</div>
<div class="col-lg-6 col-5 my-auto text-end">
<!-- Button trigger modal -->
<button type="button" class="btn bg-gradient-dark mb-0" data-bs-toggle="modal" data-bs-target="#waterFormModal" id="add-btn">
<i class="material-symbols-rounded text-sm">add</i> Add Water Tank
</button>
</div>
</div>
</div>
<div class="card-body px-0 pb-2">
<div class="table-responsive">
<table class="table align-items-center mb-0">
<thead>
<tr>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tank</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Location</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Capacity</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($watertanks as $tank) { ?>
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm"><?= $tank->tank->name ?></h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<span class="text-xs font-weight-bold"> <?= $tank->tank->location->name?> </span>
</div>
</td>
<td class="align-middle text-center text-sm">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<?php
$percentage = round(($tank->capacity/$tank->tank->capacity) * 100, 2);
?>
<span class="text-xs font-weight-bold"><?= $tank->capacity ?>(<?= $percentage ?>%)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="<?= $tank->capacity ?>" aria-valuemin="0" aria-valuemax="<?= $tank->tank->capacity ?>" style="width: <?= intval($percentage) ?>%;"></div>
</div>
</div>
</td>
<td class="align-middle">
<span class="text-xs font-weight-bold"> <?= $tank->tank->status ?> </span>
</td>
<td class="align-middle">
<button type="button" class="btn btn-danger btn-sm delete-btn" data-id="<?= $tank->id ?>">delete</button>
<button type="button" class="btn btn-secondary btn-sm edit-btn" data-id="<?= $tank->id ?>" data-bs-toggle="modal" data-bs-target="#waterFormModal">edit</button>
<button type="button" class="btn btn-success btn-sm view-btn" data-id="<?= $tank->id ?>" data-bs-toggle="modal" data-bs-target="#waterViewModal">View</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 mt-4 mb-4">
<div class="card h-100">
<div class="card-header pb-0">
<div class="row">
<div class="col-lg-6 col-7">
<h6>Water Pumps</h6>
<p class="text-sm mb-0">
<i class="fa fa-check text-info" aria-hidden="true"></i>
<span class="font-weight-bold ms-1">30 done</span> this month
</p>
</div>
<div class="col-lg-6 col-5 my-auto text-end">
<button type="button" class="btn bg-gradient-dark mb-0" data-bs-toggle="modal" data-bs-target="#pumpFormModal" id="add-pump-btn">
<i class="material-symbols-rounded text-sm">add</i> Add Water Pump
</button>
</div>
</div>
</div>
<div class="card-body p-3">
<div class="table-responsive">
<table class="table align-items-center mb-0">
<thead>
<tr>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Pump</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Tank</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Location</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action</th>
</tr>
</thead>
<tbody>
<?php
foreach($waterpumps as $pump) { ?>
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm"><?= $pump->pump->name ?></h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<span class="text-xs font-weight-bold"> <?= $pump->water->tank->name?> </span>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> <?= $pump->pump->location?> </span>
</td>
<td class="align-middle">
<span class="text-xs font-weight-bold"> <?= $tank->tank->status ?> </span>
</td>
<td class="align-middle">
<button type="button" class="btn btn-danger btn-sm delete-btn" data-id="<?= $pump>id ?>">delete</button>
<button type="button" class="btn btn-secondary btn-sm edit-btn" data-id="<?= $pump->id ?>" data-bs-toggle="modal" data-bs-target="#waterFormModal">edit</button>
<button type="button" class="btn btn-success btn-sm view-btn" data-id="<?= $pump->id ?>" data-bs-toggle="modal" data-bs-target="#waterViewModal">View</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<?php echo $this->view->partial('partials/footer'); ?>
</div>
<!-- Modal -->
<div class="modal fade" id="waterFormModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form action="/water/addtank" method="post" id="addWaterTank">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title font-weight-normal" id="waterTankForm">Add Water Tank</h5>
<button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="input-group input-group-static mb-4">
<label for="addWaterTankLocation" class="ms-0">Tank Location</label>
<?php
echo Phalcon\Tag::select(
[
'location', // Name of the select tag
$locations, // Data source (Resultset)
'using' => ['id', 'name'], // [value, display]
'useEmpty' => false,
'emptyText' => 'Please select a tank location',
'emptyValue' => '',
'class' => 'form-control',
'required',
'id' => 'addWaterTankLocation'
]
);
?>
</div>
<div class="input-group input-group-outline my-3">
<label class="form-label" for="addWaterTankName">Name</label>
<input class="form-control" id="addWaterTankName" name="name" type="text" class="form-control" required>
</div>
<div class="input-group input-group-outline my-3">
<label class="form-label" for="addWaterTankMaxCapacity">Tank Capacity (Liters):</label><br>
<input class="form-control" type="number" id="addWaterTankMaxCapacity" name="max_capacity" min="1" max="10000" required>
</div>
<div class="input-group input-group-outline my-3">
<label class="form-label" for="addWaterTankCurrentCapacity">Current Capacity (Liters):</label><br>
<input class="form-control" type="number" id="addWaterTankCurrentCapacity" name="current_capacity" min="1" max="10000" required>
</div>
<div class="input-group input-group-outline my-3">
<label class="ms-0">Tank Status</label>
<div class="form-check">
<input type="radio" id="radio1" name="tank_status" id="customRadioDisabled" value="active" class="form-check-input">
<label class="custom-control-label" for="customCheckDisabled">Active</label>
</div>
<div class="form-check">
<input type="radio" id="radio2" name="tank_status" id="customRadioDisabled" value="inactive" class="form-check-input">
<label class="custom-control-label" for="customRadioDisabled">Inactive</label>
</div>
<div class="form-check">
<input type="radio" id="radio3" name="tank_status" id="customRadioDisabled" value="maintenance" class="form-check-input">
<label class="custom-control-label" for="customCheckDisabled">Maintenance</label>
</div>
</div>
<div class="input-group input-group-static mb-4">
<!-- Installation Date (Date Input) -->
<label class="ms-0" for="addWaterTankInstallDate">Preferred Installation Date:</label><br>
<input class="form-control" type="date" id="addWaterTankInstallDate" name="installDate">
</div>
<!-- Submit Button -->
</div>
<div class="modal-footer">
<button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn bg-gradient-primary">Save changes</button>
</div>
</div></form>
</div>
</div>
<!-- Water pump -->
<div class="modal fade" id="pumpFormModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<form action="/water/addpump" method="post" id="addWaterTank">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title font-weight-normal" id="waterTankForm">Add Water Pump</h5>
<button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="input-group input-group-static mb-4">
<label for="addWaterPumpLocation" class="ms-0">Pump Location</label>
<?php
echo Phalcon\Tag::select(
[
'location', // Name of the select tag
$locations, // Data source (Resultset)
'using' => ['id', 'name'], // [value, display]
'useEmpty' => false,
'emptyText' => 'Please select a tank location',
'emptyValue' => '',
'class' => 'form-control',
'required',
'id' => 'addWaterPumpLocation'
]
);
?>
</div>
<div class="input-group input-group-static mb-4">
<label for="addWaterPumpTank" class="ms-0">Water Tank</label>
<?php
echo Phalcon\Tag::select(
[
'tank', // Name of the select tag
$tanks, // Data source (Resultset)
'using' => ['id', 'name'], // [value, display]
'useEmpty' => false,
'emptyText' => 'Please select a water tank',
'emptyValue' => '',
'class' => 'form-control',
'required',
'id' => 'addWaterPumpTank'
]
);
?>
</div>
<div class="input-group input-group-outline my-3">
<label class="form-label" for="addWaterTankName">Name</label>
<input class="form-control" id="addWaterTankName" name="name" type="text" class="form-control" required>
</div>
<div class="input-group input-group-outline my-3">
<label class="form-label" for="addWaterTankMaxCapacity">Flow Capacity (Liters/Min):</label><br>
<input class="form-control" type="number" id="addWaterTankMaxCapacity" name="max_capacity" min="1" max="10000" required>
</div>
<div class="input-group input-group-outline my-3">
<label class="ms-0">Pump Status</label>
<div class="form-check">
<input type="radio" id="radio1" name="tank_status" id="customRadioDisabled" value="active" class="form-check-input">
<label class="custom-control-label" for="customCheckDisabled">Active</label>
</div>
<div class="form-check">
<input type="radio" id="radio2" name="tank_status" id="customRadioDisabled" value="inactive" class="form-check-input">
<label class="custom-control-label" for="customRadioDisabled">Inactive</label>
</div>
<div class="form-check">
<input type="radio" id="radio3" name="tank_status" id="customRadioDisabled" value="maintenance" class="form-check-input">
<label class="custom-control-label" for="customCheckDisabled">Maintenance</label>
</div>
</div>
<div class="input-group input-group-static mb-4">
<!-- Installation Date (Date Input) -->
<label class="ms-0" for="addWaterPumpInstallDate">Preferred Installation Date:</label><br>
<input class="form-control" type="date" id="addWaterTankInstallDate" name="installDate">
</div>
<!-- Submit Button -->
</div>
<div class="modal-footer">
<button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn bg-gradient-primary">Save changes</button>
</div>
</div></form>
</div>
</div>