Fixed progress bar and added progress bar help text

templates/create.html

@@ -38,6 +38,8 @@
               <input class="input" type="text" id="inputField" name="inputField">
             </div>
           </div>
+          <span id="progress-bar-text" style="left: 50%; font-size: 12px;"></span>
+
           <progress id="progress-bar" class="progress is-large is-primary" value="0" max="100">
           </progress>
           <div class="field">
@@ -66,7 +68,7 @@
         <section class="modal-card-body">
           Set number does not exists: 
           <br>
-          <b>{{ error }}</b>
+          <b id="error-code"></b>
         </section>
         <footer class="modal-card-foot">
           <div class="buttons">
@@ -80,77 +82,83 @@
 <script>
 
 
-var socket = io.connect('http://' + document.domain + ':' + location.port + '/progress');
-        // Event listener for receiving progress updates
-        socket.on('update_progress', function(msg) {
-            var progress = msg.progress;
-            // document.getElementById("progress-bar").style.width = progress + "%";
-            document.getElementById("progress-bar").value = progress;
-            document.getElementById("progress-bar").innerText = progress + "%";
-        });
+  var socket = io.connect('http://' + document.domain + ':' + location.port + '/progress');
+  // Event listener for receiving progress updates
+  socket.on('update_progress', function (msg) {
+    var progress = msg.progress;
+    var state = msg.desc;
+    console.log(progress,state);
+    // document.getElementById("progress-bar").style.width = progress + "%";
+    document.getElementById("progress-bar").value = progress;
+    document.getElementById("progress-bar").innerText = progress + "%";
+    document.getElementById("progress-bar-text").innerText = state;
+  });
 
-        // Event listener for the form submission
-        document.getElementById("createForm").addEventListener("submit", function(event) {
-            event.preventDefault(); // Prevent default form submission
-            var inputField = document.getElementById("inputField").value;
-            socket.emit('start_task', { inputField: inputField }); // Emit socket event with inputField value
-        });
+  // Event listener for the form submission
+  document.getElementById("createForm").addEventListener("submit", function (event) {
+    event.preventDefault(); // Prevent default form submission
+    var inputField = document.getElementById("inputField").value;
+    socket.emit('start_task', { inputField: inputField }); // Emit socket event with inputField value
+  });
 
-    // Event listener for the 'task_completed' event
-    socket.on('task_completed', function() {
-        // Redirect to '/'
-        window.location.href = '/';
-    });
+  // Event listener for the 'task_completed' event
+  socket.on('task_completed', function () {
+    // Redirect to '/'
+    document.getElementById("progress-bar-text").innerText = '';
 
-    socket.on('task_failed', function(data) {
-        // Redirect to '/'
-        const error = data.error;
-        document.getElementById('modal-js').style.display = 'block';
-        // window.location.href = '/create';
-    });
+    window.location.href = '/';
+  });
+
+  socket.on('task_failed', function () {
+    // Redirect to '/'
+    var inputField = document.getElementById("inputField").value;
+    console.log(inputField);
+    
+    document.getElementById("modal-js").click();
+    document.getElementById("error-code").innerHTML = inputField;
+    document.getElementById("inputField").value = "";
+    // window.location.href = '/create';
+  });
 
   document.addEventListener('DOMContentLoaded', () => {
 
-    window.onload = function () {
-document.getElementById("modal-js").click(); };
-
     // Functions to open and close a modal
     function openModal($el) {
       $el.classList.add('is-active');
     }
-  
+
     function closeModal($el) {
       $el.classList.remove('is-active');
     }
-  
+
     function closeAllModals() {
       (document.querySelectorAll('.modal') || []).forEach(($modal) => {
         closeModal($modal);
       });
     }
-  
+
     // Add a click event on buttons to open a specific modal
     (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
       const modal = $trigger.dataset.target;
       const $target = document.getElementById(modal);
-  
+
       $trigger.addEventListener('click', () => {
         openModal($target);
       });
     });
-  
+
     // Add a click event on various child elements to close the parent modal
     (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
       const $target = $close.closest('.modal');
-  
+
       $close.addEventListener('click', () => {
         closeModal($target);
       });
     });
-  
+
     // Add a keyboard event to close all modals
     document.addEventListener('keydown', (event) => {
-      if(event.key === "Escape") {
+      if (event.key === "Escape") {
         closeAllModals();
       }
     });