827 lines
32 KiB
JavaScript
827 lines
32 KiB
JavaScript
// GLOBAL ICON array
|
|
ICON={}
|
|
ICON["Import"]="import"
|
|
ICON["Storage"]="db"
|
|
ICON["Bin"]="trash"
|
|
|
|
// function called when we get another page from inside the files view
|
|
function getPageFigures(res, viewingIdx)
|
|
{
|
|
// add all the figures to files_div
|
|
drawPageOfFigures()
|
|
}
|
|
|
|
// grab all selected thumbnails and return a <div> containing the thumbnails
|
|
// with extra yr and date attached as attributes so we can set the default
|
|
// dir name for a move directory - not used in del, but no harm to include them
|
|
function GetSelnAsDiv()
|
|
{
|
|
seln=''
|
|
$('.highlight').each(function( index ) {
|
|
seln+='<div fname="' + $(this).attr('fname') + '" yr="' + $(this).attr('yr') +
|
|
'" date="' + $(this).attr('date') +
|
|
'" class="px-1 col col-auto">' + $(this).children().parent().html() + '</div>'
|
|
seln+='<input type="hidden" name="eid-'+index+'" value="'+$(this).attr('id')+'">'
|
|
} )
|
|
return '<div class="row col-12">'+seln+'</div>'
|
|
}
|
|
|
|
// return a list of eid=<id> for each selected thumbnail
|
|
function GetSelnAsData()
|
|
{
|
|
to_del=''
|
|
$('.highlight').each(function( index ) { to_del+='&eid-'+index+'='+$(this).attr('id') } )
|
|
return to_del
|
|
}
|
|
|
|
// use an ajax POST to force an AI scan on the selected image(s)
|
|
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){ CheckForJobs() } })
|
|
}
|
|
|
|
// code to change the associated image/icon when the move to selection box (import or storage paths) is changed
|
|
function change_rp_sel()
|
|
{
|
|
icon_url = $('option:selected', '#rp_sel').attr('icon_url')
|
|
$('#move_path_icon').html( '<svg id="move_path_icon" width="20" height="20" fill="currentColor"><use xlink:href="'
|
|
+ icon_url + '"></svg>' )
|
|
seld_ptype=$('option:selected', '#rp_sel').attr('path_type')
|
|
$('#move_path_type').val( seld_ptype )
|
|
// clear all 'existing' buttons
|
|
$('.move_Import').addClass('d-none')
|
|
$('.move_Storage').addClass('d-none')
|
|
// show just selected path's (relevant) buttons
|
|
$('.move_'+seld_ptype).removeClass('d-none')
|
|
}
|
|
|
|
// POST to see if there are any other existing directories named around this date
|
|
// (if so display them as options for a move)
|
|
function GetExistingDirsAsDiv( dt, divname, ptype )
|
|
{
|
|
$.ajax({
|
|
type: 'POST', data: null, url: '/get_existing_paths/'+dt,
|
|
success: function(data) {
|
|
$('#'+divname).html(data)
|
|
dirs = JSON.parse(data)
|
|
s=''
|
|
dirs.forEach( function(item, index) {
|
|
if( item.ptype != ptype )
|
|
vis = 'd-none '
|
|
else
|
|
vis = ''
|
|
s+= '<button class="btn btn-outline-primary move_'+item.ptype+ ' ' + vis + '" '
|
|
s+= 'onClick="$(\'#prefix\').val(\''+item.prefix.replace("\'","\\\'")+'\'); '
|
|
s+='$(\'#suffix\').val(\''+item.suffix.replace("\'","\\\'")+'\');return false;">'
|
|
s+=item.prefix+item.suffix
|
|
s+='</button>'
|
|
} )
|
|
if( s == '' )
|
|
$('#existing').html('')
|
|
else
|
|
$('#move_'+ptype).removeClass('invisible')
|
|
$('#'+divname).html(s)
|
|
}
|
|
} )
|
|
}
|
|
|
|
// wrapper to do some clean up before POST to /move_files or /delete_files
|
|
// used to remove the highlighted item(s) && reset the numbering so highlighting continues to work
|
|
function MoveOrDelCleanUpUI()
|
|
{
|
|
// remove the images being moved (so UI immediately 'sees' the move)
|
|
$("[name^=eid-]").each( function() { $('#'+$(this).attr('value')).remove() } )
|
|
// reorder the images via ecnt again, so future highlighting can work
|
|
document.mf_id=0; $('.figure').each( function() { $(this).attr('ecnt', document.mf_id ); document.mf_id++ } )
|
|
$('#dbox').modal('hide')
|
|
}
|
|
|
|
|
|
// show the DBox for a move file, includes all thumbnails of selected files to move
|
|
// and a pre-populated folder to move them into, with text field to add a suffix
|
|
function MoveDBox(path_details)
|
|
{
|
|
$('#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">
|
|
<input id="move_path_type" name="move_path_type" type="hidden"
|
|
`
|
|
div += ' value="' + path_details[0].type.name + '"></input>'
|
|
div+=GetSelnAsDiv()
|
|
yr=$('.highlight').first().attr('yr')
|
|
dt=$('.highlight').first().attr('date')
|
|
div+='<div class="row">Use Existing Directory (in the chosen path):</div><div id="existing"></div>'
|
|
GetExistingDirsAsDiv( dt, "existing", path_details[0].type.name )
|
|
div+=`
|
|
<div class="input-group my-3">
|
|
<alert class="alert alert-primary my-auto py-1">
|
|
`
|
|
// NB: alert-primary here is a hack to get the bg the same color as the alert primary by
|
|
div+= '<svg id="move_path_icon" width="20" height="20" fill="currentColor"><use xlink:href="' + path_details[0].icon_url + '"></svg>'
|
|
div+= '<select id="rp_sel" name="rel_path" class="text-primary alert-primary py-1 border border-primary rounded" onChange="change_rp_sel()">'
|
|
for(p of path_details) {
|
|
div+= '<option path_type="'+p.type.name+'" icon_url="'+p.icon_url+'">'+p.root_dir+'</option>'
|
|
}
|
|
div+= '</select>'
|
|
div+=`
|
|
</alert>
|
|
<input id="prefix" type="text" name="prefix" class="text-primary text-right form-control"
|
|
`
|
|
div+="value="+yr+'/'+dt+"-"
|
|
div+=`
|
|
"></input>
|
|
<input id="suffix" type="text" name="suffix" class="form-control" placeholder="name"> </input>
|
|
</div>
|
|
<div class="form-row col-12 mt-2">
|
|
<button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-1 col-2">Cancel</button>
|
|
<button id="move_submit" onClick="MoveOrDelCleanUpUI(); $.ajax({ type: 'POST', data: $('#mv_fm').serialize(), url: '/move_files', success: function(data) {
|
|
if( $(location).attr('pathname').match('search') !== null ) { window.location='/' }; CheckForJobs() } }); return false" class="btn btn-outline-primary col-2">Ok</button>
|
|
</div>
|
|
</form>
|
|
`
|
|
|
|
$('#dbox-content').html(div)
|
|
$('#dbox').modal('show')
|
|
$("#prefix").keypress(function (e) { if (e.which == 13) { $("#move_submit").click(); return false; } } )
|
|
$("#suffix").keypress(function (e) { if (e.which == 13) { $("#move_submit").click(); return false; } } )
|
|
}
|
|
|
|
// show the DBox for a delete/restore file, includes all thumbnails of selected files
|
|
// with appropriate coloured button to Delete or Restore files`
|
|
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 mt-3">
|
|
<button onClick="$('#dbox').modal('hide')" class="btn btn-outline-secondary col-2">Cancel</button>
|
|
`
|
|
div+=`
|
|
<button onClick="MoveOrDelCleanUpUI(); $.ajax({ type: 'POST', data: to_del, url:
|
|
`
|
|
if( del_or_undel == "Delete" )
|
|
div+=`
|
|
'/delete_files',
|
|
success: function(data){
|
|
if( $(location).attr('pathname').match('search') !== null || document.viewing ) { window.location='/' }; CheckForJobs() } }); return false" class="btn btn-outline-danger col-2">Ok</button>
|
|
</div>
|
|
`
|
|
else
|
|
// just force page reload to / for now if restoring files from a search path -- a search (by name)
|
|
// would match the deleted/restored file, so it would be complex to clean up the UI (and can't reload, as DB won't be changed yet)
|
|
div+=`
|
|
'/restore_files',
|
|
success: function(data){
|
|
if( $(location).attr('pathname').match('search') !== null || document.viewing ) { window.location='/' }; CheckForJobs() } }); return false" class="btn btn-outline-success col-2">Ok</button>
|
|
</div>
|
|
`
|
|
$('#dbox-content').html(div)
|
|
$('#dbox').modal('show')
|
|
}
|
|
|
|
// show the DBox for a lame quick version of file details
|
|
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')
|
|
}
|
|
|
|
|
|
// DoSel is called when a click event occurs, and sets the selection via adding
|
|
// 'highlight' to the class of the appropriate thumbnails
|
|
// 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 || document.fake_ctrl === 1 )
|
|
{
|
|
$(el).toggleClass('highlight')
|
|
if( document.fake_ctrl === 1 )
|
|
document.fake_ctrl=0
|
|
return
|
|
}
|
|
if( e.shiftKey || document.fake_shift === 1 )
|
|
{
|
|
st=Number($('.highlight').first().attr('ecnt'))
|
|
end=Number($('.highlight').last().attr('ecnt'))
|
|
clicked=Number($(el).attr('ecnt'))
|
|
// 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')
|
|
|
|
if( document.fake_shift === 1 )
|
|
document.fake_shift=0
|
|
return
|
|
}
|
|
$('.highlight').removeClass('highlight')
|
|
$(el).addClass('highlight')
|
|
}
|
|
|
|
// if a selection exists, enable move & del/restore buttons otherwise disable them
|
|
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 )
|
|
}
|
|
}
|
|
|
|
// Check if the set of highlights are either only figures, dirs or both
|
|
// used to work out what options are shown in the file context menu
|
|
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"
|
|
}
|
|
|
|
// Check if the set of highlights contain Bin and Not Bin...
|
|
// if its both, then no del/restore is possible in context menu
|
|
// otherwise can either set del or restore appropriately
|
|
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
|
|
}
|
|
|
|
// checks to see if there is no selection active
|
|
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
|
|
}
|
|
|
|
/**
|
|
* Renders a group header or entry based on the object and options.
|
|
* obj - The object containing file/directory details.
|
|
* last - Tracks the last printed group (e.g., { printed: null }).
|
|
* ecnt - Entry counter (e.g., { val: 0 }).
|
|
* returns {string} - Generated HTML string.
|
|
*/
|
|
function addFigure( obj, last, ecnt)
|
|
{
|
|
let html = "";
|
|
|
|
// Grouping logic
|
|
if (OPT.grouping === "Day") {
|
|
if (last.printed !== obj.file_details.day) {
|
|
html += `<div class="row ps-3"><h6>Day: ${obj.file_details.day} of ${obj.file_details.month}/${obj.file_details.year}</h6></div>`;
|
|
last.printed = obj.file_details.day;
|
|
}
|
|
} else if (OPT.grouping === "Week") {
|
|
if (last.printed !== obj.file_details.woy) {
|
|
html += `<div class="row ps-3"><h6>Week #: ${obj.file_details.woy} of ${obj.file_details.year}</h6></div>`;
|
|
last.printed = obj.file_details.woy;
|
|
}
|
|
} else if (OPT.grouping === "Month") {
|
|
if (last.printed !== obj.file_details.month) {
|
|
html += `<div class="row ps-3"><h6>Month: ${obj.file_details.month} of ${obj.file_details.year}</h6></div>`;
|
|
last.printed = obj.file_details.month;
|
|
}
|
|
}
|
|
|
|
// Image/Video/Unknown entry
|
|
if (obj.type.name === "Image" || obj.type.name === "Video" || obj.type.name === "Unknown") {
|
|
const pathType = obj.in_dir.in_path.type.name;
|
|
const size = obj.file_details.size_mb;
|
|
const hash = obj.file_details.hash;
|
|
const inDir = `${obj.in_dir.in_path.path_prefix}/${obj.in_dir.rel_path}`;
|
|
const fname = obj.name;
|
|
const yr = obj.file_details.year;
|
|
const date = `${yr}${String(obj.file_details.month).padStart(2, '0')}${String(obj.file_details.day).padStart(2, '0')}`;
|
|
const prettyDate = `${obj.file_details.day}/${obj.file_details.month}/${obj.file_details.year}`;
|
|
const type = obj.type.name;
|
|
|
|
html += `
|
|
<figure id="${obj.id}" ecnt="${ecnt}" class="col col-auto g-0 figure entry m-1"
|
|
path_type="${pathType}" size="${size}" hash="${hash}" in_dir="${inDir}"
|
|
fname="${fname}" yr="${yr}" date="${date}" pretty_date="${prettyDate}" type="${type}">
|
|
${renderMedia(obj)}
|
|
</figure>
|
|
`;
|
|
}
|
|
// Directory entry
|
|
else if (obj.type.name === "Directory" && OPT.folders) {
|
|
const dirname = obj.dir_details.rel_path.length
|
|
? `${obj.dir_details.in_path.path_prefix}/${obj.dir_details.rel_path}`
|
|
: obj.dir_details.in_path.path_prefix;
|
|
|
|
html += `
|
|
<figure class="col col-auto g-0 dir entry m-1" id="${obj.id}" ecnt="${ecnt}" dir="${dirname}" type="Directory">
|
|
<svg class="svg" width="${OPT.size - 22}" height="${OPT.size - 22}" fill="currentColor">
|
|
<use xlink:href="/internal/icons.svg#Directory"></use>
|
|
</svg>
|
|
<figcaption class="svg_cap figure-caption text-center text-wrap text-break">${obj.name}</figcaption>
|
|
</figure>
|
|
`;
|
|
html += `<script>f=$('#${obj.id}'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>`;
|
|
}
|
|
|
|
$('#figures').append( html )
|
|
return
|
|
}
|
|
|
|
// Helper function to render media (image/video/unknown)
|
|
function renderMedia(obj) {
|
|
const isImageOrUnknown = obj.type.name === "Image" || obj.type.name === "Unknown";
|
|
const isVideo = obj.type.name === "Video";
|
|
const path = `${obj.in_dir.in_path.path_prefix}/${obj.in_dir.rel_path}/${obj.name}`;
|
|
const thumb = obj.file_details.thumbnail
|
|
? `<a href="${path}"><img alt="${obj.name}" class="thumb" height="${OPT.size}" src="data:image/jpeg;base64,${obj.file_details.thumbnail}"></a>`
|
|
: `<a href="${path}"><svg width="${OPT.size}" height="${OPT.size}" fill="white"><use xlink:href="/internal/icons.svg#unknown_ftype"/></svg></a>`;
|
|
|
|
let mediaHtml = `<div style="position:relative; width:100%">${thumb}`;
|
|
|
|
if (isImageOrUnknown) {
|
|
if (OPT.search_term) {
|
|
mediaHtml += `
|
|
<div style="position:absolute; bottom: 0px; left: 2px;">
|
|
<svg width="16" height="16" fill="white"><use xlink:href="/internal/icons.svg#${getLocationIcon(obj)}"/></svg>
|
|
</div>
|
|
`;
|
|
}
|
|
mediaHtml += `
|
|
<div id="s${obj.id}" style="display:none; position:absolute; top: 50%; left:50%; transform:translate(-50%, -50%);">
|
|
<img height="64px" src="/internal/throbber.gif">
|
|
</div>
|
|
`;
|
|
} else if (isVideo) {
|
|
mediaHtml += `
|
|
<div style="position:absolute; top: 0px; left: 2px;">
|
|
<svg width="16" height="16" fill="white"><use xlink:href="/internal/icons.svg#film"/></svg>
|
|
</div>
|
|
`;
|
|
if (OPT.search_term) {
|
|
mediaHtml += `
|
|
<div style="position:absolute; bottom: 0px; left: 2px;">
|
|
<svg width="16" height="16" fill="white"><use xlink:href="/internal/icons.svg#${getLocationIcon(obj)}"/></svg>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
mediaHtml += `</div>`;
|
|
return mediaHtml;
|
|
}
|
|
|
|
// Helper: Get location icon (placeholder)
|
|
function getLocationIcon(obj) {
|
|
return ICON[obj.in_dir.in_path.type.name]
|
|
}
|
|
|
|
// POST to get entry ids, and then getPage for a specified directory
|
|
function getDirEntries(dir_id, back)
|
|
{
|
|
data={}
|
|
data.dir_id=dir_id
|
|
data.back=back
|
|
data.noo=OPT.noo
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '/get_dir_eids',
|
|
data: JSON.stringify(data),
|
|
contentType: 'application/json',
|
|
dataType: 'json',
|
|
success: function(res) {
|
|
if( res.valid === false )
|
|
{
|
|
$('#figures').html( "<alert class='alert alert-danger'>ERROR! directory has changed since you loaded this view. You have to reload and reset your view (probably someone deleted the directory or its parent since you loaded this page)" )
|
|
return
|
|
}
|
|
entryList=res.entry_list
|
|
pageList=entryList.slice(0, OPT.how_many)
|
|
// now go get actual data/entries
|
|
getPage(1,getPageFigures)
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error("Error:", error);
|
|
}
|
|
});
|
|
}
|
|
|
|
// this function draws all the figures from document.entries - called when we
|
|
// change pages, but also when we change say grouping/other OPTs
|
|
function drawPageOfFigures()
|
|
{
|
|
$('#figures').empty()
|
|
var last = { printed: null }
|
|
var ecnt=0
|
|
|
|
// something is up, let the user know
|
|
if( document.alert )
|
|
$('#figures').append( document.alert )
|
|
|
|
if( OPT.folders )
|
|
{
|
|
// it root_eid is 0, then no entries in this path - cant go up
|
|
if( OPT.root_eid == 0 || (document.entries.length && document.entries[0].in_dir.eid == OPT.root_eid ) )
|
|
{
|
|
gray="_gray"
|
|
back=""
|
|
cl=""
|
|
back_id=0
|
|
}
|
|
else
|
|
{
|
|
gray=""
|
|
back="Back"
|
|
cl="back"
|
|
if( document.entries.length > 0 )
|
|
back_id = document.entries[0].in_dir.eid
|
|
else
|
|
back_id = document.back_id
|
|
}
|
|
// back button, if gray/back decide if we see grayed out folder and/or the name of the folder we go back to
|
|
// with clas "back" this gets a different click handler which flags server to return data by 'going back/up' in dir tree
|
|
// we give the server the id of the first item on the page so it can work out how to go back
|
|
html=`<div class="col col-auto g-0 m-1">
|
|
<figure id="${back_id}" ecnt="0" class="${cl} entry m-1" type="Directory">
|
|
<svg class="svg" width="${OPT.size-22}" height="${OPT.size-22}">
|
|
<use xlink:href="internal/icons.svg#folder_back${gray}"/>
|
|
</svg>
|
|
<figcaption class="figure-caption text-center">${back}</figcaption>
|
|
</figure>
|
|
</div>`
|
|
ecnt++
|
|
$('#figures').append(html)
|
|
}
|
|
for (const obj of document.entries) {
|
|
addFigure( obj, last, ecnt )
|
|
ecnt++
|
|
}
|
|
if( document.entries.length == 0 )
|
|
if( OPT.search_term )
|
|
$('#figures').append( `<span class="alert alert-danger p-2 col-auto"> No matches for: '${OPT.search_term}'</span>` )
|
|
else if( OPT.root_eid == 0 )
|
|
$('#figures').append( `<span class="alert alert-danger p-2 col-auto d-flex align-items-center">No files in Path!</span>` )
|
|
$('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return false; });
|
|
$('.figure').dblclick( function(e) { startViewing( $(this).attr('id') ) } )
|
|
// for dir, getDirEntries 2nd param is back (or "up" a dir)
|
|
$(".dir").click( function(e) { document.back_id=this.id; getDirEntries(this.id,false) } )
|
|
$(".back").click( function(e) { getDirEntries(this.id,true) } )
|
|
}
|
|
|
|
// emtpy out file_list_div, and repopulate it with new page of content
|
|
function getPageFileList(res, viewingIdx)
|
|
{
|
|
$('#file_list_div').empty()
|
|
|
|
// something is up, let the user know
|
|
if( document.alert )
|
|
$('#file_list_div').append( '<div class="row">' + document.alert + '</div>' )
|
|
|
|
if( OPT.root_eid == 0 )
|
|
{
|
|
$('#file_list_div').append( `<span class="alert alert-danger p-2">No files in Path!</span>` )
|
|
return
|
|
}
|
|
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 to get the 'page' of entry ids out of entryList
|
|
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
|
|
$('#la').prop('disabled', true)
|
|
$('#ra').prop('disabled', true)
|
|
const startIndex = (pageNumber - 1) * OPT.how_many;
|
|
const endIndex = startIndex + OPT.how_many;
|
|
pageList = entryList.slice(startIndex, endIndex);
|
|
|
|
// set up data to send to server to get the entry data for entries in pageList
|
|
data={}
|
|
data.ids = pageList
|
|
|
|
// assume nothing wrong, but if the data goes odd, then this will be non-null and displayed later (cant add here, as later code does .empty() of file divs)
|
|
document.alert=null
|
|
|
|
$.ajax({
|
|
type: 'POST', url: '/get_entries_by_ids',
|
|
data: JSON.stringify(data), contentType: 'application/json',
|
|
dataType: 'json',
|
|
success: function(res) {
|
|
if( res.length != pageList.length )
|
|
document.alert="<alert class='alert alert-warning'>WARNING: something in data has changed since viewing this page (likely someone deleted content in another view), strongly suggest a page reload to get the latest data</alert>"
|
|
|
|
document.entries=res;
|
|
successCallback(res,viewingIdx)
|
|
resetNextPrevButtons()
|
|
// if search, disable folders
|
|
if( OPT.search_term )
|
|
$('#folders').prop('disabled', 'disabled').removeClass('border-info').addClass('border-secondary').removeClass('text-info').addClass('text-secondary');
|
|
else if( document.entries.length == 0 )
|
|
{
|
|
html=`<span class="alert alert-danger p-2 col-auto">No files in Path</span>`
|
|
$('#file_list_div').append(html)
|
|
$('#figures').append(html)
|
|
}
|
|
},
|
|
error: function(xhr, status, error) { console.error("Error:", error); } });
|
|
return
|
|
}
|
|
|
|
// Quick Function to check if we are on the first page
|
|
function isFirstPage(pageNumber)
|
|
{
|
|
return pageNumber <= 1;
|
|
}
|
|
|
|
// Function to check if we are on the last page
|
|
function isLastPage(pageNumber)
|
|
{
|
|
const totalPages = Math.ceil(entryList.length / OPT.how_many);
|
|
return pageNumber >= totalPages;
|
|
}
|
|
|
|
// given an id in the list, return which page we are on (page 1 is first page)
|
|
function getPageNumberForId(id) {
|
|
const idx = entryList.indexOf(id);
|
|
// should be impossible but jic
|
|
if (idx === -1) { return -1 }
|
|
return Math.floor(idx / OPT.how_many) + 1;
|
|
}
|
|
|
|
// if we are on first page, disable prev, it not ensure next is enabled
|
|
// if we are on last page, disable next, it not ensure prev is enabled
|
|
function resetNextPrevButtons()
|
|
{
|
|
// no data, so disabled both
|
|
if( getPageNumberForId(pageList[0]) == -1 )
|
|
{
|
|
$('.prev').prop('disabled', true).addClass('disabled');
|
|
$('.next').prop('disabled', true).addClass('disabled');
|
|
return
|
|
}
|
|
if ( isFirstPage( getPageNumberForId(pageList[0]) ) )
|
|
$('.prev').prop('disabled', true).addClass('disabled');
|
|
else
|
|
$('.prev').prop('disabled', false).removeClass('disabled');
|
|
|
|
if ( isLastPage( getPageNumberForId(pageList[0]) ) )
|
|
$('.next').prop('disabled', true).addClass('disabled');
|
|
else
|
|
$('.next').prop('disabled', false).removeClass('disabled');
|
|
}
|
|
|
|
// get list of eids for the next page, also make sure next/prev buttons make sense for page we are on
|
|
function nextPage(successCallback)
|
|
{
|
|
// pageList[0] is the first entry on this page
|
|
const currentPage=getPageNumberForId( pageList[0] )
|
|
// should never happen / just return pageList unchanged
|
|
if ( currentPage === -1 || isLastPage( currentPage ) )
|
|
{
|
|
console.error( "WARNING: seems first on pg=" + pageList[0] + " of how many=" + OPT.how_many + " gives currentPage=" + currentPage + " and we cant go next page?" )
|
|
return
|
|
}
|
|
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(successCallback)
|
|
{
|
|
// pageList[0] is the first entry on this page
|
|
const currentPage=getPageNumberForId( pageList[0] )
|
|
// should never happen / just return pageList unchanged
|
|
if (currentPage === 1 || currentPage === -1 )
|
|
{
|
|
console.error( "WARNING: seems first on pg=" + pageList[0] + " of how many=" + OPT.how_many + " gives currentPage=" + currentPage + " and we cant go prev page?" )
|
|
return
|
|
}
|
|
getPage( currentPage-1, successCallback )
|
|
return
|
|
}
|
|
|
|
// function to see if we are on a phone or tablet (where we dont have ctrl or shift keys - helps to display fake buttons to allow multiselect on mobiles)
|
|
function isMobile() {
|
|
try{ document.createEvent("TouchEvent"); return true; }
|
|
catch(e){ return false; }
|
|
}
|
|
|
|
// when we change one of the options (noo, how_many, folders) - then update '{how_many} files' str,
|
|
// tweak noo menu for folders/flat view then reset the page contents based on current OPT values
|
|
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=$('input[name="size"]:checked').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( ` ${OPT.how_many} files ` )
|
|
OPT.size=parseInt(OPT.size)
|
|
getPage(1,successCallback)
|
|
}
|
|
})
|
|
}
|
|
|
|
// function to change the size of thumbnails when user clicks xs/s/m/l/xl buttons
|
|
function changeSize()
|
|
{
|
|
sz=$('input[name="size"]:checked').val();
|
|
OPT.size=sz
|
|
$('.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);
|
|
}
|
|
|
|
// different context menu on files
|
|
$.contextMenu({
|
|
selector: '.entry',
|
|
itemClickEvent: "click",
|
|
build: function($triggerElement, e) {
|
|
// when right-clicking & no selection add one OR deal with ctrl/shift right-lick as it always changes seln
|
|
if( NoSel() || e.ctrlKey || e.shiftKey )
|
|
{
|
|
DoSel(e, e.currentTarget )
|
|
SetButtonState();
|
|
}
|
|
|
|
if( FiguresOrDirsOrBoth() == "figure" )
|
|
{
|
|
item_list = {
|
|
details: { name: "Details..." },
|
|
view: { name: "View File" },
|
|
sep: "---",
|
|
}
|
|
if( e.currentTarget.getAttribute('type') == 'Image' )
|
|
{
|
|
item_list['transform'] = {
|
|
name: "Transform",
|
|
items: {
|
|
"r90": { "name" : "Rotate 90 degrees" },
|
|
"r180": { "name" : "Rotate 180 degrees" },
|
|
"r270": { "name" : "Rotate 270 degrees" },
|
|
"fliph": { "name" : "Flip horizontally" },
|
|
"flipv": { "name" : "Flip vertically" }
|
|
}
|
|
}
|
|
|
|
}
|
|
item_list['move'] = { name: "Move selected file(s) to new folder" }
|
|
item_list['sep2'] = { sep: "---" }
|
|
}
|
|
else
|
|
item_list = {
|
|
move: { name: "Move selection(s) to new folder" }
|
|
}
|
|
|
|
item_list['ai'] = {
|
|
name: "Scan file for faces",
|
|
items: {
|
|
"ai-all": { name: "all" }
|
|
}
|
|
};
|
|
|
|
// Dynamically add entries for each person in the `people` array
|
|
people.forEach(person => {
|
|
item_list['ai'].items[`ai-${person.tag}`] = { name: person.tag };
|
|
});
|
|
|
|
if( SelContainsBinAndNotBin() ) {
|
|
item_list['both']= { name: 'Cannot delete and restore at same time', disabled: true }
|
|
} else {
|
|
if (e.currentTarget.getAttribute('path_type') == 'Bin' )
|
|
item_list['undel']= { name: "Restore selected file(s)" }
|
|
else if( e.currentTarget.getAttribute('type') != 'Directory' )
|
|
item_list['del']= { name: "Delete Selected file(s)" }
|
|
}
|
|
|
|
return {
|
|
callback: function( key, options) {
|
|
if( key == "details" ) { DetailsDBox() }
|
|
if( key == "view" ) { startViewing( $(this).attr('id') ) }
|
|
if( key == "move" ) { MoveDBox(move_paths) }
|
|
if( key == "del" ) { DelDBox('Delete') }
|
|
if( key == "undel") { DelDBox('Restore') }
|
|
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) }
|
|
// dont flow this event through the dom
|
|
e.stopPropagation()
|
|
},
|
|
items: item_list
|
|
};
|
|
}
|
|
});
|
|
|
|
// finally, for files_ip/files_sp/files_rbp - set click inside document (NOT an entry) to remove seln
|
|
$(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });
|