From d9b18b920ce028c73474ec673fe9bd3dd40a5d9c Mon Sep 17 00:00:00 2001 From: Ben Wilson Date: Tue, 20 Jun 2023 23:11:11 -0400 Subject: [PATCH] ui init --- package.json | 2 +- proxy.config.local.json | 8 ++++++++ src/app/app-routing.module.ts | 6 +++--- src/app/app.module.ts | 9 ++++++--- .../dashboard/dashboard.component.html | 5 +++++ .../dashboard/dashboard.component.scss | 0 .../dashboard/dashboard.component.spec.ts | 0 .../dashboard/dashboard.component.ts | 19 +++++++++++++++++++ .../splash/splash.component.html | 5 +++-- .../components/splash/splash.component.scss | 3 +++ .../splash/splash.component.spec.ts | 0 .../splash/splash.component.ts | 1 + src/app/dashboard/dashboard.component.html | 1 - src/app/dashboard/dashboard.component.ts | 10 ---------- src/app/services/client.service.spec.ts | 16 ++++++++++++++++ src/app/services/client.service.ts | 18 ++++++++++++++++++ src/app/splash/splash.component.scss | 0 17 files changed, 83 insertions(+), 20 deletions(-) create mode 100644 proxy.config.local.json create mode 100644 src/app/components/dashboard/dashboard.component.html rename src/app/{ => components}/dashboard/dashboard.component.scss (100%) rename src/app/{ => components}/dashboard/dashboard.component.spec.ts (100%) create mode 100644 src/app/components/dashboard/dashboard.component.ts rename src/app/{ => components}/splash/splash.component.html (67%) create mode 100644 src/app/components/splash/splash.component.scss rename src/app/{ => components}/splash/splash.component.spec.ts (100%) rename src/app/{ => components}/splash/splash.component.ts (89%) delete mode 100644 src/app/dashboard/dashboard.component.html delete mode 100644 src/app/dashboard/dashboard.component.ts create mode 100644 src/app/services/client.service.spec.ts create mode 100644 src/app/services/client.service.ts delete mode 100644 src/app/splash/splash.component.scss diff --git a/package.json b/package.json index 9d7b66d..40bfc7f 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "scripts": { "ng": "ng", - "start": "ng serve", + "start": "ng serve --proxy-config proxy.config.local.json ", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" diff --git a/proxy.config.local.json b/proxy.config.local.json new file mode 100644 index 0000000..d506cf3 --- /dev/null +++ b/proxy.config.local.json @@ -0,0 +1,8 @@ +{ + "/api": { + "target": "http://localhost:3334", + "secure": false, + "changeOrigin": false, + "logLevel": "debug" + } +} \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a55af5a..008360c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,9 +1,9 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { DashboardComponent } from './dashboard/dashboard.component'; +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { SplashComponent } from './components/splash/splash.component'; import { AppLayoutComponent } from './layout/app.layout.component'; -import { SplashComponent } from './splash/splash.component'; const routes: Routes = [ { @@ -15,7 +15,7 @@ const routes: Routes = [ component: AppLayoutComponent, children: [ { - path: 'dashboard', + path: ':address', component: DashboardComponent } ] diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 04e6840..ee2a7b7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,13 +1,14 @@ import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common'; import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { PrimeNGModule } from '../prime-ng.module'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { SplashComponent } from './components/splash/splash.component'; import { AppLayoutModule } from './layout/app.layout.module'; -import { SplashComponent } from './splash/splash.component'; @NgModule({ declarations: [ @@ -20,7 +21,9 @@ import { SplashComponent } from './splash/splash.component'; BrowserModule, AppRoutingModule, PrimeNGModule, - AppLayoutModule + AppLayoutModule, + FormsModule, + ReactiveFormsModule ], providers: [ { provide: LocationStrategy, useClass: HashLocationStrategy }, diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html new file mode 100644 index 0000000..64d1f38 --- /dev/null +++ b/src/app/components/dashboard/dashboard.component.html @@ -0,0 +1,5 @@ +
+
+        {{clientInfo$ | async | json}}
+    
+
\ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss similarity index 100% rename from src/app/dashboard/dashboard.component.scss rename to src/app/components/dashboard/dashboard.component.scss diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/components/dashboard/dashboard.component.spec.ts similarity index 100% rename from src/app/dashboard/dashboard.component.spec.ts rename to src/app/components/dashboard/dashboard.component.spec.ts diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts new file mode 100644 index 0000000..d8cad54 --- /dev/null +++ b/src/app/components/dashboard/dashboard.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs'; + +import { ClientService } from '../../services/client.service'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'] +}) +export class DashboardComponent { + + public clientInfo$: Observable; + + constructor(private clientService: ClientService, private route: ActivatedRoute) { + this.clientInfo$ = this.clientService.getClientInfo(this.route.snapshot.params['address']); + } +} diff --git a/src/app/splash/splash.component.html b/src/app/components/splash/splash.component.html similarity index 67% rename from src/app/splash/splash.component.html rename to src/app/components/splash/splash.component.html index f445aac..5d20947 100644 --- a/src/app/splash/splash.component.html +++ b/src/app/components/splash/splash.component.html @@ -9,9 +9,10 @@
- - +
diff --git a/src/app/components/splash/splash.component.scss b/src/app/components/splash/splash.component.scss new file mode 100644 index 0000000..d115699 --- /dev/null +++ b/src/app/components/splash/splash.component.scss @@ -0,0 +1,3 @@ +#address { + min-width: 325px; +} \ No newline at end of file diff --git a/src/app/splash/splash.component.spec.ts b/src/app/components/splash/splash.component.spec.ts similarity index 100% rename from src/app/splash/splash.component.spec.ts rename to src/app/components/splash/splash.component.spec.ts diff --git a/src/app/splash/splash.component.ts b/src/app/components/splash/splash.component.ts similarity index 89% rename from src/app/splash/splash.component.ts rename to src/app/components/splash/splash.component.ts index ed61d64..4a5b8d8 100644 --- a/src/app/splash/splash.component.ts +++ b/src/app/components/splash/splash.component.ts @@ -7,5 +7,6 @@ import { Component } from '@angular/core'; }) export class SplashComponent { + public address!: string; constructor() { } } diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html deleted file mode 100644 index 9c5fce9..0000000 --- a/src/app/dashboard/dashboard.component.html +++ /dev/null @@ -1 +0,0 @@ -

dashboard works!

diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts deleted file mode 100644 index 69c4b8f..0000000 --- a/src/app/dashboard/dashboard.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.scss'] -}) -export class DashboardComponent { - -} diff --git a/src/app/services/client.service.spec.ts b/src/app/services/client.service.spec.ts new file mode 100644 index 0000000..776372f --- /dev/null +++ b/src/app/services/client.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ClientService } from './client.service'; + +describe('ClientService', () => { + let service: ClientService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ClientService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/client.service.ts b/src/app/services/client.service.ts new file mode 100644 index 0000000..68f1426 --- /dev/null +++ b/src/app/services/client.service.ts @@ -0,0 +1,18 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; + +import { environment } from '../../environments/environment'; + +@Injectable({ + providedIn: 'root' +}) +export class ClientService { + + constructor( + private httpClient: HttpClient + ) { } + + public getClientInfo(address: string) { + return this.httpClient.get(`${environment.API_URL}/api/client/${address}`); + } +} diff --git a/src/app/splash/splash.component.scss b/src/app/splash/splash.component.scss deleted file mode 100644 index e69de29..0000000