Skip to content

P
portal-apps-manage
Commit 3bd20370 by Ooh-Ao
Options

widget

parent 188a3ec4
Showing with 16 additions and 16 deletions
src/app/DPU/dashboard-management/dashboard-management.component.html
<div class="flex h-screen bg-gray-100">
<div class="flex h-screen bg-gray-50">
<!-- Widget Sidebar -->
<div class="w-72 bg-white p-4 overflow-y-auto shadow-lg border-r flex flex-col">
<h2 class="text-xl font-bold mb-4 text-gray-800">Widgets</h2>
......@@ -7,7 +7,7 @@
<!-- Widget Search -->
<div class="relative mb-4">
<input type="text" [(ngModel)]="widgetSearchTerm" (input)="filterWidgets()" placeholder="Search widgets..."
class="w-full p-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
class="w-full p-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
......@@ -21,7 +21,7 @@
<!-- Widget List -->
<div class="flex-grow">
<div *ngFor="let widget of filteredAvailableWidgets"
class="p-3 mb-2 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:bg-blue-50 hover:border-blue-400 hover:shadow-md transition-all duration-200"
class="p-3 mb-2 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:bg-indigo-50 hover:border-indigo-100 hover:shadow-md transition-all duration-200"
(click)="addWidgetToDashboard(widget)">
<p class="font-semibold text-gray-700">{{ widget.name }}</p>
<p class="text-xs text-gray-500">Size: {{widget.cols}}x{{widget.rows}}</p>
......@@ -37,28 +37,28 @@
<h1 class="text-xl font-bold text-gray-700">Dashboard:</h1>
<!-- Dashboard Selector -->
<select [(ngModel)]="selectedDashboardId" (change)="loadSelectedDashboard()"
class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white">
<option *ngFor="let dash of userDashboards" [value]="dash.id">{{ dash.name }}</option>
</select>
<div class="relative flex items-center">
<input type="text" [(ngModel)]="dashboardData.name" (blur)="saveDashboardName()"
class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-800 font-semibold">
class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white text-gray-800 font-semibold">
<button *ngIf="dashboardData?.name !== dashboardData?.originalName" (click)="saveDashboardName()"
class="ml-2 text-green-500 hover:text-green-700 focus:outline-none">
class="ml-2 text-emerald-500 hover:text-emerald-700 focus:outline-none">
<i class="bi bi-check-circle-fill text-2xl"></i>
</button>
</div>
<button (click)="createNewDashboard()"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105 flex items-center gap-2">
class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105 flex items-center gap-2">
<i class="bi bi-plus-circle-fill"></i> New Dashboard
</button>
<button *ngIf="selectedDashboardId" (click)="deleteDashboard()"
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105 flex items-center gap-2">
class="bg-rose-600 hover:bg-rose-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105 flex items-center gap-2">
<i class="bi bi-trash-fill"></i> Delete Dashboard
</button>
</div>
<button (click)="saveLayout()"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105 flex items-center gap-2">
class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105 flex items-center gap-2">
<i class="bi bi-check-circle-fill"></i> Save Layout
</button>
</div>
......@@ -70,7 +70,7 @@
<ng-template [e-header]>
<div class="flex justify-between items-center w-full">
<span>{{panel.header}}</span>
<button (click)="removeWidgetFromDashboard(panel.id!)" class="text-gray-400 hover:text-red-500 focus:outline-none">
<button (click)="removeWidgetFromDashboard(panel.id!)" class="text-gray-400 hover:text-rose-500 focus:outline-none">
<i class="bi bi-x-lg"></i>
</button>
</div>
......
src/app/DPU/dashboard-viewer/dashboard-viewer.component.html
<div class="container mx-auto p-4">
<h2 class="text-2xl font-bold mb-4">Viewing Dashboard: {{ dashboardName }}</h2>
<div class="container mx-auto p-4 bg-gray-50 min-h-screen">
<h2 class="text-2xl font-bold mb-4 text-gray-800">Viewing Dashboard: {{ dashboardName }}</h2>
<div class="control-section">
<ejs-dashboardlayout id='dashboard_viewer' #viewerLayout [cellSpacing]="cellSpacing" [panels]="panels" [columns]="6" [allowResizing]="false" [allowDragging]="false">
<e-panels>
<e-panel *ngFor="let panel of panels" [row]="panel.row" [col]="panel.col" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [id]="panel.id">
<ng-template [e-header]>
<div>{{panel.header}}</div>
<div class="p-2 bg-white border-b border-gray-200 text-gray-700 font-semibold">{{panel.header}}</div>
</ng-template>
<ng-template [e-content]>
<ng-container *ngComponentOutlet="panel.componentType"></ng-container>
......
src/app/DPU/widgets/kpi-widget/kpi-widget.component.html
......@@ -3,7 +3,7 @@
<h3 class="text-lg font-semibold text-gray-500">{{ kpiName }}</h3>
<p class="text-4xl font-bold text-gray-800 mt-2">{{ kpiData.value }}</p>
</div>
<div class="flex items-center mt-4 text-sm" [ngClass]="{'text-green-500': kpiData.trend === 'up', 'text-red-500': kpiData.trend === 'down'}">
<div class="flex items-center mt-4 text-sm" [ngClass]="{'text-emerald-500': kpiData.trend === 'up', 'text-rose-500': kpiData.trend === 'down'}">
<svg *ngIf="kpiData.trend === 'up'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707a1 1 0 00-1.414-1.414L11 9.586V6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3z" clip-rule="evenodd" />
</svg>
......
src/app/DPU/widgets/quick-links-widget/quick-links-widget.component.html
......@@ -2,7 +2,7 @@
<h3 class="text-lg font-semibold text-gray-500 mb-4">Quick Links</h3>
<ul class="space-y-2">
<li *ngFor="let link of quickLinks">
<a [href]="link.url" class="text-blue-600 hover:text-blue-800 hover:underline text-base font-medium block p-2 rounded-md transition-colors duration-200 hover:bg-blue-50">
<a [href]="link.url" class="text-indigo-600 hover:text-indigo-800 hover:underline text-base font-medium block p-2 rounded-md transition-colors duration-200 hover:bg-indigo-50">
{{ link.name }}
</a>
</li>
......
src/app/DPU/widgets/welcome-widget/welcome-widget.component.html
<div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 rounded-lg shadow-md text-white flex flex-col justify-center items-center h-full text-center">
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-6 rounded-lg shadow-md text-white flex flex-col justify-center items-center h-full text-center">
<h2 class="text-3xl font-bold mb-2">{{ welcomeMessage }}</h2>
<p class="text-lg">Have a productive day!</p>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment