From 3ac6f143f4d0a99642e9f7b034e33f8e71a569c8 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Fri, 16 Jul 2021 21:08:16 +1000
Subject: [PATCH] first pass of rotation sub-menu on images.  It only posts on
 Image.  For each selection it turns thumbnail gray, overlays a centered color
 spinning wheel, posts to the f/e to create a rotation job, gets the job id
 back, keeps checking the f/e to see when the job id is done, and when it is
 (for now) undoes the spinning wheel/grayscale - will return new thumb once
 done and pa_job_mgr has no code to handle job as yet

---
 files.py             | 34 +++++++++++++++++++++++++++++
 templates/files.html | 51 ++++++++++++++++++++++++++++++++++++++------
 2 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/files.py b/files.py
index 0214e10..d9f578b 100644
--- a/files.py
+++ b/files.py
@@ -482,6 +482,40 @@ def view_img(id):
         eids=''
     return render_template("viewer.html", obj=obj, eids=eids)
 
+# route called from front/end - if multiple images are being rotated, each rotation == a separate call
+# to this route (and therefore a separate rotate job.  Each reponse allows the f/e to check the
+# specific rotation job is finished (/checkrotatejob)  which will be called (say) every 1 sec. from f/e
+# with a spinning wheel, then when pa_job_mgr has finished it will return the rotated thumb
+@app.route("/rotate", methods=["POST"])
+@login_required
+def rotate():
+    id = request.form['id']
+    amt = request.form['amt']
+    print( f"rotate called with id={id}, amt={amt}")
+
+    jex=[]
+    for el in request.form:
+        jex.append( JobExtra( name=f"{el}", value=request.form[el] ) )
+
+    job=NewJob( "rotate_image", 0, None, jex )
+
+    resp={}
+    resp['job_id']=job.id
+
+    # TODO: make this return data with the job number, then the f/e can poll checkrotatejob
+    return resp
+
+@app.route("/checkrotatejob", methods=["POST"])
+@login_required
+def checkrotatejob():
+    job_id = request.form['job_id']
+    job = Job.query.get(job_id)
+    resp={}
+    resp['finished']=False
+    if job.pa_job_state == 'Completed':
+        resp['finished']=True
+    return resp
+
 ################################################################################
 # /static -> returns the contents of any file referenced inside /static.
 # we create/use symlinks in static/ to reference the images to show
diff --git a/templates/files.html b/templates/files.html
index 864d3b7..78e1ef6 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -204,6 +204,9 @@
                                         <i style="font-size:16px;background-color:black;color:white" class="fas {{LocationIcon(obj)}}"></i>
                                     </div>
                                 {% endif %}
+                                <div id="s{{obj.id}}" style="display:none; position:absolute; top: 50%; left:50%; transform:translate(-50%, -50%);">
+                                    <img height="64px" src="static/throbber.gif"></img>
+                                </div>
                             </div>
                         {% elif obj.type.name == "Video" %}
                             <div style="position:relative; width:100%">
@@ -339,6 +342,41 @@ function DetailsDBox()
     $('#dbox').modal('show')
 }
 
+
+var attempt=0;
+
+function CheckRotateJob(id,job_id)
+{
+    console.log( 'CheckRotateJob: ' + id + ', ' + job_id )
+    {# TODO: all the code except for the SetTimeout to be replaced with a post / check response from f/e #}
+    $.ajax(
+        {
+            type: 'POST', data: '&job_id='+job_id, url: '/checkrotatejob', success: function(data) { 
+                if( data.finished )
+                {
+                    $('#s'+id).hide()
+                    $('#'+id).find('img.thumb').attr('style', 'filter: color(100%);' );
+                    $('#'+id).addClass('entry')
+                    return false;
+                }
+                else
+                {
+                    setTimeout( function() { CheckRotateJob(id,job_id) }, 1000,id, job_id ); 
+                }
+            }, 
+        } )
+}
+
+function Rotate(amt)
+{
+    console.log('rotate: '+amt)
+    $('.highlight').each(function( id, e ) { 
+        post_data = '&amt='+amt+'&id='+e.id
+        {# send rotate for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end #}
+        $.ajax({ type: 'POST', data: post_data, url: '/rotate', success: function(data){ $('#'+e.id).find('img.thumb').attr('style', 'filter: grayscale(100%);' ); $('#'+e.id).removeClass('entry'); $('#s'+e.id).show(); CheckRotateJob(e.id,data.job_id); return false; } })
+    } )
+}
+
 function MoveDBox()
 {
     $('#dbox-title').html('Move Selected File(s) to new directory in Storage Path')  
@@ -415,8 +453,9 @@ function DoSel(e, el)
         st=Number($('.highlight').first().attr('ecnt'))
         end=Number($('.highlight').last().attr('ecnt'))
         clicked=Number($(el).attr('ecnt'))
-        if( ! folders )
+        if( ! $('#folders').value )
         {
+            console.log( 'out by 1 because flat view' )
             st -= 1
             end -= 1
             clicked -= 1
@@ -565,11 +604,11 @@ $.contextMenu({
                     $(s).appendTo('body').submit();
                 }
                 if( key == "move" ) { MoveDBox() }
-                if( key == "del" ) { DelDBox('Delete') }
-                if( key == "undel" ) { DelDBox('Restore') }
-                if( key == "r90" ) { console.log('r90') }
-                if( key == "r180" ) { console.log('r180') }
-                if( key == "r270" ) { console.log('r270') }
+                if( key == "del"  ) { DelDBox('Delete') }
+                if( key == "undel") { DelDBox('Restore') }
+                if( key == "r90"  ) { Rotate(90) }
+                if( key == "r180" ) { Rotate(180) }
+                if( key == "r270" ) { Rotate(270) }
                 if( key.startsWith("ai")) { RunAIOnSeln(key) }
             },
             items: item_list