github/quartz-manager
1
0
Fork 0
mirror of https://github.com/fabioformosa/quartz-manager.git synced 2025-12-30 06:03:15 +09:00
Code Issues Packages Projects Releases Wiki Activity

#59 changed the layout of the job progress card

Browse Source
This commit is contained in:
Fabio Formosa
2022-09-15 00:37:54 +02:00
parent 5f3ae667b0
commit e0b0378329
2 changed files with 60 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html
View File

@@ -6,31 +6,39 @@
</div>
</div> -->
<mat-card>
<mat-card style="padding-bottom: 0">
<mat-card-header>
<mat-card-subtitle><b>JOB PROGRESS</b></mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div>
<mat-progress-bar mode="determinate" value="{{progress.percentage}}"></mat-progress-bar>
{{percentageStr}}
</div>
<div id="progressBarBox">
<mat-progress-bar mode="determinate" value="{{progress.percentage}}"></mat-progress-bar>
{{percentageStr}}
</div>
<br>
<div id="counterBox" fxLayout="row" fxLayoutAlign="center" ng-show="progress.timesTriggered">
<span id="timesTriggeredCounter" class="animated pulse">{{progress.timesTriggered}}</span>
<span id="totCounter" ng-show="progress.repeatCount > 0">&nbsp;/&nbsp;{{progress.repeatCount}} </span>
</div>
<div>
<mat-chip>counter</mat-chip>&nbsp;
<span class="animated pulse">{{progress.timesTriggered}}</span> <span ng-show="progress.repeatCount > 0">/ {{progress.repeatCount}} </span>
<mat-divider></mat-divider>
<br/><br/>
<mat-chip>job key</mat-chip> <span class="animated pulse">{{progress.jobKey}}</span><br>
<mat-chip>job class</mat-chip> <span class="animated pulse">{{progress.jobClass}}</span><br/>
<br/>
<mat-chip>prev fire time</mat-chip> <span class="animated pulse">{{progress.previousFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
<mat-chip>next fire time</mat-chip> <span class="animated pulse">{{progress.nextFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
<mat-chip>final fire time</mat-chip> <span class="animated pulse">{{progress.finalFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
</div>
<div fxLayout="row" fxLayoutAlign="space-around center">
<div class="fireBox">
<div class="fireBoxHeader">prev fire time</div>
<div class="fireBoxContent"><span class="animated pulse">{{progress.previousFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
<div class="fireBoxContent" [hidden]="progress.previousFireTime"><span>-</span></div>
</div>
<div class="fireBox">
<div class="fireBoxHeader">next fire time</div>
<div class="fireBoxContent"><span class="animated pulse">{{progress.nextFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
<div class="fireBoxContent" [hidden]="progress.nextFireTime"><span>-</span></div>
</div>
<div class="fireBox">
<div class="fireBoxHeader">final fire time</div>
<div class="fireBoxContent"><span class="animated pulse">{{progress.finalFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
<div class="fireBoxContent" [hidden]="progress.finalFireTime"><span>-</span></div>
</div>
</div>
</mat-card-content>
</mat-card>

33
quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.scss
View File

@@ -0,0 +1,33 @@
#timesTriggeredCounter{
font-size: 2em;
}
#totCounter{
margin-top: auto;
text-align: center;
margin-bottom: 5px;
font-size: 0.8em;
}
#counterBox{
margin-bottom: 1em;
}
.fireBox{
width: 100%;
border-right: 1px solid rgba(0,0,0,.12);
margin: 8px;
}
.fireBox:last-child {
border-right: 0;
}
.fireBoxHeader{
font-size: 0.8em;
text-align: center;
color: grey;
margin-bottom: 0.5em;
}
.fireBoxContent{
text-align: center;
}