banana/definma-ui
2
Fork 0
Code Releases Activity

added user status and prediction user

Browse Source
This commit is contained in:
VLE2FE 2020-08-26 19:25:31 +02:00
parent 3e53ef874c
commit 6f95ff4148
17 changed files with 178 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/app-routing.module.ts
View File

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

4
src/app/app.component.html
View File

@ -3,7 +3,7 @@
<a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</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="/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">
Templates
</a>
@ -65,6 +65,6 @@
CR/APS1 and CR/ANA1 2020
</span>
<nav>
<a [href]="'mailto:' + d.contact">Contact</a>
<a [href]="'mailto:' + d.contact.mail">Contact</a>
</nav>
</rb-footer-nav>

85
src/app/documentation/documentation.component.html
View File

@ -32,51 +32,66 @@
<rb-table>
<tr>
<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>
<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>
<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>
<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>
<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>
<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>
</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>
</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>
</tr>
</rb-table>

6
src/app/help/help.component.html
View File

@ -2,13 +2,13 @@
<ng-container [ngSwitch]="route">
<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 *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 *ngSwitchDefault>
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>
</ng-container>

3
src/app/login/login.component.html
View File

@ -16,7 +16,8 @@
<ng-template rbFormValidationMessage="failure">{{emailInput.errors.failure}}</ng-template>
</rb-form-input>
<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'}}
</button>
<div class="message">{{message}}</div>

13
src/app/login/login.component.ts
View File

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

1
src/app/model-templates/model-templates.component.ts
View File

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

3
src/app/models/user.model.ts
View File

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

18
src/app/prediction/prediction.component.html
View File

@ -14,17 +14,20 @@
<ng-container *ngIf="multipleSamples; else singleSampleResult">
<h4 *ngFor="let prediction of result.predictions; index as i">
{{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
</h4>
</ng-container>
<ng-template #singleSampleResult>
<h4>
Average result: {{result.meanPrediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}},
standard deviation: {{result.std}}
Average result: {{result.meanPrediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>,
standard deviation: {{result.std}}<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
</h4>
<a href="javascript:" class="rb-details-toggle" rbDetailsToggle #triggerDetails="rbDetailsToggle">Details</a>
<div *ngIf="triggerDetails.open" class="space-below">
<p *ngFor="let prediction of result.predictions; index as i">
{{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
</p>
</div>
</ng-template>
@ -53,7 +56,7 @@
</div>
</div>
<div class="dpt-chart">
<div class="dpt-chart space-below">
<canvas baseChart
class="dpt-chart"
[datasets]="chart"
@ -63,3 +66,12 @@
chartType="scatter">
</canvas>
</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>

3
src/app/prediction/prediction.component.scss
View File

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

4
src/app/prediction/prediction.component.ts
View File

@ -5,6 +5,7 @@ import {animate, style, transition, trigger} from '@angular/animations';
import cloneDeep from 'lodash/cloneDeep';
import {DataService} from '../services/data.service';
import {ModelItemModel} from '../models/model-item.model';
import {HttpClient} from '@angular/common/http';
interface PredictionResult {
meanPrediction: string;
@ -86,7 +87,8 @@ export class PredictionComponent implements OnInit {
if (files.hasOwnProperty(i)) {
const fileReader = new FileReader();
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.chart[i] = cloneDeep(this.chartInit);
this.chart[i].data = this.spectrum.map(e => ({x: parseFloat(e[0]), y: parseFloat(e[1])}));

5
src/app/sample/sample.component.html
View File

@ -169,7 +169,7 @@
<tr><td>Type</td><td>{{baseSample.type}}</td></tr>
<tr><td>color</td><td>{{baseSample.color}}</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)">
<td>Sample reference</td><td>{{reference[0]}} - {{reference[1]}}</td>
</tr>
@ -323,7 +323,8 @@
</ng-template>
<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'}}?
</rb-alert>
</ng-template>

20
src/app/sample/sample.component.ts
View File

@ -329,15 +329,17 @@ export class SampleComponent implements OnInit, AfterContentChecked {
resolve();
}
}).then(() => { // save sample
this.baseSample.notes.custom_fields = {};
this.customFields.forEach(element => {
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])
.map(e => ({sample_id: e[2], relation: e[1]}));
if (this.baseSample.notes) {
this.baseSample.notes.custom_fields = {};
this.customFields.forEach(element => {
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])
.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
for (let i = 0; i < this.sampleCount; i ++) {
this.api.post<SampleModel>('/sample/new', this.baseSample.sendFormat(), data => {

2
src/app/services/data.service.ts
View File

@ -34,7 +34,7 @@ export class DataService {
id: {[key: string]: {[id: string]: any}} = {}; // data in format _id: data
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
if (this.arr[collection]) { // data already loaded

15
src/app/services/login.service.ts
View File

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

35
src/app/users/users.component.html
View File

@ -28,6 +28,12 @@
<ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template>
</rb-form-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
[(ngModel)]="newUserPass" #passAInput="ngModel">
<ng-template rbFormValidationMessage="failure">{{passAInput.errors.failure}}</ng-template>
@ -41,13 +47,15 @@
</rb-icon-button>
</form>
<rb-table>
<rb-table scrollTop>
<tr>
<th>Name</th>
<th>Email</th>
<th>Level</th>
<th>Location</th>
<th>Device</th>
<th>Models</th>
<th></th>
<th></th>
</tr>
@ -58,7 +66,13 @@
<td>{{user.level}}</td>
<td>{{user.location}}</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-template #editUser>
<td>
@ -93,9 +107,17 @@
</rb-form-input>
</rb-array-input>
</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>
<rb-icon-button icon="delete" mode="danger" class="space-below"
(click)="deleteConfirm(modalDeleteConfirm, user.name)">
(click)="deleteConfirm(modalDeleteConfirm, user)">
Delete
</rb-icon-button>
<ng-template #modalDeleteConfirm>
@ -111,3 +133,10 @@
</ng-template>
</tr>
</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>

25
src/app/users/users.component.ts
View File

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