From e0b03783290d9b28dabd939b2f4530e5723bd6bf Mon Sep 17 00:00:00 2001
From: Fabio Formosa <fabio.formosa@gmail.com>
Date: Thu, 15 Sep 2022 00:37:54 +0200
Subject: [PATCH] #59 changed the layout of the job progress card

---
 .../progress-panel.component.html             | 46 +++++++++++--------
 .../progress-panel.component.scss             | 33 +++++++++++++
 2 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html b/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html
index 479abc6..d9976db 100644
--- a/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html
+++ b/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html
@@ -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>
diff --git a/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.scss b/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.scss
index e69de29..7aa05ec 100644
--- a/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.scss
+++ b/quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.scss
@@ -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;
+}