MycroftAI
/
selene-ui
mirror of https://github.com/MycroftAI/selene-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

new device add component

pull/3/head
Chris Veilleux 2019-03-13 23:51:14 -05:00
parent cfa13d8bb7
commit b6a37d4e40
6 changed files with 190 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
projects/account/src/app/modules/device/device-add/device-add.component.html Normal file
View File

@ -0,0 +1,64 @@
<!-- Show a horizontal stepper on larger devices -->
<mat-horizontal-stepper *ngIf="!alignVertical" labelPosition="bottom" [linear]="true">
<!-- Use font awesome icons in the stepper to indicate progress -->
<ng-template matStepperIcon="done">
<fa-icon [icon]="stepDoneIcon"></fa-icon>
</ng-template>
<ng-template matStepperIcon="edit">
<fa-icon [icon]="stepDoneIcon"></fa-icon>
</ng-template>
<mat-step label="Pairing" [stepControl]="pairDeviceForm">
<form [formGroup]="pairDeviceForm" (ngSubmit)="onPairingSubmit()">
<account-device-pairing [pairingCodeControl]="pairingCodeControl"></account-device-pairing>
<button mat-button matStepperNext [disabled]="!pairDeviceForm.valid">
Next
</button>
</form>
</mat-step>
<mat-step *ngIf="!preferences" label="Preferences" [stepControl]="preferencesForm">
<form [formGroup]="preferencesForm" (ngSubmit)="onPreferencesSubmit()">
<account-device-preferences
[preferencesForm]="preferencesForm"
[deviceSetup]="true"
>
</account-device-preferences>
<button mat-button matStepperNext [disabled]="!preferencesForm.valid">
Next
</button>
</form>
</mat-step>
<!--<mat-step label="Device" [stepControl]="preferencesForm">-->
<!--<form [formGroup]="preferencesForm" (ngSubmit)="onPreferencesSubmit()">-->
<!--<account-device-preferences-->
<!--[preferencesForm]="preferencesForm"-->
<!--[deviceSetup]="true"-->
<!--&gt;-->
<!--</account-device-preferences>-->
<!--<button mat-button matStepperNext [disabled]="!preferencesForm.valid">-->
<!--Next-->
<!--</button>-->
<!--</form>-->
<!--</mat-step>-->
</mat-horizontal-stepper>
<!-- Show a vertical stepper on smaller devices -->
<mat-vertical-stepper *ngIf="alignVertical" [linear]="true">
<!-- Use font awesome icons in the stepper to indicate progress -->
<ng-template matStepperIcon="done">
<fa-icon [icon]="stepDoneIcon"></fa-icon>
</ng-template>
<ng-template matStepperIcon="edit">
<fa-icon [icon]="stepDoneIcon"></fa-icon>
</ng-template>
<mat-step label="Pairing" [stepControl]="pairDeviceForm">
<account-device-pairing></account-device-pairing>
<button mat-button matStepperNext type="button" [disabled]="!pairDeviceForm.valid">
Next
</button>
</mat-step>
</mat-vertical-stepper>

5
projects/account/src/app/modules/device/device-add/device-add.component.scss Normal file
View File

@ -0,0 +1,5 @@
mat-horizontal-stepper {
margin-left: auto;
margin-right: auto;
max-width: 800px;
}

86
projects/account/src/app/modules/device/device-add/device-add.component.ts Normal file
View File

@ -0,0 +1,86 @@
import { Component, OnInit } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
import {
AbstractControl,
FormBuilder,
FormGroup,
Validators
} from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { Subscription } from 'rxjs';
import { AccountPreferences, DeviceService } from '../../../core/http/device.service';
@Component({
selector: 'account-device-add',
templateUrl: './device-add.component.html',
styleUrls: ['./device-add.component.scss']
})
export class DeviceAddComponent implements OnInit {
public alignVertical: boolean;
public deviceForm: FormGroup;
private mediaWatcher: Subscription;
public pairingCodeControl: AbstractControl;
public pairDeviceForm: FormGroup;
public preferencesForm: FormGroup;
public preferences: AccountPreferences;
public stepDoneIcon = faCheck;
constructor(
private formBuilder: FormBuilder,
public mediaObserver: MediaObserver,
private deviceService: DeviceService,
private route: ActivatedRoute
) {
this.mediaWatcher = mediaObserver.media$.subscribe(
(change: MediaChange) => {
this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
}
);
}
ngOnInit() {
this.getAccountPreferences();
this.buildForms();
this.setControlFormAliases();
}
private buildForms() {
this.preferencesForm = this.deviceService.buildPreferencesForm(this.preferences);
this.pairDeviceForm = this.formBuilder.group({
pairingCode: ['', Validators.required],
});
this.deviceForm = this.formBuilder.group(
{
name: ['', Validators.required],
placement: [''],
country: ['', Validators.required],
region: ['', Validators.required],
city: ['', Validators.required],
timeZone: ['', Validators.required]
}
);
}
getAccountPreferences() {
this.route.data.subscribe(
(data: {preferences: AccountPreferences}) => {
this.preferences = data.preferences;
}
);
}
private setControlFormAliases() {
this.pairingCodeControl = this.pairDeviceForm.controls['pairingCode'];
}
onPairingSubmit() {
console.log('attempting to pair device');
}
onPreferencesSubmit() {
console.log('attempting to pair device');
}
}

10
projects/account/src/app/modules/device/device-add/pairing/pairing.component.html Normal file
View File

@ -0,0 +1,10 @@
<mat-card class="mat-elevation-z0">
<mat-card-title>Verify your pairing code</mat-card-title>
<mat-card-content>
<p>Enter the code spoken by your device:</p>
<mat-form-field [appearance]="'outline'">
<mat-label>Pairing Code</mat-label>
<input matInput required type="text" [formControl]="pairingCodeControl">
</mat-form-field>
</mat-card-content>
</mat-card>

8
projects/account/src/app/modules/device/device-add/pairing/pairing.component.scss Normal file
View File

@ -0,0 +1,8 @@
@import "../../../../../../../../node_modules/@angular/material/theming";
@import "mycroft-colors";
mat-card {
mat-card-title {
color: mat-color($mycroft-primary)
}
}

17
projects/account/src/app/modules/device/device-add/pairing/pairing.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component, OnInit, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';
@Component({
selector: 'account-device-pairing',
templateUrl: './pairing.component.html',
styleUrls: ['./pairing.component.scss']
})
export class PairingComponent implements OnInit {
@Input() pairingCodeControl: AbstractControl;
constructor() { }
ngOnInit() {
}
}