Bootstrap
-
-
-
-
@@ -68,22 +68,22 @@
Material Design
-
-
-
-
@@ -92,22 +92,22 @@
Material Design Compact
-
-
-
-
@@ -116,7 +116,7 @@
Tailwind
-
@@ -125,7 +125,7 @@
Fluent UI
-
@@ -134,42 +134,42 @@
PrimeOne Design - 2022
-
-
-
-
-
-
-
-
@@ -178,62 +178,62 @@
PrimeOne Design - 2021
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/app.config.component.ts b/src/app/app.config.component.ts
index 7bbeada..e4a0d90 100644
--- a/src/app/app.config.component.ts
+++ b/src/app/app.config.component.ts
@@ -1,41 +1,35 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { PrimeNGConfig } from 'primeng/api';
+import { Subscription } from 'rxjs';
+import { AppConfig } from './api/appconfig';
import { AppComponent } from './app.component';
import { AppMainComponent } from './app.main.component';
+import { ConfigService } from './service/app.config.service';
@Component({
selector: 'app-config',
- templateUrl:'./app.config.component.html'
+ templateUrl: './app.config.component.html'
})
-export class AppConfigComponent {
+export class AppConfigComponent implements OnInit, OnDestroy {
scale: number = 14;
-
- scales: any[] = [12,13,14,15,16];
- constructor(public app: AppComponent, public appMain: AppMainComponent) { }
+ scales: any[] = [12, 13, 14, 15, 16];
- replaceLink(linkElement, href) {
- if (this.isIE()) {
- linkElement.setAttribute('href', href);
- }
- else {
- const id = linkElement.getAttribute('id');
- const cloneLinkElement = linkElement.cloneNode(true);
+ config: AppConfig;
- cloneLinkElement.setAttribute('href', href);
- cloneLinkElement.setAttribute('id', id + '-clone');
+ subscription: Subscription;
- linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+ constructor(public app: AppComponent, public appMain: AppMainComponent, public configService: ConfigService, public primengConfig: PrimeNGConfig) { }
- cloneLinkElement.addEventListener('load', () => {
- linkElement.remove();
- cloneLinkElement.setAttribute('id', id);
- });
- }
- }
+ ngOnInit() {
+ this.config = this.configService.config;
+ this.subscription = this.configService.configUpdate$.subscribe(config => {
+ this.config = config;
+ this.scale = 14;
- isIE() {
- return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
+ this.applyScale();
+ });
}
onConfigButtonClick(event) {
@@ -44,18 +38,39 @@ export class AppConfigComponent {
event.preventDefault();
}
- incrementScale(){
+ incrementScale() {
this.scale++;
this.applyScale();
}
- decrementScale(){
+ decrementScale() {
this.scale--;
this.applyScale();
}
- applyScale(){
+ applyScale() {
document.documentElement.style.fontSize = this.scale + 'px';
}
+ onRippleChange(ripple) {
+ this.primengConfig.ripple = ripple;
+ this.configService.updateConfig({...this.config, ...{ripple}});
+ }
+
+ onInputStyleChange() {
+ console.log(this.config)
+ this.configService.updateConfig(this.config);
+ }
+
+ changeTheme(theme:string, dark:boolean){
+ let themeElement = document.getElementById('theme-css');
+ themeElement.setAttribute('href', 'assets/theme/' + theme + '/theme.css');
+ this.configService.updateConfig({...this.config, ...{theme, dark}});
+ }
+
+ ngOnDestroy() {
+ if (this.subscription) {
+ this.subscription.unsubscribe();
+ }
+ }
}
\ No newline at end of file
diff --git a/src/app/app.footer.component.html b/src/app/app.footer.component.html
index 34d29da..b887fcd 100644
--- a/src/app/app.footer.component.html
+++ b/src/app/app.footer.component.html
@@ -1,5 +1,5 @@
- 
+ 
by
PrimeNG
\ No newline at end of file
diff --git a/src/app/app.footer.component.ts b/src/app/app.footer.component.ts
index dece5ec..a99898e 100644
--- a/src/app/app.footer.component.ts
+++ b/src/app/app.footer.component.ts
@@ -1,10 +1,10 @@
import { Component } from '@angular/core';
-import { AppComponent } from './app.component';
+import { AppMainComponent } from './app.main.component';
@Component({
selector: 'app-footer',
templateUrl: './app.footer.component.html'
})
export class AppFooterComponent{
- constructor(public app: AppComponent) {}
+ constructor(public appMain: AppMainComponent) {}
}
diff --git a/src/app/app.main.component.html b/src/app/app.main.component.html
index 91ba382..b055634 100644
--- a/src/app/app.main.component.html
+++ b/src/app/app.main.component.html
@@ -1,11 +1,11 @@
+
by
PrimeNG
+ 'p-ripple-disabled': !config.ripple, 'p-input-filled': config.inputStyle === 'filled'}">
+ 
@@ -23,10 +23,9 @@ export class AppMenuComponent implements OnInit {
model: any[];
- constructor(public app: AppComponent){}
+ constructor(public appMain: AppMainComponent) { }
ngOnInit() {
-
this.model = [
{
label: 'Home',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 867dc90..20778cb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -96,6 +96,7 @@ import { AppFooterComponent } from './app.footer.component';
import { AppConfigComponent } from './app.config.component';
import { AppMenuComponent } from './app.menu.component';
import { AppMenuitemComponent } from './app.menuitem.component';
+
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { FormLayoutComponent } from './components/formlayout/formlayout.component';
import { FloatLabelComponent } from './components/floatlabel/floatlabel.component';
@@ -119,11 +120,11 @@ import { CrudComponent } from './components/crud/crud.component';
import { TimelineComponent } from './components/timeline/timeline.component';
import { IconsComponent } from './components/icons/icons.component';
import { BlocksComponent } from './components/blocks/blocks.component';
-
import { PaymentComponent} from './components/menus/payment.component';
import { ConfirmationComponent } from './components/menus/confirmation.component';
import { PersonalComponent } from './components/menus/personal.component';
import { SeatComponent } from './components/menus/seat.component';
+
import { CountryService } from './service/countryservice';
import { CustomerService } from './service/customerservice';
import { EventService } from './service/eventservice';
@@ -132,6 +133,7 @@ import { NodeService } from './service/nodeservice';
import { PhotoService } from './service/photoservice';
import { ProductService } from './service/productservice';
import { MenuService } from './service/app.menu.service';
+import { ConfigService } from './service/app.config.service';
@NgModule({
imports: [
@@ -263,7 +265,7 @@ import { MenuService } from './service/app.menu.service';
providers: [
{provide: LocationStrategy, useClass: HashLocationStrategy},
CountryService, CustomerService, EventService, IconService, NodeService,
- PhotoService, ProductService, MenuService
+ PhotoService, ProductService, MenuService, ConfigService
],
bootstrap: [AppComponent]
})
diff --git a/src/app/app.topbar.component.html b/src/app/app.topbar.component.html
index 35d4174..0e1698a 100644
--- a/src/app/app.topbar.component.html
+++ b/src/app/app.topbar.component.html
@@ -1,6 +1,6 @@
+
-
+
SAKAI
diff --git a/src/app/app.topbar.component.ts b/src/app/app.topbar.component.ts
index 5622d60..a9b3a34 100644
--- a/src/app/app.topbar.component.ts
+++ b/src/app/app.topbar.component.ts
@@ -1,5 +1,4 @@
import { Component, OnDestroy } from '@angular/core';
-import { AppComponent } from './app.component';
import { AppMainComponent } from './app.main.component';
import { Subscription } from 'rxjs';
import { MenuItem } from 'primeng/api';
@@ -8,17 +7,9 @@ import { MenuItem } from 'primeng/api';
selector: 'app-topbar',
templateUrl: './app.topbar.component.html'
})
-export class AppTopBarComponent implements OnDestroy{
-
- subscription: Subscription;
+export class AppTopBarComponent {
items: MenuItem[];
- constructor(public app: AppComponent, public appMain: AppMainComponent) {}
-
- ngOnDestroy() {
- if (this.subscription) {
- this.subscription.unsubscribe();
- }
- }
+ constructor(public appMain: AppMainComponent) { }
}
diff --git a/src/app/components/charts/charts.component.ts b/src/app/components/charts/charts.component.ts
index 4554485..5b20f8c 100755
--- a/src/app/components/charts/charts.component.ts
+++ b/src/app/components/charts/charts.component.ts
@@ -1,9 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { AppConfig } from 'src/app/api/appconfig';
+import { ConfigService } from 'src/app/service/app.config.service';
@Component({
templateUrl: './charts.component.html'
})
-export class ChartsComponent implements OnInit {
+export class ChartsComponent implements OnInit, OnDestroy {
lineData: any;
@@ -25,7 +28,20 @@ export class ChartsComponent implements OnInit {
radarOptions: any;
+ config: AppConfig;
+
+ subscription: Subscription;
+
+ constructor(public configService: ConfigService) { }
+
ngOnInit() {
+ this.config = this.configService.config;
+
+ this.subscription = this.configService.configUpdate$.subscribe(config => {
+ this.config = config;
+ this.updateChartOptions();
+ });
+
this.lineData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
@@ -236,4 +252,25 @@ export class ChartsComponent implements OnInit {
}
};
}
+
+ updateChartOptions() {
+ if (this.config.dark)
+ this.applyDarkTheme();
+ else
+ this.applyLightTheme();
+ }
+
+ applyLightTheme() {
+
+ }
+
+ applyDarkTheme() {
+
+ }
+
+ ngOnDestroy() {
+ if (this.subscription) {
+ this.subscription.unsubscribe();
+ }
+ }
}
diff --git a/src/app/service/app.config.service.ts b/src/app/service/app.config.service.ts
new file mode 100644
index 0000000..0a165d6
--- /dev/null
+++ b/src/app/service/app.config.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { AppConfig } from '../api/appconfig';
+
+@Injectable()
+export class ConfigService {
+
+ config: AppConfig = {
+ theme: 'lara-light-indigo',
+ dark: false,
+ inputStyle: 'outlined',
+ ripple: true
+ };
+
+ private configUpdate = new Subject();
+
+ configUpdate$ = this.configUpdate.asObservable();
+
+ updateConfig(config: AppConfig) {
+ this.config = config;
+ this.configUpdate.next(config);
+ }
+
+ getConfig() {
+ return this.config;
+ }
+}
+
SAKAI
diff --git a/src/app/app.topbar.component.ts b/src/app/app.topbar.component.ts
index 5622d60..a9b3a34 100644
--- a/src/app/app.topbar.component.ts
+++ b/src/app/app.topbar.component.ts
@@ -1,5 +1,4 @@
import { Component, OnDestroy } from '@angular/core';
-import { AppComponent } from './app.component';
import { AppMainComponent } from './app.main.component';
import { Subscription } from 'rxjs';
import { MenuItem } from 'primeng/api';
@@ -8,17 +7,9 @@ import { MenuItem } from 'primeng/api';
selector: 'app-topbar',
templateUrl: './app.topbar.component.html'
})
-export class AppTopBarComponent implements OnDestroy{
-
- subscription: Subscription;
+export class AppTopBarComponent {
items: MenuItem[];
- constructor(public app: AppComponent, public appMain: AppMainComponent) {}
-
- ngOnDestroy() {
- if (this.subscription) {
- this.subscription.unsubscribe();
- }
- }
+ constructor(public appMain: AppMainComponent) { }
}
diff --git a/src/app/components/charts/charts.component.ts b/src/app/components/charts/charts.component.ts
index 4554485..5b20f8c 100755
--- a/src/app/components/charts/charts.component.ts
+++ b/src/app/components/charts/charts.component.ts
@@ -1,9 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { AppConfig } from 'src/app/api/appconfig';
+import { ConfigService } from 'src/app/service/app.config.service';
@Component({
templateUrl: './charts.component.html'
})
-export class ChartsComponent implements OnInit {
+export class ChartsComponent implements OnInit, OnDestroy {
lineData: any;
@@ -25,7 +28,20 @@ export class ChartsComponent implements OnInit {
radarOptions: any;
+ config: AppConfig;
+
+ subscription: Subscription;
+
+ constructor(public configService: ConfigService) { }
+
ngOnInit() {
+ this.config = this.configService.config;
+
+ this.subscription = this.configService.configUpdate$.subscribe(config => {
+ this.config = config;
+ this.updateChartOptions();
+ });
+
this.lineData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
@@ -236,4 +252,25 @@ export class ChartsComponent implements OnInit {
}
};
}
+
+ updateChartOptions() {
+ if (this.config.dark)
+ this.applyDarkTheme();
+ else
+ this.applyLightTheme();
+ }
+
+ applyLightTheme() {
+
+ }
+
+ applyDarkTheme() {
+
+ }
+
+ ngOnDestroy() {
+ if (this.subscription) {
+ this.subscription.unsubscribe();
+ }
+ }
}
diff --git a/src/app/service/app.config.service.ts b/src/app/service/app.config.service.ts
new file mode 100644
index 0000000..0a165d6
--- /dev/null
+++ b/src/app/service/app.config.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { AppConfig } from '../api/appconfig';
+
+@Injectable()
+export class ConfigService {
+
+ config: AppConfig = {
+ theme: 'lara-light-indigo',
+ dark: false,
+ inputStyle: 'outlined',
+ ripple: true
+ };
+
+ private configUpdate = new Subject