Commit 8b4d4bae authored by Lukas Burgey's avatar Lukas Burgey

Make use of the enums in the state component

parent f76a09c7
......@@ -32,9 +32,9 @@
<!-- actions column -->
<td>
<div *ngIf="buttonActive">
<button (click)="buttonAction(state)" matTooltip="{{ buttonTooltip }}" color="{{ buttonColor }}" mat-raised-button class="mat-elevation-z6">
{{ buttonText }}
<div *ngIf="button !== undefined">
<button (click)="buttonAction(state)" matTooltip="{{ button.tooltip }}" color="{{ button.color }}" mat-raised-button class="mat-elevation-z6">
{{ button.text }}
</button>
</div>
<div *ngIf="!state.is_pending && state.is_credential_pending">
......
......@@ -5,7 +5,13 @@ import { Observable } from 'rxjs';
import { UserService } from '../user.service';
import { LanguageService } from '../language.service';
import { DialogService } from '../dialogues/dialog.service';
import { Site, Service, DeploymentState } from '../types/types.module';
import { Site, Service, DeploymentState, StateID } from '../types/types.module';
interface Button {
text: string;
tooltip: string;
color: string;
}
@Component({
selector: '[deployment-state-tr]',
......@@ -16,16 +22,41 @@ export class StateComponent implements OnInit {
@Input() service: Service;
buttonStates: string[] = ['deployed', 'questionnaire', 'failed', 'rejected'];
public buttonActive = false;
public buttonColor = '';
public buttonText = '';
public buttonTooltip = '';
buttons: Record<StateID, Button | undefined> = {
'not_deployed' : undefined,
'deployment_pending': undefined,
'removal_pending': undefined,
'deployed': {
color: 'primary',
text: 'View Credentials',
tooltip: 'View detailed information about the deployed credentials'
},
'questionnaire': {
color: 'warn',
text: 'Submit Data',
tooltip: 'Submit missing data',
},
'failed': {
color: 'warn',
text: 'Show Error',
tooltip: 'Show more details on the error',
},
'rejected': {
color: 'warn',
text: 'Show Message',
tooltip: 'Show Message',
},
};
stateDescriptions: Record<StateID, string>;
// set in subscribe
public button: Button | undefined = undefined;
public stateDescription = '';
public state$: Observable<DeploymentState>;
public stateDescription = '';
constructor(
public userService: UserService,
......@@ -34,69 +65,33 @@ export class StateComponent implements OnInit {
) { }
ngOnInit() {
this.state$ = this.userService.subscribeStateFor(this.service);
this.state$.subscribe(
(state: DeploymentState) => {
switch (state.state) {
case 'not_deployed':
this.stateDescription = `Your credentials are not deployed for ${ this.service.name }.`;
this.buttonActive = false;
break;
case 'deployment_pending':
this.stateDescription = `Waiting for the deployment of your credentials to ${ this.service.site.name }.`;
this.buttonActive = false;
break;
case 'removal_pending':
this.stateDescription = `Waiting for the removal of your credentials from ${ this.service.site.name }.`;
this.buttonActive = false;
break;
case 'deployed':
this.buttonActive = true;
this.buttonColor = 'primary';
this.buttonText = 'View Credentials';
this.buttonTooltip = 'View detailed information about the deployed credentials';
this.stateDescription = `
this.stateDescriptions = {
'not_deployed': `Your credentials are not deployed for ${ this.service.name }.`,
'deployment_pending': `Waiting for the deployment of your credentials to ${ this.service.site.name }.`,
'removal_pending': `Waiting for the removal of your credentials from ${ this.service.site.name }.`,
'deployed': `
The credentials are deployed for this service ${ this.service.name }.
Click "${ this.buttonText }" see details on your deployed ssh keys and credentials.
`;
break;
case 'questionnaire':
this.buttonActive = true;
this.buttonColor = 'warn';
this.buttonText = 'Submit Data';
this.buttonTooltip = 'Submit missing data';
this.stateDescription = `
Click "${ this.buttons['deployed'].text }" see details on your deployed ssh keys and credentials.
`,
'questionnaire': `
More data is needed to deploy your credentials.
Please click "${ this.buttonText }" to submit the missing data.
`;
break;
case 'failed':
this.buttonActive = true;
this.buttonColor = 'warn';
this.buttonText = 'Show Error';
this.buttonTooltip = this.buttonText;
this.stateDescription = `
Please click "${ this.buttons['questionnaire'].text }" to submit the missing data.
`,
'failed': `
The deployment of your credentials failed, but will be tried again.
Please click "${ this.buttonText }" for more details concerning this error.
`;
break;
case 'rejected':
this.buttonActive = true;
this.buttonColor = 'warn';
this.buttonText = 'Show message';
this.buttonTooltip = this.buttonText;
this.stateDescription = `
Please click "${ this.buttons['failed'].text }" for more details concerning this error.
`,
'rejected': `
The deployment of your credentials was rejected.
Please click "${ this.buttonText }" to show more details.
`;
break;
default:
this.stateDescription = '';
this.buttonActive = false;
}
Please click "${ this.buttons['rejected'].text }" to show more details.
`,
};
this.state$ = this.userService.subscribeStateFor(this.service);
this.state$.subscribe(
(state: DeploymentState) => {
this.button = this.buttons[state.state];
this.stateDescription = this.stateDescriptions[state.state];
}
);
}
......@@ -115,7 +110,6 @@ export class StateComponent implements OnInit {
}
public contactSupport() {
window.location.href = 'mailto:' + this.service.contact_email + '?subject=%5BFEUDAL%5D%20Help%20request%0A';
window.location.href = `mailto:${ this.service.contact_email }?subject=%5BFEUDAL%5D%20Help%20request%0A`;
}
}
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