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 @@