ddp/photoassistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated BUGs in general to remove older / fixed BUGs relating to the confusion of current/eids, etc.

Browse Source 
update amendments in tables.sql to include job_id in entry_ammendment
added amend.py to move amendment-related code into its own file when we create a job (NewJob)
  and that job matches an amendmentType (via job_name or job_name:amt <- where amt relates to how we do a transform_image), then
  we enter a new EntryAmendment pa_job_mgr knows when a Transform job ends, and removes relevant EntryAmendment
files*.js use EntryAmendment data to render thumbnails with relevant AmendmentType
if a normal page load (like /files_ip), and there is an EntryAmendment, mark up the thumb, run the check jobs to look for completion of the job,
  removeal of the EntryAmendment and update the entry based on 'transformed' image

OVERALL: this is a functioning version that uses EntryAmendments and can handle loading a new page with outstanding amendments
  and 'deals' with it.  This is a good base, but does not cater for remove_files or move_files
This commit is contained in:
Damien De Paoli
2025-10-20 19:31:57 +11:00
parent 905910ecf0
commit 56771308a6
8 changed files with 203 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
internal/js/files_support.js
View File

@@ -94,7 +94,7 @@ 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++ } )
// document.mf_id=0; $('.figure').each( function() { $(this).attr('ecnt', document.mf_id ); document.mf_id++ } )
$('#dbox').modal('hide')
}
@@ -354,34 +354,27 @@ function NoSel() {
return true
}
// quick wrapper to add a single <figure> to the #figures div
function addFigure( obj )
{
html=createFigureHtml( obj )
$('#figures').append( html )
}
/**
* 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 )
function createFigureHtml( obj )
{
let html = "";
// if am is null, no amendment for this obj, otherwise we have one
var am=null
for (const tmp of document.amendments)
if( tmp.eid == obj.id )
am=tmp
// 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;
}
}
let html = "";
// Image/Video/Unknown entry
if (obj.type.name === "Image" || obj.type.name === "Video" || obj.type.name === "Unknown") {
@@ -395,13 +388,27 @@ function addFigure( obj, last, ecnt )
const prettyDate = `${obj.file_details.day}/${obj.file_details.month}/${obj.file_details.year}`;
const type = obj.type.name;
// if amendment for this obj, do not add entry class - prevents highlighting
if( am ) {
ent=""
gs="style='filter: grayscale(100%);'"
am_html ='<img class="position-absolute top-50 start-50 translate-middle" height="60" src="/internal/white-circle.png">'
am_html +='<img class="position-absolute top-50 start-50 translate-middle" height="64" src="/internal/throbber.gif">'
if( am.type.which == 'icon' )
am_html+=`<svg class="position-absolute top-50 start-50 translate-middle" height="32" style="color:${am.type.colour}" fill="${am.type.colour}"><use xlink:href="/internal/icons.svg#${am.type.what}"></use></svg>`
else
am_html+=`<img class="position-absolute top-50 start-50 translate-middle" src="/internal/${am.type.what}?v={{js_vers['r270']}}" height="32">`
} else {
ent="entry"
gs=""
am_html=""
}
html += `
<figure id="${obj.id}" ecnt="${ecnt}" class="col col-auto g-0 figure entry m-1"
<figure id="${obj.id}" class="col col-auto g-0 figure ${ent} 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>
`;
${renderMedia(obj,gs,am_html)}
</figure>`;
}
// Directory entry
else if (obj.type.name === "Directory" && OPT.folders) {
@@ -410,7 +417,7 @@ function addFigure( obj, last, ecnt )
: 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">
<figure class="col col-auto g-0 dir entry m-1" id="${obj.id}" 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>
@@ -419,66 +426,42 @@ function addFigure( obj, last, ecnt )
`;
html += `<script>f=$('#${obj.id}'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>`;
}
$('#figures').append( html )
// check if there is a pending amendment for this entry, if so mark it up
// (e.g. its being deleted, rotated, etc) - details in the am obj
for (const am of document.amendments)
{
if( am.eid == obj.id )
{
$('#'+obj.id).find('img.thumb').attr('style', 'filter: grayscale(100%);' )
$('#'+obj.id).removeClass('entry')
html='<img class="position-absolute top-50 start-50 translate-middle" height="60" src="/internal/white-circle.png">'
html+='<img class="position-absolute top-50 start-50 translate-middle" height="64" src="/internal/throbber.gif">'
if( am.type.which == 'icon' )
html+=`<svg class="position-absolute top-50 start-50 translate-middle" height="32" style="color:${am.type.colour}" fill="${am.type.colour}"><use xlink:href="/internal/icons.svg#${am.type.what}"></use></svg>`
else
html+=`<img class="position-absolute top-50 start-50 translate-middle" src="/internal/${am.type.what}?v={{js_vers['r270']}}" height="32">`
$('#'+obj.id).find('a').append(html)
// moved the bindings to here as we need to reset them if we recreate this Figure (after a transform job)
html += `<script>
if( "${obj.type.name}" === "Directory" ) {
$("#${obj.id}").click( function(e) { document.back_id=this.id; getDirEntries(this.id,false) } )
} else {
$('#${obj.id}').click( function(e) { DoSel(e, this ); SetButtonState(); return false; });
$('#${obj.id}').dblclick( function(e) { startViewing( $(this).attr('id') ) } )
}
}
return
</script>`
return html
}
// Helper function to render media (image/video/unknown)
function renderMedia(obj) {
function renderMedia(obj,gs,am_html) {
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}"><img alt="${obj.name}" ${gs} 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}`;
let mediaHtml = `<div style="position:relative; width:100%">${thumb}${am_html}`;
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) {
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) {
}
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>`;
@@ -527,7 +510,6 @@ function drawPageOfFigures()
{
$('#figures').empty()
var last = { printed: null }
var ecnt=0
// something is up, let the user know
if( document.alert )
@@ -557,30 +539,41 @@ function drawPageOfFigures()
// 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">
<figure id="${back_id}" 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++
// Grouping logic
if (OPT.grouping === "Day") {
if (last.printed !== obj.file_details.day) {
$('#figures').append(`<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) {
$('#figures').append(`<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) {
$('#figures').append(`<div class="row ps-3"><h6>Month: ${obj.file_details.month} of ${obj.file_details.year}</h6></div>` );
last.printed = obj.file_details.month;
}
}
addFigure( obj )
}
$(".back").click( function(e) { getDirEntries(this.id,true) } )
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
@@ -669,7 +662,14 @@ function getPage(pageNumber, successCallback, viewingIdx=0)
type: 'POST', url: '/get_entries_by_ids',
data: JSON.stringify(data), contentType: 'application/json',
dataType: 'json',
success: function(res) { document.amendments=res.amend; getEntriesByIdSuccessHandler( res.entries, pageNumber, successCallback, viewingIdx ) },
success: function(res) {
document.amendments=res.amend;
// this is only called when we are viewing a page in files/list view, so check for job(s) ending...
for (const tmp of document.amendments) {
CheckTransformJob(tmp.eid,tmp.job_id,handleTransformFiles)
}
getEntriesByIdSuccessHandler( res.entries, pageNumber, successCallback, viewingIdx )
},
error: function(xhr, status, error) { console.error("Error:", error); } });
return
}

73
internal/js/files_transform.js
View File

@@ -1,11 +1,31 @@
// This function will remove the matching amendment for this entry (id)
// can only have 1 ammendment per image, its grayed out for other changes
function removeAmendment( id )
{
document.amendments=document.amendments.filter(obj => obj.eid !== 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 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)
id=parseInt(id)
idx = entryList.indexOf(id)
// replace data for this entry now its been transformed
document.entries[idx]=data.entry
// update cache too
// document.page[getPageNumberForId(id)][howFarIntoPageCache(id)]=data.entry
// FIXME: for now just invalidate whole cache
document.page.length=0
removeAmendment( id )
// redraw into figure html in dom
last={ 'printed': 'not required' }
html = createFigureHtml( data.entry, last, 9999 )
$('#'+id).replaceWith( html )
return false;
}
else
@@ -15,17 +35,15 @@ function handleTransformFiles(data,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
// if not, try again in 1 second... If it has finished then reset the image
// to full colour
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();
removeAmendment( id )
return false;
}
else
@@ -41,7 +59,18 @@ function handleTransformViewing(data,id,job_id)
function CheckTransformJob(id,job_id,successCallback)
{
CheckForJobs()
$.ajax( { type: 'POST', data: '&job_id='+job_id, url: '/check_transform_job', success: function(res) { successCallback(res,id,job_id); } } )
$.ajax( { type: 'POST', data: '&job_id='+job_id, url: '/check_transform_job',
success: function(res) { successCallback(res,id,job_id); } } )
}
// function to add data for document.amendment based on id and amt
// used when we transform several images in files_*, or single image in viewer
function addTransformAmendment(id,amt)
{
am={}
am.eid=parseInt(id)
am.type = document.amendTypes.filter(obj => obj.job_name === 'transform_image:'+amt )[0]
document.amendments.push(am)
}
// for each highlighted image, POST the transform with amt (90, 180, 270,
@@ -55,16 +84,28 @@ function Transform(amt)
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) { grayscale=1; throbber=1; DrawImg(); CheckTransformJob(document.viewing.id,data.job_id,handleTransformViewing); return false; } })
// POST /transform for image, grayscale the image, add throbber, & start checking for end of job
$.ajax({ type: 'POST', data: post_data, url: '/transform', success: function(data) {
addTransformAmendment(document.viewing.id, amt)
DrawImg();
CheckTransformJob(document.viewing.id,data.job_id,handleTransformViewing);
return false;
} })
}
else
{
$('.highlight').each(function( id, e ) {
$('.highlight').each(function( cnt, 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; } })
// POST /transform for image, grayscale the thumbnail, add throbber, & start checking for end of job
$.ajax({ type: 'POST', data: post_data, url: '/transform', success: function(data){
addTransformAmendment(e.id, amt)
last={ 'printed': 'not required' }
idx = pageList.indexOf(parseInt(e.id))
html = createFigureHtml( document.entries[idx], last, 9999 )
$('#'+e.id).replaceWith( html )
CheckTransformJob(e.id,data.job_id,handleTransformFiles);
return false;
} })
} )
}
}