Commit 9ee943d1 authored by Lukas Burgey's avatar Lukas Burgey

Rework button workings

parent 75c89335
......@@ -22,7 +22,10 @@ small {
font-size: small;
}
.width-limit {
max-width: 250px;
}
.bold {
font-weight: bold;
}
......@@ -7,7 +7,7 @@
<!-- service column -->
<td>
<h4>{{ service.name }}</h4>
<h4 style="font-weight: bold;">{{ service.name }}</h4>
<br>
<small>{{ service.description }}</small>
</td>
......@@ -27,29 +27,14 @@
</span>
<h4>{{ lang.printState(state.state) }}</h4>
<br>
<div class="mat-small">{{ tooltip(state) }}</div>
<div class="mat-small">{{ stateDescription }}</div>
</td>
<!-- actions column -->
<td>
<div *ngIf="state.state == 'deployed'">
<button (click)="dialog.openCredentials(state$)" mat-raised-button class="mat-elevation-z6">
Credentials
</button>
</div>
<div *ngIf="state.state == 'questionnaire'">
<button (click)="dialog.openQuestionnaire(state$)" mat-raised-button color="accent" class="mat-elevation-z6">
Questionnaire
</button>
</div>
<div *ngIf="state.state == 'failed'">
<button (click)="dialog.openMessage(state)" mat-raised-button color="accent" class="mat-elevation-z6">
Failure
</button>
</div>
<div *ngIf="state.state == 'rejected'">
<button (click)="dialog.openMessage(state)" mat-raised-button color="accent" class="mat-elevation-z6">
Rejected
<div *ngIf="buttonActive">
<button (click)="buttonAction(state)" matTooltip="{{ buttonTooltip }}" [color]="buttonColor" mat-raised-button class="mat-elevation-z6">
{{ buttonText }}
</button>
</div>
<div *ngIf="!state.is_pending && state.is_credential_pending">
......
......@@ -16,9 +16,16 @@ export class StateComponent implements OnInit {
@Input() service: Service;
buttonStates: string[] = ['deployed', 'questionnaire', 'failed', 'rejected'];
public buttonActive = false;
public buttonColor = '';
public buttonText = '';
public buttonTooltip = '';
public state$: Observable<DeploymentState>;
public stateTooltip: string;
public stateDescription = '';
constructor(
public userService: UserService,
......@@ -28,27 +35,71 @@ export class StateComponent implements OnInit {
ngOnInit() {
this.state$ = this.userService.subscribeStateFor(this.service);
this.stateTooltip = 'foo';
this.state$.subscribe(
(state: DeploymentState) => {
switch (state.state) {
case 'not_deployed':
this.stateDescription = `The credentials are not deployed for the service ${ this.service.name }.`;
this.buttonActive = false;
break;
case 'deployment_pending':
this.stateDescription = `Waiting for the deployment of the credentials to the site ${ this.service.site.name }.`;
this.buttonActive = false;
break;
case 'removal_pending':
this.stateDescription = `Waiting for the removal of the credentials from the site ${ this.service.site.name }.`;
this.buttonActive = false;
break;
case 'deployed':
this.stateDescription = `The credentials are deployed for the service ${ this.service.name }. Click to see details.`;
this.buttonActive = true;
this.buttonColor = 'primary';
this.buttonText = 'View credentials';
this.buttonTooltip = this.buttonText;
break;
case 'questionnaire':
this.stateDescription = `Site ${ this.service.site.name } needs more data to deploy the keys. Please click to submit the data.`;
this.buttonActive = true;
this.buttonColor = 'warn';
this.buttonText = 'Submit Data';
this.buttonTooltip = this.buttonText;
break;
case 'failed':
this.stateDescription = `Site ${ this.service.site.name } failed to deploy the credentials.
The deployment will be retried. Click for details.`;
this.buttonActive = true;
this.buttonColor = 'warn';
this.buttonText = 'Submit Data';
this.buttonTooltip = this.buttonText;
break;
case 'rejected':
this.stateDescription = `Site ${ this.service.site.name } rejected the deployment of the credentials. Click for details.`;
this.buttonActive = true;
this.buttonColor = 'warn';
this.buttonText = 'Submit Data';
this.buttonTooltip = this.buttonText;
break;
default:
this.stateDescription = 'Access to this service was never requested.';
this.buttonActive = false;
}
}
);
}
public tooltip(state: DeploymentState): string {
public buttonAction(state: DeploymentState): void {
switch (state.state) {
case 'not_deployed':
return `The credentials are not deployed for the service ${ this.service.name }.`;
case 'deployed':
return `The credentials are deployed for the service ${ this.service.name }. Click to see details.`;
case 'deployment_pending':
return `Waiting for the deployment of the credentials to the site ${ this.service.site.name }`;
case 'removal_pending':
return `Waiting for the removal of the credentials from the site ${ this.service.site.name }`;
return this.dialog.openCredentials(this.state$);
case 'questionnaire':
return `Site ${ this.service.site.name } needs more data to deploy the keys. Please click to submit the data.`;
return this.dialog.openQuestionnaire(this.state$);
case 'failed':
return `Site ${ this.service.site.name } failed to deploy the credentials. The deployment will be retried. Click for details.`;
return this.dialog.openMessage(state);
case 'rejected':
return `Site ${ this.service.site.name } rejected the deployment of the credentials. Click for details.`;
default:
return 'Access to this service was never requested.';
return this.dialog.openMessage(state);
}
}
......
......@@ -26,6 +26,10 @@ table {
width: 100%;
}
thead > tr > td {
font-size: 110%;
}
tr > * {
padding-right: 15px;
padding-bottom: 15px;
......
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