add page, add call to api method in page ts

This commit is contained in:
DavidGudEnough 2025-01-16 21:31:16 -05:00
parent 01d10171e9
commit a430df72e4
Signed by: david.nguyen
GPG Key ID: 0B95DC36355BEB37
25 changed files with 404 additions and 54 deletions

View File

@ -0,0 +1,3 @@
export enum EnergyRateExceptionThresholdResetType {
daily
}

View File

@ -1,3 +1,14 @@
<p>default layout works !</p>
<button routerLink="/">
<label>Home</label>
</button>
<button routerLink="energy-provider">
<label>energy-provider</label>
</button>
<button routerLink="energy-rate">
<label>energy-rate</label>
</button>
<button routerLink="energy-rate-exception">
<label>energy-rate-exception</label>
</button>
<router-outlet />

View File

@ -1,14 +1,14 @@
import { Component } from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {RouterOutlet, RouterLink} from '@angular/router';
@Component({
selector: 'app-default-layout',
imports: [
RouterOutlet
RouterOutlet,
RouterLink
],
templateUrl: './default.layout.html',
styleUrl: './default.layout.scss'
})
export class DefaultLayout {
}

View File

@ -9,13 +9,31 @@ export const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'home',
redirectTo: 'dashboard',
},
{
path: 'home',
path: 'dashboard',
loadComponent: () =>
import('../../pages/home/home.page')
.then(page => page.HomePage),
import('../../pages/dashboard/dashboard.page')
.then(page => page.DashboardPage),
},
{
path: 'energy-provider',
loadComponent: () =>
import('../../pages/energy-provider/energy-provider.page')
.then(page => page.EnergyProviderPage),
},
{
path: 'energy-rate',
loadComponent: () =>
import('../../pages/energy-rate/energy-rate.page')
.then(page => page.EnergyRatePage),
},
{
path: 'energy-rate-exception',
loadComponent: () =>
import('../../pages/energy-rate-exception/energy-rate-exception.page')
.then(page => page.EnergyRateExceptionPage),
},
],
},

View File

@ -0,0 +1 @@
<p>dashboard works!</p>

View File

@ -1,18 +1,18 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomePage } from './home.page';
import { DashboardPage } from './dashboard.page';
describe('HomePage', () => {
let component: HomePage;
let fixture: ComponentFixture<HomePage>;
describe('DashboardPage', () => {
let component: DashboardPage;
let fixture: ComponentFixture<DashboardPage>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HomePage]
imports: [DashboardPage]
})
.compileComponents();
fixture = TestBed.createComponent(HomePage);
fixture = TestBed.createComponent(DashboardPage);
component = fixture.componentInstance;
fixture.detectChanges();
});

View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-dashboard',
imports: [],
templateUrl: './dashboard.page.html',
styleUrl: './dashboard.page.scss'
})
export class DashboardPage {
}

View File

