update to use new viewing data structures, consolidate to one set of transform functions with successCallback to cover the files vs viewer content. Updated TODO appropriately

TODO

@@ -1,13 +1,20 @@
 ###
 # get override data into view
-# think view_transform might need to be included?
 # should start with an empty DB and test - definitely no dirs in storage_sp gives:
 #        dir_id=dir_arr[0]
 #        IndexError: list index out of range
+#           TEST this, code in files will work, but now passes root_eid=0 for
+#           this - so need GUI to work - may even be good to put an alert up - its so odd to hvae not root dir ONLY happens when no data
 # empty directories are sometimes showing "No matches for: 'undefined'" <- should only comes up for search in URL???
-# transforms in files_* also fails (old js in *transform uses current)
+# think I killed pa_job_manager without passing an eid to a transform job, shouldn't crash
+#    SHOULD JUST get AI to help clean-up and write defensive code here...
 # also all the add ref img/add override, etc are non-functional - FIX the override* stuff first to get table/naming consistency as that is half the problem
 # delete button also uses current? (eid is empty anyway)
+# move as much jscript into *_support, as possible (if there are no more {{ - # then move it)
+# convert move_paths to a json setup
+#   ALSO revisit this move_paths to be as safe as possible ultimately, triple-check there are no leading / or .. 's
+# TEST everything (don't forget keybindings)
+# transforms -> should consider removing the pull logic to see if a job is finished (have job-mgr push data back? while more rest, not sure b/e EVER sends data to F/E at moment)
 ###
 
 ### major fix - go to everywhere I call GetEntries(), and redo the logic totally...

files.py

@@ -368,7 +368,10 @@ def GetQueryData( OPT ):
     )
     # this should return the 1 Dir (that we want to see the content of) - and with only 1, no need to worry about order
     dir_arr=db.session.execute(dir_stmt).scalars().all()
-    dir_id=dir_arr[0]
+    if dir_arr:
+        dir_id=dir_arr[0]
+    else:
+        dir_id=0
     # used to know the parent/root (in folder view), in flat view - just ignore/safe though
     query_data['root_eid']=dir_id
 

internal/js/files_transform.js

@@ -1,27 +1,47 @@
+function handleTransformFiles(data,id,job_id)
+{
+    if( data.finished )
+    {
+        $('#s'+id).hide()
+        $('#'+id).find('img.thumb').attr('style', 'filter: color(100%);' );
+        $('#'+id).addClass('entry')
+        $('#'+id).find('.thumb').attr('src', 'data:image/jpeg;base64,'+data.thumbnail)
+        return false;
+    }
+    else
+    {
+        setTimeout( function() { CheckTransformJob(id,job_id,handleTransformFiles) }, 1000,id, job_id );
+    }
+}
+
 // POST to a check URL, that will tell us if the transformation has completed,
 // if not, try again in 1 second... If it has finished then reset the thumbnail
 // to full colour, put it back to being an entry and reset the thumbnail to the
 // newly created one that was sent back in the response to the POST
-function CheckTransformJob(id,job_id)
+function handleTransformViewing(data,id,job_id)
+{
+    if( data.finished )
+    {
+        // stop throbber, remove grayscale & then force reload with timestamped version of im.src
+        grayscale=0
+        throbber=0
+        im.src=im.src + '?t=' + new Date().getTime();
+        return false;
+    }
+    else
+    {
+        setTimeout( function() { CheckTransformJob(id,job_id,handleTransformViewing) }, 1000,id, job_id );
+    }
+}
+
+// POST to a check URL, that will tell us if the transformation has completed,
+// if not, try again in 1 second... If it has finished then reset the thumbnail
+// to full colour, put it back to being an entry and reset the thumbnail to the
+// newly created one that was sent back in the response to the POST
+function CheckTransformJob(id,job_id,successCallback)
 {
     CheckForJobs()
-    $.ajax(
+    $.ajax( { type: 'POST', data: '&job_id='+job_id, url: '/check_transform_job', success: function(res) { successCallback(res,id,job_id); } } )
-        {
-            type: 'POST', data: '&job_id='+job_id, url: '/check_transform_job', success: function(data) { 
-                if( data.finished )
-                {
-                    $('#s'+id).hide()
-                    $('#'+id).find('img.thumb').attr('style', 'filter: color(100%);' );
-                    $('#'+id).addClass('entry')
-                    $('#'+id).find('.thumb').attr('src', 'data:image/jpeg;base64,'+data.thumbnail)
-                    return false;
-                }
-                else
-                {
-                    setTimeout( function() { CheckTransformJob(id,job_id) }, 1000,id, job_id ); 
-                }
-            }, 
-        } )
 }
 
 // for each highlighted image, POST the transform with amt (90, 180, 270,
