moved cFO() to changeOPT() into internal/js, transformed file_list_ip to work with new query_data model, made the Size buttons use modern bootstrap5 radio buttons and work again without the form for all file* routes. Removed a lot of dead code, moved code to resetNextPrev buttons to anytime we getPage, reducing code, handle setting OPT in jscript via a to_dict() for States. Overall, search and file_list_ip now work. Only main thing left is the override code
This commit is contained in:
@@ -1,64 +1,49 @@
|
||||
{% extends "base.html" %} {% block main_content %}
|
||||
<script src="{{ url_for( 'internal', filename='js/files_support.js')}}"></script>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="offset-2">{{page_title}}</h3>
|
||||
<form id="main_form" method="POST">
|
||||
<input id="offset" type="hidden" name="offset" value="{{OPT.offset}}">
|
||||
<input id="grouping" type="hidden" name="grouping" value="">
|
||||
<input id="folders" type="hidden" name="folders" value="False">
|
||||
<div class="col col-auto">
|
||||
<div class="input-group">
|
||||
{{CreateSelect( "noo", OPT.noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start py-1 my-1")|safe }}
|
||||
{{CreateSelect( "how_many", OPT.how_many|string, ["10", "25", "50", "75", "100", "150", "200", "500"], "", "rounded-end py-1 my-1" )|safe }}
|
||||
{{CreateSelect( "noo", OPT.noo, ["Oldest", "Newest","A to Z", "Z to A"], "changeOPT(getPageFileList); return false", "rounded-start py-1 my-1")|safe }}
|
||||
{{CreateSelect( "how_many", OPT.how_many|string, ["10", "25", "50", "75", "100", "150", "200", "500"], "changeOPT(getPageFileList); return false", "rounded-end py-1 my-1" )|safe }}
|
||||
<div class="mb-1 col my-auto d-flex justify-content-center">
|
||||
{% set prv_disabled="" %}
|
||||
{% if OPT.offset|int == 0 %}
|
||||
{% set prv_disabled="disabled" %}
|
||||
{% endif %}
|
||||
<button id="prev" {{prv_disabled}} name="prev" class="prev sm-txt btn btn-outline-secondary">
|
||||
<button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary" onClick="prevPage(getPageFileList)">
|
||||
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
|
||||
</button>
|
||||
<span class="sm-txt my-auto"> {{OPT.how_many}} files </span>
|
||||
{% set nxt_disabled="" %}
|
||||
{% if entry_data|length < OPT.how_many|int %}
|
||||
{% set nxt_disabled="disabled" %}
|
||||
{% endif %}
|
||||
<button id="next" {{nxt_disabled}} name="next" class="next sm-txt btn btn-outline-secondary">
|
||||
<span class="how_many_text sm-txt my-auto"> {{OPT.how_many}} files </span>
|
||||
<button id="next" name="next" class="next sm-txt btn btn-outline-secondary" onClick="nextPage(getPageFileList)">
|
||||
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
|
||||
</button>
|
||||
</div class="col...">
|
||||
</div class="input-group...">
|
||||
</div class="col col-auto">
|
||||
</form
|
||||
<div class="row">
|
||||
<table class="table table-striped table-sm col-xl-12">
|
||||
<thead><tr class="table-primary"><th>Name</th><th>Size (MB)</th><th>Path Prefix</th><th>Hash</th></tr></thead><tbody>
|
||||
{% for obj in entry_data %}
|
||||
<tr><td>
|
||||
{% if obj.type.name == "Image" or obj.type.name == "Video" %}
|
||||
<figure class="figure" font-size: 24px;>
|
||||
<div style="position:relative; width:100%">
|
||||
{% if obj.type.name=="Image" %}
|
||||
<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
|
||||
{% elif obj.type.name == "Video" %}
|
||||
<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
|
||||
{% endif %}
|
||||
<img class="thumb" style="display:block" height="48" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img>
|
||||
{% if obj.type.name=="Image" or obj.type.name == "Video" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<figcaption class="figure-caption">{{obj.name}}</figcaption>
|
||||
</figure>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% if obj.type.name != "Directory" %}
|
||||
<td>{{obj.file_details.size_mb}}</td><td>{{obj.in_dir.in_path.path_prefix.replace("static/","")}}/{{obj.in_dir.rel_path}}</td><td>{{obj.file_details.hash}}</td>
|
||||
{% else %}
|
||||
<td></td><td></td><td></td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody></table>
|
||||
</div class="row">
|
||||
</div class="container">
|
||||
<div id="file_list_div" class="container-fluid">
|
||||
</div class="container">
|
||||
<div class="container-fluid">
|
||||
<input type="hidden" name="cwd" id="cwd" value="{{OPT.cwd}}">
|
||||
<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(getPageFileList)" disabled>
|
||||
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#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(getPageFileList)">
|
||||
<svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
|
||||
</button>
|
||||
</div class="col my-auto"> </div class="row">
|
||||
</div class="container-fluid">
|
||||
{% endblock main_content %}
|
||||
{% block script_content %}
|
||||
<script>
|
||||
// this is the list of entry ids for the images for ALL matches for this query
|
||||
var entryList={{query_data.entry_list}}
|
||||
var OPT = {{ OPT.to_dict()|tojson }};
|
||||
|
||||
// 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, getPageFileList )
|
||||
</script>
|
||||
{% endblock script_content %}
|
||||
|
||||
@@ -23,19 +23,8 @@
|
||||
document.viewing_eid=null;
|
||||
document.viewing=null;
|
||||
|
||||
var OPT={}
|
||||
OPT.noo='{{OPT.noo}}'
|
||||
OPT.how_many={{OPT.how_many}}
|
||||
OPT.folders="{{OPT.folders}}" === "True"
|
||||
OPT.grouping='{{OPT.grouping}}'
|
||||
OPT.cwd='{{OPT.cwd}}'
|
||||
OPT.root_eid={{query_data.root_eid}}
|
||||
OPT.search_term='{{OPT.orig_search_term}}'
|
||||
OPT.size={{OPT.size}}
|
||||
OPT.prefix='{{OPT.prefix}}'
|
||||
OPT.default_flat_noo='{{OPT.default_flat_noo}}'
|
||||
OPT.default_folder_noo='{{OPT.default_folder_noo}}'
|
||||
OPT.default_search_noo='{{OPT.default_search_noo}}'
|
||||
var OPT = {{ OPT.to_dict()|tojson }};
|
||||
OPT.root_eid = {{ query_data.root_eid }};
|
||||
|
||||
// this is the list of entry ids for the images for ALL matches for this query
|
||||
var entryList={{query_data.entry_list}}
|
||||
@@ -43,57 +32,17 @@
|
||||
// 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)
|
||||
getPage(1,getPageFigures)
|
||||
|
||||
function cFO() {
|
||||
OPT.how_many=$('#how_many').val()
|
||||
new_f=$('#folders').val()
|
||||
new_f=( new_f == 'True' )
|
||||
// if change to/from folders, also fix the noo menu
|
||||
if( new_f != OPT.folders )
|
||||
{
|
||||
if( new_f )
|
||||
{
|
||||
$('#noo option:lt(2)').prop('disabled', true);
|
||||
$('#noo').val(OPT.default_folder_noo)
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#noo option:lt(2)').prop('disabled', false);
|
||||
$('#noo').val(OPT.default_flat_noo)
|
||||
}
|
||||
}
|
||||
OPT.noo=$('#noo').val()
|
||||
OPT.folders=new_f
|
||||
OPT.folders=$('#folders').val()
|
||||
OPT.grouping=$('#grouping').val()
|
||||
OPT.size=$('#size').val()
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/change_file_opts',
|
||||
data: JSON.stringify(OPT),
|
||||
contentType: 'application/json',
|
||||
success: function(resp) {
|
||||
entryList=resp.query_data.entry_list
|
||||
// put data back into booleans, ints, etc
|
||||
OPT.folders=( OPT.folders == 'True' )
|
||||
OPT.how_many=parseInt(OPT.how_many)
|
||||
$('.how_many_text').html( ` ${OPT.how_many} files ` )
|
||||
OPT.root_eid=parseInt(OPT.root_eid)
|
||||
OPT.size=parseInt(OPT.size)
|
||||
getPage(1)
|
||||
}
|
||||
})
|
||||
function changeSize()
|
||||
{
|
||||
sz=$('input[name="size"]:checked').val();
|
||||
$('.thumb').prop('height',sz);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div id="files_div">
|
||||
<div class="container-fluid">
|
||||
<input type="hidden" name="cwd" id="cwd" value="{{OPT.cwd}}">
|
||||
{% if search_term is defined %}
|
||||
<input type="hidden" name="search_term" id="view_term" value="{{search_term}}">
|
||||
{% endif %}
|
||||
<div class="d-flex row mb-2">
|
||||
{% if OPT.folders %}
|
||||
<div class="my-auto col col-auto">
|
||||
@@ -113,13 +62,12 @@
|
||||
{% endif %}
|
||||
<div class="col col-auto">
|
||||
<div class="input-group">
|
||||
{{CreateSelect( "noo", OPT.noo, ["Oldest", "Newest","A to Z", "Z to A"], "cFO(); return false", "rounded-start py-2")|safe }}
|
||||
{{CreateSelect( "how_many", OPT.how_many|string, ["10", "25", "50", "75", "100", "150", "200", "500"], "cFO(); return false" )|safe }}
|
||||
{{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 %}
|
||||
<input type="hidden" name="grouping" id="grouping" value="{{OPT.grouping}}">
|
||||
{{CreateFoldersSelect( OPT.folders, "cFO(); return false", "rounded-end" )|safe }}
|
||||
{{CreateFoldersSelect( OPT.folders, "changeOPT(getPageFigures); return false", "rounded-end" )|safe }}
|
||||
{% else %}
|
||||
{{CreateFoldersSelect( OPT.folders, "cFO(); return false" )|safe }}
|
||||
{{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 %}
|
||||
@@ -134,11 +82,11 @@
|
||||
</script>
|
||||
{% 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()" disabled>
|
||||
<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')}}#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()">
|
||||
<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')}}#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,'{{url_for('internal', filename='icons.svg')}}'); return false;">
|
||||
@@ -156,60 +104,35 @@
|
||||
<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">
|
||||
{% if OPT.size == 64 %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<button aria-label="extra small" id="64" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(64)">XS</button>
|
||||
{% if OPT.size == 96 %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<button aria-label="small" id="96" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(96)">S</button>
|
||||
{% if OPT.size == 128 %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<button aria-label="medium" id="128" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(128)">M</button>
|
||||
{% if OPT.size == 192 %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<button aria-label="large" id="192" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(192)">L</button>
|
||||
{% if OPT.size == 256 %}
|
||||
{% set bt="btn-info text-white" %}
|
||||
{% else %}
|
||||
{% set bt="btn-outline-info" %}
|
||||
{% endif %}
|
||||
<button aria-label="extra large" id="256" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(256)">XL</button>
|
||||
</div class="btn-group">
|
||||
<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">
|
||||
<input id="offset" type="hidden" name="offset" value="{{OPT.offset}}">
|
||||
<input id="size" type="hidden" name="size" value="{{OPT.size}}">
|
||||
</div class="d-flex row mb-2">
|
||||
{% set eids=namespace( str="" ) %}
|
||||
{# gather all the file eids and collect them in case we go gallery mode #}
|
||||
{% for obj in query_data.entry_list %}
|
||||
{% set eids.str = eids.str + obj|string +"," %}
|
||||
{% endfor %}
|
||||
<input name="eids" id="eids" type="hidden" value="{{eids.str}}">
|
||||
</div container="fluid">
|
||||
<div id="figures" class="row ms-2">
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<input type="hidden" name="cwd" id="cwd" value="{{OPT.cwd}}">
|
||||
<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()" disabled>
|
||||
<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')}}#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()">
|
||||
<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')}}#next"/></svg>
|
||||
</button>
|
||||
</div class="col my-auto">
|
||||
@@ -219,6 +142,8 @@
|
||||
<div id="viewer_div" class="d-none">
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.norm-txt { font-size: 1.0rem }
|
||||
.form-check-input:checked {
|
||||
background-color: #39C0ED;
|
||||
@@ -280,7 +205,7 @@
|
||||
// pref page, load it
|
||||
if( oldPageOffset != pageOffset )
|
||||
// pref page is pageOffset+1 now
|
||||
getPage(pageOffset+1,currentIndex)
|
||||
getPage(pageOffset+1,getPageViewer,currentIndex)
|
||||
else
|
||||
document.viewing=document.entries[currentIndex]
|
||||
}
|
||||
@@ -297,7 +222,7 @@
|
||||
// next page, load it
|
||||
if( oldPageOffset != pageOffset )
|
||||
// next page is pageOffset+1 now
|
||||
getPage(pageOffset+1,currentIndex)
|
||||
getPage(pageOffset+1,getPageViewer,currentIndex)
|
||||
else
|
||||
document.viewing=document.entries[currentIndex]
|
||||
}
|
||||
@@ -434,7 +359,9 @@
|
||||
</div class="row">
|
||||
</div id="viewer">
|
||||
</div id="viewer_div">
|
||||
{% endblock main_content %}
|
||||
|
||||
{% block script_content %}
|
||||
<script>
|
||||
$( document ).keydown(function(event) {
|
||||
// if dbox is visible, dont process this hot-key, we are inputting text
|
||||
@@ -477,12 +404,6 @@ $( document ).keydown(function(event) {
|
||||
});
|
||||
|
||||
var fullscreen=false;
|
||||
</script>
|
||||
|
||||
{% endblock main_content %}
|
||||
{% block script_content %}
|
||||
|
||||
<script>
|
||||
|
||||
$(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });
|
||||
|
||||
@@ -593,5 +514,7 @@ if( isMobile() )
|
||||
$('#ctrl-key').css('visibility', 'visible');
|
||||
}
|
||||
|
||||
// check the size radiobutton
|
||||
$(`input[name="size"][value="${OPT.size}"]`).prop('checked', true)
|
||||
</script>
|
||||
{% endblock script_content %}
|
||||
|
||||
Reference in New Issue
Block a user