105 lines
2.8 KiB
HTML
105 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<div class="container-fluid mt-3">
|
|
|
|
<h4 class="mb-4">Subcontractor Dashboard</h4>
|
|
|
|
<div class="row mb-3">
|
|
|
|
<div class="col-md-4">
|
|
<select id="subcontractor" class="form-control">
|
|
<option value="">Select Subcontractor</option>
|
|
|
|
{% for s in subcontractors %}
|
|
<option value="{{s.id}}">{{s.subcontractor_name}}</option>
|
|
{% endfor %}
|
|
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<select id="category" class="form-control">
|
|
<option value="">Select Category</option>
|
|
<option value="Soft Murum">Soft Murum</option>
|
|
<option value="Hard Murum">Hard Murum</option>
|
|
<option value="Soft Rock">Soft Rock</option>
|
|
<option value="Hard Rock">Hard Rock</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<select id="ra_bill" class="form-control">
|
|
<option value="">RA Bill</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card shadow">
|
|
<div class="card-body">
|
|
|
|
<canvas id="comparisonChart" height="120"></canvas>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
|
|
let chart;
|
|
|
|
function loadChart() {
|
|
|
|
let subcontractor = document.getElementById("subcontractor").value
|
|
let category = document.getElementById("category").value
|
|
let ra_bill = document.getElementById("ra_bill").value
|
|
|
|
|
|
fetch(`/dashboard/api/subcontractor-chart?subcontractor=${subcontractor}&category=${category}&ra_bill=${ra_bill}`)
|
|
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
if (chart) {
|
|
chart.destroy()
|
|
}
|
|
|
|
const ctx = document.getElementById("comparisonChart")
|
|
|
|
chart = new Chart(ctx, {
|
|
type: "bar",
|
|
data: {
|
|
labels: data.labels,
|
|
datasets: [{
|
|
label: "Subcontractor Quantity",
|
|
data: data.values,
|
|
backgroundColor: "#0d6efd"
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { display: true }
|
|
}
|
|
}
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
document.getElementById("subcontractor").addEventListener("change", loadChart)
|
|
document.getElementById("category").addEventListener("change", loadChart)
|
|
document.getElementById("ra_bill").addEventListener("change", loadChart)
|
|
|
|
loadChart()
|
|
|
|
</script>
|
|
|
|
{% endblock %} |