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

now allow files_sp paths to work (and support folders). Highlighting with folders is broken (likely dodgy ecnt). viewing still broken, but basic navigations is finally working with folders now

Browse Source
This commit is contained in:
Damien De Paoli
2025-09-27 12:42:01 +10:00
parent 5842bf2ab8
commit b67f2d9dcb
3 changed files with 126 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
internal/js/files_support.js
View File

@@ -351,6 +351,11 @@ function addFigure( obj, last, ecnt)
last.printed = obj.file_details.month;
}
}
/*
{% if not entry_data %}
<span class="alert alert-danger p-2 col-auto"> No matches for: '{{search_term}}'</span>
{% endif %}
*/
// Image/Video/Unknown entry
if (obj.type.name === "Image" || obj.type.name === "Video" || obj.type.name === "Unknown") {
@@ -384,7 +389,7 @@ function addFigure( obj, last, ecnt)
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="/static/icons.svg#Directory"></use>
<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>
@@ -394,7 +399,6 @@ function addFigure( obj, last, ecnt)
}
$('#figures').append( html )
// console.log( html )
return
}
@@ -405,7 +409,7 @@ function renderMedia(obj) {
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="/static/icons.svg#unknown_ftype"/></svg></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}`;
@@ -413,25 +417,25 @@ function renderMedia(obj) {
if (OPT.search_term) {
mediaHtml += `
<div style="position:absolute; bottom: 0px; left: 2px;">
<svg width="16" height="16" fill="white"><use xlink:href="/static/icons.svg#${getLocationIcon(obj)}"/></svg>
<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="/static/throbber.gif">
<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="/static/icons.svg#film"/></svg>
<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="/static/icons.svg#${getLocationIcon(obj)}"/></svg>
<svg width="16" height="16" fill="white"><use xlink:href="/internal/icons.svg#${getLocationIcon(obj)}"/></svg>
</div>
`;
}
@@ -452,6 +456,31 @@ 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
$.ajax({
type: 'POST',
url: '/get_dir_entries',
data: JSON.stringify(data), // Stringify the data
contentType: 'application/json', // Set content type
dataType: 'json', // Expect JSON response
success: function(res) {
document.entries=res
if( back )
document.back_id = res[0].in_dir.eid
drawPageOfFigures()
},
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()
@@ -459,11 +488,44 @@ function drawPageOfFigures()
$('#figures').empty()
var last = { printed: null }
var ecnt=0
if( OPT.folders )
{
if( document.entries.length && document.entries[0].in_dir.rel_path == '' )
{
gray="_gray"
back=""
cl=""
}
else
{
gray=""
back="Back"
cl="back"
}
// back button, if gray/back decide if we see grayed out folder and/or the name of the folder we go back to
html=`<div class="col col-auto g-0 m-1">
<figure id="${document.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>`
/*
<script>f=$('#_back'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>
*/
$('#figures').append(html)
}
for (const obj of document.entries) {
addFigure( obj, last, ecnt )
ecnt++
}
$('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return false; });
$('.figure').dblclick( CallViewRouteWrapper )
// 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) } )
}
// Function to get the 'page' of entry ids out of entryList