118 lines
3.3 KiB
HTML
118 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<div class="container mt-3">
|
|
|
|
<h4>RA Bill Dashboard</h4>
|
|
|
|
<div class="row mb-3">
|
|
|
|
<!-- Contractor -->
|
|
<div class="col-md-4">
|
|
<select id="subcontractor" class="form-control">
|
|
<option value="">Select Contractor</option>
|
|
{% for s in subcontractors %}
|
|
<option value="{{s.id}}">{{s.subcontractor_name}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="col-md-4">
|
|
<select id="category" class="form-control">
|
|
<option value="">Select Category</option>
|
|
<option value="trench_excavation">Trench Excavation</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- RA Bill -->
|
|
<div class="col-md-4">
|
|
<select id="ra_bill" class="form-control">
|
|
<option value="">RA Bill</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<canvas id="comparisonChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
|
|
let chart;
|
|
|
|
// ✅ Load RA Bills
|
|
function loadRABills() {
|
|
|
|
let subcontractor = document.getElementById("subcontractor").value
|
|
let category = document.getElementById("category").value
|
|
|
|
if (!subcontractor || !category) return
|
|
|
|
fetch(`/dashboard/api/get-ra-bills?subcontractor=${subcontractor}&category=${category}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
let ra = document.getElementById("ra_bill")
|
|
ra.innerHTML = '<option value="">RA Bill</option>'
|
|
|
|
data.ra_bills.forEach(bill => {
|
|
ra.innerHTML += `<option value="${bill}">${bill}</option>`
|
|
})
|
|
})
|
|
}
|
|
|
|
// ✅ Load Chart
|
|
function loadChart() {
|
|
|
|
let subcontractor = document.getElementById("subcontractor").value
|
|
let ra_bill = document.getElementById("ra_bill").value
|
|
|
|
fetch(`/dashboard/api/trench-analysis?subcontractor=${subcontractor}&ra_bill=${ra_bill}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
if (chart) chart.destroy()
|
|
|
|
chart = new Chart(document.getElementById("comparisonChart"), {
|
|
type: "bar",
|
|
data: {
|
|
labels: data.labels,
|
|
datasets: [
|
|
{
|
|
label: "Depth",
|
|
data: data.depth,
|
|
backgroundColor: "green"
|
|
},
|
|
{
|
|
label: "Excavation Qty (cum)",
|
|
data: data.qty,
|
|
backgroundColor: "blue"
|
|
}
|
|
]
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
// Events
|
|
document.getElementById("subcontractor").addEventListener("change", () => {
|
|
loadRABills()
|
|
})
|
|
|
|
document.getElementById("category").addEventListener("change", () => {
|
|
loadRABills()
|
|
})
|
|
|
|
document.getElementById("ra_bill").addEventListener("change", loadChart)
|
|
|
|
</script>
|
|
|
|
{% endblock %} |