Merge pull request #29 in ~VLE2FE/definma-ui from development to master

* commit '6f95ff41489216acdb6368ad098f16684d9d8310':
  added user status and prediction user
  fixed to the top button
This commit is contained in:
Veit Lukas (PEA4-Fe) 2020-08-26 19:26:07 +02:00
commit bc6b7283c9
19 changed files with 187 additions and 94 deletions

View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import {Routes, RouterModule, ExtraOptions} from '@angular/router';
import {HomeComponent} from './home/home.component'; import {HomeComponent} from './home/home.component';
import {LoginService} from './services/login.service'; import {LoginService} from './services/login.service';
import {SampleComponent} from './sample/sample.component'; import {SampleComponent} from './sample/sample.component';
@ -33,8 +33,14 @@ const routes: Routes = [
{ path: '**', redirectTo: '' } { path: '**', redirectTo: '' }
]; ];
const routerOptions: ExtraOptions = {
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
scrollOffset: [0, 64],
};
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes, routerOptions)],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule { }

View File

@ -3,7 +3,7 @@
<a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a> <a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
<a routerLink="/prediction" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Prediction</a> <a routerLink="/prediction" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Prediction</a>
<a routerLink="/models" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Models</a> <a routerLink="/models" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Models</a>
<a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="login.isLoggedIn">Samples</a> <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.read">Samples</a>
<a routerLink="/templates" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev"> <a routerLink="/templates" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">
Templates Templates
</a> </a>
@ -53,21 +53,18 @@
</div> </div>
</rb-full-header> </rb-full-header>
<div class="to-the-top-container"> <div class="container">
<div class="container"> <router-outlet></router-outlet>
<router-outlet></router-outlet>
</div>
<div class="to-the-top">
<rb-icon-button icon="up" mode="primary" iconOnly (click)="toTheTop()"></rb-icon-button>
</div>
</div> </div>
<rb-icon-button icon="up" mode="primary" iconOnly (click)="toTheTop()" *ngIf="window.scrollY > 300" class="to-the-top">
</rb-icon-button>
<rb-footer-nav> <rb-footer-nav>
<span class="copyright"> <span class="copyright">
CR/APS1 and CR/ANA1 2020 CR/APS1 and CR/ANA1 2020
</span> </span>
<nav> <nav>
<a [href]="'mailto:' + d.contact">Contact</a> <a [href]="'mailto:' + d.contact.mail">Contact</a>
</nav> </nav>
</rb-footer-nav> </rb-footer-nav>

View File