@ -0,0 +1,7 @@
<form [formGroup]="formGroup" (ngSubmit)="submit()">
<label for="name">Provider Name</label>
<input id="name" formControlName="name" type="text" />
<button type="submit" [disabled]="formGroup.invalid || loading">
{{ loading ? 'Adding...' : 'Add Provider' }}
</button>
</form>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EnergyProviderPage } from './energy-provider.page';
describe('EnergyProviderPage', () => {
let component: EnergyProviderPage;
let fixture: ComponentFixture<EnergyProviderPage>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EnergyProviderPage]
})
.compileComponents();
fixture = TestBed.createComponent(EnergyProviderPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,95 @@
import {Router} from '@angular/router';
import { Component, inject } from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {
EnergyProviderService,
ICreateEnergyProvider,
IDisabledEnergyProvider, IEnableEnergyProvider, IUpdateEnergyProvider
} from '../../services/energy-provider.service';
import {finalize} from 'rxjs';
@Component({
selector: 'app-energy-provider',
imports: [
ReactiveFormsModule,
],
templateUrl: './energy-provider.page.html',
styleUrl: './energy-provider.page.scss'
})
export class EnergyProviderPage {
private energyProviderService = inject(EnergyProviderService);
private router = inject(Router);
loading: boolean = false;
formGroup: FormGroup;
constructor(private _formBuilder: FormBuilder) {
this.formGroup = this._formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3)]],
});
}
submit(): void {
if (this.formGroup.valid) {
const name = this.formGroup.value.name;
this.energyProviderService.dataSource?.executeCommandByName<ICreateEnergyProvider, void>(
'createEnergyProvider',
{
name
})
.pipe(finalize(() => this.loading = false))
.subscribe(() => {
this.energyProviderService.dataSource?.refresh();
this.router.navigate(['/']);
})
}
}
disable(): void {
if (this.formGroup.valid) {
const provider_id = this.formGroup.value.provider_id;
const disabled_at = this.formGroup.value.disabled_at
this.energyProviderService.dataSource?.executeCommandByName<IDisabledEnergyProvider, void>(
'disableEnergyProvider',
{
provider_id,
disabled_at,
})
.pipe(finalize(() => this.loading = false))
.subscribe(() => {
this.energyProviderService.dataSource?.refresh();
this.router.navigate(['/']);
})
}
}
enable(): void {
if (this.formGroup.valid) {
const provider_id = this.formGroup.value.provider_id;
this.energyProviderService.dataSource?.executeCommandByName<IEnableEnergyProvider, void>(
'enableEnergyProvider',
{
provider_id,
})
.pipe(finalize(() => this.loading = false))
.subscribe(() => {
this.energyProviderService.dataSource?.refresh();
this.router.navigate(['/']);
})
}
}
update(): void {
if (this.formGroup.valid) {
const provider_id = this.formGroup.value.provider_id;
const name = this.formGroup.value.name;
this.energyProviderService.dataSource?.executeCommandByName<IUpdateEnergyProvider, void>(
'updateEnergyProvider',
{
provider_id,
name
})
.pipe(finalize(() => this.loading = false))
.subscribe(() => {
this.energyProviderService.dataSource?.refresh();
this.router.navigate(['/']);
})
}
}
}

View File

@ -0,0 +1 @@
<p>energy-rate-exception works!</p>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EnergyRateExceptionPage } from './energy-rate-exception.page';
describe('EnergyRateExceptionPage', () => {
let component: EnergyRateExceptionPage;
let fixture: ComponentFixture<EnergyRateExceptionPage>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EnergyRateExceptionPage]
})
.compileComponents();
fixture = TestBed.createComponent(EnergyRateExceptionPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-energy-rate-exception',
imports: [],
templateUrl: './energy-rate-exception.page.html',
styleUrl: './energy-rate-exception.page.scss'
})
export class EnergyRateExceptionPage {
}

View File

@ -0,0 +1 @@
<p>energy-rate works!</p>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EnergyRatePage } from './energy-rate.page';
describe('EnergyRatePage', () => {
let component: EnergyRatePage;
let fixture: ComponentFixture<EnergyRatePage>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [EnergyRatePage]
})
.compileComponents();
fixture = TestBed.createComponent(EnergyRatePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-energy-rate',
imports: [],
templateUrl: './energy-rate.page.html',
styleUrl: './energy-rate.page.scss'
})
export class EnergyRatePage {
}

View File

@ -1 +0,0 @@
<p>home works!</p>

View File

@ -1,11 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
imports: [],
templateUrl: './home.page.html',
styleUrl: './home.page.scss'
})
export class HomePage {
}

View File

