moved cFO() to changeOPT() into internal/js, transformed file_list_ip to work with new query_data model, made the Size buttons use modern bootstrap5 radio buttons and work again without the form for all file* routes. Removed a lot of dead code, moved code to resetNextPrev buttons to anytime we getPage, reducing code, handle setting OPT in jscript via a to_dict() for States. Overall, search and file_list_ip now work. Only main thing left is the override code

internal/js/files_support.js

@@ -351,11 +351,6 @@ function addFigure( obj, last, ecnt)
       last.printed = obj.file_details.month;
     }
   }
-        /*
-        {% if not entry_data %}
-            <span class="alert alert-danger p-2 col-auto"> No matches for: '{{search_term}}'</span>
-        {% endif %}
-        */
 
   // Image/Video/Unknown entry
   if (obj.type.name === "Image" || obj.type.name === "Video" || obj.type.name === "Unknown") {
@@ -466,9 +461,9 @@ function getDirEntries(dir_id, back)
     $.ajax({
         type: 'POST',
         url: '/get_dir_entries',
-        data: JSON.stringify(data), // Stringify the data
-        contentType: 'application/json', // Set content type
-        dataType: 'json', // Expect JSON response
+        data: JSON.stringify(data),
+        contentType: 'application/json',
+        dataType: 'json',
         success: function(res) {
             document.entries=res
             // rebuild entryList/pageList as each dir comes with new entries
@@ -525,6 +520,8 @@ function drawPageOfFigures()
         addFigure( obj, last, ecnt )
         ecnt++
     }
+    if( document.entries.length == 0 && OPT.search_term != '' )
+        $('#figures').append( `<span class="alert alert-danger p-2 col-auto"> No matches for: '${OPT.search_term}'</span>` )
     $('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return false; });
     $('.figure').dblclick( function(e) { dblClickToViewEntry( $(this).attr('id') ) } )
     // for dir, getDirEntries 2nd param is back (or "up" a dir)
@@ -532,8 +529,47 @@ function drawPageOfFigures()
     $(".back").click( function(e) { getDirEntries(this.id,true) } )
 }
 
+function getPageFileList(res, viewingIdx)
+{
+    $('#file_list_div').empty()
+    html='<table class="table table-striped table-sm col-12">'
+    html+='<thead><tr class="table-primary"><th>Name</th><th>Size (MB)</th><th>Path Prefix</th><th>Hash</th></tr></thead><tbody>'
+    for (const obj of res) {
+        html+=`<tr>
+                <td>
+                <div class="d-flex align-items-center">
+                  <a href="${obj.in_dir.in_path.path_prefix}/${obj.in_dir.rel_path}/${obj.name}">
+                    <img class="img-fluid me-2" style="max-width: 100px;"
+                      src="data:image/jpeg;base64,${obj.file_details.thumbnail}"></img>
+                  </a>
+                  <span>${obj.name}</span>
+                </div>
+                <td>${obj.file_details.size_mb}</td>
+                <td>${obj.in_dir.in_path.path_prefix.replace("static/","")}/${obj.in_dir.rel_path}</td>
+                <td>${obj.file_details.hash}</td>
+             </tr>`
+    }
+    html+='</tbody></table>'
+    $('#file_list_div').append(html)
+}
+
+// function called when we get another page from inside the files view
+function getPageFigures(res, viewingIdx)
+{
+    // add all the figures to files_div
+    drawPageOfFigures()
+}
+
+// function called when we get another page from inside the viewer
+function getPageViewer(res, viewingIdx)
+{
+    document.viewing=document.entries[viewingIdx]
+    // update viewing, arrows and image/video too
+    ViewImageOrVideo()
+}
+
 // Function to get the 'page' of entry ids out of entryList
-function getPage(pageNumber,viewing_idx=0) 
+function getPage(pageNumber, successCallback, viewingIdx=0)
 {
     // before we do anything, disabled left/right arrows on viewer to stop
     // getting another event before we have the data for the page back
@@ -546,29 +582,14 @@ function getPage(pageNumber,viewing_idx=0)
     // set up data to send to server to get the entry data for entries in pageList
     data={}
     data.ids = pageList
-    data.query = 99999
 
     $.ajax({
-        type: 'POST',
-        url: '/get_entries_by_ids',
-        data: JSON.stringify(data), // Stringify the data
-        contentType: 'application/json', // Set content type
-        dataType: 'json', // Expect JSON response
-        success: function(res) {
-            document.entries=res
-            // add all the figures to files_div
-            drawPageOfFigures()
-            // noting we could have been in files_div, or viewer_div, update both jic
-            // and fix viewer_div - update viewing, arrows and image/video too
-            document.viewing=document.entries[viewing_idx]
-            resetNextPrevButtons()
-            ViewImageOrVideo()
-        },
-        error: function(xhr, status, error) {
-            console.error("Error:", error);
-        }
-    });
-
+        type: 'POST', url: '/get_entries_by_ids',
+        data: JSON.stringify(data), contentType: 'application/json',
+        dataType: 'json',
+        success: function(res) { document.entries=res; successCallback(res,viewingIdx); },
+        error: function(xhr, status, error) { console.error("Error:", error); } });
+    resetNextPrevButtons()
     return
 }
 
@@ -611,7 +632,7 @@ function resetNextPrevButtons()
 }
 
 // get list of eids for the next page, also make sure next/prev buttons make sense for page we are on
