bemade-addons/odoo_unifi_manager/static/src/js/dashboard_view.js
2025-01-06 08:02:03 -05:00

123 lines
3.6 KiB
JavaScript

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { Layout } from "@web/search/layout";
import { Component, useState, onWillStart, onMounted, onWillUnmount } from "@odoo/owl";
import { KanbanController } from "@web/views/kanban/kanban_controller";
import { KanbanRenderer } from "@web/views/kanban/kanban_renderer";
import { kanbanView } from "@web/views/kanban/kanban_view";
class UnifiDashboardController extends KanbanController {
setup() {
super.setup();
this.orm = useService("orm");
this.action = useService("action");
}
/**
* @override
*/
getRendererProps() {
const props = super.getRendererProps();
return {
...props,
onRefreshDashboard: this.onRefreshDashboard.bind(this),
};
}
async onRefreshDashboard() {
await this.model.load();
await this.model.root.load();
this.render(true);
}
}
class UnifiDashboardRenderer extends KanbanRenderer {
static template = 'odoo_unifi_manager.UnifiDashboard';
static components = { Layout };
static props = {
...KanbanRenderer.props,
onRefreshDashboard: Function,
};
setup() {
super.setup();
this.chartInstances = {};
onMounted(() => {
this.initCharts();
});
onWillUnmount(() => {
// Cleanup charts
Object.values(this.chartInstances).forEach(chart => chart.destroy());
});
}
initCharts() {
if (!this.props.list.records.length) return;
const record = this.props.list.records[0];
if (!record) return;
// Clean up existing charts
Object.values(this.chartInstances).forEach(chart => chart.destroy());
this.chartInstances = {};
// Initialize Client Type Chart
const ctxClients = document.getElementById('clientTypeChart')?.getContext('2d');
if (ctxClients) {
this.chartInstances.clientType = new Chart(ctxClients, {
type: 'doughnut',
data: record.data.client_type_chart,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
}
// Initialize Bandwidth Chart
const ctxBandwidth = document.getElementById('bandwidthChart')?.getContext('2d');
if (ctxBandwidth) {
this.chartInstances.bandwidth = new Chart(ctxBandwidth, {
type: 'line',
data: record.data.bandwidth_chart,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Mbps'
}
}
},
plugins: {
legend: {
position: 'bottom'
}
}
}
});
}
}
}
export const unifiDashboardView = {
...kanbanView,
Controller: UnifiDashboardController,
Renderer: UnifiDashboardRenderer,
buttonTemplate: 'odoo_unifi_manager.UnifiDashboard.Buttons',
};
registry.category("views").add("unifi_dashboard", unifiDashboardView);