add new function of datetime calculator

src/api/status/public/js/build-log/check-for-build.js

@@ -2,6 +2,7 @@
 import { checkBuildStatus, getBuildLog } from './api.js';
 import terminal from './terminal.js';
 import buildHeader from './build-header.js';
+import calculatorBuildInfo from './datetime-calculator.js';
 
 let build;
 let reader;
@@ -30,6 +31,7 @@ function processLog({ done, value }) {
 export default async function checkForBuild() {
   const status = await checkBuildStatus();
   buildHeader(status);
+  calculatorBuildInfo(status);
 
   // If we're already building, skip this check
   if (build) {

src/api/status/public/js/build-log/datetime-calculator.js

@@ -1,14 +1,28 @@
-function calculator(startedAt = '2021-12-07') {
-  const dateValue = startedAt;
-  const date = Math.abs((new Date(dateValue).getTime() / 1000).toFixed(0));
-  const currentDate = Math.abs((new Date().getTime() / 1000).toFixed(0));
+const buildDateCaltulator = document.getElementById('calculatorData');
+const buildLoading = document.getElementById('build-loading');
+const buildSuccess = document.getElementById('build-success');
+const buildFail = document.getElementById('build-fail');
+
+export default function calculatorBuildInfo(data) {
+  const startedAt = data.startedAt;
+  const stoppedAt = data.stoppedAt;
+  const result = data.result;
+
+  if (result == 0 && stoppedAt != 'null') {
+    buildSuccess.removeAttribute('hidden');
+  } else if (result != 0 && stoppedAt != 'null') {
+    buildFail.removeAttribute('hidden');
+  } else {
+    buildLoading.removeAttribute('hidden');
+  }
+
+  const date = Math.abs((new Date(startedAt).getTime() / 1000).toFixed(0));
+  const currentDate = Math.abs((new Date(stoppedAt).getTime() / 1000).toFixed(0));
 
   const diff = currentDate - date;
   const hours = Math.floor(diff / 3600) % 24;
   const minutes = Math.floor(diff / 60) % 60;
   const seconds = diff % 60;
 
-  document.getElementById('calculatorData').innerHTML = `${hours} h ${minutes} m ${seconds} s`;
+  buildDateCaltulator.innerText = `${hours} h ${minutes} m ${seconds} s`;
 }
-
-setInterval(calculator, 1000);

src/api/status/public/js/pages/build.js

@@ -1,6 +1,9 @@
 import checkForBuild from '../build-log/check-for-build.js';
+import calculatorBuildInfo from '../build-log/datetime-calculator.js';
 
 window.addEventListener('load', () => {
   checkForBuild();
+  calculatorBuildInfo();
+  setInterval(calculatorBuildInfo, 1000);
   setInterval(checkForBuild, 5000);
 });

src/api/status/src/views/builds.hbs

@@ -31,6 +31,24 @@
       </div>
     </div>
   </nav>
+  <div class="container-fluid py-2">
+    <div class="table-responsive">
+      <div class="row mb-2">
+        <div class="col col-md-1 text-xs">status</div>
+        <div class="col col-md-2 text-xs">Build in progress</div>
+      </div>
+      <div class="row">
+        <div class="col text-sm">
+          <div class="align-center">
+            <span hidden id="build-loading" class="material-icons fa-spin fa-9x " style="font-size: 24px; color:rgb(255, 196, 0) !important" >motion_photos_on</span>
+            <span  hidden id="build-success" class="material-icons"  style="font-size: 22px; color:green">check_circle</span>
+            <span hidden id="build-fail" class="material-icons" style="font-size: 23px; color:red">cancel</span>
+            <span id="calculatorData" style="float: center; color:blue" ></span>
+          </div>
+        </div>   
+      </div>
+    </div>
+  </div>
   <div class="container-fluid py-2">
     <div id="build-header" class="card mb-3 bg-white">
      <div class="card-body">