include the js form the internal dir and viewer now has tooltips on buttons, and all buttons work, call the right javascript, send jobs to the pa_job_manager, and make image go gray with throbber, and on job completion, hide throbber, redraw the image in color and with the newly transformed image
This commit is contained in:
@@ -1,6 +1,9 @@
|
||||
{% 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>
|
||||
|
||||
<div class="container-fluid">
|
||||
<form id="main_form" method="POST">
|
||||
<input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
|
||||
@@ -233,277 +236,9 @@
|
||||
</div class="container">
|
||||
{% endblock main_content %}
|
||||
{% block script_content %}
|
||||
|
||||
<script>
|
||||
|
||||
function GetSelnAsDiv()
|
||||
{
|
||||
seln=''
|
||||
$('.highlight').each(function( index ) {
|
||||
seln+='<div fname="' + $(this).attr('fname') + '" yr="' + $(this).attr('yr') +
|
||||
'" date="' + $(this).attr('date') +
|
||||
'" class="px-1">' + $(this).children().parent().html() + '</div>'
|
||||
seln+='<input type="hidden" name="eid-'+index+'" value="'+$(this).attr('id')+'">'
|
||||
} )
|
||||
return '<div class="row col-12">'+seln+'</div>'
|
||||
}
|
||||
|
||||
function GetSelnAsData()
|
||||
{
|
||||
to_del=''
|
||||
$('.highlight').each(function( index ) { to_del+='&eid-'+index+'='+$(this).attr('id') } )
|
||||
return to_del
|
||||
}
|
||||
|
||||
function RunAIOnSeln(person)
|
||||
{
|
||||
post_data = GetSelnAsData()
|
||||
post_data += '&person='+person.replace('ai-','')
|
||||
$.ajax({ type: 'POST', data: post_data, url: '/run_ai_on', success: function(data){ window.location='/'; return false; } })
|
||||
}
|
||||
|
||||
function DelDBox(del_or_undel)
|
||||
{
|
||||
to_del = GetSelnAsData()
|
||||
$('#dbox-title').html(del_or_undel+' Selected File(s)')
|
||||
div ='<div class="row col-12"><p class="col">' + del_or_undel + ' the following files?</p></div>'
|
||||
div+=GetSelnAsDiv()
|
||||
div+=`<div class="row col-12">
|
||||
<button onClick="$('#dbox').modal('hide')" class="btn btn-outline-secondary col-2">Cancel</button>
|
||||
`
|
||||
div+=`
|
||||
<button onClick="$('#dbox').modal('hide'); $.ajax({ type: 'POST', data: to_del, url:
|
||||
`
|
||||
if( del_or_undel == "Delete" )
|
||||
div+=`
|
||||
'/delete_files',
|
||||
success: function(data){ window.location='/'; return false; } })" class="btn btn-outline-danger col-2">Ok</button>
|
||||
</div>
|
||||
`
|
||||
else
|
||||
div+=`
|
||||
'/restore_files',
|
||||
success: function(data){ window.location='/'; return false; } })" class="btn btn-outline-success col-2">Ok</button>
|
||||
</div>
|
||||
`
|
||||
$('#dbox-content').html(div)
|
||||
$('#dbox').modal('show')
|
||||
}
|
||||
|
||||
function DetailsDBox()
|
||||
{
|
||||
$('#dbox-title').html('Details of Selected File(s)')
|
||||
var div ='<div class="row col-12">'
|
||||
$('.highlight').each(function( index ) {
|
||||
div += "<div class='col-3' style='background-color:lightgray'>Name:</div><div class='col-9' style='background-color:lightgray'>" + $(this).attr('fname') + "</div>"
|
||||
div += "<div class='col-3'>Date:</div><div class='col-9'>" + $(this).attr('pretty_date') + "</div>"
|
||||
dir = $(this).attr('in_dir')
|
||||
if( dir.slice(-1) != "/" )
|
||||
dir=dir.concat('/')
|
||||
div += "<div class='col-3'>Dir:</div><div class='col-9'>" + dir + "</div>"
|
||||
div += "<div class='col-3'>Size:</div><div class='col-9'>" + $(this).attr('size') + " MB</div>"
|
||||
div += "<div class='col-3'>Hash:</div><div class='col-9'>" + $(this).attr('hash') + "</div>"
|
||||
div += "<div class='col-3'>Path Type:</div><div class='col-9'>" + $(this).attr('path_type') + "</div>"
|
||||
} )
|
||||
div += `
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-row col-12">
|
||||
<button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-1 col-2">Cancel</button>
|
||||
</div>
|
||||
`
|
||||
$('#dbox-content').html(div)
|
||||
$('#dbox').modal('show')
|
||||
}
|
||||
|
||||
|
||||
var attempt=0;
|
||||
|
||||
function CheckRotateJob(id,job_id)
|
||||
{
|
||||
$.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')
|
||||
$('#'+id).find('.thumb').attr('src', 'data:image/jpeg;base64,'+data.thumbnail)
|
||||
return false;
|
||||
}
|
||||
else
|
||||
{
|
||||
setTimeout( function() { CheckRotateJob(id,job_id) }, 1000,id, job_id );
|
||||
}
|
||||
},
|
||||
} )
|
||||
}
|
||||
|
||||
function 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')
|
||||
div =`
|
||||
<div class="form-row col-12">
|
||||
<p class="col">Moving the following files?</p>
|
||||
</div>
|
||||
<form id="mv_fm" class="form form-control-inline col-12" method="POST" action="/move_files">
|
||||
`
|
||||
div+=GetSelnAsDiv()
|
||||
yr=$('.highlight').first().attr('yr')
|
||||
dt=$('.highlight').first().attr('date')
|
||||
div+=`
|
||||
<div class="input-group my-3">
|
||||
<alert class="alert alert-primary my-auto py-1">
|
||||
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#db"/></svg>
|
||||
`
|
||||
sps={{StoragePathNames()|safe}}
|
||||
if( sps.length > 1 ) {
|
||||
{# NB: alert-primary here is a hack to get the bg the same color as the alert primary by #}
|
||||
div+= '<select name="storage_rp" class="text-primary alert-primary py-1 border border-primary rounded">'
|
||||
for(p of sps) {
|
||||
div+= '<option>'+p+'</option>'
|
||||
}
|
||||
div+= '</select>'
|
||||
} else {
|
||||
div+= '/'+sps[0]+'/'
|
||||
div+= '<input type="hidden" name="storage_rp" value="' + sps[0] + '">'
|
||||
}
|
||||
div+=`
|
||||
</alert>
|
||||
<input id="prefix" type="text" name="prefix" class="text-primary text-right form-control"
|
||||
`
|
||||
div+="value="+yr+'/'+dt+"-"
|
||||
div+=`
|
||||
"></input>
|
||||
<input type="text" name="suffix" class="form-control" placeholder="name"> </input>
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-row col-12">
|
||||
<button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-1 col-2">Cancel</button>
|
||||
<button onClick="$('#dbox').modal('hide'); $('#mv_fm').submit(); return false;" class="btn btn-outline-primary col-2">Ok</button>
|
||||
</div>
|
||||
</form>
|
||||
`
|
||||
$('#dbox-content').html(div)
|
||||
$('#dbox').modal('show')
|
||||
}
|
||||
|
||||
function ChangeSize(clicked_button,sz)
|
||||
{
|
||||
$('.sz-but.btn-info').removeClass('btn-info text-white').addClass('btn-outline-info')
|
||||
$(clicked_button).addClass('btn-info text-white').removeClass('btn-outline-info')
|
||||
$('.thumb').attr( {height: sz, style: 'font-size:'+sz+'px' } )
|
||||
$('#size').val(sz)
|
||||
sz=sz-22
|
||||
$('.svg').height(sz);
|
||||
$('.svg').width(sz);
|
||||
$('.svg_cap').width(sz);
|
||||
}
|
||||
|
||||
// e == event (can see if shift/ctrl held down while left-clicking
|
||||
// el == element the click is on
|
||||
// this allows single-click to select, ctrl-click to (de)select 1 item, and
|
||||
// shift-click to add all elements between highlighted area and clicked area,
|
||||
// whether you click after highlight or before
|
||||
function DoSel(e, el)
|
||||
{
|
||||
if( e.ctrlKey )
|
||||
{
|
||||
$(el).toggleClass('highlight')
|
||||
return
|
||||
}
|
||||
if( e.shiftKey )
|
||||
{
|
||||
st=Number($('.highlight').first().attr('ecnt'))
|
||||
end=Number($('.highlight').last().attr('ecnt'))
|
||||
clicked=Number($(el).attr('ecnt'))
|
||||
if( ! $('#folders').value )
|
||||
{
|
||||
st -= 1
|
||||
end -= 1
|
||||
clicked -= 1
|
||||
}
|
||||
// if we shift-click first element, then st/end are NaN, so just highlightthe one clicked
|
||||
if( isNaN(st) )
|
||||
{
|
||||
$('.entry').slice( clicked, clicked+1 ).addClass('highlight')
|
||||
return
|
||||
}
|
||||
if( clicked > end )
|
||||
$('.entry').slice( end, clicked+1 ).addClass('highlight')
|
||||
else
|
||||
$('.entry').slice( clicked, st ).addClass('highlight')
|
||||
return
|
||||
}
|
||||
$('.highlight').removeClass('highlight')
|
||||
$(el).addClass('highlight')
|
||||
}
|
||||
|
||||
function SetButtonState() {
|
||||
var sel=false
|
||||
$('.highlight').each(function( index ) { sel=true } )
|
||||
if( sel ) {
|
||||
$('#move').attr('disabled', false )
|
||||
$('#del').attr('disabled', false )
|
||||
} else {
|
||||
$('#move').attr('disabled', true )
|
||||
$('#del').attr('disabled', true )
|
||||
}
|
||||
}
|
||||
|
||||
function FiguresOrDirsOrBoth() {
|
||||
var figure=false
|
||||
var dir=false
|
||||
$('.highlight').each(function( index ) {
|
||||
if( $(this).hasClass('figure') ) {
|
||||
figure=true
|
||||
}
|
||||
if( $(this).hasClass('dir') ) {
|
||||
dir=true
|
||||
}
|
||||
} )
|
||||
if( figure & ! dir )
|
||||
return "figure"
|
||||
if( ! figure & dir )
|
||||
return "dir"
|
||||
return "both"
|
||||
}
|
||||
|
||||
function SelContainsBinAndNotBin() {
|
||||
var bin=false
|
||||
var not_bin=false
|
||||
$('.highlight').each(function( index ) {
|
||||
if( $(this).attr('path_type') == "Bin" ) {
|
||||
bin=true
|
||||
} else {
|
||||
not_bin=true
|
||||
}
|
||||
} )
|
||||
if( bin && not_bin )
|
||||
return true
|
||||
else
|
||||
return false
|
||||
}
|
||||
|
||||
function NoSel() {
|
||||
var sel=false
|
||||
$('.highlight').each(function( index ) { sel=true } )
|
||||
// func looks for No Selection, so if sel is true and we have a sel, return false (i.e. NOT No Sel -> Sel )
|
||||
if( sel )
|
||||
return false
|
||||
else
|
||||
return true
|
||||
}
|
||||
|
||||
$('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return false; });
|
||||
$(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });
|
||||
|
||||
@@ -533,13 +268,13 @@ $.contextMenu({
|
||||
if( e.currentTarget.getAttribute('type') == 'Image' )
|
||||
{
|
||||
item_list['rotate'] = {
|
||||
name: "Rotate",
|
||||
name: "Transform",
|
||||
items: {
|
||||
"r90": { "name" : "90 degrees" },
|
||||
"r180": { "name" : "180 degrees" },
|
||||
"r270": { "name" : "270 degrees" },
|
||||
"fliph": { "name" : "flip horizontally" },
|
||||
"flipv": { "name" : "flip vertically" }
|
||||
"r90": { "name" : "Rotate 90 degrees" },
|
||||
"r180": { "name" : "Rotate 180 degrees" },
|
||||
"r270": { "name" : "Rotate 270 degrees" },
|
||||
"fliph": { "name" : "Flip horizontally" },
|
||||
"flipv": { "name" : "Flip vertically" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -580,11 +315,11 @@ $.contextMenu({
|
||||
if( key == "move" ) { MoveDBox() }
|
||||
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 == "fliph" ) { Rotate("fliph") }
|
||||
if( key == "flipv" ) { Rotate("flipv") }
|
||||
if( key == "r90" ) { Transform(90) }
|
||||
if( key == "r180" ) { Transform(180) }
|
||||
if( key == "r270" ) { Transform(270) }
|
||||
if( key == "fliph" ) { Transform("fliph") }
|
||||
if( key == "flipv" ) { Transform("flipv") }
|
||||
if( key.startsWith("ai")) { RunAIOnSeln(key) }
|
||||
},
|
||||
items: item_list
|
||||
|
||||
Reference in New Issue
Block a user