added time to loading bar

app/static/demo/index/script.js

@@ -98,7 +98,10 @@ database_input.addEventListener("change", function(e){
         const formdata = new FormData();
         formdata.append("a",23);
         formdata.append("image",e.target.files[0]);
-        show_loading_bar();
+        
+        var loader_txt=show_loading_bar();
+        const myInterval=start_timer(loader_txt,0.2);
+        
         fetch("/demo/add_crops/",
         {
             method:'POST',
@@ -114,6 +117,7 @@ database_input.addEventListener("change", function(e){
                 console.log(response);
                 if (response['message']=='successful')
                 {
+                    clearInterval(myInterval);
                     hide_loading_bar();
                     var images_div=document.querySelector("#db_images_bar>#db_images");
                     var img_container_tag=document.createElement("div");
@@ -397,16 +401,20 @@ function face_recognition(elem)
             return ;
         }
         // console.log(elem.files[0]);
-        show_loading_bar();
+        var loader_txt=show_loading_bar();
+        const myInterval=start_timer(loader_txt,0.2);
+
         fetch("/demo/face_recognition/",{
             method:"POST",
             body:formdata
         }).then(function(response){
             return response.json();
         }).then(function(response){
-            hide_loading_bar();
             console.log(response);
             document.querySelector("#face_rec_image").src="data:image/jpeg;base64,"+response['image'];
+            
+            clearInterval(myInterval);
+            hide_loading_bar();
         })
         
         
@@ -514,8 +522,20 @@ function reset_settings(){
 
 var loader=document.querySelector(".loader");
 
+function start_timer(el,interval){
+    //interval in seconds
+    el.innerText="";
+    
+    var time=0;
+    return setInterval(function () { 
+        time+=interval;
+        el.innerText=time.toFixed(2)+"s";
+    }, interval*1000);
+}
+
 function show_loading_bar(){
     loader.classList.remove("hidden");
+    return loader.querySelector("#loader_text");
 }
 
 function hide_loading_bar(){

app/static/loader.css

@@ -34,4 +34,13 @@
 .loader.hidden{
     display: none;
     
+}
+
+#loader_text{
+    margin: 0px;
+    z-index: 24;
+    position: absolute;
+    left:50%;
+    transform:translate(-50%,0);
+    background: transparent;
 }

app/static/user/dashboard.js

@@ -191,7 +191,9 @@ function filterFunction() {
           
           const formdata = new FormData();
           formdata.append("image",e.target.files[0]);
-          show_loading_bar()
+          
+          var loader_txt=show_loading_bar();
+          const myInterval=start_timer(loader_txt,0.2);
           
           fetch("get_crops/",
           {
@@ -205,7 +207,9 @@ function filterFunction() {
           ).then(
               function(response)
               {
-                  hide_loading_bar()
+                  clearInterval(myInterval);
+                  hide_loading_bar();
+                  
                   console.log(response);
                 
                   if (response['message']=='successful')
@@ -278,7 +282,8 @@ function update_db_crops(elem)
         alldata["person_name"]=document.querySelector("#database-form>.field>.person_name").value;
         alldata["remarks"]=all_remarks;
         console.log(alldata);
-        show_loading_bar();
+        var loader_txt=show_loading_bar();
+        const myInterval=start_timer(loader_txt,0.2);
         
           
           fetch("set_crops/",{
@@ -288,6 +293,7 @@ function update_db_crops(elem)
           }).then(function(response){
               return response.json();
           }).then(function(response){
+                clearInterval(myInterval);
                 hide_loading_bar();
                 console.log(response);
                 var person_ids=document.querySelectorAll("#db_people_table>tr>td:first-child");
@@ -317,17 +323,23 @@ function face_recoginization(elem){
     if(elem.files[0]){
         formdata=new FormData();
         formdata.append("image",elem.files[0]);
-        show_loading_bar();
+        
+        var loader_txt=show_loading_bar();
+        const myInterval=start_timer(loader_txt,0.2);
+
         fetch("face_recognize/",{
             method:"POST",
             body:formdata
         }).then(function(response){
             return response.json();
         }).then(function(response){
-            hide_loading_bar();
+            
             console.log(response);
             document.querySelector("#face_recognition_image").src="data:image/jpeg;base64,"+response["pred_image"];                          
             document.querySelector("#face_recognition_image").style.width="unset";
+
+            clearInterval(myInterval);
+            hide_loading_bar();
         })
     }
 }
@@ -499,8 +511,20 @@ function reset_settings(){
 
 var loader=document.querySelector(".loader");
 
+function start_timer(el,interval){
+    //interval in seconds
+    el.innerText="";
+    
+    var time=0;
+    return setInterval(function () { 
+        time+=interval;
+        el.innerText=time.toFixed(2)+"s";
+    }, interval*1000);
+}
+
 function show_loading_bar(){
     loader.classList.remove("hidden");
+    return loader.querySelector("#loader_text");
 }
 
 function hide_loading_bar(){

app/templates/loader.html

@@ -1,2 +1,4 @@
 <link type="text/css" rel="stylesheet" href="{{ url_for('static',filename='loader.css') }}">
-<div class="loader hidden"></div>
+<div class="loader hidden">
+    <h4 id="loader_text">Choose an image for face recognition</h4>
+</div>