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

stubbed in UI components for geographic location

pull/33/head
Chris Veilleux 2019-01-08 12:03:27 -06:00
parent 95fd091be5
commit f11c01484e
8 changed files with 111 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/internet/projects/account/src/app/device/attribute/attribute.component.ts
View File

@ -4,6 +4,7 @@ import { MatDialog } from '@angular/material';
import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
import { Device, DeviceService } from '../device.service';
import { GeographyComponent } from '../geography/geography.component';
import { GroupComponent } from '../group/group.component';
import { PlacementComponent } from '../placement/placement.component';
@ -37,6 +38,13 @@ export class AttributeComponent implements OnInit {
possibleValues: this.service.deviceGroups
};
break;
case 'location':
this.deviceAttribute = {
label: 'Geography',
dialog: GeographyComponent,
possibleValues: this.service.deviceGeographies
};
break;
case 'placement':
this.deviceAttribute = {
dialog: PlacementComponent,

21
frontend/internet/projects/account/src/app/device/device.component.html
View File

@ -42,6 +42,7 @@
<mat-hint>Must be unique within a device group (if defined)</mat-hint>
</mat-form-field>
<!-- Device group field -->
<account-device-attribute
[attributeHint]="'Mechanism to categorize devices'"
[attributeName]="'group'"
@ -49,19 +50,15 @@
>
</account-device-attribute>
<mat-form-field [appearance]="'outline'">
<mat-label>Geography</mat-label>
<mat-select>
<mat-option
*ngFor="let location of deviceLocations"
value="deviceLocation"
>
{{location}}
</mat-option>
</mat-select>
<mat-hint>Country, postal code, time zone</mat-hint>
</mat-form-field>
<!-- Device geography field -->
<account-device-attribute
[attributeHint]="'Country, postal code, time zone'"
[attributeName]="'location'"
[attributeValue]="device.location"
>
</account-device-attribute>
<!-- Device placement field -->
<account-device-attribute
[attributeHint]="'Where a device is placed within a location'"
[attributeName]="'placement'"

4
frontend/internet/projects/account/src/app/device/device.component.ts
View File

@ -15,10 +15,6 @@ export class DeviceComponent implements OnInit {
public addIcon = faPlusCircle;
public deleteIcon = faTrash;
public devices: Device[];
public deviceLocations = [
'United States, 64101, CST',
'United Kingdom, ABCDE, BST'
];
public platforms = {
'mark-one': {icon: '../assets/mark-1-icon.svg', displayName: 'Mark I'},
'mark-two': {icon: '../assets/mark-2-icon.svg', displayName: 'Mark II'},

3
frontend/internet/projects/account/src/app/device/device.module.ts
View File

@ -20,12 +20,14 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { AttributeComponent } from './attribute/attribute.component';
import { DeviceComponent } from './device.component';
import { DeviceService } from './device.service';
import { GeographyComponent } from './geography/geography.component';
import { GroupComponent } from './group/group.component';
import { PlacementComponent } from './placement/placement.component';
import { RemoveComponent } from './remove/remove.component';
@NgModule({
declarations: [
GeographyComponent,
AttributeComponent,
DeviceComponent,
GroupComponent,
@ -33,6 +35,7 @@ import { RemoveComponent } from './remove/remove.component';
RemoveComponent
],
entryComponents: [
GeographyComponent,
GroupComponent,
PlacementComponent,
RemoveComponent

19
frontend/internet/projects/account/src/app/device/device.service.ts
View File

@ -6,9 +6,9 @@ export interface DeviceGroup {
userDefined: boolean;
}
export interface DeviceLocation {
export interface DeviceGeography {
id: string;
region: string;
name: string;
}
export interface DevicePlacement {
@ -22,7 +22,7 @@ export interface Device {
enclosureVersion: string;
group: DeviceGroup;
id: string;
location: DeviceLocation;
location: DeviceGeography;
name: string;
placement: DevicePlacement;
platform: string;
@ -38,7 +38,7 @@ export class DeviceService {
enclosureVersion: '1.2.3',
group: {id: '1', name: 'None', userDefined: false},
id: 'abc-def-ghi',
location: {id: 'aaa-aaa-aaa', region: 'Kansas City, MO'},
location: {id: '1a2b-3c4d-5e6f', name: 'United States, 64101, CST'},
name: 'Mark',
placement: {id: 'bbb-bbb-bbb', name: 'Living Room', userDefined: true},
platform: 'mark-one'
@ -48,7 +48,7 @@ export class DeviceService {
enclosureVersion: '1.2.3',
group: {id: '1', name: 'None', userDefined: false},
id: 'bcd-efg-hij',
location: {id: 'aaa-aaa-aaa', region: 'Kansas City, MO'},
location: {id: '1a2b-3c4d-5e6f', name: 'United States, 64101, CST'},
name: 'Marky Mark',
placement: {id: 'bbb-bbb-bbb', name: 'Kitchen', userDefined: false},
platform: 'mark-two'
@ -58,7 +58,7 @@ export class DeviceService {
enclosureVersion: '1.2.3',
group: {id: '2', name: 'Parent House', userDefined: true},
id: 'cde-fgh-ijk',
location: {id: 'ccc-ccc-ccc', region: 'Baltimore, MD'},
location: {id: '1a2b-3c4d-5e6f', name: 'United States, 64101, CST'},
name: 'American Pie',
placement: {id: 'ddd-ddd-ddd', name: 'Bedroom', userDefined: false},
platform: 'picroft'
@ -68,7 +68,7 @@ export class DeviceService {
enclosureVersion: '1.2.3',
group: {id: '2', name: 'Parent House', userDefined: true},
id: 'def-ghi-jkl',
location: {id: 'eee-eee-eee', region: 'Baltimore, MD'},
location: {id: '1a2b-3c4d-5e6f', name: 'United States, 64101, CST'},
name: 'Kappa Delta Epsilon',
placement: {id: 'fff-fff-fff', name: 'Kitchen', userDefined: false},
platform: 'kde'
@ -89,6 +89,11 @@ export class DeviceService {
{ id: '2', name: 'Living Room', userDefined: true}
];
public deviceGeographies: DeviceGeography[] = [
{id: '1a2b-3c4d-5e6f', name: 'United States, 64101, CST'},
{id: 'a1b2-c3d4-e5f6', name: 'United Kingdom, ABCDE, BST'}
];
constructor() { }
deleteDevice(device: Device): void {

35
frontend/internet/projects/account/src/app/device/geography/geography.component.html Normal file
View File

@ -0,0 +1,35 @@
<div mat-dialog-title class="mat-h2-primary">Geography</div>
<div mat-dialog-content>
<div class="mat-body">
Groups are useful to organize multiple devices. You can reuse device names if they are in different groups.
</div>
<mat-radio-group fxLayout="column" [(ngModel)]="data">
<ng-container *ngFor="let geo of deviceGeographies">
<!-- Radio buttons for user-defined groups -->
<div fxLayout="row" fxLayoutAlign="space-between center">
<mat-radio-button [value]="geo.name">
<mat-form-field [floatLabel]="'never'">
<input matInput value="{{geo.name}}">
</mat-form-field>
</mat-radio-button>
<button mat-icon-button [disableRipple]="true">
<fa-icon class="danger-icon" [icon]="deleteIcon"></fa-icon>
</button>
</div>
</ng-container>
<!-- Radio button to add a new user-defined group -->
<mat-radio-button>
<mat-form-field [floatLabel]="'never'">
<input matInput placeholder="Add Geographic Location">
</mat-form-field>
</mat-radio-button>
</mat-radio-group>
</div>
<div mat-dialog-actions align="end">
<button mat-button (click)="onCancelClick()">CANCEL</button>
<button mat-button [mat-dialog-close]="data" class="action-button">SAVE</button>
</div>

13
frontend/internet/projects/account/src/app/device/geography/geography.component.scss Normal file
View File

@ -0,0 +1,13 @@
.mat-body{
margin-bottom: 16px;
width: 250px;
}
.predefined-group {
margin-bottom: 12px;
margin-top: 12px;
}
fa-icon {
margin-left: 16px;
}

31
frontend/internet/projects/account/src/app/device/geography/geography.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { DevicePlacement, DeviceService} from '../device.service';
@Component({
selector: 'account-device-geography',
templateUrl: './geography.component.html',
styleUrls: ['./geography.component.scss']
})
export class GeographyComponent implements OnInit {
public deleteIcon = faTrashAlt;
public deviceGeographies;
constructor(
private deviceService: DeviceService,
public dialogRef: MatDialogRef<GeographyComponent>,
@Inject(MAT_DIALOG_DATA) public data: string) {
}
ngOnInit() {
this.deviceGeographies = this.deviceService.deviceGeographies;
}
onCancelClick(): void {
this.dialogRef.close();
}
}