-function nextPage()
+function nextPage(successCallback)
 {
     // pageList[0] is the first entry on this page
     const currentPage=getPageNumberForId( pageList[0] )
@@ -621,13 +642,12 @@ function nextPage()
         console.error( "WARNING: seems first on pg=" + firstEntryOnPage + " of how many=" + OPT.how_many + " gives currentPage=" + currentPage + " and we cant go next page?" )
         return
     }
-    getPage( currentPage+1 )
-    resetNextPrevButtons()
+    getPage( currentPage+1, successCallback )
     return
 }
 
 // get list of eids for the prev page, also make sure next/prev buttons make sense for page we are on
-function prevPage()
+function prevPage(successCallback)
 {
     // pageList[0] is the first entry on this page
     const currentPage=getPageNumberForId( pageList[0] )
@@ -637,8 +657,7 @@ function prevPage()
         console.error( "WARNING: seems first on pg=" + firstEntryOnPage + " of how many=" + OPT.how_many + " gives currentPage=" + currentPage + " and we cant go prev page?" )
         return
     }
-    getPage( currentPage-1 )
-    resetNextPrevButtons()
+    getPage( currentPage-1, successCallback )
     return
 }
 
@@ -646,3 +665,45 @@ function isMobile() {
     try{ document.createEvent("TouchEvent"); return true; }
     catch(e){ return false; }
 }
+
+
+function changeOPT(successCallback) {
+    OPT.how_many=$('#how_many').val()
+    new_f=$('#folders').val()
+    new_f=( new_f == 'True' )
+    // if change to/from folders, also fix the noo menu
+    if( new_f != OPT.folders )
+    {
+        if( new_f )
+        {
+            $('#noo option:lt(2)').prop('disabled', true);
+            $('#noo').val(OPT.default_folder_noo)
+        }
+        else
+        {
+            $('#noo option:lt(2)').prop('disabled', false);
+            $('#noo').val(OPT.default_flat_noo)
+        }
+    }
+    OPT.noo=$('#noo').val()
+    OPT.folders=new_f
+    OPT.folders=$('#folders').val()
+    OPT.grouping=$('#grouping').val()
+    OPT.size=$('#size').val()
+    $.ajax({
+        type: 'POST',
+        url: '/change_file_opts',
+        data: JSON.stringify(OPT),
+        contentType: 'application/json',
+        success: function(resp) {
+            entryList=resp.query_data.entry_list
+            // put data back into booleans, ints, etc
+            OPT.folders=( OPT.folders == 'True' )
+            OPT.how_many=parseInt(OPT.how_many)
+            $('.how_many_text').html( `&nbsp;${OPT.how_many} files&nbsp;` )
+            OPT.root_eid=parseInt(OPT.root_eid)
+            OPT.size=parseInt(OPT.size)
+            getPage(1,successCallback)
+        }
+    })
+}