@ -15,23 +15,23 @@ export interface IEnergyProvider
created_at: string;
updated_at: string;
}
export interface IAddEnergyProvider
export interface ICreateEnergyProvider
{
name: string;
}
export interface IDisabledEnergyProvider
{
providerId: number;
provider_id: number;
disabled_at: string;
}
export interface IEnableEnergyProvider
{
providerId: number;
provider_id: number;
}
export interface IUpdateEnergyProvider
{
providerId: number;
provider_id: number;
name: string;
}
@ -65,9 +65,10 @@ export class EnergyProviderService {
dataSourceBuilder() {
return this.hdss.builder<IQueryCriteria, IEnergyProvider>()
.keyResolver(model => model.id)
.addCommandByUrl<IAddEnergyProvider, void>(
'addEnergyProvider',
this.settingService.getMainCommandUrl('addEnergyProvider'),
//.queryUrl(this.settingService.getMainQueryUrl())
.addCommandByUrl<ICreateEnergyProvider, void>(
'createEnergyProvider',
this.settingService.getMainCommandUrl('createEnergyProvider'),
ev => {
return of({
name: ev.model.name
@ -78,7 +79,7 @@ export class EnergyProviderService {
this.settingService.getMainCommandUrl('disableEnergyProvider'),
ev => {
return of({
providerId: ev.model.id,
provider_id: ev.model.id,
disabled_at: ev.model.disabled_at
})
}
@ -88,7 +89,7 @@ export class EnergyProviderService {
this.settingService.getMainCommandUrl('enableEnergyProvider'),
ev => {
return of({
providerId: ev.model.id,
provider_id: ev.model.id,
})
}
)
@ -97,7 +98,7 @@ export class EnergyProviderService {
this.settingService.getMainCommandUrl('updateEnergyProvider'),
ev => {
return of({
providerId: ev.model.id,
provider_id: ev.model.id,
name: ev.model.name
})
}

View File

@ -0,0 +1,126 @@
import {Router} from '@angular/router';
import {BehaviorSubject, of} from 'rxjs';
import {SettingService} from './setting.service';
import { inject, Injectable } from '@angular/core';
import {HttpDataSourceService} from '@openharbor/ngx-data';
import {IDataSource, IQueryCriteria} from '@openharbor/data';
import {OidcSecurityService} from 'angular-auth-oidc-client';
import {EnergyRateExceptionThresholdResetType} from '../enum/energy-rate-exception-threshold-reset-type';
export interface IEnergyRateException
{
id: number;
rate_id: number;
name: string;
energyThreshold: number;
resetType: EnergyRateExceptionThresholdResetType;
started_at: string;
ended_at: string;
}
export interface ICreateEnergyRateException
{
rate_id: number;
name: string;
energyThreshold: number;
resetType: EnergyRateExceptionThresholdResetType;
started_at: string;
ended_at: string;
}
export interface IUpdateEnergyRateException
{
energyRateExceptionId: number;
energyThreshold: number;
resetType: EnergyRateExceptionThresholdResetType;
started_at: string;
ended_at: string;
}
@Injectable({
providedIn: 'root'
})
export class EnergyRateExceptionService {
private readonly hdss = inject(HttpDataSourceService);
private readonly settingService = inject(SettingService);
private readonly oidcSecurityService = inject(OidcSecurityService);
private readonly router = inject(Router);
private energyRateExceptions: IEnergyRateException[] = [];
dataSource?: IDataSource<IQueryCriteria, IEnergyRateException>
current$ = new BehaviorSubject<IEnergyRateException | null>(null);
energyRateExceptions$ = new BehaviorSubject<IEnergyRateException[]>([]);
constructor() {
this.internalDataSource();
this.oidcSecurityService.isAuthenticated$
.subscribe(result => {
if (result.isAuthenticated) {
this.dataSource?.refresh();
}
});
}
dataSourceBuilder()
{
return this.hdss.builder<IQueryCriteria, IEnergyRateException>()
.keyResolver(model => model.id)
//.queryUrl(this.settingService.getMainQueryUrl())
.addCommandByUrl<ICreateEnergyRateException, void>(
'createEnergyRateException',
this.settingService.getMainCommandUrl('createEnergyRateException'),
ev => {
return of({
rate_id: ev.model.rate_id,
name: ev.model.name,
energyThreshold: ev.model.energyThreshold,
resetType: ev.model.resetType,
started_at: ev.model.started_at,
ended_at: ev.model.ended_at,
})
})
.addCommandByUrl<IUpdateEnergyRateException, void>(
'updateEnergyRateException',
this.settingService.getMainCommandUrl('updateEnergyRateException'),
ev => {
return of({
energyRateExceptionId: ev.model.id,
energyThreshold: ev.model.energyThreshold,
resetType: ev.model.resetType,
started_at: ev.model.started_at,
ended_at: ev.model.ended_at,
})
})
}
selectEnergyRateException(id: number) {
const energyRateException = this.energyRateExceptions.find(energyRateException => energyRateException.id === id);
if (undefined === energyRateException)
return;
this.current$.next(energyRateException);
}
private internalDataSource() {
if (undefined !== this.dataSource)
return;
this.dataSource = this.dataSourceBuilder()
.createDataSource();
this.dataSource.data$
.subscribe(result => {
if (null === result || undefined === result.data)
return;
let updateSelection = false;
if (this.energyRateExceptions.length === 0) {
updateSelection = true;
}
this.energyRateExceptions = result.data;
this.energyRateExceptions$.next(this.energyRateExceptions);
if (updateSelection && this.energyRateExceptions.length > 0)
this.selectEnergyRateException(this.energyRateExceptions[0].id)
})
}
}

View File

@ -6,17 +6,12 @@ import { inject, Injectable } from '@angular/core';
import {HttpDataSourceService} from '@openharbor/ngx-data';
import {IDataSource, IQueryCriteria} from '@openharbor/data';
import {OidcSecurityService} from 'angular-auth-oidc-client';
import {
IAddEnergyProvider,
IDisabledEnergyProvider,
IEnableEnergyProvider,
IEnergyProvider, IUpdateEnergyProvider
} from './energy-provider.service';
export interface IEnergyRate
{
id: number;
providerId: number;
provider_id: number;
name: string;
rate: number;
currency: Currency;
@ -26,9 +21,9 @@ export interface IEnergyRate
created_at: string;
updated_at: string;
}
export interface IAddEnergyRate
export interface ICreateEnergyRate
{
providerId: number;
provider_id: number;
name: string;
rate: number;
currency: Currency;
@ -36,17 +31,17 @@ export interface IAddEnergyRate
}
export interface IDisabledEnergyRate
{
rateId: number;
rate_id: number;
disabled_at: string;
}
export interface IEnableEnergyRate
{
rateId: number;
rate_id: number;
}
export interface IUpdateEnergyRate
{
rateId: number;
rate_id: number;
started_at : string;
name: string;
rate: number;
@ -80,12 +75,13 @@ export class EnergyRateService {
dataSourceBuilder() {
return this.hdss.builder<IQueryCriteria, IEnergyRate>()
.keyResolver(model => model.id)
.addCommandByUrl<IAddEnergyRate, void>(
'addEnergyRate',
this.settingService.getMainCommandUrl('addEnergyRate'),
//.queryUrl(this.settingService.getMainQueryUrl())
.addCommandByUrl<ICreateEnergyRate, void>(
'createEnergyRate',
this.settingService.getMainCommandUrl('createEnergyRate'),
ev => {
return of({
providerId: ev.model.providerId,
provider_id: ev.model.provider_id,
name: ev.model.name,
rate: ev.model.rate,
currency: ev.model.currency,
@ -97,7 +93,7 @@ export class EnergyRateService {
this.settingService.getMainCommandUrl('disableEnergyRate'),
ev => {
return of({
rateId: ev.model.id,
rate_id: ev.model.id,
disabled_at: ev.model.disabled_at
})
}
@ -116,7 +112,7 @@ export class EnergyRateService {
this.settingService.getMainCommandUrl('updateEnergyRate'),
ev => {
return of({
rateId: ev.model.id,
rate_id: ev.model.id,
started_at: ev.model.started_at,
name: ev.model.name,
rate: ev.model.rate,