@@ -31,9 +51,20 @@ function CheckTransformJob(id,job_id)
 // to finish
 function Transform(amt)
 {
-    $('.highlight').each(function( id, e ) { 
+    // we are in the viewer with 1 image only...
-        post_data = '&amt='+amt+'&id='+e.id
+    if( document.viewing )
+    {
+        post_data = '&amt='+amt+'&id='+document.viewing.id
         // send /transform for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end
-        $.ajax({ type: 'POST', data: post_data, url: '/transform', success: function(data){ $('#'+e.id).find('img.thumb').attr('style', 'filter: grayscale(100%);' ); $('#'+e.id).removeClass('entry'); $('#s'+e.id).show(); CheckTransformJob(e.id,data.job_id); return false; } })
+        $.ajax({ type: 'POST', data: post_data, url: '/transform', success: function(data) { grayscale=1; throbber=1; DrawImg(); CheckTransformJob(document.viewing.id,data.job_id,handleTransformViewing); return false; } })
-    } )
+    }
+    else
+    {
+        $('.highlight').each(function( id, e ) {
+            post_data = '&amt='+amt+'&id='+e.id
+            // send /transform for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end
+            $.ajax({ type: 'POST', data: post_data, url: '/transform', success: function(data){ $('#'+e.id).find('img.thumb').attr('style', 'filter: grayscale(100%);' ); $('#'+e.id).removeClass('entry'); $('#s'+e.id).show(); CheckTransformJob(e.id,data.job_id,handleTransformFiles); return false; } })
+        } )
+    }
 }
+

internal/js/view_support.js

@@ -85,9 +85,8 @@ function DrawImg()
     else
         $('.figcaption').hide()
 
