Settings form in testing mode - read/write is not workng properly

This commit is contained in:
Rene V. Vergara A. 2022-07-19 20:48:52 -05:00
parent f472096f57
commit 17fb948740
5 changed files with 144 additions and 51 deletions

View file

@ -1,7 +1,18 @@
* {
font-family: 'Spartan', sans-serif;
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.settings-title {
font-family: Roboto Mono;
background: #ff4700;
color: white;
font-size: 30px;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
height: 40px;
justify-content: center;
}
.mat-dialog-content {
max-width: 300px;
.settings_field {
width: 100%;
}

View file

@ -1,31 +1,57 @@
<h2 mat-dialog-title class="text">Settings</h2>
<div class="settings-title">Settings</div>
<div class="container">
<mat-dialog-content [formGroup]="settingsForm">
<mat-form-field appearance="outline">
<mat-form-field class="settings-field" [style.width.%]="100">
<mat-label>Name</mat-label>
<input matInput placeholder="Name" formControlName="name">
<input matInput
width="100%"
placeholder="Name"
formControlName="name">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field [style.width.%]="100" >
<mat-label>Currency</mat-label>
<mat-select formControlName="currency">
<mat-option *ngFor="let coin of coins" [value]="coin.symbol">
<mat-option *ngFor="let coin of coins"
[value]="coin.symbol">
{{coin.label}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-slide-toggle formControlName="useZats" (change)="onChange($event)">
Display Zcash amount in zatoshis?
<mat-slide-toggle formControlName="useZats"
(change)="onChange($event)">
Use zatoshis?
</mat-slide-toggle>
<mat-slide-toggle formControlName="VkeyOn" (change)="onChangeVKeyOn($event)">
<pre></pre>
<mat-slide-toggle formControlName="VkeyOn"
(change)="onChangeVKeyOn($event)">
Activate payment confirmation?
</mat-slide-toggle>
<mat-form-field appearance="outline">
<pre></pre>
<mat-form-field [style.width.%]="100">
<mat-label>Viewing key</mat-label>
<input matInput placeholder="Viewing Key" formControlName="vKey">
<input matInput placeholder="Your wallet viewing key"
formControlName="VKey"
[formControl]="viewkeyControl">
</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 style="display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;">
<button mat-raised-button
(click)="close()">
Cancel
</button>
<button mat-raised-button
color="primary"
(click)="save()">
Save
</button>
</mat-dialog-actions>
</div>

View file

@ -16,6 +16,7 @@ export class SettingsComponent implements OnInit {
settingsForm: UntypedFormGroup;
owner: Owner;
useZats: boolean;
useVKey: boolean = false;
coins = [
{
label: 'US Dollar',
@ -35,6 +36,8 @@ export class SettingsComponent implements OnInit {
}
];
viewkeyControl = new FormControl({ value: null, disabled: true });
constructor(
private fb: UntypedFormBuilder,
private dialogRef: MatDialogRef<SettingsComponent>,
@ -45,9 +48,13 @@ export class SettingsComponent implements OnInit {
name: [data.name, Validators.required],
currency: [data.currency, Validators.required],
useZats: [data.zats, Validators.required],
VkeyOn: [data.]
VkeyOn: [data.payconf, Validators.required],
VKey: [{value:data.viewkey, disabled: true },
Validators.required
]
});
this.owner = data;
}
ngOnInit() {
@ -60,7 +67,13 @@ export class SettingsComponent implements OnInit {
save() {
this.owner.name = this.settingsForm.value.name;
this.owner.currency = this.settingsForm.value.currency;
this.owner.zats = this.useZats;
this.owner.zats = this.settingsForm.value.useZats;
this.owner.payconf = this.useVKey;
if ( this.settingsForm.value.VkeyOn ) {
this.owner.viewkey = this.settingsForm.value.VKey;
}
else
this.owner.viewkey = '';
this.dialogRef.close(this.owner);
}
@ -69,6 +82,15 @@ export class SettingsComponent implements OnInit {
}
onChangeVKeyOn(ob: MatSlideToggleChange) {
console.log("Viewing key switch is " + ( ob.checked ? "[ON]." : "[OFF].") );
console.log("Viewing key switch is " +
( ob.checked ? "[ON]." : "[OFF]." ) );
this.useVKey = ob.checked;
if ( ob.checked )
this.viewkeyControl.enable()
else
this.viewkeyControl.disable();
}
}

View file

@ -1,13 +1,26 @@
* {
font-family: 'Spartan', sans-serif;
}
.icon{
font-family: 'Material Icons';
}
.shop-menu {
font-family: Roboto, sans-serif;
}
.main-buttons {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
margin-bottom: 12px;
}
.small{
font-size: x-small;
margin-top: 0px;
}
h3{
margin-bottom: 0px;
margin-top: 5px;
font-size: 14px !important;
}

View file

@ -1,16 +1,37 @@
<app-header></app-header>
<div align="center">
<h3>{{(ownerUpdate | async)!.name}}</h3>
<p class="small">{{ shortenZaddr((ownerUpdate | async)!.address) }}</p>
<span align="center">
<button mat-raised-button [routerLink]="['/orders']">View Orders</button>
<button mat-raised-button class="text" (click)="openSettings()">
<div class="shop-menu" align="center">
<div style="margin-top: 8px;">
<div style="font-size: 24px;
font-weight: 700;">
{{(ownerUpdate | async)!.name}}
</div>
<div class="small">
{{ shortenZaddr((ownerUpdate | async)!.address) }}
</div>
</div>
<div class="main-buttons">
<button mat-raised-button
style="background: #ff4700;
font-weight: 700;
color: white;"
[routerLink]="['/orders']">
View Orders
</button>
<button mat-raised-button
style="background: #ff4700;
color: white;"
class="text" (click)="openSettings()">
<mat-icon class="icon">manage_accounts</mat-icon>
</button>
<a href="https://zgo.cash/" mat-raised-button target="_blank" rel="noopener noreferrer">
<a mat-raised-button
style="background: #ff4700;
color: white;"
href="https://zgo.cash/"
target="_blank"
rel="noopener noreferrer">
<mat-icon class="icon">help</mat-icon>
</a>
</span>
</div>
</div>
<div *ngIf="orientation">
<app-order></app-order>