removed __repr__ from classes in files.py, and added in sqlalchemy class and marshmallow schemas for entry amendments, then load amendments on get_entry_by_id - so any page load (first or next/prev) will see amendments, we then display them into the files list and now add a white circle inside the throbber and overlay that with approrpiate icon/image - all of which is taken from amendment type and eid. tables.sql also updated to create the amendment data, tweaked icons.svg to remove hardcoded-colours for flip_[vh]

internal/js/files_support.js

@@ -213,44 +213,82 @@ function DetailsDBox()
 }
 
 
-// DoSel is called when a click event occurs, and sets the selection via adding
+// 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')
+// shift-click to add all elements between highlighted area and clicked el,
+// whether you click before highlight or after, or inside a gap and then back
+// or forward to the closest higlighted entry - also, only works on entry class,
+// so it ignores figures that we take entry off while we transform, etc it
+function DoSel(e, el) {
+    const id = $(el).attr('id');
+    const entries = $('.entry');
 
-        if( document.fake_shift === 1 )
-            document.fake_shift=0
-        return
+    // Collect currently highlighted entries
+    const currentHighlights = $('.highlight');
+    const highlighted = new Set();
+    currentHighlights.each(function() {
+        highlighted.add($(this).attr('id'));
+    });
+
+    // Ctrl+click: toggle highlight for the clicked entry
+    if (e.ctrlKey || document.fake_ctrl === 1) {
+        $(el).toggleClass('highlight');
+        if (highlighted.has(id)) {
+            highlighted.delete(id);
+        } else {
+            highlighted.add(id);
+        }
+        if (document.fake_ctrl === 1) {
+            document.fake_ctrl = 0;
+        }
+        return;
+    }
+    // Shift+click: select a range
+    else if (e.shiftKey || document.fake_shift === 1) {
+        if (currentHighlights.length === 0) {
+            // If no highlights, just highlight the clicked entry
+            $(el).addClass('highlight');
+            highlighted.add(id);
+        } else {
+            // Find the nearest highlighted entry
+            const clickedIndex = entries.index($(el));
+            let nearestHighlightIndex = -1;
+            let minDistance = Infinity;
+
+            currentHighlights.each(function() {
+                const highlightIndex = entries.index($(this));
+                const distance = Math.abs(highlightIndex - clickedIndex);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    nearestHighlightIndex = highlightIndex;
+                }
+            });
+
+            // Highlight the range between the nearest highlighted entry and the clicked entry
+            const from = Math.min(clickedIndex, nearestHighlightIndex);
+            const to = Math.max(clickedIndex, nearestHighlightIndex);
+
+            for (let i = from; i <= to; i++) {
+                const entryId = entries.eq(i).attr('id');
+                highlighted.add(entryId);
+                entries.eq(i).addClass('highlight');
+            }
+        }
+        if (document.fake_shift === 1) {
+            document.fake_shift = 0;
+        }
+        return;
+    }
+    // Single click: clear all highlights and highlight the clicked entry
+    else {
+        $('.highlight').removeClass('highlight');
+        highlighted.clear();
+        $(el).addClass('highlight');
+        highlighted.add(id);
     }
-    $('.highlight').removeClass('highlight')
-    $(el).addClass('highlight')
 }
 
 // if a selection exists, enable move & del/restore buttons otherwise disable them
@@ -323,7 +361,7 @@ function NoSel() {
  * ecnt - Entry counter (e.g., { val: 0 }).
  * returns {string} - Generated HTML string.
  */
-function addFigure( obj, last, ecnt) 
+function addFigure( obj, last, ecnt ) 
 {
     let html = "";
 
@@ -383,6 +421,24 @@ function addFigure( obj, last, ecnt)
     }
 
     $('#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)
+        }
+    }
     return
 }
 
@@ -613,7 +669,7 @@ 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) { getEntriesByIdSuccessHandler( res, pageNumber, successCallback, viewingIdx ) },
+        success: function(res) { document.amendments=res.amend; getEntriesByIdSuccessHandler( res.entries, pageNumber, successCallback, viewingIdx ) },
         error: function(xhr, status, error) { console.error("Error:", error); } });
     return
 }