Damien De Paoli
56771308a6
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
332 lines
22 KiB
HTML
332 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
{% block main_content %}
|
|
|
|
<style>
|
|
@media (max-width: 576px) {
|
|
#la, #ra {
|
|
padding: 5% !important;
|
|
}
|
|
}
|
|
.norm-txt { font-size: 1.0rem }
|
|
.form-check-input:checked {
|
|
background-color: #39C0ED;
|
|
border-color: #CFF4FC;
|
|
}
|
|
.form-switch .form-check-input {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2339C0ED'/%3e%3c/svg%3e");
|
|
}
|
|
.form-switch .form-check-input:focus {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFF4FC'/%3e%3c/svg%3e");
|
|
}
|
|
#tst90:hover,#tst90:focus { filter: invert(73%) sepia(27%) saturate(3970%) hue-rotate(146deg) brightness(94%) contrast(100%); }
|
|
</style>
|
|
<script src="{{ url_for( 'internal', filename='js/files_transform.js')}}?v={{ js_vers['ft'] }}"></script>
|
|
<script src="{{ url_for( 'internal', filename='js/files_support.js')}}?v={{ js_vers['fs'] }}"></script>
|
|
<script src="{{ url_for( 'internal', filename='js/view_support.js')}}?v={{ js_vers['vs'] }}"></script>
|
|
|
|
<div id="files_div">
|
|
<div class="container-fluid">
|
|
<div class="d-flex row mb-2">
|
|
{% if OPT.folders %}
|
|
<div class="my-auto col col-auto">
|
|
<span class="alert alert-primary py-2">
|
|
{% if "files_ip" in request.url %}
|
|
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#import"/></svg>
|
|
{% set tmp_path=OPT.cwd | replace( "static/Import", "" ) + "/" %}
|
|
{% elif "files_sp" in request.url %}
|
|
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#db"/></svg>
|
|
{% set tmp_path=OPT.cwd | replace( "static/Storage", "" ) + "/" %}
|
|
{% elif "files_rbp" in request.url %}
|
|
<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#trash"/></svg>
|
|
{% set tmp_path=OPT.cwd | replace( "static/Bin", "" ) + "/" %}
|
|
{% endif %}
|
|
{{tmp_path}}</span>
|
|
</div class="col my-auto">
|
|
{% endif %}
|
|
<div class="col col-auto">
|
|
<div class="input-group">
|
|
{{CreateSelect( "noo", OPT.noo, ["Oldest", "Newest","A to Z", "Z to A"], "changeOPT(getPageFigures); return false", "rounded-start py-2")|safe }}
|
|
{{CreateSelect( "how_many", OPT.how_many|string, ["10", "25", "50", "75", "100", "150", "200", "500"], "changeOPT(getPageFigures); return false" )|safe }}
|
|
{% if OPT.folders %}
|
|
{{CreateFoldersSelect( OPT.folders, "changeOPT(getPageFigures); return false", "rounded-end" )|safe }}
|
|
{% else %}
|
|
{{CreateFoldersSelect( OPT.folders, "changeOPT(getPageFigures); return false" )|safe }}
|
|
<span class="sm-txt my-auto btn btn-outline-info disabled border-top border-bottom">grouped by:</span>
|
|
{{CreateSelect( "grouping", OPT.grouping, ["None", "Day", "Week", "Month"], "OPT.grouping=$('#grouping').val();drawPageOfFigures();return false", "rounded-end")|safe }}
|
|
{% endif %}
|
|
</div class="input-group">
|
|
</div class="col">
|
|
{% if search_term is defined %}
|
|
<div class="col col-auto my-auto">
|
|
<span class="alert alert-primary p-2">Searched for: '{{search_term}}'</span>
|
|
</div class="col my-auto">
|
|
{% endif %}
|
|
<div class="col flex-grow-1 my-auto d-flex justify-content-center w-100">
|
|
<button aria-label="prev" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary disabled" onClick="prevPage(getPageFigures)" disabled>
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#prev"/></svg>
|
|
</button>
|
|
<span class="how_many_text sm-txt my-auto"> {{OPT.how_many}} files </span>
|
|
<button aria-label="next" id="next" name="next" class="next sm-txt btn btn-outline-secondary" onClick="nextPage(getPageFigures)">
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#next"/></svg>
|
|
</button>
|
|
<button aria-label="move" id="move" disabled name="move" class="sm-txt btn btn-outline-primary ms-4" onClick="MoveDBox(move_paths); return false;">
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#folder_plus"/></svg>
|
|
</button>
|
|
{% if "files_rbp" in request.url %}
|
|
<button aria-label="delete" id="del" disabled name="del" class="sm-txt btn btn-outline-success mx-1" onClick="DelDBox('Restore'); return false;">
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#trash-fill"/></svg>
|
|
{% else %}
|
|
<button aria-label="delete" id="del" disabled name="del" class="sm-txt btn btn-outline-danger mx-1" onClick="DelDBox('Delete'); return false;">
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#trash-fill"/></svg>
|
|
{% endif %}
|
|
</button>
|
|
<button style="visibility:hidden" class="btn btn-outline-secondary" aria-label="shift-key" id="shift-key" onclick="document.fake_shift=1-document.fake_shift; event.stopPropagation(); return false">shift</button>
|
|
<button style="visibility:hidden" class="btn btn-outline-secondary" aria-label="ctrl-key" id="ctrl-key" onclick="document.fake_ctrl=1-document.fake_ctrl; event.stopPropagation(); return false">ctrl</button>
|
|
</div class="col flex-grow-1">
|
|
<div class="d-flex col col-auto justify-content-end">
|
|
<div class="btn-group" role="group" aria-label="Size radio button group">
|
|
<input type="radio" class="btn-check" name="size" id="size-xs" onCLick="changeSize()" autocomplete="off" value="64">
|
|
<label class="btn btn-outline-info btn-radio" for="size-xs">XS</label>
|
|
|
|
<input type="radio" class="btn-check" name="size" id="size-s" onCLick="changeSize()" autocomplete="off" value="96">
|
|
<label class="btn btn-outline-info btn-radio" for="size-s">S</label>
|
|
|
|
<input type="radio" class="btn-check" name="size" id="size-m" onCLick="changeSize()" autocomplete="off" value="128">
|
|
<label class="btn btn-outline-info btn-radio" for="size-m">M</label>
|
|
|
|
<input type="radio" class="btn-check" name="size" id="size-l" onCLick="changeSize()" autocomplete="off" value="192">
|
|
<label class="btn btn-outline-info btn-radio" for="size-l">L</label>
|
|
|
|
<input type="radio" class="btn-check" name="size" id="size-xl" onCLick="changeSize()" autocomplete="off" value="256">
|
|
<label class="btn btn-outline-info btn-radio" for="size-xl">XL</label>
|
|
</div>
|
|
</div class="d-flex col">
|
|
</div class="d-flex row mb-2">
|
|
</div container="fluid">
|
|
<div id="figures" class="row ms-2">
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col my-auto d-flex justify-content-center">
|
|
<button aria-label="prev" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary disabled" onClick="prevPage(getPageFigures)" disabled>
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#prev"/></svg>
|
|
</button>
|
|
<span class="how_many_text sm-txt my-auto"> {{OPT.how_many}} files </span>
|
|
<button aria-label="next" id="next" name="next" class="next sm-txt btn btn-outline-secondary" onClick="nextPage(getPageFigures)">
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#next"/></svg>
|
|
</button>
|
|
</div class="col my-auto">
|
|
</div class="row">
|
|
</div class="container-fluid">
|
|
</div id="files_div">
|
|
<div id="viewer_div" class="d-none">
|
|
<div id="viewer" class="container-fluid">
|
|
<div class="row flex-nowrap">
|
|
<!-- Left Buttons Column -->
|
|
<div class="col-auto d-flex flex-column min-width-0">
|
|
<!-- Up Button (Small) -->
|
|
<button title="Back to list" class="btn btn-outline-info btn-sm p-1 mb-1" onclick="goOutOfViewer()">
|
|
<svg width="16" height="16" fill="currentColor">
|
|
<use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#back"></use>
|
|
</svg>
|
|
</button>
|
|
<!-- Left Button (large/flex-grow-1) -->
|
|
<button title="Show previous image" class="btn btn-outline-info px-2 flex-grow-1 overflow-hidden"
|
|
style="padding: 10%" id="la" onClick="prevImageInViewer()">
|
|
<svg width="16" height="16" fill="currentColor">
|
|
<use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#prev"/></svg>
|
|
</button>
|
|
</div>
|
|
<figure style="position: relative;" class="col col-auto border border-info rounded m-0 p-1" id="figure">
|
|
<canvas id="canvas"></canvas>
|
|
<!-- next 4 are placeholders and called on during amendments only in viewer code -->
|
|
<img id="throbber" src="{{url_for('internal', filename='throbber.gif')}}?v={{js_vers[th]}}" style="display:none;">
|
|
<img id="white-circle" src="{{url_for('internal', filename='white-circle.png')}}?v={{js_vers[th]}}" style="display:none;">
|
|
<img id="inside-img" style="display:none;">
|
|
<svg id="inside-icon" style="display:none;" fill="currentColor">
|
|
<use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#flip_v">
|
|
</use></svg>
|
|
<script>
|
|
var im=new Image();
|
|
im.onload=DrawImg
|
|
var context = canvas.getContext('2d')
|
|
</script>
|
|
<figcaption id="img-cap" class="figure-caption text-center text-wrap text-break">
|
|
<span id="fname_i"></span></figcaption>
|
|
</figure>
|
|
<div id="video_div" class="col col-auto">
|
|
<video id="video" class="col col-auto" controls>
|
|
<source id="videoSource" src="" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<figcaption id="vid-cap" class="figure-caption text-center text-wrap text-break">
|
|
<span id="fname_v"></span></figcaption>
|
|
</div>
|
|
<!-- Right-hand Buttons Column -->
|
|
<div class="col-auto d-flex flex-column min-width-0">
|
|
<!-- Up Button (Small) -->
|
|
<button title="Back to list" class="btn btn-outline-info btn-sm p-1 mb-1" onclick="goOutOfViewer()">
|
|
<svg width="16" height="16" fill="currentColor">
|
|
<use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#back"></use>
|
|
</svg>
|
|
</button>
|
|
<!-- Right Button (large/flex-grow-1) -->
|
|
<button title="Show next image" class="btn btn-outline-info px-2 flex-grow-1 overflow-hidden"
|
|
style="padding: 10%" id="ra" onClick="nextImageInViewer()">
|
|
<svg width="16" height="16" fill="currentColor">
|
|
<use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#next"/></svg>
|
|
</button>
|
|
</div>
|
|
</div class="row">
|
|
<div class="row">
|
|
{# this whole div, just takes up the same space as the left button and is hidden for alignment only #}
|
|
<div class="col-auto px-0">
|
|
<button class="btn btn-outline-info px-2 invisible" disabled>
|
|
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#next"/></svg>
|
|
</button>
|
|
</div>
|
|
<span class="col-auto my-auto">Show:</span>
|
|
<div title="Toggle showing filename (hotkey: n)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
|
|
<input class="form-check-input" type="checkbox" id="fname_toggle" onChange="$('.figure-caption').toggle()" checked>
|
|
<label class="form-check-label ps-1" for="fname_toggle">Filename</label>
|
|
</div>
|
|
<div title="Toggle showing matched faces (hotkey: f)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
|
|
<input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces">
|
|
<label class="form-check-label ps-1" for="faces">Faces</label>
|
|
</div>
|
|
<div title="Toggle showing 'distance' on matched faces (hotkey: d)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
|
|
<input class="form-check-input" type="checkbox" onChange="DrawImg()" id="distance">
|
|
<label class="form-check-label ps-1" for="distance">Distance</label>
|
|
</div>
|
|
<div title="Change the model used to detect faces" class="col col-auto my-auto">
|
|
AI Model:
|
|
{# can use 0 as default, it will be (re)set correctly in DrawImg() anyway #}
|
|
{{CreateSelect( "model", 0, ["N/A", "normal", "slow/accurate"], "", "rounded norm-txt", [0,1,2])|safe }}
|
|
</div>
|
|
<div class="col col-auto pt-1">
|
|
<button class="btn btn-outline-info p-1" title="Rotate by 90 degrees" onClick="Transform(90)">
|
|
<img src="{{url_for('internal', filename='rot90.png')}}?v={{js_vers['r90']}}" width="32" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot90-invert.png')}}'"
|
|
onMouseOut="this.src='{{url_for('internal', filename='rot90.png')}}?v={{js_vers['r90']}}'" />
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="Rotate by 180 degrees" onClick="Transform(180)">
|
|
<img src="{{url_for('internal', filename='rot180.png')}}?v={{js_vers['r180']}}" width="32" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot180-invert.png')}}'"
|
|
onMouseOut="this.src='{{url_for('internal', filename='rot180.png')}}?v={{js_vers['r180']}}'" />
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="Rotate by 270 degrees" onClick="Transform(270)">
|
|
<img src="{{url_for('internal', filename='rot270.png')}}?v={{js_vers['r270']}}" width="32" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot270-invert.png')}}'"
|
|
onMouseOut="this.src='{{url_for('internal', filename='rot270.png')}}?v={{js_vers['r270']}}'" />
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="Flip horizontally" onClick="Transform('fliph')">
|
|
<svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#flip_h"/></svg>
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')">
|
|
<svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#flip_v"/></svg>
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="View in Fullscreen mode (hotkey: F)" onClick="fullscreen=true; ViewImageOrVideo()">
|
|
<svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#fullscreen"/></svg>
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="Show logs relating to this filename (hotkey: l)" onClick="JoblogSearch()">
|
|
<svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#log"/></svg>
|
|
</button>
|
|
<button class="btn btn-outline-info p-1" title="View Original" onClick="window.location='/'+document.viewing.FullPathOnFS">
|
|
<svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#download"/></svg>
|
|
</button>
|
|
<button id="viewer_del" class="btn btn-outline-danger p-1" title="Delete (hotkey: Del)" onClick="DelDBox('Delete')">
|
|
<svg id="viewer_bin" width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#trash"/></svg>
|
|
</button>
|
|
</div>
|
|
</div class="row">
|
|
</div id="viewer">
|
|
</div id="viewer_div">
|
|
{% endblock main_content %}
|
|
|
|
{% block script_content %}
|
|
<script>
|
|
// GLOBALS
|
|
document.fake_shift=0
|
|
document.fake_ctrl=0
|
|
|
|
// FIXME: used by viewer code - should probably get rid of this?
|
|
var fullscreen=false;
|
|
|
|
// this is the current entry (object) we are viewing - an image/video (used when we dbl-click to view & then in next/prev in view)
|
|
document.viewing=null;
|
|
|
|
var OPT = {{ OPT.to_dict()|tojson }};
|
|
// set from query data and stored in OPT for convenience. It can be 0 -
|
|
// this implies no content in the Path at all
|
|
OPT.root_eid = {{ query_data.root_eid }};
|
|
|
|
// amendment types are stable per code release, store them once and use as
|
|
// needed when we amend entrys in Transforms, removes, etc.
|
|
document.amendTypes = {{ query_data.amendTypes|tojson }};
|
|
|
|
// get items out of query_data into convenience javascript vars...
|
|
var move_paths = {{ query_data.move_paths|tojson }};
|
|
var NMO={{query_data.NMO|tojson}}
|
|
var people={{query_data.people|tojson}}
|
|
|
|
// 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 set pageList for & render the first page
|
|
getPage(1,getPageFigures)
|
|
|
|
// FIXME: doco, but also gather all globals together, many make them all document. to be obviously global (and add fullscreen)
|
|
var gap=0.8
|
|
var grayscale=0
|
|
var throbber=0
|
|
|
|
function PrettyFname(fname)
|
|
{
|
|
s='<span class="alert alert-secondary py-2">'
|
|
if( fname.indexOf( "static/Import" ) == 0 )
|
|
{
|
|
s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#import"/></svg>'
|
|
tmp_path=fname.replace("statuc/Import","" )
|
|
}
|
|
if( fname.indexOf( "static/Storage" ) == 0 )
|
|
{
|
|
s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#db"/></svg>'
|
|
tmp_path=fname.replace("static/Storage","" )
|
|
}
|
|
if( fname.indexOf( "static/Bin" ) == 0 )
|
|
{
|
|
s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}?v={{js_vers['ic']}}#trash-fill"/></svg>'
|
|
tmp_path=fname.replace("static/Bin","" )
|
|
}
|
|
s+=tmp_path+'</span>'
|
|
return s
|
|
}
|
|
|
|
// check the size radiobutton
|
|
$(`input[name="size"][value="${OPT.size}"]`).prop('checked', true)
|
|
|
|
window.addEventListener('resize', DrawImg, false);
|
|
window.addEventListener('resize', ResizeVideo, false);
|
|
|
|
// when we are in recycle bin, change colours to green & func to restore
|
|
if( window.location.href.includes('files_rbp') )
|
|
{
|
|
$('#viewer_bin').attr('fill', 'var(--bs-success)')
|
|
// fill with bg-success colour
|
|
$('#viewer_bin use').attr('fill', 'var(--bs-success)')
|
|
$('#viewer_del').removeClass('btn-outline-danger').addClass('btn-outline-success')
|
|
$('#viewer_del').on('mouseenter', function() {
|
|
// Set the SVG fill to white
|
|
$('#viewer_bin use').attr('fill', 'white');
|
|
});
|
|
|
|
// When mouse leaves the button
|
|
$('#viewer_del').on('mouseleave', function() {
|
|
// Revert the SVG fill to the bg-success colour
|
|
$('#viewer_bin use').attr('fill', 'var(--bs-success)');
|
|
});
|
|
$('#viewer_del').on('click', function() { DelDBox('Restore') } )
|
|
}
|
|
|
|
</script>
|
|
{% endblock script_content %}
|