-    // if we have faces, the enable the toggles, otherwise disable them
+    // if we have faces, the enable the toggles, otherwise disable them and reset model select too
-    // and reset model select too
+    if( document.viewing.file_details.faces.length )
-    if( document.viewing.file_details.faces )
     {
         $('#faces').attr('disabled', false)
         $('#distance').attr('disabled', false)

internal/js/view_transform.js

@@ -1,37 +0,0 @@
-// POST to a check URL, that will tell us if the transformation has completed,
-// if not, try again in 1 second... If it has finished then reset the thumbnail
-// to full colour, put it back to being an entry and reset the thumbnail to the
-// newly created one that was sent back in the response to the POST
-function CheckTransformJob(id,job_id)
-{
-    CheckForJobs()
-    $.ajax(
-        {
-            type: 'POST', data: '&job_id='+job_id, url: '/check_transform_job', success: function(data) { 
-                if( data.finished )
-                {
-                    // stop throbber, remove grayscale & then force reload with timestamped version of im.src
-                    grayscale=0
-                    throbber=0
-                    im.src=im.src + '?t=' + new Date().getTime();
-                    return false;
-                }
-                else
-                {
-                    setTimeout( function() { CheckTransformJob(id,job_id) }, 1000,id, job_id ); 
-                }
-            }, 
-        } )
-}
-
-// for each highlighted image, POST the transform with amt (90, 180, 270,
-// fliph, flipv) which will let the job manager know what to do to this file.
-// we also grayscale the thumbnail out, remove the entry class for now, show
-// the spinning wheel, and finally kick of the checking for the transform job
-// to finish
-function Transform(amt)
-{
-    post_data = '&amt='+amt+'&id='+current
-    // send /transform for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end
-    $.ajax({ type: 'POST', data: post_data, url: '/transform', success: function(data) { grayscale=1; throbber=1; DrawImg(); CheckTransformJob(current,data.job_id); return false; } })
-}

templates/files.html

@@ -1,14 +1,17 @@
 {% extends "base.html" %}
 {% block main_content %}
 
-    <script src="{{ url_for( 'internal', filename='js/files_support.js')}}"></script>
     <script src="{{ url_for( 'internal', filename='js/files_transform.js')}}"></script>
+    <script src="{{ url_for( 'internal', filename='js/files_support.js')}}"></script>
+    <script src="{{ url_for( 'internal', filename='js/view_support.js')}}"></script>
 
     <script>
-        // FIXME: used by viewer code - should probably get rid of this?
+        // FIXME: why is this script block at the top? and not at the bottom
-        var fullscreen=false;
         document.fake_shift=0
         document.fake_ctrl=0
+        // FIXME: used by viewer code - should probably get rid of this?
+        var fullscreen=false;
+        // FIXME: doco / and convert to json
         var move_paths=[]
         {% for p in move_paths %}
             p = new Object()
@@ -19,8 +22,7 @@
         {% endfor %}
 
         // GLOBALS
-        // this is which eid we are viewing an image/video (when we dbl-click & then next/prev)
+        // this is the current entry (object) we are viewing - an image/video (used when we dbl-click to view & then in next/prev in view)
-        document.viewing_eid=null;
         document.viewing=null;
 
         var OPT = {{ OPT.to_dict()|tojson }};
@@ -34,6 +36,7 @@
         // force pageList to set pageList for & render the first page
         getPage(1,getPageFigures)
 
+        // FIXME: MOVE to file_support.js
         function changeSize() 
         {
             sz=$('input[name="size"]:checked').val();
@@ -78,6 +81,7 @@
                         <span class="alert alert-primary p-2">Searched for: '{{search_term}}'</span>
                     </div class="col my-auto">
                     <script>
+                        // FIXME: need to move this into getPage (or similar), so its picked up always not just on first load
                         $('#folders').prop('disabled', 'disabled').removeClass('border-info').addClass('border-secondary').removeClass('text-info').addClass('text-secondary');
                     </script>
                 {% endif %}
@@ -158,10 +162,9 @@
 #tst90:hover,#tst90:focus { filter: invert(73%) sepia(27%) saturate(3970%) hue-rotate(146deg) brightness(94%) contrast(100%); }
 </style>
 
-<script src="{{ url_for( 'internal', filename='js/view_transform.js')}}"></script>
-<script src="{{ url_for( 'internal', filename='js/view_support.js')}}"></script>
 
 <script>
+    // FIXME: doco, but also gather all globals together, many make them all document. to be obviously global (and add fullscreen)
     var gap=0.8
     var grayscale=0
     var throbber=0
@@ -172,6 +175,7 @@
 	var st_path="static/Storage/{{st_path}}"
 	var bin_path="static/Bin/{{bin_path}}"
 
+    // FIXME: MOVE these functions to file_support.js
     function PrettyFname(fname)
     {
         s='<span class="alert alert-secondary py-2">'
@@ -352,7 +356,7 @@
                     <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#download"/></svg>
                 </button>
                 <button id="del" class="btn btn-outline-danger p-1" title="Delete (hotkey: Del)" 
-                    onClick="$.ajax({ type: 'POST', data: '&eid-0={{current}}', url: '/delete_files', success: function(data){ window.location='/'; return false; } })">
+                    onClick="$.ajax({ type: 'POST', data: '&eid-0='+document.viewing.id, url: '/delete_files', success: function(data){ window.location='/'; return false; } })">
                     <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash"/></svg>
                 </button>
             </div>
@@ -363,6 +367,7 @@
 
 {% block script_content %}
 <script>
+// FIXME: MOVE the majorty of below to files_support/view_support.   MIGHT help to have urls go into a global too, and then can ignore many of the above items needing url_for
 $( document ).keydown(function(event) {
     // if dbox is visible, dont process this hot-key, we are inputting text
     // into inputs instead
@@ -403,8 +408,6 @@ $( document ).keydown(function(event) {
     }
 });
 
-var fullscreen=false;
-
 $(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });
 
 function dblClickToViewEntry(id) {