Commit eb7e9d3a authored by Lukas Burgey's avatar Lukas Burgey
Browse files

Add questionnaire dialog

parent 443cd846
import {NgModule,Pipe,PipeTransform} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {JsonPipe} from '@angular/common'; import {JsonPipe} from '@angular/common';
import {HttpModule} from '@angular/http'; import {HttpModule} from '@angular/http';
...@@ -34,20 +34,30 @@ import {AppComponent} from './app.component'; ...@@ -34,20 +34,30 @@ import {AppComponent} from './app.component';
import {MgmtComponent} from './mgmt/mgmt.component'; import {MgmtComponent} from './mgmt/mgmt.component';
import {LoginComponent} from './login/login.component'; import {LoginComponent} from './login/login.component';
import {ProfileComponent} from './profile/profile.component'; import {ProfileComponent} from './profile/profile.component';
import {QuestionnaireComponent} from './questionnaire/questionnaire.component';
import {ServiceComponent} from './service/service.component'; import {ServiceComponent} from './service/service.component';
import {SshKeysComponent} from './ssh-keys/ssh-keys.component'; import {SshKeysComponent} from './ssh-keys/ssh-keys.component';
import {AccountComponent} from './account/account.component'; import {AccountComponent} from './account/account.component';
@Pipe({ name: 'ObjNgFor', pure: false })
export class ObjNgFor implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value);//.map(key => value[key]);
}
}
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
MgmtComponent, MgmtComponent,
LoginComponent, LoginComponent,
ProfileComponent, ProfileComponent,
QuestionnaireComponent,
ServiceComponent, ServiceComponent,
SshKeysComponent, SshKeysComponent,
AccountComponent, AccountComponent,
ObjNgFor,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
...@@ -79,14 +89,16 @@ import {AccountComponent} from './account/account.component'; ...@@ -79,14 +89,16 @@ import {AccountComponent} from './account/account.component';
UserService, UserService,
SnackBarService, SnackBarService,
DialogService, DialogService,
JsonPipe,
StompRService, StompRService,
JsonPipe,
ObjNgFor,
], ],
bootstrap: [AppComponent], bootstrap: [AppComponent],
entryComponents: [ entryComponents: [
ProfileComponent, ProfileComponent,
SshKeysComponent, SshKeysComponent,
AccountComponent, AccountComponent,
QuestionnaireComponent,
], ],
}) })
export class AppModule { export class AppModule {
......
...@@ -4,12 +4,14 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog'; ...@@ -4,12 +4,14 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { ProfileComponent } from './profile/profile.component'; import { ProfileComponent } from './profile/profile.component';
import { SshKeysComponent } from './ssh-keys/ssh-keys.component'; import { SshKeysComponent } from './ssh-keys/ssh-keys.component';
import { AccountComponent } from './account/account.component'; import { AccountComponent } from './account/account.component';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
@Injectable() @Injectable()
export class DialogService { export class DialogService {
profileDialog: MatDialogRef<any>; profileDialog: MatDialogRef<any>;
sshKeysDialog: MatDialogRef<any>; sshKeysDialog: MatDialogRef<any>;
accountDialog: MatDialogRef<any>; accountDialog: MatDialogRef<any>;
questionnaireDialog: MatDialogRef<any>;
settings = { settings = {
width: '80%', width: '80%',
...@@ -39,4 +41,15 @@ export class DialogService { ...@@ -39,4 +41,15 @@ export class DialogService {
this.settings, this.settings,
); );
} }
public openQuestionnaire(taskItem: any) {
this.questionnaireDialog = this.dialog.open(
QuestionnaireComponent,
{
data: {
taskItem: taskItem,
}
}
);
}
} }
<div class="mat-typography">
<h2>Parameter questionnaire</h2>
<p>
The following data is requirred to access the service.
</p>
<form class="form-vertical" (ngSubmit)="sendAnswers()" #questionnaireForm="ngForm">
<mat-form-field *ngFor="let key of taskItem.questionnaire | ObjNgFor">
<input matInput required
placeholder="{{taskItem.questionnaire[key]}}" [(ngModel)]="answers[key]" name="key">
</mat-form-field>
<button mat-raised-button color="primary" type="submit" [disabled]="!questionnaireForm.form.valid">Submit</button>
</form>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfileComponent } from './profile.component';
describe('ProfileComponent', () => {
let component: ProfileComponent;
let fixture: ComponentFixture<ProfileComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProfileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
import {Component, OnInit,Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
import { UserService } from '../user.service';
@Component({
selector: 'app-questionnaire',
templateUrl: './questionnaire.component.html',
styleUrls: ['./questionnaire.component.css']
})
export class QuestionnaireComponent implements OnInit {
public answers: Object = {};
public taskItem: any;
constructor(
public userService: UserService,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.taskItem = data.taskItem;
}
ngOnInit() {
}
sendAnswers() {
this.userService.sentQuestionnaire(
this.taskItem.id,
this.answers,
);
}
}
...@@ -12,25 +12,26 @@ ...@@ -12,25 +12,26 @@
</span> </span>
<span [ngSwitch]="userService.taskState(site, serviceData)"> <span [ngSwitch]="userService.taskState(site, serviceData)">
<span *ngSwitchCase="'pending'" <span *ngSwitchCase="'pending'"
style="display: inline-block; vertical-align: middle" mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
matTooltip="This deployment is in progress"> matTooltip="This deployment is in progress">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner> <mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span> </span>
<span *ngSwitchCase="'done'" <button *ngSwitchCase="'done'"
style="display: inline-block; vertical-align: middle" mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
matTooltip="This deployment was successful"> matTooltip="This deployment was successful">
<mat-icon style="vertical-align: middle">done</mat-icon> <mat-icon style="vertical-align: middle">done</mat-icon>
</span> </button>
<span *ngSwitchCase="'failed'" <button *ngSwitchCase="'failed'"
style="display: inline-block; vertical-align: middle" mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
matTooltip="This deployment has failed"> matTooltip="This deployment has failed">
<mat-icon style="vertical-align: middle">error</mat-icon> <mat-icon style="vertical-align: middle">error</mat-icon>
</span> </button>
<span *ngSwitchCase="'rejected'" <button *ngSwitchCase="'rejected'"
style="display: inline-block; vertical-align: middle" (click)="dialog.openQuestionnaire(userService.taskItem(site, serviceData))"
mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
matTooltip="This deployment was rejected. The client needs more data."> matTooltip="This deployment was rejected. The client needs more data.">
<mat-icon style="vertical-align: middle">warning</mat-icon> <mat-icon>warning</mat-icon>
</span> </button>
</span> </span>
</td> </td>
</tr> </tr>
......
...@@ -9,6 +9,7 @@ import {CookieService} from 'ngx-cookie-service'; ...@@ -9,6 +9,7 @@ import {CookieService} from 'ngx-cookie-service';
import {MatTableDataSource} from '@angular/material'; import {MatTableDataSource} from '@angular/material';
import {SnackBarService} from './snackbar.service'; import {SnackBarService} from './snackbar.service';
import {DialogService} from './dialog.service';
import {StompConfig, StompRService} from '@stomp/ng2-stompjs'; import {StompConfig, StompRService} from '@stomp/ng2-stompjs';
import {Message} from '@stomp/stompjs'; import {Message} from '@stomp/stompjs';
...@@ -27,6 +28,7 @@ export class UserService { ...@@ -27,6 +28,7 @@ export class UserService {
constructor( constructor(
public dialog: DialogService,
public cookieService: CookieService, public cookieService: CookieService,
public http: HttpClient, public http: HttpClient,
public snackBar: SnackBarService, public snackBar: SnackBarService,
...@@ -238,6 +240,23 @@ export class UserService { ...@@ -238,6 +240,23 @@ export class UserService {
); );
} }
public sentQuestionnaire(taskItemID: number, answers: any) {
const body = answers;
return this.http.post('/backend/api/questionnaire/'+String(taskItemID), body).subscribe(
(data) => {
this.dialog.questionnaireDialog.close();
this.snackBar.open('Uploaded questionnaire');
//this.snackBar.open('Deployed key ' + key.name);
this.updateData(data);
},
(err) => {
this.snackBar.open('Error uploading questionnaire');
console.log(err);
this.update();
}
);
}
public deleteUser() { public deleteUser() {
return this.http.delete('/backend/api/delete_user/').subscribe( return this.http.delete('/backend/api/delete_user/').subscribe(
(data) => { (data) => {
...@@ -304,26 +323,21 @@ export class UserService { ...@@ -304,26 +323,21 @@ export class UserService {
}); });
} }
public taskInProgress(site, service): boolean { public taskItem(site, service): any {
if (site && service) { if (site && service) {
for (const item of this.user.deployment_task_items){ for (const item of this.user.deployment_task_items){
if (item.site.id == site.id && item.service.id == service.id) { if (item.site.id == site.id && item.service.id == service.id) {
return true; return item;
} }
} }
} }
return false; return null;
} }
public taskState(site, service): string { public taskState(site, service): string {
if (site && service) { let item = this.taskItem(site, service);
if (item !== null) {
for (const item of this.user.deployment_task_items){ return item.state;
if (item.site.id == site.id && item.service.id == service.id) {
return item.state;
}
}
} }
return "done"; return "done";
} }
......
...@@ -31,13 +31,17 @@ body { ...@@ -31,13 +31,17 @@ body {
} }
.form-container { .form-vertical {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.form-container > * { .form-vertical > * {
width: 50%; width: 100%;
}
.form-vertical > button {
width: 25%;
} }
.mat-form-field { .mat-form-field {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment