93 lines
4.8 KiB
XML
93 lines
4.8 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
<template id="dashboard_template" name="Survey Dashboard">
|
|
<t t-call="web.layout">
|
|
<t t-set="title">Dashboard: <t t-esc="survey.title"/></t>
|
|
<!-- Load Chart.js CDN -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
</t>
|
|
|
|
<!-- ✅ Data is passed here via data-questions-json attribute -->
|
|
<div id="dashboard-root"
|
|
t-att-data-questions-json="questions_json"
|
|
class="container-fluid py-4">
|
|
|
|
<!-- Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
|
|
<div>
|
|
<h2 class="mb-2"><t t-esc="survey.title"/></h2>
|
|
<span class="badge bg-primary me-2">Responses: <t t-esc="total_responses"/></span>
|
|
<span class="badge bg-success">Completion: <t t-esc="completion_rate"/>%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons: NO onclick attributes -->
|
|
<div class="mb-3 d-flex gap-2">
|
|
<button type="button" class="btn btn-primary active" id="btn-list">
|
|
<i class="fa fa-list me-1"/> List
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary" id="btn-pie">
|
|
<i class="fa fa-pie-chart me-1"/> Pie Chart
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary" id="btn-bar">
|
|
<i class="fa fa-bar-chart me-1"/> Bar Graph
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Question Selector -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Select Question:</label>
|
|
<select class="form-select" id="question-selector" style="max-width: 600px;">
|
|
<t t-foreach="questions" t-as="q" t-if="q.get('type') == 'question'">
|
|
<option t-att-value="q.get('id')">
|
|
<t t-esc="q.get('title')"/>
|
|
</option>
|
|
</t>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Content Area -->
|
|
<div class="dashboard-scroll-wrapper" style="max-height: calc(100vh - 250px); overflow-y: auto;">
|
|
<!-- List View -->
|
|
<div id="view-list" class="view-section">
|
|
<t t-foreach="questions" t-as="q">
|
|
<t t-if="q.get('type') == 'page'">
|
|
<h3 class="h4 mt-4 mb-3 text-primary border-top pt-3"><t t-esc="q.get('title')"/></h3>
|
|
</t>
|
|
<t t-elif="q.get('type') == 'question'">
|
|
<div class="card mb-3">
|
|
<div class="card-header d-flex justify-content-between">
|
|
<strong><t t-esc="q.get('title')"/></strong>
|
|
<span class="badge bg-secondary"><t t-esc="q.get('qtype')"/></span>
|
|
</div>
|
|
<div class="card-body">
|
|
<t t-if="q.get('stats')">
|
|
<t t-foreach="q.get('stats')" t-as="stat">
|
|
<div class="mb-2">
|
|
<div class="d-flex justify-content-between">
|
|
<span><t t-esc="stat.get('label')"/></span>
|
|
<span><t t-esc="stat.get('count')"/> (<t t-esc="stat.get('percent')"/>%)</span>
|
|
</div>
|
|
<div class="progress" style="height: 15px;">
|
|
<div class="progress-bar bg-primary" t-att-style="'width: ' + str(stat.get('percent', 0)) + '%'"/>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</t>
|
|
</div>
|
|
|
|
<!-- Chart Views -->
|
|
<div id="view-pie" class="view-section d-none">
|
|
<div class="card"><div class="card-body"><canvas id="pieChart" style="max-height: 400px;"></canvas></div></div>
|
|
</div>
|
|
<div id="view-bar" class="view-section d-none">
|
|
<div class="card"><div class="card-body"><canvas id="barChart" style="max-height: 400px;"></canvas></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</odoo> |