when viewing image, with fname, show full path with icon of path

TODO

@@ -8,8 +8,6 @@
 
     * move all unsorted photos/* -> import/
 
-    * when viewing image, with fname, show full path with icon of 'path'
-
     * when hitting back button to a search, it doesnt handle the post, etc.
 
     * get build process to create a random string for secret for PROD, otherwise use builtin for dev

internal/js/view_support.js

@@ -52,7 +52,7 @@ function DrawImg()
     if( $('#fname_toggle').prop('checked' ) )
     {
         // reset fname for new image (if navigated left/right to get here)
-        $('#fname').html(objs[current].name)
+        $('#fname').html(PrettyFname(objs[current].name))
         $('.figcaption').show()
     }
     else
@@ -157,7 +157,7 @@ function ViewImageOrVideo()
         $('#video_div').hide()
         if( $('#fname_toggle').prop('checked' ) )
             $('#img-cap').show()
-        $('#fname_i').html(objs[current].name)
+        $('#fname_i').html(PrettyFname(objs[current].name))
         $('#figure').show()
         if( fullscreen )
             $('#canvas').get(0).requestFullscreen()
@@ -166,7 +166,7 @@ function ViewImageOrVideo()
     {
         $('#figure').hide()
         $('#video').prop('src', '../' + objs[current].url )
-        $('#fname_v').html(objs[current].name)
+        $('#fname_v').html(PrettyFname(objs[current].name))
         if( $('#fname_toggle').prop('checked' ) )
             $('#img-cap').hide()
         ResizeVideo()

templates/viewer.html

@@ -29,8 +29,8 @@
 
     {% for id in objs %}
         e=new Object()
-        e.name = "{{objs[id].name|safe}}"
         e.url = "{{objs[id].FullPathOnFS()|safe}}"
+        e.name = e.url
         e.type = "{{objs[id].type.name}}"
         {% if objs[id].file_details.faces %}
             e.face_model="{{objs[id].file_details.faces[0].facefile_lnk.model_used}}"
@@ -50,6 +50,29 @@
         objs[{{id}}]=e
     {% endfor %}
 
+
+    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')}}#import"/></svg>'
+            tmp_path=fname.replace("static/Import","" )
+        }
+        if( fname.indexOf( "static/Storage" ) == 0 ) 
+        {
+            s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#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')}}#trash"/></svg>'
+            tmp_path=fname.replace("static/Bin","" )
+        }
+        s+=tmp_path+'</span>'
+        return s
+    }
+
     function CallViewListRoute(dir)
     {
         s='<form id="_fmv" method="POST" action="/viewlist">'
@@ -117,7 +140,8 @@
                             var context = canvas.getContext('2d')
                             window.addEventListener('resize', DrawImg, false);
                         </script>
-                        <figcaption id="img-cap" class="figure-caption text-center text-wrap text-break"><span id="fname_i">{{objs[current].name}}</span></figcaption>
+                        <figcaption id="img-cap" class="figure-caption text-center text-wrap text-break"><span id="fname_i"></span></figcaption>
+                        <script>$('#fname_i').html(PrettyFname('{{objs[current].FullPathOnFS()}}'))</script>
                     </figure>
                     {% if objs[current].type.name != "Image" %}
                         <script>$('#figure').hide()</script>
@@ -127,9 +151,8 @@
                             <source src="../{{objs[current].FullPathOnFS()}}" 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">
+                        <figcaption id="vid-cap" class="figure-caption text-center text-wrap text-break"><span id="fname_v"></span></figcaption>
-                            <span id="fname_v">{{objs[current].name}}</span>
+                        <script>$('#fname_v').html(PrettyFname('{{objs[current].FullPathOnFS()}}'))</script>
-                        </figcaption>
                     </div>
                     <script>
                         window.addEventListener('resize', ResizeVideo, false);