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:
commit
bc6b7283c9
@ -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 { }
|
||||
|
@ -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>
|
||||
@ -53,21 +53,18 @@
|
||||
</div>
|
||||
</rb-full-header>
|
||||
|
||||
<div class="to-the-top-container">
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
<rb-icon-button icon="up" mode="primary" iconOnly (click)="toTheTop()" *ngIf="window.scrollY > 300" class="to-the-top">
|
||||
</rb-icon-button>
|
||||
|
||||
<rb-footer-nav>
|
||||
<span class="copyright">
|
||||
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>
|
||||
|
@ -14,21 +14,13 @@
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.to-the-top-container {
|
||||
.container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.to-the-top {
|
||||
position: absolute;
|
||||
top: 100vh;
|
||||
bottom: 10px;
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
pointer-events: none;
|
||||
|
||||
rb-icon-button {
|
||||
position: sticky;
|
||||
pointer-events: all;
|
||||
top: calc(100vh - 3rem);
|
||||
}
|
||||
bottom: 20px;
|
||||
}
|
||||
|
@ -22,7 +22,7 @@ export class AppComponent implements OnInit{
|
||||
constructor(
|
||||
public login: LoginService,
|
||||
public router: Router,
|
||||
private window: Window,
|
||||
public window: Window,
|
||||
private modal: ModalService,
|
||||
public d: DataService
|
||||
) {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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,11 +43,16 @@ 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';
|
||||
if (this.login.isLevel.read) {
|
||||
this.router.navigate(['/samples']);
|
||||
}
|
||||
else {
|
||||
this.router.navigate(['/prediction']);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.message = 'Wrong credentials!';
|
||||
}
|
||||
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -14,17 +14,20 @@
|
||||
<ng-container *ngIf="multipleSamples; else singleSampleResult">
|
||||
<h4 *ngFor="let prediction of result.predictions; index as i">
|
||||
{{spectrumNames[i]}}: {{prediction}} {{activeGroup.models[activeModelIndex].label}}
|
||||
<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
|
||||
</h4>
|
||||
</ng-container>
|
||||
<ng-template #singleSampleResult>
|
||||
<h4>
|
||||
Average result: {{result.meanPrediction}} {{activeGroup.models[activeModelIndex].label}},
|
||||
standard deviation: {{result.std}}
|
||||
Average result: {{result.meanPrediction}} {{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}} {{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>
|
||||
|
@ -1,6 +1,7 @@
|
||||
.dpt-chart {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
|
@ -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])}));
|
||||
|
@ -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>
|
||||
|
@ -329,6 +329,7 @@ export class SampleComponent implements OnInit, AfterContentChecked {
|
||||
resolve();
|
||||
}
|
||||
}).then(() => { // save sample
|
||||
if (this.baseSample.notes) {
|
||||
this.baseSample.notes.custom_fields = {};
|
||||
this.customFields.forEach(element => {
|
||||
if (element[0] !== '') {
|
||||
@ -338,6 +339,7 @@ export class SampleComponent implements OnInit, AfterContentChecked {
|
||||
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 => {
|
||||
|
@ -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
|
||||
|
@ -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> {
|
||||
|
@ -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>
|
||||
|
@ -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';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user