From 5842bf2ab8c4b3cf40be07b2072bf9d0ab0d9990 Mon Sep 17 00:00:00 2001 From: Damien De Paoli Date: Sat, 27 Sep 2025 00:31:42 +1000 Subject: [PATCH] set OPT values in jscript in files.html, added functions to draw figures on a page based on pageList (subset of entryList) & json data, and tweaked just grouping select as well to also use the draw figures func() in jscript. Needed to move out .figure click handler into the draw figures too. This is now semi-functional, images load, pages next/prev works, grouping works -- BUT only for files_ip -- folders wont work, search wont work, files_sp wont work, viewing a file wont work --- internal/js/files_support.js | 182 +++++++++++++++++++++++++++++++++-- templates/files.html | 18 +++- 2 files changed, 185 insertions(+), 15 deletions(-) diff --git a/internal/js/files_support.js b/internal/js/files_support.js index 17cfdea..7881205 100644 --- a/internal/js/files_support.js +++ b/internal/js/files_support.js @@ -1,3 +1,9 @@ +// GLOBAL ICON array +ICON={} +ICON["Import"]="import" +ICON["Storage"]="db" +ICON["Bin"]="trash" + // grab all selected thumbnails and return a
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 @@ -317,20 +323,176 @@ function NoSel() { return true } -function handlePageOfData() +/** + * Renders a group header or entry based on the object and options. + * @param {Object} obj - The object containing file/directory details. + * @param {Object} last - Tracks the last printed group (e.g., { printed: null }). + * @param {Object} ecnt - Entry counter (e.g., { val: 0 }). + * @returns {string} - Generated HTML string. + */ +function addFigure( obj, last, ecnt) { - // FIXME: this should get back a json'd array of entries, and I can/should - // use this to redraw the figures dynamically on the page + let html = ""; + + // Grouping logic + if (OPT.grouping === "Day") { + if (last.printed !== obj.file_details.day) { + html += `
Day: ${obj.file_details.day} of ${obj.file_details.month}/${obj.file_details.year}
`; + last.printed = obj.file_details.day; + } + } else if (OPT.grouping === "Week") { + if (last.printed !== obj.file_details.woy) { + html += `
Week #: ${obj.file_details.woy} of ${obj.file_details.year}
`; + last.printed = obj.file_details.woy; + } + } else if (OPT.grouping === "Month") { + if (last.printed !== obj.file_details.month) { + html += `
Month: ${obj.file_details.month} of ${obj.file_details.year}
`; + last.printed = obj.file_details.month; + } + } + + // Image/Video/Unknown entry + if (obj.type.name === "Image" || obj.type.name === "Video" || obj.type.name === "Unknown") { + if (!OPT.folders || isTopLevelFolder(obj.in_dir.in_path.path_prefix + '/' + obj.in_dir.rel_path + '/' + obj.name, OPT.cwd)) { + 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 += ` +
+ ${renderMedia(obj)} +
+ `; + } + } + // 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; + + if (isTopLevelFolder(dirname, OPT.cwd)) { + html += ` +
+ + + +
${obj.name}
+
+ `; + html += ``; + } + } + + $('#figures').append( html ) +// console.log( 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 + ? `${obj.name}` + : ``; + + let mediaHtml = `
${thumb}`; + + if (isImageOrUnknown) { + if (OPT.search_term) { + mediaHtml += ` +
+ +
+ `; + } + mediaHtml += ` + + `; + } else if (isVideo) { + mediaHtml += ` +
+ +
+ `; + if (OPT.search_term) { + mediaHtml += ` +
+ +
+ `; + } + } + + mediaHtml += `
`; + return mediaHtml; +} + +// Helper: Check if path is a top-level folder of cwd +function isTopLevelFolder(path, cwd) { + // Implement your logic here + return true; // Placeholder +} + +// Helper: Get location icon (placeholder) +function getLocationIcon(obj) { + return ICON[obj.in_dir.in_path.type.name] +} + +// 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 + for (const obj of document.entries) { + addFigure( obj, last, ecnt ) + ecnt++ + } + $('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return false; }); +} // Function to get the 'page' of entry ids out of entryList function getPage(pageNumber) { - const startIndex = (pageNumber - 1) * howMany; - const endIndex = startIndex + howMany; + const startIndex = (pageNumber - 1) * OPT.howMany; + const endIndex = startIndex + OPT.howMany; pageList = entryList.slice(startIndex, endIndex); - // FIXME: should POST here to get the data for new pl + + // set up data to send to server to get the entry data for entries in pageList + data={} + data.ids = pageList + data.query = 99999 + + $.ajax({ + type: 'POST', + url: '/get_entries_by_ids', + data: JSON.stringify(data), // Stringify the data + contentType: 'application/json', // Set content type + dataType: 'json', // Expect JSON response + success: function(res) { + document.entries=res + drawPageOfFigures() + }, + error: function(xhr, status, error) { + console.error("Error:", error); + } + }); + return } @@ -343,7 +505,7 @@ function isFirstPage(pageNumber) // Function to check if we are on the last page function isLastPage(pageNumber) { - const totalPages = Math.ceil(entryList.length / howMany); + const totalPages = Math.ceil(entryList.length / OPT.howMany); return pageNumber >= totalPages; } @@ -354,7 +516,7 @@ function getPageNumberForId(id) { if (idx === -1) { return -1; // or null, if you prefer } - return Math.floor(idx / howMany) + 1; + return Math.floor(idx / OPT.howMany) + 1; } // if we are on first page, disable prev, it not ensure next is enabled @@ -380,7 +542,7 @@ function nextPage() // should never happen / just return pageList unchanged if ( currentPage === -1 || isLastPage( currentPage ) ) { - console.log( "WARNING: seems first on pg=" + firstEntryOnPage + " of how many=" + howMany + " gives currentPage=" + currentPage + " and we cant go next page?" ) + console.log( "WARNING: seems first on pg=" + firstEntryOnPage + " of how many=" + OPT.howMany + " gives currentPage=" + currentPage + " and we cant go next page?" ) return } getPage( currentPage+1 ) @@ -396,7 +558,7 @@ function prevPage() // should never happen / just return pageList unchanged if (currentPage === 1 || currentPage === -1 ) { - console.log( "WARNING: seems first on pg=" + firstEntryOnPage + " of how many=" + howMany + " gives currentPage=" + currentPage + " and we cant go prev page?" ) + console.log( "WARNING: seems first on pg=" + firstEntryOnPage + " of how many=" + OPT.howMany + " gives currentPage=" + currentPage + " and we cant go prev page?" ) return } getPage( currentPage-1 ) diff --git a/templates/files.html b/templates/files.html index 064978c..480bf70 100644 --- a/templates/files.html +++ b/templates/files.html @@ -17,15 +17,24 @@ {% endfor %} // GLOBALS - // how many on this page, we can change this and redraw the page to suit (also used heavily in pagination code related to entry and page list) - var howMany = {{OPT.how_many}} + // OPTions set via GUI, will change if we alter drop-downs, etc. in GUI + // TODO: reference these from GUI, so we can finally ditch the form to submit/change them. + // BUT -- must handle noo changing with a form/post as it requires a new ordering + + var OPT={} + OPT.grouping='{{OPT.grouping}}' + OPT.cwd='{{OPT.cwd}}' + OPT.search_term='{{OPT.orig_search_term}}' + OPT.folders="{{OPT.folders}}" === "True" + OPT.howMany={{OPT.how_many}} + OPT.size={{OPT.size}} // this is the list of entry ids for the images for ALL matches for this query var entryList={{query_data.entry_list}} // pageList is just those entries shown on this page from the full entryList var pageList=[] - // force pageList to the first page + // force pageList to set pageList for & render the first page getPage(1) @@ -61,7 +70,7 @@ {% else %} {{CreateFoldersSelect( OPT.folders )|safe }} grouped by: - {{CreateSelect( "grouping", OPT.grouping, ["None", "Day", "Week", "Month"], "", "rounded-end")|safe }} + {{CreateSelect( "grouping", OPT.grouping, ["None", "Day", "Week", "Month"], "OPT.grouping=$('#grouping').val();drawPageOfFigures();return false", "rounded-end")|safe }} {% endif %}
@@ -287,7 +296,6 @@