Implement settings dialog

angular.json

@@ -6,7 +6,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "sell4zec": {
+    "zgo": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:application": {
@@ -20,7 +20,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/sell4zec",
+            "outputPath": "dist/zgo",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -71,10 +71,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "sell4zec:build:production"
+              "browserTarget": "zgo:build:production"
             },
             "development": {
-              "browserTarget": "sell4zec:build:development"
+              "browserTarget": "zgo:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -82,7 +82,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "sell4zec:build"
+            "browserTarget": "zgo:build"
           }
         },
         "test": {
@@ -106,5 +106,5 @@
       }
     }
   },
-  "defaultProject": "sell4zec"
+  "defaultProject": "zgo"
 }

backend/app.js

@@ -169,15 +169,19 @@ app.post('/api/addowner', (req, res, next) => {
 	});
 });
 
-app.post('/api/addownername', (req, res, next) => {
-	console.log('Post: /api/addownername');
-	const owner = ownermodel.findOne({address: req.body.address});
-
-	owner.name = req.body.name;
-	owner.save();
-	res.status(201).json({
-		message: 'Ownername added successfully'
-	});
+app.post('/api/updateowner', (req, res, next) => {
+	console.log('Post: /api/updateowner');
+	ownermodel.findByIdAndUpdate(req.body.owner._id, req.body.owner,
+			function(err, docs) {
+				if (err) {
+					console.log(err);
+				} else {
+					res.status(201).json({
+						message: 'Owner updated',
+						owner: docs
+					});
+				}
+			});
 });
 
 app.get('/api/getitems', (req, res, next) => {

karma.conf.js

@@ -25,7 +25,7 @@ module.exports = function (config) {
       suppressAll: true // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/sell4zec'),
+      dir: require('path').join(__dirname, './coverage/zgo'),
       subdir: '.',
       reporters: [
         { type: 'html' },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "sell4zec",
+  "name": "zgo",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { ItemAddComponent} from './items/item-add/item-add.component';
 import { OrderComponent } from './order/order.component';
 import { CancelComponent } from './cancel/cancel.component';
 import { CheckoutComponent } from './checkout/checkout.component';
+import { SettingsComponent } from './settings/settings.component';
 //import { NameDialogComponent } from './namedialog/namedialog.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -37,7 +38,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 	ItemDeleteComponent,
 	ItemAddComponent,
 	CancelComponent,
-	CheckoutComponent
+	CheckoutComponent,
+	SettingsComponent
   ],
   imports: [
     BrowserModule,
@@ -59,6 +61,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   ],
   providers: [],
   bootstrap: [AppComponent],
-  entryComponents: [ItemCreateComponent, ItemDeleteComponent, ItemAddComponent, CancelComponent, CheckoutComponent]
+  entryComponents: [
+	  ItemCreateComponent,
+	  ItemDeleteComponent,
+	  ItemAddComponent,
+	  CancelComponent,
+	  CheckoutComponent,
+	  SettingsComponent
+  ]
 })
 export class AppModule { }

src/app/header/header.component.css

@@ -1,5 +1,5 @@
-* {
-	font-family: 'Roboto Mono', monospace;
+.text {
+	font-family: 'Roboto-Mono', monospace;
 }
 
 a{
@@ -21,3 +21,6 @@ ul{
 	font-size: 9px;
 	line-height: 0.8;
 }
+.icon {
+	font-family: "Material Icons";
+}

src/app/header/header.component.html

@@ -1,12 +1,14 @@
 <mat-toolbar color="primary">
-	<span>
-		<a routerLink = "/">
+	<span align="center">
+		<a routerLink = "/" class="text">
 			Z Go!
 		</a>
-		<p class="mini">Last block seen: {{heightUpdate | async}}</p>
+		<p class="mini text">Last block seen: {{heightUpdate | async}}</p>
 	</span>
 	<span class="spacer"></span>
 	<span align="center">
-		<div>{{ shortenZaddr((ownerUpdate | async)!.address) }}</div>
+		<button mat-raised-button class="text" (click)="openSettings()">
+			{{ shortenZaddr((ownerUpdate | async)!.address) }} <mat-icon class="icon">manage_accounts</mat-icon>
+		</button>
 	</span>
 </mat-toolbar>

src/app/header/header.component.ts

@@ -1,7 +1,9 @@
 import  {Component, OnInit, OnDestroy} from '@angular/core';
+import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {FullnodeService} from '../fullnode.service';
 import { UserService } from '../user.service';
 import {Subscription, Observable} from 'rxjs';
+import { SettingsComponent } from '../settings/settings.component';
 
 import {Owner} from '../owner.model';
 
@@ -22,11 +24,15 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
 	constructor(
 		public fullnodeService: FullnodeService,
-		public userService: UserService
+		public userService: UserService,
+		private dialog: MatDialog
 	){
 		this.heightUpdate = fullnodeService.heightUpdate;
 		this.uZaddrUpdate = userService.uZaddrUpdate;
 		this.ownerUpdate = userService.ownerUpdate;
+		this.ownerUpdate.subscribe((owner) => {
+			this.owner = owner;
+		});
 	}
 
 
@@ -43,4 +49,21 @@ export class HeaderComponent implements OnInit, OnDestroy {
 		return addr.substring(0,5).concat('...').concat(addr.substring(last, end));
 	}
 
+	openSettings() {
+
+		const dialogConfig = new MatDialogConfig();
+
+		dialogConfig.disableClose = true;
+		dialogConfig.autoFocus = true;
+		dialogConfig.data = this.owner;
+
+		const dialogRef = this.dialog.open(SettingsComponent, dialogConfig);
+		dialogRef.afterClosed().subscribe((val) => {
+			if (val != null) {
+				console.log('Saving settings');
+				this.userService.updateOwner(val);
+			}
+		});
+	}
+
 }

src/app/namedialog/namedialog.component.html

@@ -1,17 +0,0 @@
-<!-- TODO: get this dialog working right-->
-<h2 mat-dialog-title>Set the name of your business</h2>
-<main>
-<form (submit)="save(nameForm)" #nameForm="ngForm">
-<mat-dialog-content>
-	<mat-form-field>
-		<input matInput type="text" name="bizname" placeholder="Bubba's Bakery" ngModel required #bizname="ngModel">
-		<mat-error *ngIf="bizname.invalid">This field is required</mat-error>
-	</mat-form-field>
-</mat-dialog-content>
-
-<mat-dialog-actions>
-	<button class="mat-raised-button" (click)="close()">Close</button>
-	<button class="mat-raised-button mat-primary" type="submit">Save</button>
-</mat-dialog-actions>
-</form>
-</main>

src/app/namedialog/namedialog.component.ts

@@ -1,32 +0,0 @@
-import { Inject, Component, OnInit, OnDestroy } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { NgForm } from '@angular/forms';
-
-@Component({
-	selector: 'name-dialog',
-	templateUrl: './namedialog.component.html'
-})
-
-export class NameDialogComponent implements OnInit{
-	bizname: string = '';
-
-	constructor(
-		private dialogRef: MatDialogRef<NameDialogComponent>
-	) {
-	}
-
-	ngOnInit() {
-	}
-
-	save(form: NgForm) {
-		if (form.invalid) {
-			return;
-		}
-		this.dialogRef.close(form.value.bizname);
-		//console.log(`Saving name ${form.value.bizname}`);
-	}
-
-	close() {
-		this.dialogRef.close();
-	}
-}

src/app/settings/settings.component.html

@@ -0,0 +1,12 @@
+<h2 mat-dialog-title class="text">Settings</h2>
+
+<mat-dialog-content [formGroup]="settingsForm">
+	<mat-form-field>
+		<input matInput placeholder="Name" formControlName="name">
+	</mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+	<button mat-raised-button class="text" (click)="close()">Cancel</button>
+	<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
+</mat-dialog-actions>

src/app/settings/settings.component.ts

@@ -0,0 +1,40 @@
+import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
+import {User} from '../user.model';
+import {Owner} from '../owner.model';
+
+@Component({
+	selector: 'app-settings',
+	templateUrl: './settings.component.html',
+	styleUrls: ['/settings.component.css']
+})
+
+export class SettingsComponent implements OnInit {
+
+	settingsForm: FormGroup;
+	owner: Owner;
+
+	constructor(
+		private fb: FormBuilder,
+		private dialogRef: MatDialogRef<SettingsComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: Owner
+	) {
+		this.settingsForm = fb.group({
+			name: [data.name, Validators.required]
+		});
+		this.owner = data;
+	}
+
+	ngOnInit() {
+	}
+
+	close() {
+		this.dialogRef.close();
+	}
+
+	save() {
+		this.owner.name = this.settingsForm.value.name;
+		this.dialogRef.close(this.owner);
+	}
+}

src/app/user.service.ts

@@ -82,10 +82,12 @@ export class UserService{
 		return obs;
 	}
 
-	addOwnerName(address: string, name: string) {
-		this.http.post<{message: string}>('http://localhost:3000/api/addownername', {address, name}).
+	updateOwner(owner: Owner) {
+		this.http.post<{message: string, owner: Owner}>('http://localhost:3000/api/updateowner', {owner: owner}).
 		subscribe((responseData) => {
 			console.log(responseData.message);
+			//this.dataStore.owner = responseData.owner;
+			//this._ownerUpdated.next(Object.assign({},this.dataStore).owner);
 		});
 	}
 
@@ -114,40 +116,9 @@ export class UserService{
 		return this.uZaddr === this.oZaddr;
 	}
 
-	//getUser(session: string) {
-		//const params = new HttpParams().append('session', session);
-		//console.log(`US: Searching for session ${session} `);
-		//this.http.get<{message: string, user: any}>('http://localhost:3000/api/getuser', { headers:{}, params: params, observe: 'response'}).
-		//subscribe((UserDataResponse) => {
-			//console.log(UserDataResponse.status);
-			//if (UserDataResponse.status == 200){
-				//this.uZaddr = UserDataResponse.body!.user[0].address;
-				//console.log(`US: Found user, returning zaddr ${this.uZaddr}`);
-				//this._uZaddrUpdated.next(this.uZaddr);
-			//} else {
-				//console.log('US: Did not find user');
-				//this._uZaddrUpdated.next('');
-			//}
-		//});
-
-	//}
-
-	//getName() {
-		//if (this.session != null) {
-			//this.getUser(this.session);
-			//this._uZaddrUpdated.subscribe((addr: string) => {
-				//console.log(`  US: ${addr}`);
-				//this.getOwner(addr);
-			//});
-		//}
-	//}
-
 	getNameUpdateListener() {
 		return this.uNameUpdated;
 	}
 
-	//getZaddrUpdateListener() {
-		//return this.uZaddrUpdated;
-	//}
 
 }

src/app/viewer/viewer.component.css

@@ -1,3 +1,3 @@
 * {
-	font-family: 'Roboto Mono', monospace;
+	font-family: 'Roboto-Mono', monospace;
 }

src/app/viewer/viewer.component.html

@@ -1,6 +1,6 @@
 <app-header></app-header>
 <div align="center">
-	<h1>{{message}}</h1>
+	<h1>{{(ownerUpdate | async)!.name}}</h1>
 </div>
 <table cellspacing="0" width="100%">
 	<tr>

src/app/viewer/viewer.component.ts

@@ -44,20 +44,4 @@ export class ViewerComponent implements OnInit {
 	ngOnDestroy(){
 	}
 
-	//openDialog(address: string) {
-		//const dialogConfig = new MatDialogConfig();
-
-		//dialogConfig.autoFocus = true;
-
-		/*
-		 *dialogConfig.data = {
-		 *    id: 1,
-		 *    title: 'Whee!'
-		 *}
-		 */
-
-		//const dialogRef = this.dialog.open(NameDialogComponent, dialogConfig);
-
-		//dialogRef.afterClosed().subscribe(name => this.userService.addOwnerName(address, name) );
-	//}
 }