added first pass of viewing by folders, see TODO for next steps

templates/base.html

@@ -107,6 +107,8 @@
                 <input type="hidden" id="search_how_many" name="how_many" value="">
                 <input type="hidden" id="search_offset" name="offset" value="">
                 <input type="hidden" id="search_size" name="size" value="">
+                <input type="hidden" id="search_folders" name="folders" value="">
+                <input type="hidden" id="search_cwd" name="cwd" value="">
 				<input id="term" class="form-control mr-sm-2" type="search" placeholder="by file, date (YYYMMDD) or tag" aria-label="Search" name="term">
 				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 			</form>
@@ -167,6 +169,16 @@
                 $('#search_size').val( $('#size').val() )
             else
                 $('#search_size').val(128)
+
+            if( $('#folders').length )
+                $('#search_folders').val( $('#folders').val() )
+            else
+                $('#search_folders').val('False')
+
+            if( $('#cwd').length )
+                $('#search_cwd').val( $('#cwd').val() )
+            else
+                $('#search_cwd').val('')
         }
     </script>
 	{%block script_content %}{% endblock script_content %}

templates/files.html

@@ -9,11 +9,18 @@
     </div>
 
     <div class="container-fluid">
-        <form method="POST"">
+        <form id="main_form" method="POST"">
+            <input type="hidden" name="folders" id="folders" value="{{folders}}">
+            <input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
             {% if search_term is defined %}
                 <input type="hidden" name="term" id="view_term" value="{{search_term}}">
             {% endif %}
             <div class="row">
+                {% if folders %}
+                    <div class="my-auto">
+                        <span class="alert alert-primary">In: {{cwd}}</span>
+                    </div class="col my-auto">
+                {% endif %}
                 <div class="input-group col-lg-4">
                     {{CreateSelect( "noo", noo, ["Oldest", "Newest"], "$('#offset').val(0)")|safe }}
                     {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
@@ -89,6 +96,17 @@
             <div class="row pl-3">
         {% endif %}
         {% for obj in entry_data %}
+            {% if loop.index==1 and folders %}
+                {% if cwd != 'static/storage' %}
+                    <figure class="px-1 dir" dir={{cwd|ParentPath}}>
+                        <span style="font-size:{{(size|int-22)/2}}" class="fa-stack">
+                            <i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
+                            <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
+                        </span>
+                        <figcaption class="figure-caption text-center">Back</figcaption>
+                    </figure class="figure">
+                {% endif %}
+            {% endif %}
             {% if grouping == "Day" %}
                 {% if last.printed != obj.file_details[0].day %}
                     {% if last.printed > 0 %}
@@ -118,6 +136,7 @@
                 {% endif %}
             {% endif %}
             {% if obj.type.name != "Directory" %}
+                {% if (not folders) or ((obj.in_dir[0].path_prefix+'/'+obj.name) | TopLevelFolderOf(cwd)) %}
                     <figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1" fname="{{obj.name}}" yr="{{obj.file_details[0].year}}" date="{{obj.file_details[0].year}}{{"%02d" % obj.file_details[0].month}}{{"%02d" % obj.file_details[0].day}}" details="{{obj.name}} (Date: {{obj.file_details[0].day}}/{{obj.file_details[0].month}}/{{obj.file_details[0].year}})">
                         {% if obj.type.name=="Image" %}
                             <a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
@@ -131,6 +150,16 @@
                         {% endif %}
                         {# finding text distracting, <figcaption style="font-size:12px;" class="figure-caption text-center">{{obj.name}}</figcaption> #}
                     </figure>
+                {% endif %}
+            {% else %}
+                {% if folders %}
+                    {% if (cwd != obj.dir_details[0].path_prefix) and (obj.dir_details[0].path_prefix | TopLevelFolderOf(cwd)) %}
+                        <figure class="px-1 dir" dir={{obj.dir_details[0].path_prefix}}>
+                            <i style="font-size:{{size|int-22}};" class="fas fa-folder"></i>
+                            <figcaption class="figure-caption text-center">{{obj.name}}</figcaption>
+                        </figure class="figure">
+                    {% endif %}
+                {% endif %}
             {% endif %}
         {% endfor %}
         {% if grouping == "None" %}
@@ -206,6 +235,10 @@ function ChangeSize(clicked_button,sz)
 	$(clicked_button).addClass('btn-info').removeClass('btn-outline-info')
 	$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
 	$('#size').val(sz)
+    sz=sz-22
+	$('.fa-folder').attr( {style: 'font-size:'+sz } )
+    sz=sz/2
+	$('.fa-stack').attr( {style: 'color:grey;font-size:'+sz} )
 }
 
 // e == event (can see if shift/ctrl held down while left-clicking
@@ -307,6 +340,7 @@ $(document).ready(function() {
         $('#prev').addClass('disabled')
         $('#prev').prop('disabled', true)
     }
+    $(".dir").click( function(e) { $('#cwd').val( $(this).attr('dir') ) ; $('#main_form').submit() } )
 } )
 </script>
 {% endblock script_content %}