@ -14,21 +14,13 @@
width: 800px; width: 800px;
} }
.to-the-top-container { .container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.to-the-top { .to-the-top {
position: absolute; position: fixed;
top: 100vh;
bottom: 10px;
right: 1rem; right: 1rem;
pointer-events: none; bottom: 20px;
rb-icon-button {
position: sticky;
pointer-events: all;
top: calc(100vh - 3rem);
}
} }

View File

@ -22,7 +22,7 @@ export class AppComponent implements OnInit{
constructor( constructor(
public login: LoginService, public login: LoginService,
public router: Router, public router: Router,
private window: Window, public window: Window,
private modal: ModalService, private modal: ModalService,
public d: DataService public d: DataService
) { ) {

View File

@ -32,51 +32,66 @@
<rb-table> <rb-table>
<tr> <tr>
<th></th> <th></th>
<th>prediction</th>
<th>read</th>
<th>write</th>
<th>dev</th>
<th>admin</th>
</tr>
<tr>
<th>use prediction models</th>
<td>specified ones</td>
<td>specified ones</td>
<td>specified ones</td>
<td>all</td>
<td>all</td>
</tr>
<tr>
<th>read sample data</th> <th>read sample data</th>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
</tr>
<tr>
<th>add samples/edit own</th> <th>add samples/edit own</th>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
</tr>
<tr>
<th>read spectral data</th> <th>read spectral data</th>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
</tr>
<tr>
<th>edit other's data</th> <th>edit other's data</th>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
</tr>
<tr>
<th>maintain templates</th> <th>maintain templates</th>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
</tr>
<tr>
<th>edit users</th> <th>edit users</th>
</tr>
<tr>
<td>read</td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td> <td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td> <td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td> <td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td> <td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
</tr>
<tr>
<td>write</td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
</tr>
<tr>
<td>dev</td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-abort-frame"></span></td>
</tr>
<tr>
<td>admin</td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
<td><span class="rb-ic rb-ic-checkmark-frame"></span></td> <td><span class="rb-ic rb-ic-checkmark-frame"></span></td>
</tr> </tr>
</rb-table> </rb-table>

View File

@ -2,13 +2,13 @@
<ng-container [ngSwitch]="route"> <ng-container [ngSwitch]="route">
<p *ngSwitchCase="'/'">Please log in for further access. If you do not have an account yet, please contact <p *ngSwitchCase="'/'">Please log in for further access. If you do not have an account yet, please contact
<a [href]="'mailto:' + d.contact">{{d.contact}}</a>. <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
</p> </p>
<p *ngSwitchCase="'/home'">Please log in for further access. If you do not have an account yet, please contact <p *ngSwitchCase="'/home'">Please log in for further access. If you do not have an account yet, please contact
<a [href]="'mailto:' + d.contact">{{d.contact}}</a>. <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
</p> </p>
<p *ngSwitchDefault> <p *ngSwitchDefault>
Sadly, currently there is no help available for this page. Please contact Sadly, currently there is no help available for this page. Please contact
<a [href]="'mailto:' + d.contact">{{d.contact}}</a> for further questions. <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a> for further questions.
</p> </p>
</ng-container> </ng-container>

View File

@ -16,7 +16,8 @@
<ng-template rbFormValidationMessage="failure">{{emailInput.errors.failure}}</ng-template> <ng-template rbFormValidationMessage="failure">{{emailInput.errors.failure}}</ng-template>
</rb-form-input> </rb-form-input>
<a href="#" class="forgot-pass" (click)="passreset = !passreset">Forgot password</a> <a href="#" class="forgot-pass" (click)="passreset = !passreset">Forgot password</a>
<button class="rb-btn rb-primary login-button" (click)="login()" type="submit" [disabled]="!loginForm.form.valid"> <button class="rb-btn rb-primary login-button" (click)="userLogin()" type="submit"
[disabled]="!loginForm.form.valid">
{{passreset ? 'Send' : 'Login'}} {{passreset ? 'Send' : 'Login'}}
</button> </button>
<div class="message">{{message}}</div> <div class="message">{{message}}</div>

View File

@ -23,7 +23,7 @@ export class LoginComponent implements OnInit {
constructor( constructor(
private validate: ValidationService, private validate: ValidationService,
private loginService: LoginService, private login: LoginService,
private api: ApiService, private api: ApiService,
private router: Router private router: Router
) { } ) { }
@ -31,7 +31,7 @@ export class LoginComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
login() { userLogin() {
if (this.passreset) { if (this.passreset) {
this.api.post('/user/passreset', {name: this.username, email: this.email}, (data, err) => { this.api.post('/user/passreset', {name: this.username, email: this.email}, (data, err) => {
if (err) { if (err) {
@ -43,10 +43,15 @@ export class LoginComponent implements OnInit {
}); });
} }
else { else {
this.loginService.login(this.username, this.password).then(ok => { this.login.login(this.username, this.password).then(ok => {
if (ok) { if (ok) {
this.message = 'Login successful'; this.message = 'Login successful';
this.router.navigate(['/samples']); if (this.login.isLevel.read) {
this.router.navigate(['/samples']);
}
else {
this.router.navigate(['/prediction']);
}
} }
else { else {
this.message = 'Wrong credentials!'; this.message = 'Wrong credentials!';

View File

@ -50,7 +50,6 @@ export class ModelTemplatesComponent implements OnInit {
this.oldModelGroup = ''; this.oldModelGroup = '';
this.oldModelName = ''; this.oldModelName = '';
this.model = new ModelItemModel().models[0]; this.model = new ModelItemModel().models[0];
this.groups = this.d.arr.modelGroups.map(e => e.group);
}); });
} }

View File

@ -10,6 +10,8 @@ export class UserModel extends BaseModel{
level = ''; level = '';
location = ''; location = '';
devices = ['']; devices = [''];
models = [''];
status = 'new';
edit = false; edit = false;
deserialize(input: any): this { deserialize(input: any): this {
@ -22,6 +24,7 @@ export class UserModel extends BaseModel{
const keys = ['name', 'email', 'location', 'devices']; const keys = ['name', 'email', 'location', 'devices'];
if (mode === 'admin') { if (mode === 'admin') {
keys.push('level'); keys.push('level');
keys.push('models');
} }
return pick(this, keys); return pick(this, keys);
} }

View File

@ -14,17 +14,20 @@
<ng-container *ngIf="multipleSamples; else singleSampleResult"> <ng-container *ngIf="multipleSamples; else singleSampleResult">
<h4 *ngFor="let prediction of result.predictions; index as i"> <h4 *ngFor="let prediction of result.predictions; index as i">
{{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}} {{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
</h4> </h4>
</ng-container> </ng-container>
<ng-template #singleSampleResult> <ng-template #singleSampleResult>
<h4> <h4>
Average result: {{result.meanPrediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}, Average result: {{result.meanPrediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
standard deviation: {{result.std}} <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>,
standard deviation: {{result.std}}<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
</h4> </h4>
<a href="javascript:" class="rb-details-toggle" rbDetailsToggle #triggerDetails="rbDetailsToggle">Details</a> <a href="javascript:" class="rb-details-toggle" rbDetailsToggle #triggerDetails="rbDetailsToggle">Details</a>
<div *ngIf="triggerDetails.open" class="space-below"> <div *ngIf="triggerDetails.open" class="space-below">
<p *ngFor="let prediction of result.predictions; index as i"> <p *ngFor="let prediction of result.predictions; index as i">
{{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}} {{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
</p> </p>
</div> </div>
</ng-template> </ng-template>
@ -53,7 +56,7 @@
</div> </div>
</div> </div>
<div class="dpt-chart"> <div class="dpt-chart space-below">
<canvas baseChart <canvas baseChart
class="dpt-chart" class="dpt-chart"
[datasets]="chart" [datasets]="chart"
@ -63,3 +66,12 @@
chartType="scatter"> chartType="scatter">
</canvas> </canvas>
</div> </div>
<div class="shaded-container" id="disclaimer">
<h4><sup>#</sup>Disclaimer: This tool is still under development</h4>
<p>
The prediction and classification of material parameters are validated only for certain conditions.
These results may therefore under no circumstances be used to evaluate quality-relevant issues. <br>
For more details please contact <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
</p>
</div>

View File

@ -1,6 +1,7 @@
.dpt-chart { .dpt-chart {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin-left: auto;
margin-right: auto;
} }
.file-input { .file-input {

View File

@ -5,6 +5,7 @@ import {animate, style, transition, trigger} from '@angular/animations';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import {DataService} from '../services/data.service'; import {DataService} from '../services/data.service';
import {ModelItemModel} from '../models/model-item.model'; import {ModelItemModel} from '../models/model-item.model';
import {HttpClient} from '@angular/common/http';
interface PredictionResult { interface PredictionResult {
meanPrediction: string; meanPrediction: string;
@ -86,7 +87,8 @@ export class PredictionComponent implements OnInit {
if (files.hasOwnProperty(i)) { if (files.hasOwnProperty(i)) {
const fileReader = new FileReader(); const fileReader = new FileReader();
fileReader.onload = () => { fileReader.onload = () => {
this.spectrum = fileReader.result.toString().split('\r\n').map(e => e.split(',').map(el => parseFloat(el))) as any; this.spectrum = fileReader.result.toString().split('\r\n').map(e => e.split(',').map(el => parseFloat(el)))
.filter(el => el.length === 2) as any;
this.flattenedSpectra[i] = {labels: this.spectrum.map(e => e[0]), values: this.spectrum.map(e => e[1])}; this.flattenedSpectra[i] = {labels: this.spectrum.map(e => e[0]), values: this.spectrum.map(e => e[1])};
this.chart[i] = cloneDeep(this.chartInit); this.chart[i] = cloneDeep(this.chartInit);
this.chart[i].data = this.spectrum.map(e => ({x: parseFloat(e[0]), y: parseFloat(e[1])})); this.chart[i].data = this.spectrum.map(e => ({x: parseFloat(e[0]), y: parseFloat(e[1])}));

View File

@ -169,7 +169,7 @@
<tr><td>Type</td><td>{{baseSample.type}}</td></tr> <tr><td>Type</td><td>{{baseSample.type}}</td></tr>
<tr><td>color</td><td>{{baseSample.color}}</td></tr> <tr><td>color</td><td>{{baseSample.color}}</td></tr>
<tr><td>Batch</td><td>{{baseSample.batch}}</td></tr> <tr><td>Batch</td><td>{{baseSample.batch}}</td></tr>
<tr><td>Comment</td><td>{{baseSample.notes.comment}}</td></tr> <tr><td>Comment</td><td>{{baseSample.notes | exists:'comment'}}</td></tr>
<tr *ngFor="let reference of sampleReferences.slice(0, -1)"> <tr *ngFor="let reference of sampleReferences.slice(0, -1)">
<td>Sample reference</td><td>{{reference[0]}} - {{reference[1]}}</td> <td>Sample reference</td><td>{{reference[0]}} - {{reference[1]}}</td>
</tr> </tr>
@ -323,7 +323,8 @@
</ng-template> </ng-template>
<ng-template #modalDeleteConfirm> <ng-template #modalDeleteConfirm>
<rb-alert alertTitle="Are you sure?" type="danger" [okBtnLabel]="'Delete sample' + (samples.length > 1 ? 's' : '')" cancelBtnLabel="Cancel"> <rb-alert alertTitle="Are you sure?" type="danger" [okBtnLabel]="'Delete sample' + (samples.length > 1 ? 's' : '')"
cancelBtnLabel="Cancel">
Do you really want to delete {{samples.length > 1 ? 'these samples' : 'this sample'}}? Do you really want to delete {{samples.length > 1 ? 'these samples' : 'this sample'}}?
</rb-alert> </rb-alert>
</ng-template> </ng-template>

View File

@ -329,15 +329,17 @@ export class SampleComponent implements OnInit, AfterContentChecked {
resolve(); resolve();
} }
}).then(() => { // save sample }).then(() => { // save sample
this.baseSample.notes.custom_fields = {}; if (this.baseSample.notes) {
this.customFields.forEach(element => { this.baseSample.notes.custom_fields = {};
if (element[0] !== '') { this.customFields.forEach(element => {
this.baseSample.notes.custom_fields[element[0]] = element[1]; if (element[0] !== '') {
} this.baseSample.notes.custom_fields[element[0]] = element[1];
}); }
this.baseSample.notes.sample_references = this.sampleReferences });
.filter(e => e[0] && e[1] && e[2]) this.baseSample.notes.sample_references = this.sampleReferences
.map(e => ({sample_id: e[2], relation: e[1]})); .filter(e => e[0] && e[1] && e[2])
.map(e => ({sample_id: e[2], relation: e[1]}));
}
if (this.samples.length === 0) { // only save new sample for the first time in mode new, otherwise save changes if (this.samples.length === 0) { // only save new sample for the first time in mode new, otherwise save changes
for (let i = 0; i < this.sampleCount; i ++) { for (let i = 0; i < this.sampleCount; i ++) {
this.api.post<SampleModel>('/sample/new', this.baseSample.sendFormat(), data => { this.api.post<SampleModel>('/sample/new', this.baseSample.sendFormat(), data => {

View File

@ -34,7 +34,7 @@ export class DataService {
id: {[key: string]: {[id: string]: any}} = {}; // data in format _id: data id: {[key: string]: {[id: string]: any}} = {}; // data in format _id: data
d: {[key: string]: any} = {}; // data not in array format d: {[key: string]: any} = {}; // data not in array format
contact = 'dominic.lingenfelser@bosch.com'; contact = {name: 'CR/APS1-Lingenfelser', mail: 'dominic.lingenfelser@bosch.com'};
load(collection, f = () => {}) { // load data load(collection, f = () => {}) { // load data
if (this.arr[collection]) { // data already loaded if (this.arr[collection]) { // data already loaded

View File

@ -3,6 +3,7 @@ import {ApiService} from './api.service';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router'; import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
import {LocalStorageService} from 'angular-2-local-storage'; import {LocalStorageService} from 'angular-2-local-storage';
import {Observable} from 'rxjs'; import {Observable} from 'rxjs';
import {DataService} from './data.service';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -15,12 +16,14 @@ export class LoginService implements CanActivate {
{path: 'users', permission: 'admin'} {path: 'users', permission: 'admin'}
]; ];
readonly levels = [ readonly levels = [
'predict',
'read', 'read',
'write', 'write',
'dev', 'dev',
'admin' 'admin'
]; ];
isLevel: {[level: string]: boolean} = {}; isLevel: {[level: string]: boolean} = {};
hasPrediction = false; // true if user has prediction models specified
userId = ''; userId = '';
private loggedIn; private loggedIn;
@ -28,7 +31,8 @@ export class LoginService implements CanActivate {
constructor( constructor(
private api: ApiService, private api: ApiService,
private storage: LocalStorageService, private storage: LocalStorageService,
private router: Router private router: Router,
private d: DataService
) { ) {
} }
@ -60,6 +64,14 @@ export class LoginService implements CanActivate {
this.loggedIn = true; this.loggedIn = true;
this.levels.forEach(level => { this.levels.forEach(level => {
this.isLevel[level] = this.levels.indexOf(data.level) >= this.levels.indexOf(level); this.isLevel[level] = this.levels.indexOf(data.level) >= this.levels.indexOf(level);
if (this.isLevel.dev) { // set hasPrediction
this.hasPrediction = true;
}
else {
this.d.load('modelGroups', () => {
this.hasPrediction = this.d.arr.modelGroups.length > 0;
});
}
}); });
this.userId = data.user_id; this.userId = data.user_id;
resolve(true); resolve(true);
@ -83,6 +95,7 @@ export class LoginService implements CanActivate {
this.levels.forEach(level => { this.levels.forEach(level => {
this.isLevel[level] = false; this.isLevel[level] = false;
}); });
this.hasPrediction = false;
} }
canActivate(route: ActivatedRouteSnapshot = null, state: RouterStateSnapshot = null): Observable<boolean> { canActivate(route: ActivatedRouteSnapshot = null, state: RouterStateSnapshot = null): Observable<boolean> {

View File

@ -28,6 +28,12 @@
<ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template> <ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template>
</rb-form-input> </rb-form-input>
</rb-array-input> </rb-array-input>
<rb-array-input [(ngModel)]="newUser.models" name="models" [pushTemplate]="''">
<rb-form-select *rbArrayInputItem="let item" rbArrayInputListener="models" [index]="item.i" label="model"
[name]="'model-' + item.i" [ngModel]="item.value">
<ng-container *ngTemplateOutlet="modelOptions"></ng-container>
</rb-form-select>
</rb-array-input>
<rb-form-input name="passA" type="password" label="new password" appValidate="password" required <rb-form-input name="passA" type="password" label="new password" appValidate="password" required
[(ngModel)]="newUserPass" #passAInput="ngModel"> [(ngModel)]="newUserPass" #passAInput="ngModel">
<ng-template rbFormValidationMessage="failure">{{passAInput.errors.failure}}</ng-template> <ng-template rbFormValidationMessage="failure">{{passAInput.errors.failure}}</ng-template>
@ -41,13 +47,15 @@
</rb-icon-button> </rb-icon-button>
</form> </form>
<rb-table> <rb-table scrollTop>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Email</th> <th>Email</th>
<th>Level</th> <th>Level</th>
<th>Location</th> <th>Location</th>
<th>Device</th> <th>Device</th>
<th>Models</th>
<th></th>
<th></th> <th></th>
</tr> </tr>
@ -58,7 +66,13 @@
<td>{{user.level}}</td> <td>{{user.level}}</td>
<td>{{user.location}}</td> <td>{{user.location}}</td>
<td>{{user.devices}}</td> <td>{{user.devices}}</td>
<td><span class="rb-ic rb-ic-edit clickable" (click)="user.edit = true"></span></td> <td>
<ng-container *ngFor="let model of user.models; index as i">
{{(i > 0 ? ', ' : '') + modelIds[model]}}
</ng-container>
</td>
<td><span [class]="'rb-ic clickable ' + (user.status === 'new' ? 'rb-ic-edit': 'rb-ic-undo')"
(click)="user.status === 'new' ? user.edit = true: restoreUser(user)"></span></td>
</ng-container> </ng-container>
<ng-template #editUser> <ng-template #editUser>
<td> <td>
@ -93,9 +107,17 @@
</rb-form-input> </rb-form-input>
</rb-array-input> </rb-array-input>
</td> </td>
<td>
<rb-array-input [(ngModel)]="user.models" name="devices" [pushTemplate]="''">
<rb-form-select *rbArrayInputItem="let item" rbArrayInputListener="models" [index]="item.i" label="model"
[name]="'model-' + item.i" [ngModel]="item.value">
<ng-container *ngTemplateOutlet="modelOptions"></ng-container>
</rb-form-select>
</rb-array-input>
</td>
<td> <td>
<rb-icon-button icon="delete" mode="danger" class="space-below" <rb-icon-button icon="delete" mode="danger" class="space-below"
(click)="deleteConfirm(modalDeleteConfirm, user.name)"> (click)="deleteConfirm(modalDeleteConfirm, user)">
Delete Delete
</rb-icon-button> </rb-icon-button>
<ng-template #modalDeleteConfirm> <ng-template #modalDeleteConfirm>
@ -111,3 +133,10 @@
</ng-template> </ng-template>
</tr> </tr>
</rb-table> </rb-table>
<ng-template #modelOptions>
<option value=""></option>
<ng-container *ngFor="let model of modelSelect">
<option [value]="model.id">{{model.name}}</option>
</ng-container>
</ng-template>

View File

@ -3,8 +3,8 @@ import {ApiService} from '../services/api.service';
import {UserModel} from '../models/user.model'; import {UserModel} from '../models/user.model';
import {LoginService} from '../services/login.service'; import {LoginService} from '../services/login.service';
import {ModalService} from '@inst-iot/bosch-angular-ui-components'; import {ModalService} from '@inst-iot/bosch-angular-ui-components';
import {DataService} from '../services/data.service';
// TODO: somehow mail change triggered
@Component({ @Component({
selector: 'app-users', selector: 'app-users',
@ -16,17 +16,26 @@ export class UsersComponent implements OnInit {
users: UserModel[] = []; users: UserModel[] = [];
newUser: UserModel | null = null; newUser: UserModel | null = null;
newUserPass = ''; newUserPass = '';
modelSelect: {id: string, name: string}[] = [];
modelIds: {[id: string]: string} = {};
constructor( constructor(
private api: ApiService, private api: ApiService,
public login: LoginService, public login: LoginService,
private modal: ModalService private modal: ModalService,
public d: DataService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.api.get<UserModel[]>('/users', data => { this.api.get<UserModel[]>('/users', data => {
this.users = data.map(e => new UserModel().deserialize(e)); this.users = data.map(e => new UserModel().deserialize(e));
}); });
this.d.load('modelGroups', () => {
this.d.arr.modelGroups.forEach(group => {
this.modelSelect.push(...group.models.map(e => ({id: e._id, name: `${group.group} - ${e.name}`})));
});
this.modelIds = this.modelSelect.reduce((s, e) => {s[e.id] = e.name; return s; }, {});
});
} }
saveUser(user: UserModel) { saveUser(user: UserModel) {
@ -48,14 +57,20 @@ export class UsersComponent implements OnInit {
this.newUser = this.newUser ? null : new UserModel(); this.newUser = this.newUser ? null : new UserModel();
} }
deleteConfirm(modal, username) { deleteConfirm(modal, user) {
this.modal.open(modal).then(result => { this.modal.open(modal).then(result => {
if (result) { if (result) {
this.api.delete('/user/' + username, () => { this.api.delete('/user/' + user.name, () => {
this.users.splice(this.users.findIndex(e => e.name === username), 1); user.status = 'deleted';
user.edit = false;
}); });
} }
}); });
} }
restoreUser(user) {
this.api.put('/user/restore/' + user.name, {}, () => {
user.status = 'new';
});
}
} }