У меня есть экран выполнения задания, который отображает список заданий и их статус.Я хочу создать индикатор неопределенного хода выполнения, который будет отображаться для заданий, которые выполняются, и когда статус задания изменяется на остановку или завершение, он должен исчезнуть.Я создал индикатор выполнения, но не могу связать его с идентификатором таблицы состояния или статусом.HTML-код:
<div class="main-content">
<mat-toolbar>
<mat-progress-bar
mode="indeterminate"
class="mat-progress-bar"
color="primary"
>
</mat-progress-bar>
<button
mat-icon-button
(click)="stop_exec_job(element)"
matTooltip="Stop Executing the Job"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
</mat-toolbar>
<div class="card">
<div class="card-header">
<h5 class="title">Job Execution Stats</h5>
</div>
<mat-table [dataSource]="jobExecutionStat">
<!-- Id Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.id }} </mat-cell>
</ng-container>
<ng-container matColumnDef="exec_date">
<mat-header-cell *matHeaderCellDef>
Execution Date
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.exec_date }}
</mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="curr_time_period">
<mat-header-cell *matHeaderCellDef>
Current Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.curr_time_period }}
</mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="prev_time_period">
<mat-header-cell *matHeaderCellDef>
Previous Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.prev_time_period }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.status }}
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element; let index = index">
<button
mat-icon-button
(click)="stop_exec_job(element)"
matTooltip="Stop Executing the Job"
[disabled]="element.status == 'Completed'"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
<!-- Delete icon for row -->
<button
mat-icon-button
(click)="re_run_job(element)"
matTooltip="Re-Run the Job"
[disabled]="
element.status == 'Running' ||
element.status == 'Pending'
"
>
<i class="material-icons" style="color:green">
cached
</i>
</button>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="jobExecStatDisplayedColumns"
></mat-header-row>
<mat-row *matRowDef="let row; columns: jobExecStatDisplayedColumns">
</mat-row>
</mat-table>
</div>
Машинописный код:
import { Component, OnInit } from "@angular/core";
import { MatTableDataSource } from "@angular/material";
import { GlobalAppSateService } from "../../services/globalAppSate.service";
import { DataService } from "../../services/data.service";
import { SnakBarComponent } from "../custom-components/snak-bar/snak-
bar.component";
@Component({
selector: "app-job-execution-screen",
templateUrl: "./job-execution-screen.component.html",
styleUrls: ["./job-execution-screen.component.scss"]
})
export class JobExecutionScreenComponent implements OnInit {
jobExecStatDisplayedColumns = [
"id",
"exec_date",
"prev_time_period",
"curr_time_period",
"status",
"actions"
];
jobExecutionStat = new MatTableDataSource<Element>(ELEMENT_DATA);
constructor(
private dataService: DataService,
public globalAppSateService: GlobalAppSateService,
private snakbar: SnakBarComponent
) {}
ngOnInit() {
const project = JSON.parse(this.dataService.getObject("project"));
if (project != null) {
this.globalAppSateService.onMessage(project);
}
}
stop_exec_job(element) {
if(element.status == 'Running') {
this.snakbar.statusBar('Job Execution Stopped','Sucess');
}
}
re_run_job(element) {
if(element.status == 'Completed') {
this.snakbar.statusBar('Job Execution Started','Sucess');
}
}
}
const ELEMENT_DATA: Element[] = [
{
id: 1,
exec_date: "17-01-2016",
prev_time_period: "2016-04,2016-05,2016-06",
curr_time_period: "2016-08",
status: "Completed"
},
{
id: 2,
exec_date: "17-01-2017",
prev_time_period: "2017-04,2017-05,2017-06",
curr_time_period: "2017-08",
status: "Running"
},
{
id: 3,
exec_date: "27-07-2017",
prev_time_period: "2017-45,2017-46,2017-47",
curr_time_period: "2018-01,2018-02",
status: "Pending"
},
{
id: 4,
exec_date: "17-10-2018",
prev_time_period: "2017-30,2017-31,2017-32",
curr_time_period: "2018-01,2018-02",
status: "Completed"
},
{
id: 5,
exec_date: "21-01-2018",
prev_time_period: "2016-01,2016-02,2016-03,2016-04",
curr_time_period: "2016-52",
status: "Pending"
},
{
id: 6,
exec_date: "17-01-2018",
prev_time_period: "2017-31,2017-32,2017-33,2017-34",
curr_time_period: "2017-52",
status: "Running"
}
];
export interface Element {
id: number;
exec_date: string;
prev_time_period: string;
curr_time_period: string;
status: string;
}
Ссылка для стекаблиц