59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
// pages/DashboardPage.ts
|
|
import { ThreeColumnLayout } from '../layouts/ThreeColumnLayout';
|
|
import { Widget } from '../components/Widget';
|
|
import { createElement } from '../utils/utils';
|
|
|
|
// Dummy Widgets for Dashboard
|
|
class WelcomeWidget extends Widget {
|
|
render(): HTMLElement {
|
|
const widgetDiv = createElement('div');
|
|
widgetDiv.classList.add('widget', 'welcome-widget');
|
|
widgetDiv.innerHTML = `
|
|
<div class="widget-header">Welcome to the Dashboard</div>
|
|
<div class="widget-body">
|
|
This is your dashboard. More widgets will be added here.
|
|
</div>
|
|
`;
|
|
return widgetDiv;
|
|
}
|
|
}
|
|
|
|
class QuickLinksWidget extends Widget {
|
|
render(): HTMLElement {
|
|
const widgetDiv = createElement('div');
|
|
widgetDiv.classList.add('widget', 'quick-links-widget');
|
|
widgetDiv.innerHTML = `
|
|
<div class="widget-header">Quick Links</div>
|
|
<div class="widget-body">
|
|
<ul class="list-unstyled">
|
|
<li><a href="#/profile">View Profile</a></li>
|
|
<li><a href="#/classrooms">Go to Classrooms</a></li>
|
|
<li><a href="#/admin">Admin Panel</a></li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
return widgetDiv;
|
|
}
|
|
}
|
|
|
|
class PlaceholderWidget extends Widget {
|
|
render(): HTMLElement {
|
|
const div = createElement('div');
|
|
div.classList.add('widget', 'placeholder-widget');
|
|
div.textContent = 'Placeholder Widget';
|
|
return div;
|
|
}
|
|
}
|
|
|
|
export const renderDashboardPage = () => {
|
|
const layout = new ThreeColumnLayout();
|
|
const welcomeWidget = new WelcomeWidget();
|
|
const quickLinksWidget = new QuickLinksWidget();
|
|
const placeholderWidget = new PlaceholderWidget();
|
|
|
|
layout.setColumn1Content(welcomeWidget.render());
|
|
layout.setColumn2Content(quickLinksWidget.render());
|
|
layout.setColumn3Content(placeholderWidget.render());
|
|
|
|
document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
|
|
}; |