feat(dashboard): add dashboard template and integration module (Phase 3.1)
- Create dashboardTemplate.html with dashboard container structure - Dashboard header with tab navigation and control buttons - Edit mode toggle, add widget, export/import layout buttons - Add widget modal for selecting and adding widgets - Widget configuration modal for widget settings - Dashboard grid container for widget placement - Create dashboardIntegration.js to handle dashboard initialization - Initialize dashboard system and register all widgets - Load dashboard template and inject into panel - Set up event listeners for edit mode, add widget, export/import - Create default layout with all core widgets - Provide refreshDashboard() for updating widgets after data changes - Support for fallback inline template if file load fails
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
@@ -0,0 +1,359 @@
|
||||
/**
|
||||
* Dashboard Integration Module
|
||||
*
|
||||
* Handles initialization and integration of the v2 dashboard system
|
||||
* with the main RPG Companion extension.
|
||||
*/
|
||||
|
||||
import { extensionName } from '../../core/config.js';
|
||||
import { extensionSettings } from '../../core/state.js';
|
||||
import { saveSettings } from '../../core/persistence.js';
|
||||
import { renderExtensionTemplateAsync } from '../../../../../extensions.js';
|
||||
import { DashboardManager } from './dashboardManager.js';
|
||||
import { WidgetRegistry } from './core/widgetRegistry.js';
|
||||
|
||||
// Widget imports
|
||||
import { registerUserStatsWidget } from './widgets/userStatsWidget.js';
|
||||
import { registerCalendarWidget, registerWeatherWidget, registerTemperatureWidget, registerClockWidget, registerLocationWidget } from './widgets/infoBoxWidgets.js';
|
||||
import { registerPresentCharactersWidget } from './widgets/presentCharactersWidget.js';
|
||||
import { registerInventoryWidget } from './widgets/inventoryWidget.js';
|
||||
|
||||
// Global dashboard manager instance
|
||||
let dashboardManager = null;
|
||||
|
||||
/**
|
||||
* Get the dashboard manager instance
|
||||
*/
|
||||
export function getDashboardManager() {
|
||||
return dashboardManager;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the dashboard system
|
||||
* @param {Object} dependencies - Dependencies from main extension
|
||||
*/
|
||||
export async function initializeDashboard(dependencies) {
|
||||
console.log('[RPG Companion] Initializing Dashboard v2 System...');
|
||||
|
||||
try {
|
||||
// Load dashboard template
|
||||
const dashboardHtml = await loadDashboardTemplate();
|
||||
|
||||
// Find or create dashboard container in the panel
|
||||
const panelContent = document.querySelector('#rpg-panel-content');
|
||||
if (!panelContent) {
|
||||
console.error('[RPG Companion] Panel content container not found');
|
||||
return null;
|
||||
}
|
||||
|
||||
// Insert dashboard HTML (replacing old content-box)
|
||||
const contentBox = panelContent.querySelector('.rpg-content-box');
|
||||
if (contentBox) {
|
||||
// Replace old content-box with dashboard
|
||||
contentBox.replaceWith(createDashboardContainer(dashboardHtml));
|
||||
} else {
|
||||
// If no content-box, insert dashboard after dice display
|
||||
const diceDisplay = panelContent.querySelector('#rpg-dice-display');
|
||||
if (diceDisplay) {
|
||||
diceDisplay.insertAdjacentHTML('afterend', dashboardHtml);
|
||||
} else {
|
||||
panelContent.insertAdjacentHTML('afterbegin', dashboardHtml);
|
||||
}
|
||||
}
|
||||
|
||||
// Create widget registry
|
||||
const registry = new WidgetRegistry();
|
||||
|
||||
// Register all widgets
|
||||
registerAllWidgets(registry, dependencies);
|
||||
|
||||
// Initialize dashboard manager
|
||||
const container = document.querySelector('#rpg-dashboard-container');
|
||||
if (!container) {
|
||||
console.error('[RPG Companion] Dashboard container not found after template load');
|
||||
return null;
|
||||
}
|
||||
|
||||
dashboardManager = new DashboardManager(container, {
|
||||
registry,
|
||||
autoSave: true,
|
||||
onChange: (data) => {
|
||||
// Handle dashboard changes
|
||||
console.log('[RPG Companion] Dashboard changed:', data);
|
||||
if (dependencies.onDashboardChange) {
|
||||
dependencies.onDashboardChange(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize the dashboard
|
||||
await dashboardManager.init();
|
||||
|
||||
// Set up dashboard event listeners
|
||||
setupDashboardEventListeners(dependencies);
|
||||
|
||||
console.log('[RPG Companion] Dashboard v2 initialized successfully');
|
||||
return dashboardManager;
|
||||
|
||||
} catch (error) {
|
||||
console.error('[RPG Companion] Failed to initialize dashboard:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load dashboard template HTML
|
||||
*/
|
||||
async function loadDashboardTemplate() {
|
||||
try {
|
||||
// Try to load from dashboardTemplate.html
|
||||
const html = await renderExtensionTemplateAsync(extensionName, 'src/systems/dashboard/dashboardTemplate');
|
||||
return html;
|
||||
} catch (error) {
|
||||
console.warn('[RPG Companion] Could not load dashboard template, using inline HTML');
|
||||
// Fallback to inline template
|
||||
return getInlineDashboardTemplate();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create dashboard container div
|
||||
*/
|
||||
function createDashboardContainer(dashboardHtml) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = dashboardHtml;
|
||||
return wrapper.firstElementChild;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get inline dashboard template (fallback)
|
||||
*/
|
||||
function getInlineDashboardTemplate() {
|
||||
return `
|
||||
<div id="rpg-dashboard-container" class="rpg-dashboard-container">
|
||||
<div class="rpg-dashboard-header">
|
||||
<div class="rpg-dashboard-header-left">
|
||||
<div id="rpg-dashboard-tabs" class="rpg-dashboard-tabs"></div>
|
||||
</div>
|
||||
<div class="rpg-dashboard-header-right">
|
||||
<button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
<button id="rpg-dashboard-add-widget" class="rpg-dashboard-btn rpg-add-widget-btn" style="display: none;" title="Add Widget">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
<span>Add Widget</span>
|
||||
</button>
|
||||
<button id="rpg-dashboard-export-layout" class="rpg-dashboard-btn rpg-export-btn" style="display: none;" title="Export Layout">
|
||||
<i class="fa-solid fa-download"></i>
|
||||
</button>
|
||||
<button id="rpg-dashboard-import-layout" class="rpg-dashboard-btn rpg-import-btn" style="display: none;" title="Import Layout">
|
||||
<i class="fa-solid fa-upload"></i>
|
||||
</button>
|
||||
<input type="file" id="rpg-dashboard-import-file" accept=".json" style="display: none;" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="rpg-dashboard-grid" class="rpg-dashboard-grid" data-edit-mode="false"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register all available widgets
|
||||
*/
|
||||
function registerAllWidgets(registry, dependencies) {
|
||||
console.log('[RPG Companion] Registering widgets...');
|
||||
|
||||
// Core widgets
|
||||
registerUserStatsWidget(registry, dependencies);
|
||||
registerPresentCharactersWidget(registry, dependencies);
|
||||
registerInventoryWidget(registry, dependencies);
|
||||
|
||||
// Info Box modular widgets
|
||||
registerCalendarWidget(registry, dependencies);
|
||||
registerWeatherWidget(registry, dependencies);
|
||||
registerTemperatureWidget(registry, dependencies);
|
||||
registerClockWidget(registry, dependencies);
|
||||
registerLocationWidget(registry, dependencies);
|
||||
|
||||
console.log(`[RPG Companion] Registered ${registry.getAll().length} widgets`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up dashboard event listeners
|
||||
*/
|
||||
function setupDashboardEventListeners(dependencies) {
|
||||
// Edit mode toggle
|
||||
const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode');
|
||||
if (editModeBtn) {
|
||||
editModeBtn.addEventListener('click', () => {
|
||||
if (dashboardManager) {
|
||||
const isEditMode = dashboardManager.editModeManager.isEditMode();
|
||||
dashboardManager.editModeManager.setEditMode(!isEditMode);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add widget button
|
||||
const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
|
||||
if (addWidgetBtn) {
|
||||
addWidgetBtn.addEventListener('click', () => {
|
||||
if (dashboardManager) {
|
||||
showAddWidgetDialog(dashboardManager);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Export layout button
|
||||
const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
|
||||
if (exportBtn) {
|
||||
exportBtn.addEventListener('click', () => {
|
||||
if (dashboardManager) {
|
||||
dashboardManager.exportLayout();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Import layout button
|
||||
const importBtn = document.querySelector('#rpg-dashboard-import-layout');
|
||||
const importFile = document.querySelector('#rpg-dashboard-import-file');
|
||||
|
||||
if (importBtn && importFile) {
|
||||
importBtn.addEventListener('click', () => {
|
||||
importFile.click();
|
||||
});
|
||||
|
||||
importFile.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file && dashboardManager) {
|
||||
dashboardManager.importLayout(file);
|
||||
importFile.value = ''; // Reset file input
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show add widget dialog
|
||||
*/
|
||||
function showAddWidgetDialog(manager) {
|
||||
// Get all available widgets
|
||||
const registry = manager.registry;
|
||||
const widgets = registry.getAll();
|
||||
|
||||
// Create widget cards HTML
|
||||
const widgetCardsHtml = widgets.map(([type, definition]) => `
|
||||
<div class="rpg-widget-card" data-widget-type="${type}">
|
||||
<div class="rpg-widget-card-icon">${definition.icon}</div>
|
||||
<div class="rpg-widget-card-name">${definition.name}</div>
|
||||
<div class="rpg-widget-card-description">${definition.description}</div>
|
||||
<button class="rpg-widget-card-add" data-widget-type="${type}">
|
||||
<i class="fa-solid fa-plus"></i> Add
|
||||
</button>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Show modal
|
||||
const modal = document.querySelector('#rpg-add-widget-modal');
|
||||
if (!modal) {
|
||||
console.warn('[RPG Companion] Add widget modal not found');
|
||||
return;
|
||||
}
|
||||
|
||||
const widgetSelector = modal.querySelector('#rpg-widget-selector');
|
||||
if (widgetSelector) {
|
||||
widgetSelector.innerHTML = widgetCardsHtml;
|
||||
|
||||
// Attach add button handlers
|
||||
widgetSelector.querySelectorAll('.rpg-widget-card-add').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const widgetType = btn.dataset.widgetType;
|
||||
const activeTab = manager.tabManager.getActiveTabId();
|
||||
|
||||
manager.addWidget(widgetType, activeTab);
|
||||
hideModal('rpg-add-widget-modal');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
modal.style.display = 'flex';
|
||||
|
||||
// Set up modal close handlers
|
||||
modal.querySelectorAll('[data-close="add-widget"]').forEach(btn => {
|
||||
btn.onclick = () => hideModal('rpg-add-widget-modal');
|
||||
});
|
||||
|
||||
// Close on backdrop click
|
||||
modal.onclick = (e) => {
|
||||
if (e.target === modal) {
|
||||
hideModal('rpg-add-widget-modal');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide modal by ID
|
||||
*/
|
||||
function hideModal(modalId) {
|
||||
const modal = document.querySelector(`#${modalId}`);
|
||||
if (modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create default dashboard layout
|
||||
*/
|
||||
export function createDefaultLayout(manager) {
|
||||
if (!manager) {
|
||||
console.warn('[RPG Companion] Cannot create default layout - manager not initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[RPG Companion] Creating default dashboard layout...');
|
||||
|
||||
const mainTab = manager.tabManager.getActiveTabId();
|
||||
|
||||
// Add widgets with default positions
|
||||
// Row 1: User Stats (left) + Calendar + Weather + Temperature + Clock (right)
|
||||
manager.addWidget('userStats', mainTab, { x: 0, y: 0, w: 6, h: 4 });
|
||||
manager.addWidget('calendar', mainTab, { x: 6, y: 0, w: 2, h: 2 });
|
||||
manager.addWidget('weather', mainTab, { x: 8, y: 0, w: 3, h: 2 });
|
||||
manager.addWidget('temperature', mainTab, { x: 11, y: 0, w: 2, h: 2 });
|
||||
|
||||
// Row 2: Location (top right) + Clock (bottom right)
|
||||
manager.addWidget('location', mainTab, { x: 6, y: 2, w: 6, h: 2 });
|
||||
manager.addWidget('clock', mainTab, { x: 10, y: 2, w: 2, h: 2 });
|
||||
|
||||
// Row 3: Present Characters
|
||||
manager.addWidget('presentCharacters', mainTab, { x: 0, y: 4, w: 12, h: 4 });
|
||||
|
||||
// Row 4: Inventory
|
||||
manager.addWidget('inventory', mainTab, { x: 0, y: 8, w: 12, h: 6 });
|
||||
|
||||
console.log('[RPG Companion] Default layout created');
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh all widgets (called after data updates)
|
||||
*/
|
||||
export function refreshDashboard() {
|
||||
if (dashboardManager) {
|
||||
// Get all active widgets and re-render them
|
||||
const widgets = dashboardManager.getAllWidgets();
|
||||
widgets.forEach(widget => {
|
||||
dashboardManager.renderWidget(widget.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy dashboard instance
|
||||
*/
|
||||
export function destroyDashboard() {
|
||||
if (dashboardManager) {
|
||||
console.log('[RPG Companion] Destroying dashboard...');
|
||||
// Clean up would go here
|
||||
dashboardManager = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
<!-- RPG Companion v2 Dashboard -->
|
||||
<div id="rpg-dashboard-container" class="rpg-dashboard-container">
|
||||
<!-- Dashboard Header Controls -->
|
||||
<div class="rpg-dashboard-header">
|
||||
<div class="rpg-dashboard-header-left">
|
||||
<!-- Tab Navigation (will be populated by TabManager) -->
|
||||
<div id="rpg-dashboard-tabs" class="rpg-dashboard-tabs"></div>
|
||||
</div>
|
||||
|
||||
<div class="rpg-dashboard-header-right">
|
||||
<!-- Edit Mode Toggle -->
|
||||
<button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
|
||||
<!-- Add Widget Button (shown in edit mode) -->
|
||||
<button id="rpg-dashboard-add-widget" class="rpg-dashboard-btn rpg-add-widget-btn" style="display: none;" title="Add Widget">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
<span>Add Widget</span>
|
||||
</button>
|
||||
|
||||
<!-- Export/Import Layout Buttons (shown in edit mode) -->
|
||||
<button id="rpg-dashboard-export-layout" class="rpg-dashboard-btn rpg-export-btn" style="display: none;" title="Export Layout">
|
||||
<i class="fa-solid fa-download"></i>
|
||||
</button>
|
||||
<button id="rpg-dashboard-import-layout" class="rpg-dashboard-btn rpg-import-btn" style="display: none;" title="Import Layout">
|
||||
<i class="fa-solid fa-upload"></i>
|
||||
</button>
|
||||
<input type="file" id="rpg-dashboard-import-file" accept=".json" style="display: none;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Grid (will be populated by DashboardManager) -->
|
||||
<div id="rpg-dashboard-grid" class="rpg-dashboard-grid" data-edit-mode="false">
|
||||
<!-- Widgets will be rendered here -->
|
||||
</div>
|
||||
|
||||
<!-- Add Widget Modal -->
|
||||
<div id="rpg-add-widget-modal" class="rpg-modal" style="display: none;">
|
||||
<div class="rpg-modal-content">
|
||||
<div class="rpg-modal-header">
|
||||
<h3>
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
Add Widget
|
||||
</h3>
|
||||
<button class="rpg-modal-close" data-close="add-widget">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rpg-modal-body">
|
||||
<div class="rpg-widget-grid" id="rpg-widget-selector">
|
||||
<!-- Widget cards will be populated by DashboardManager -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rpg-modal-footer">
|
||||
<button class="rpg-btn-secondary" data-close="add-widget">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Widget Configuration Modal -->
|
||||
<div id="rpg-widget-config-modal" class="rpg-modal" style="display: none;">
|
||||
<div class="rpg-modal-content">
|
||||
<div class="rpg-modal-header">
|
||||
<h3>
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
Widget Settings
|
||||
</h3>
|
||||
<button class="rpg-modal-close" data-close="widget-config">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rpg-modal-body">
|
||||
<div id="rpg-widget-config-form">
|
||||
<!-- Widget config form will be populated dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rpg-modal-footer">
|
||||
<button class="rpg-btn-secondary" data-close="widget-config">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="rpg-btn-primary" id="rpg-widget-config-save">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user