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

Make use of the enums in the state component

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