Display messages on form field

Author: wilr

client/dist/js/queuedjobprogressfield.js

@@ -1,5 +1,4 @@
 // import 'bootstrap';
-
 window.jQuery.entwine('ss', ($) => {
   $('.queuedjob__progress').entwine({
     onmatch() {
@@ -71,6 +70,8 @@ window.jQuery.entwine('ss', ($) => {
                     $('body').trigger('queuedjob-finished')
                 }
 
+                $(self).find('.messages').val(resp.Messages);
+
                 if (changed) {
                     progress.popover('hide').popover('dispose')
 
@@ -83,6 +84,8 @@ window.jQuery.entwine('ss', ($) => {
                         .attr('data-content', resp.Content)
 
                     progress.popover('show')
+                } else {
+                    progress.popover('show');
                 }
 
                 if (resp.Status !== 'bg-success') {

client/dist/js/queuedjobprogressfield.js.map

@@ -18,4 +18,28 @@
     .arrow {
         display: none;
     }
+
+    .messages {
+        height: 120px;
+        padding: 15px;
+        width: 100%;
+        background: #eee;
+        box-shadow: inset 0 4px rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+        margin: 10px 0;
+        overflow: scroll;
+
+        ul {
+            margin: 0;
+            padding: 0 0 0 15px;
+        }
+
+        li {
+            font-size: 12px;
+            font-family: monospace;
+            line-height: 15px;
+            color: #333;
+            margin: 0;
+        }
+    }
 }

client/dist/styles/queuedjobprogressfield.css

@@ -115,8 +115,9 @@ public function jobProgress()
                 'Content' => $this->getPopoverContent(),
                 'Percentage' => $this->getPercentage(),
                 'Status' => $this->getStatus(),
-                'StatusCode' => $this->getJob()->JobStatus,
-                'Animated' => $this->isAnimated()
+                'StatusCode' => $job->JobStatus,
+                'Animated' => $this->isAnimated(),
+                'Messages' => (is_object($job->getMessages())) ? $job->getMessages()->CDATA() : 'Job Log..'
             ]);
         } else {
             return $this->httpError(400);
@@ -161,6 +162,10 @@ public function getPercentage()
         $completed = $this->getCompletedSteps();
         $total = $this->getTotalSteps();
 
+        if ($completed >= $total) {
+            return '100';
+        }
+
         if ($total < 1) {
             return '5'; // minimum 5% width
         }

client/dist/styles/queuedjobprogressfield.css.map

@@ -50,6 +50,10 @@
         opacity: 0.3;
     }
 
+    .fas {
+        margin-top: 2px;
+    }
+
     .progress--meta {
         opacity: 0.7;
         padding-left: 70px;
@@ -103,10 +107,6 @@
         padding: 0 0 0 70px;
         border: none;
     }
-
-    #QueuedJobProgressField {
-        padding: 100px 0 0;
-    }
   </style>
 
   <script>
@@ -148,7 +148,7 @@
       </div>
 
       <div class="progress--meta">
-        <p>Job started by $CurrentJob.RunAs.Name at {$CurrentJob.Created.Nice}</p>
+        <p>Job #$CurrentJob.ID started by $CurrentJob.RunAs.Name at {$CurrentJob.Created.Nice}</p>
       </div>
 
       $ProgressForm

client/src/bundles/queuedjobprogressfield.js

@@ -1,31 +1,35 @@
-<% if Job %>
-    <div class="queuedjob__progress progress" data-live="{$Link(jobProgress)}?JobId=$Job.ID&amp;JobSignature=$Job.Signature" data-interval="$CheckInterval">
-        <div
-            class="progress-bar progress-bar-striped $Status <% if isAnimated %>progress-bar-animated<% end_if %>"
-            role="progressbar"
-            data-placement="top"
-            aria-valuenow="$CompletedSteps"
-            style="width: {$Percentage}%"
-            aria-valuemin="0"
-            aria-valuemax="$TotalSteps"
-            title="$PopoverTitle"
-            data-content="$PopoverContent">
+<div class="queuedjobprogress">
+    <% if Job %>
+        <div class="queuedjob__progress progress" data-live="{$Link(jobProgress)}?JobId=$Job.ID&amp;JobSignature=$Job.Signature" data-interval="$CheckInterval">
+            <div
+                class="progress-bar progress-bar-striped $Status <% if isAnimated %>progress-bar-animated<% end_if %>"
+                role="progressbar"
+                data-placement="top"
+                aria-valuenow="$CompletedSteps"
+                style="width: {$Percentage}%"
+                aria-valuemin="0"
+                aria-valuemax="$TotalSteps"
+                title="$PopoverTitle"
+                data-content="$PopoverContent">
+            </div>
         </div>
-    </div>
 
-    <small style="margin-top: 20px; display: block;"><a href="admin/queuedjobs/Symbiote-QueuedJobs-DataObjects-QueuedJobDescriptor/EditForm/field/QueuedJobDescriptor/item/$ID/edit" style="color: #999">View Job Information</a></small>
-<% else %>
-    <div class="queuedjob__progress progress" data-live="" data-interval="0">
-        <div
-            class="progress-bar progress-bar-striped"
-            role="progressbar"
-            data-placement="top"
-            aria-valuenow="0"
-            style="width: 0%"
-            aria-valuemin="0"
-            aria-valuemax="1"
-            title="No Job Found"
-            data-content="Cannot find scheduled job">
+        <small style="margin-top: 20px; display: block;"><a href="admin/queuedjobs/Symbiote-QueuedJobs-DataObjects-QueuedJobDescriptor/EditForm/field/QueuedJobDescriptor/item/$ID/edit" style="color: #999">View Job Information</a></small>
+
+        <div class="messages" class="messages">$Job.Messages</div>
+    <% else %>
+        <div class="queuedjob__progress progress" data-live="" data-interval="0">
+            <div
+                class="progress-bar progress-bar-striped"
+                role="progressbar"
+                data-placement="top"
+                aria-valuenow="0"
+                style="width: 0%"
+                aria-valuemin="0"
+                aria-valuemax="1"
+                title="No Job Found"
+                data-content="Cannot find scheduled job">
+            </div>
         </div>
-    </div>
-<% end_if %>
+    <% end_if %>
+</div>