okay this now works with bootstrap 5, I dont love the sz buttons / mixed black and white hover text needs love - probably own class with own styles, but I dont want to hard-code info color, need to work out how to do style / css using the right bs variable for info color

This commit is contained in:
2021-07-20 19:03:14 +10:00
parent 44620f1e18
commit b9f05d64f8
11 changed files with 188 additions and 229 deletions

View File

@@ -30,9 +30,8 @@ PA_JOB_MANAGER_PORT=55430
THUMBSIZE=256 THUMBSIZE=256
def CreateSelect(name, selected, list, js=""): def CreateSelect(name, selected, list, js="", add_class="" ):
str = f'<select id="{name}" name="{name}" style="color:#5bc0de;border:1px solid #5bc0de;"' str = f'<select id="{name}" name="{name}" class="{add_class} sm-txt bg-white text-info border-info border-1 p-1" onChange="{js};this.form.submit()">'
str += f'class="sm-txt form-control form-conrol-info" onChange="{js};this.form.submit()">'
for el in list: for el in list:
str += '<option ' str += '<option '
if el == selected: if el == selected:
@@ -42,8 +41,7 @@ def CreateSelect(name, selected, list, js=""):
return str return str
def CreateFoldersSelect(selected): def CreateFoldersSelect(selected):
str = f'<select id="folders" name="folders" style="color:#5bc0de;border:1px solid #5bc0de;"' str = f'<select id="folders" name="folders" class="sm-txt bg-white text-info border-info border-1 p-1" onChange="this.form.submit()">'
str += f'class="sm-txt form-control form-conrol-info" onChange="this.form.submit()">'
# if selected is true, then folders == true, so make this the selected option # if selected is true, then folders == true, so make this the selected option
if( selected ): if( selected ):
str += '<option selected value="True">In Folders</option>' str += '<option selected value="True">In Folders</option>'

View File

@@ -3,7 +3,7 @@
{% block main_content %} {% block main_content %}
<h3>Basic AI stats</h3> <h3>Basic AI stats</h3>
<table class="table table-striped table-sm"> <table class="table table-striped table-sm">
<tbody><thead class="thead-light"><tr><th>What</th><th>Amount</th></tr></thead> <tbody><thead class="table-primary"><tr><th>What</th><th>Amount</th></tr></thead>
<tr><td>Files with a face</td><td>{{fstats['files_with_a_face']}}</td></tr> <tr><td>Files with a face</td><td>{{fstats['files_with_a_face']}}</td></tr>
<tr><td>Files with a matched face</td><td>{{fstats['files_with_a_match']}}</td></tr> <tr><td>Files with a matched face</td><td>{{fstats['files_with_a_match']}}</td></tr>
<tr><td>Files with missing matches</td><td>{{fstats['files_with_missing_matches']}}</td></tr> <tr><td>Files with missing matches</td><td>{{fstats['files_with_missing_matches']}}</td></tr>
@@ -13,7 +13,7 @@
</tbody></table> </tbody></table>
<table class="table table-striped table-sm"> <table class="table table-striped table-sm">
<tbody><thead class="thead-light"><tr><th>Person (tag)</th><th>Number of files matched</th></thead> <tbody><thead class="table-primary"><tr><th>Person (tag)</th><th>Number of files matched</th></thead>
{% for s in stats %} {% for s in stats %}
<tr><td>{{s[0]}}</td><td>{{s[1]}}</td></tr> <tr><td>{{s[0]}}</td><td>{{s[1]}}</td></tr>
{% endfor %} {% endfor %}

View File

@@ -10,12 +10,12 @@
<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/fontawesome-free-5.15.3-web/css/all.min.css' ) }}"> <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/fontawesome-free-5.15.3-web/css/all.min.css' ) }}">
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-4.6.0-dist/css/bootstrap.min.css' ) }}"> <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-5.0.2-dist/css/bootstrap.min.css' ) }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/jquery.contextMenu.css' ) }}"> <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/jquery.contextMenu.css' ) }}">
<!-- code to get bootstrap to work --> <!-- code to get bootstrap to work -->
<script src="{{ url_for( 'static', filename='upstream/jquery-3.6.0.min.js')}}"></script> <script src="{{ url_for( 'static', filename='upstream/jquery-3.6.0.min.js')}}"></script>
<script src="{{ url_for( 'static', filename='upstream/bootstrap-4.6.0-dist/js/bootstrap.min.js')}}"></script> <script src="{{ url_for( 'static', filename='upstream/bootstrap-5.0.2-dist/js/bootstrap.min.js')}}"></script>
<script src="{{ url_for( 'static', filename='upstream/jquery.contextMenu.min.js')}}"></script> <script src="{{ url_for( 'static', filename='upstream/jquery.contextMenu.min.js')}}"></script>
<script src="{{ url_for( 'static', filename='upstream/jquery.ui.position.min.js')}}"></script> <script src="{{ url_for( 'static', filename='upstream/jquery.ui.position.min.js')}}"></script>
@@ -24,7 +24,7 @@
{% import "bootstrap/wtf.html" as wtf %} {% import "bootstrap/wtf.html" as wtf %}
<style> <style>
.highlight { box-shadow: 0 0 7px 4px #5bc0de } .highlight { box-shadow: 0 0 7px 4px #5bc0de }
.sm-txt { font-size: 0.8rem } .sm-txt { font-size: 0.7rem }
</style> </style>
</head> </head>
<body> <body>
@@ -50,72 +50,74 @@
</div> </div>
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between"> <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
{% if config.env == "Production" %} <div class="container-fluid">
<a class="navbar-brand" href="/">Photo Assistant</a> {% if config.env == "Production" %}
{% else %} <a class="navbar-brand" href="/">Photo Assistant</a>
<a class="navbar-brand bg-secondary text-white px-2" style="border-radius:4px" href="/">PA (DEV)</a> {% else %}
{% endif %} <a class="navbar-brand bg-secondary text-white px-2" style="border-radius:4px" href="/">PA (DEV)</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> {% endif %}
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> </button>
<div class="navbar-nav mr-auto"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="nav-item dropdown"> <div class="navbar-nav col-12">
<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="FileMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Files</a> <div class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="FileMenu"> <a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="FileMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Files</a>
<a class="dropdown-item" href="{{url_for('files_ip')}}">View Photos to Import</a> <div class="dropdown-menu" aria-labelledby="FileMenu">
<a class="dropdown-item" href="{{url_for('file_list_ip')}}">View Details of Photos to Import</a> <a class="dropdown-item" href="{{url_for('files_ip')}}">View Photos to Import</a>
<a class="dropdown-item" href="{{url_for('files_sp')}}">View Stored Photos</a> <a class="dropdown-item" href="{{url_for('file_list_ip')}}">View Details of Photos to Import</a>
<a class="dropdown-item" href="{{url_for('files_rbp')}}">View Recycle Bin</a> <a class="dropdown-item" href="{{url_for('files_sp')}}">View Stored Photos</a>
</div> <a class="dropdown-item" href="{{url_for('files_rbp')}}">View Recycle Bin</a>
</div class="nav-item dropdown"> </div>
<div class="nav-item dropdown"> </div class="nav-item dropdown">
<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="PersonMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Person</a> <div class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="AIMenuPerson"> <a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="PersonMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Person</a>
<a class="dropdown-item" href="{{url_for('new_person')}}">Create Person</a> <div class="dropdown-menu" aria-labelledby="AIMenuPerson">
<a class="dropdown-item" href="{{url_for('persons')}}">Show People</a> <a class="dropdown-item" href="{{url_for('new_person')}}">Create Person</a>
</div> <a class="dropdown-item" href="{{url_for('persons')}}">Show People</a>
</div class="nav-item dropdown"> </div>
<div class="nav-item dropdown"> </div class="nav-item dropdown">
<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AIMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AI</a> <div class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="AIMenu"> <a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AIMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AI</a>
<a class="dropdown-item" href="{{url_for('aistats')}}">View Stats</a> <div class="dropdown-menu" aria-labelledby="AIMenu">
</div> <a class="dropdown-item" href="{{url_for('aistats')}}">View Stats</a>
</div class="nav-item dropdown"> </div>
<div class="nav-item dropdown"> </div class="nav-item dropdown">
<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AdminMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a> <div class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="AdminMenu"> <a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AdminMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
<a class="dropdown-item" href="{{url_for('settings')}}">Edit Settings</a> <div class="dropdown-menu" aria-labelledby="AdminMenu">
<a class="dropdown-item" href="{{url_for('scannow')}}">Scan now (for new files)</a> <a class="dropdown-item" href="{{url_for('settings')}}">Edit Settings</a>
<a class="dropdown-item" href="{{url_for('forcescan')}}">Force Scan (delete data & rebuild)</a> <a class="dropdown-item" href="{{url_for('scannow')}}">Scan now (for new files)</a>
<a class="dropdown-item" href="{{url_for('scan_sp')}}">Scan Storage Path</a> <a class="dropdown-item" href="{{url_for('forcescan')}}">Force Scan (delete data & rebuild)</a>
<a class="dropdown-item" href="{{url_for('wakeup')}}">Force wake the job manager</a> <a class="dropdown-item" href="{{url_for('scan_sp')}}">Scan Storage Path</a>
</div class="dropdow-menu"> <a class="dropdown-item" href="{{url_for('wakeup')}}">Force wake the job manager</a>
</div class="nav-item dropdown"> </div class="dropdow-menu">
<div class="nav-item ml-5"> </div class="nav-item dropdown">
<a href="{{url_for('jobs')}}"}}<span class="navbar-text">Active Jobs: <div class="nav-link flex-grow-1 ms-5">
{% set num_active_jobs = GetNumActiveJobs() %} <a href="{{url_for('jobs')}}"}}<span class="navbar-text">Active Jobs:
{% if num_active_jobs > 0 %} {% set num_active_jobs = GetNumActiveJobs() %}
<span class="badge badge-danger text-white"}}>{{num_active_jobs}}</span> {% if num_active_jobs > 0 %}
{% else %} <span class="badge badge-danger text-white"}}>{{num_active_jobs}}</span>
<span class="badge">0</span> {% else %}
{% endif %} <span class="badge">0</span>
</a> {% endif %}
</div class="nav-item"> </a>
</div class="navbar-nav"> </div class="nav-item">
<form class="form-inline my-2 my-lg-0" method="POST" onSubmit="SetViewingOptionsForSearchForm()" action="/search"> <form class="d-flex col ms-5" method="POST" onSubmit="SetViewingOptionsForSearchForm()" action="/search">
<input type="hidden" id="search_noo" name="noo" value=""> <input type="hidden" id="search_noo" name="noo" value="">
<input type="hidden" id="search_grouping" name="grouping" value=""> <input type="hidden" id="search_grouping" name="grouping" value="">
<input type="hidden" id="search_how_many" name="how_many" value=""> <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_offset" name="offset" value="">
<input type="hidden" id="search_size" name="size" value=""> <input type="hidden" id="search_size" name="size" value="">
<input type="hidden" id="search_folders" name="folders" value=""> <input type="hidden" id="search_folders" name="folders" value="">
<input type="hidden" id="search_cwd" name="cwd" 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"> <input id="term" class="form-control" 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> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div class="collapse navbar-collapse"> </div class="navbar-nav">
</div class="collapse navbar-collapse">
</div class="container-fluid">
</nav> </nav>
{% if GetMessage()|length %} {% if GetMessage()|length %}

View File

@@ -1,5 +1,5 @@
{% extends "base.html" %} {% block main_content %} {% extends "base.html" %} {% block main_content %}
<div class="container"> <div class="container-fluid">
<h3 class="offset-lg-2">{{page_title}}</h3> <h3 class="offset-lg-2">{{page_title}}</h3>
<form id="main_form" method="POST"> <form id="main_form" method="POST">
<input id="offset" type="hidden" name="offset" value="{{offset}}"> <input id="offset" type="hidden" name="offset" value="{{offset}}">
@@ -8,20 +8,20 @@
<input id="cwd" type="hidden" name="cwd" value=""> <input id="cwd" type="hidden" name="cwd" value="">
<input id="folders" type="hidden" name="folders" value="False"> <input id="folders" type="hidden" name="folders" value="False">
<div class="row"> <div class="row">
<div class="px-0 input-group col-lg-4"> <div class="input-group col-lg-4">
{{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)")|safe }} {{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start" )|safe }}
{{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }} {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"], "", "rounded-end" )|safe }}
</div class="input-group..."> </div class="input-group...">
<div class="col my-auto d-flex justify-content-center"> <div class="col my-auto d-flex justify-content-center">
<button id="prev" name="prev" class="prev sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button> <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
<span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span> <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
<button id="next" name="next" class="next sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button> <button id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
</div class="col..."> </div class="col...">
</div class="row"> </div class="row">
</form </form
<div class="row"> <div class="row">
<table class="table table-striped table-sm col-xl-12"> <table class="table table-striped table-sm col-xl-12">
<thead><tr class="thead-light"><th>Name</th><th>Size (MB)</th><th>Path Prefix</th><th>Hash</th></tr></thead><tbody> <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 %} {% for obj in entry_data %}
<tr><td> <tr><td>

View File

@@ -18,10 +18,10 @@
{% if search_term is defined %} {% if search_term is defined %}
<input type="hidden" name="term" id="view_term" value="{{search_term}}"> <input type="hidden" name="term" id="view_term" value="{{search_term}}">
{% endif %} {% endif %}
<div class="row mb-2"> <div class="d-flex row mb-2">
{% if folders %} {% if folders %}
<div class="mx-3 my-auto"> <div class="my-auto col">
<span class="alert alert-primary"> <span class="alert alert-primary py-2">
{% if "files_ip" in request.url %} {% if "files_ip" in request.url %}
<i class="fas fa-file-upload"></i> <i class="fas fa-file-upload"></i>
{% set tmp_path=cwd | replace( "static/Import", "" ) + "/" %} {% set tmp_path=cwd | replace( "static/Import", "" ) + "/" %}
@@ -35,79 +35,73 @@
{{tmp_path}}</span> {{tmp_path}}</span>
</div class="col my-auto"> </div class="col my-auto">
{% endif %} {% endif %}
<div class="px-0 input-group col-lg-4"> <div class="col">
{{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)")|safe }} <div class="input-group">
{{CreateSelect( "noo", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start")|safe }}
{{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }} {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
{% if folders %} {% if folders %}
<input type="hidden" name="grouping" id="grouping" value="{{grouping}}"> <input type="hidden" name="grouping" id="grouping" value="{{grouping}}">
{{CreateFoldersSelect( folders )|safe }} {{CreateFoldersSelect( folders )|safe }}
{% else %} {% else %}
{{CreateFoldersSelect( folders )|safe }} {{CreateFoldersSelect( folders )|safe }}
<span style="border:0" class="sm-txt my-auto btn btn-outline-info disabled">grouped by:</span> <span class="sm-txt my-auto btn btn-outline-info disabled border-top border-bottom">grouped by:</span>
{{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"])|safe }} {{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"], "", "rounded-end")|safe }}
{% endif %} {% endif %}
</div class="input-group"> </div class="input-group">
</div class="col">
{% if search_term is defined %} {% if search_term is defined %}
<div class="col my-auto"> <div class="col my-auto">
<span class="alert alert-primary">Searched for: '{{search_term}}'</span> <span class="alert alert-primary p-2">Searched for: '{{search_term}}'</span>
</div class="col my-auto"> </div class="col my-auto">
{% endif %} {% endif %}
<div class="col my-auto d-flex justify-content-end"> <div class="col flex-grow-1 my-auto d-flex justify-content-center w-100">
<button id="prev" name="prev" class="prev sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button> <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
<span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span> <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
<button id="next" name="next" class="next sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button> <button id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
<button id="move" disabled name="move" class="sm-txt btn btn-primary ml-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button> <button id="move" disabled name="move" class="sm-txt btn btn-outline-primary ms-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button>
{% if "files_rbp" in request.url %} {% if "files_rbp" in request.url %}
<button id="del" disabled name="del" class="sm-txt btn btn-success mx-1" onClick="DelDBox('Restore'); return false;"> <button id="del" disabled name="del" class="sm-txt btn btn-outline-success mx-1" onClick="DelDBox('Restore'); return false;">
<i class="fas fa-trash-restore-alt"></i> <i class="fas fa-trash-restore-alt"></i>
{% else %} {% else %}
<button id="del" disabled name="del" class="sm-txt btn btn-danger mx-1" onClick="DelDBox('Delete'); return false;"> <button id="del" disabled name="del" class="sm-txt btn btn-outline-danger mx-1" onClick="DelDBox('Delete'); return false;">
<i class="fas fa-trash-alt"></i> <i class="fas fa-trash-alt"></i>
{% endif %} {% endif %}
</button> </button>
</div> </div>
<div class="px-0 input-group col justify-content-end"> <div class="d-flex col justify-content-end">
<div class="btn-group">
{% if size == "64" %} {% if size == "64" %}
{% set bt="btn-info" %} {% set bt="btn-info text-white" %}
{% else %} {% else %}
{% set bt="btn-outline-info" %} {% set bt="btn-outline-info" %}
{% endif %} {% endif %}
<div class="input-group-prepend"> <button id="64" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
<button id="64" style="width:98%" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
</div>
{% if size == "96" %} {% if size == "96" %}
{% set bt="btn-info" %} {% set bt="btn-info text-white" %}
{% else %} {% else %}
{% set bt="btn-outline-info" %} {% set bt="btn-outline-info" %}
{% endif %} {% endif %}
<div class="input-group-append"> <button id="96" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
<button id="96" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
</div>
{% if size == "128" %} {% if size == "128" %}
{% set bt="btn-info" %} {% set bt="btn-info text-white" %}
{% else %} {% else %}
{% set bt="btn-outline-info" %} {% set bt="btn-outline-info" %}
{% endif %} {% endif %}
<div class="input-group-append"> <button id="128" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
<button id="128" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
</div>
{% if size == "192" %} {% if size == "192" %}
{% set bt="btn-info" %} {% set bt="btn-info text-white" %}
{% else %} {% else %}
{% set bt="btn-outline-info" %} {% set bt="btn-outline-info" %}
{% endif %} {% endif %}
<div class="input-group-append"> <button id="192" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
<button id="192" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
</div>
{% if size == "256" %} {% if size == "256" %}
{% set bt="btn-info" %} {% set bt="btn-info text-white" %}
{% else %} {% else %}
{% set bt="btn-outline-info" %} {% set bt="btn-outline-info" %}
{% endif %} {% endif %}
<div class="input-group-append"> <button id="256" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
<button id="256" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button> </div class="btn-group">
</div> </div class="col">
</div class="input-group">
<input id="offset" type="hidden" name="offset" value="{{offset}}"> <input id="offset" type="hidden" name="offset" value="{{offset}}">
<input id="size" type="hidden" name="size" value="{{size}}"> <input id="size" type="hidden" name="size" value="{{size}}">
</div class="form-row"> </div class="form-row">
@@ -121,15 +115,13 @@
<input name="eids" id="eids" type="hidden" value="{{eids.str}}"> <input name="eids" id="eids" type="hidden" value="{{eids.str}}">
</form> </form>
{% set last = namespace(printed=0) %} </div>
{% if folders or grouping == "None" %}
<div class="row pl-3">
{% endif %}
{% set last = namespace(printed=0) %}
{# rare event of empty folder, still need to show back button #} {# rare event of empty folder, still need to show back button #}
{% if folders and entry_data|length == 0 %} {% if folders and entry_data|length == 0 %}
{% if cwd != root %} {% if cwd != root %}
<figure class="px-1 dir entry" ecnt="1" dir="{{cwd|ParentPath}}" type="Directory"> <figure class="dir entry ms-1" ecnt="1" dir="{{cwd|ParentPath}}" type="Directory">
<span style="font-size:{{(size|int-22)/2}}px" class="fa-stack"> <span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
<i style="color:grey" class="fas fa-folder fa-stack-2x"></i> <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> <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
@@ -138,7 +130,7 @@
</figure class="figure"> </figure class="figure">
{% else %} {% else %}
{# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #} {# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
<span style="font-size:{{(size|int-22)/2}}px" class="mx-1 fa-stack"> <span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
<i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i> <i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i>
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i> <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
</span> </span>
@@ -147,7 +139,7 @@
{% for obj in entry_data %} {% for obj in entry_data %}
{% if loop.index==1 and folders %} {% if loop.index==1 and folders %}
{% if cwd != root %} {% if cwd != root %}
<figure class="px-1 dir entry" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}" type="Directory"> <figure class="dir entry ms-1" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}" type="Directory">
<span style="font-size:{{(size|int-22)/2}}px" class="fa-stack"> <span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
<i style="color:grey" class="fas fa-folder fa-stack-2x"></i> <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> <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
@@ -156,7 +148,7 @@
</figure class="figure"> </figure class="figure">
{% else %} {% else %}
{# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #} {# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
<span style="font-size:{{(size|int-22)/2}}px" class="mx-1 fa-stack"> <span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
<i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i> <i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i>
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i> <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
</span> </span>
@@ -167,35 +159,23 @@
{% endif %} {% endif %}
{% if grouping == "Day" %} {% if grouping == "Day" %}
{% if last.printed != obj.file_details.day %} {% if last.printed != obj.file_details.day %}
{% if last.printed > 0 %} <div class="row ps-3"><h6>Day: {{obj.file_details.day}} of {{obj.file_details.month}}/{{obj.file_details.year}}</h6></div>
</div>
{% endif %}
<div class="row pl-3"><h6>Day: {{obj.file_details.day}} of {{obj.file_details.month}}/{{obj.file_details.year}}</h6></div>
<div class="row pl-3">
{% set last.printed = obj.file_details.day %} {% set last.printed = obj.file_details.day %}
{% endif %} {% endif %}
{% elif grouping == "Week" %} {% elif grouping == "Week" %}
{% if last.printed != obj.file_details.woy %} {% if last.printed != obj.file_details.woy %}
{% if last.printed > 0 %} <div class="row ps-3"><h6>Week #: {{obj.file_details.woy}} of {{obj.file_details.year}}</h6></div>
</div>
{% endif %}
<div class="row pl-3"><h6>Week #: {{obj.file_details.woy}} of {{obj.file_details.year}}</h6></div>
<div class="row pl-3">
{% set last.printed = obj.file_details.woy %} {% set last.printed = obj.file_details.woy %}
{% endif %} {% endif %}
{% elif grouping == "Month" %} {% elif grouping == "Month" %}
{% if last.printed != obj.file_details.month %} {% if last.printed != obj.file_details.month %}
{% if last.printed > 0 %} <div class="row ps-3"><h6>Month: {{obj.file_details.month}} of {{obj.file_details.year}}</h6></div>
</div>
{% endif %}
<div class="row pl-3"><h6>Month: {{obj.file_details.month}} of {{obj.file_details.year}}</h6></div>
<div class="row pl-3">
{% set last.printed = obj.file_details.month %} {% set last.printed = obj.file_details.month %}
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if obj.type.name != "Directory" %} {% if obj.type.name != "Directory" %}
{% if (not folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(cwd)) %} {% if (not folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(cwd)) %}
<figure id="{{obj.id}}" ecnt="{{loop.index}}" class="figure entry mx-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}" type="{{obj.type.name}}"> <figure id="{{obj.id}}" ecnt="{{loop.index}}" class="figure entry ms-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}" type="{{obj.type.name}}">
{% if obj.type.name=="Image" %} {% if obj.type.name=="Image" %}
<div style="position:relative; width:100%"> <div style="position:relative; width:100%">
<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a> <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
@@ -233,7 +213,7 @@
{% endif %} {% endif %}
{# if this dir is the toplevel of the cwd, show the folder icon #} {# if this dir is the toplevel of the cwd, show the folder icon #}
{% if dirname| TopLevelFolderOf(cwd) %} {% if dirname| TopLevelFolderOf(cwd) %}
<figure class="px-1 dir entry" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory"> <figure class="dir entry ms-1" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory">
<i style="font-size:{{size|int-22}}px" class="fas fa-folder"></i> <i style="font-size:{{size|int-22}}px" class="fas fa-folder"></i>
<figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption> <figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
</figure class="figure"> </figure class="figure">
@@ -241,9 +221,6 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% if grouping == "None" %}
</div class="row pl-3">
{% endif %}
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
@@ -251,9 +228,9 @@
<input type="hidden" name="cwd" id="cwd" value="{{cwd}}"> <input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
<div class="row"> <div class="row">
<div class="col my-auto d-flex justify-content-center"> <div class="col my-auto d-flex justify-content-center">
<button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); })" id="prev" name="prev" class="prev sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button> <button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); })" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-left"></i></button>
<span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span> <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
<button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); });" id="next" name="next" class="next sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button> <button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); });" id="next" name="next" class="next sm-txt btn btn-outline-secondary"><i class="fas fa-arrow-alt-circle-right"></i></button>
</div> </div>
</div> </div>
</form> </form>
@@ -424,8 +401,8 @@ function MoveDBox()
function ChangeSize(clicked_button,sz) function ChangeSize(clicked_button,sz)
{ {
$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info') $('.sz-but.btn-info').removeClass('btn-info text-white').addClass('btn-outline-info')
$(clicked_button).addClass('btn-info').removeClass('btn-outline-info') $(clicked_button).addClass('btn-info text-white').removeClass('btn-outline-info')
$('.thumb').attr( {height: sz, style: 'font-size:'+sz+'px' } ) $('.thumb').attr( {height: sz, style: 'font-size:'+sz+'px' } )
$('#size').val(sz) $('#size').val(sz)
sz=sz-22 sz=sz-22

View File

@@ -3,86 +3,67 @@
{% block main_content %} {% block main_content %}
<div class="container-fluid"> <div class="container-fluid">
<h3>{{page_title}}</h3> <h3>{{page_title}}</h3>
<div class="row col-lg-12"> <dl class="row">
<label class="form-control-plaintext col-lg-2">Job #:</label> <dt class="col-2">Job #:</dt>
<label class="form-control-plaintext col-lg-10">{{job.id}}</label> <dd class="col-10">{{job.id}}</dt>
</div> <dt class="col-2">Name:</dt>
<div class="row col-lg-12"> <dd class="col-10">{{job.name}}</dt>
<label class="form-control-plaintext col-lg-2">Name:</label> <dt class="col-2">Start Time:</dt>
<label class="form-control-plaintext col-lg-10">{{job.name}}</label> <dd class="col-10">{{job.start_time|vicdate}}</dt>
</div> <dt class="col-2">Duration:</dt>
<div class="row col-lg-12"> <dd class="col-10">{{duration}}</dd>
<label class="form-control-plaintext col-lg-2">Start Time:</label> <dt class="col-2">Last Update:</dt>
<label class="form-control-plaintext col-lg-10">{{job.start_time|vicdate}}</label> <dd class="col-10">{{job.last_update|vicdate}}</dd>
</div> <dt class="col-2">Current state:</dt>
<div class="row col-lg-12">
<label class="form-control-plaintext col-lg-2">Duration:</label>
<label class="form-control-plaintext col-lg-10">{{duration}}</label>
</div>
<div class="row col-lg-12">
<label class="form-control-plaintext col-lg-2">Last Update:</label>
<label class="form-control-plaintext col-lg-10">{{job.last_update|vicdate}}</label>
</div>
<div class="row col-lg-12">
<label class="form-control-plaintext col-lg-2">Current state:</label>
{% if job.state == "Failed" %} {% if job.state == "Failed" %}
<label class="form-control-plaintext col-lg-10 bg-danger text-white">{{job.state}}</label> <dd class="col-10 bg-danger text-white">{{job.state}}</dd>
{% elif job.state == "Withdrawn" %} {% elif job.state == "Withdrawn" %}
<label class="form-control-plaintext col-lg-10 bg-secondary text-white">{{job.state}}</label> <dd class="col-10 bg-secondary text-white">{{job.state}}</dd>
{% else %} {% else %}
<label class="form-control-plaintext col-lg-10">{{job.state}}</label> <dd class="col-10">{{job.state}}</dd>
{% endif %} {% endif %}
</div> {% if job.wait_for != None %}
{% if job.wait_for != None %} <dd class="col-2">Waiting on Job:</dd>
<div class="row col-lg-12"> <dl class="col-10"><a href="{{url_for('joblog', id=job.wait_for)}}">Job (id={{job.wait_for}})</a></dl>
<label class="form-control-plaintext col-lg-2">Waiting on Job:</label> {% endif %}
<label class="form-control-plaintext col-lg-10"><a href="{{url_for('joblog', id=job.wait_for)}}">Job (id={{job.wait_for}})</a></label> <dt class="col-2">Current File:</dt>
</div> <dd class="col-10">{{job.current_file}}</dd>
{% endif %} <dt class="col-2">Files in pass:</label>
<div class="row col-lg-12"> {% if job.num_files and job.num_files > 0 %}
<label class="form-control-plaintext col-lg-2">Current File:</label> <dd class="col-10">
<label class="form-control-plaintext col-lg-10">{{job.current_file}}</label>
</div>
<div class="row col-lg-12">
<label class="form-control-plaintext col-lg-2">Files in pass:</label>
{% if job.num_files and job.num_files > 0 %}
<div class="col-lg-10 px-0">
{% set prog=(job.current_file_num/job.num_files*100)|round|int %} {% set prog=(job.current_file_num/job.num_files*100)|round|int %}
<div class="progress mt-2" style="height:24px"> <div class="progress my-auto h-100">
<div class="progress-bar bg-info" role="progressbar" style="width: {{prog}}%;" aria-valuenow="{{prog}}" aria-valuemin="0" aria-valuemax="100">{{job.current_file_num}} of {{job.num_files}} - {{prog}}%</div> <div class="progress-bar bg-info" role="progressbar" style="width: {{prog}}%;" aria-valuenow="{{prog}}" aria-valuemin="0" aria-valuemax="100">{{job.current_file_num}} of {{job.num_files}} - {{prog}}%</div>
</div> </div>
</dd>
{% elif job.num_files == 0 and job.current_file_num > 0 %} {% elif job.num_files == 0 and job.current_file_num > 0 %}
<label class="form-control-plaintext <dd class="col-10">{{job.current_file_num}} of Unknown Total</dd>
col-lg-10">{{job.current_file_num}} of Unknown Total</label>
{% else %} {% else %}
<label class="form-control-plaintext col-lg-10">N/A</label> <dd class="col-10">N/A</dd>
{% endif %} {% endif %}
</div> </dl>
</div> <table id="jobort_tbl" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
<div class="row col-lg-12"> <thead><tr class="table-primary"><th>When</th><th>Details</th></tr></thead>
<table id="jobort_tbl" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true"> <tbody>
<thead><tr class="thead-light"><th>When</th><th>Details</th></tr></thead> {% for log in logs %}
<tbody> <tr><td>{{log.log_date|vicdate}}</td><td>{{log.log|safe}}</td></tr>
{% for log in logs %} {% endfor %}
<tr><td>{{log.log_date|vicdate}}</td><td>{{log.log|safe}}</td></tr> {% if log_cnt > logs|length %}
{% endfor %} <tr>
{% if log_cnt > logs|length %} <td class="align-middle">Remaining logs truncated</td>
<tr> <td>
<td class="align-middle">Remaining logs truncated</td> <button type="button" class="btn btn-outline-info my-0 py-1" onClick="document.body.innerHTML+='<form id=_fm method=POST action={{url_for('joblog', id=job.id)}}></form>';document.getElementById('_fm').submit();">Show all logs</button>
<td> </td>
<button type="button" class="btn btn-info my-0 py-1" onClick="document.body.innerHTML+='<form id=_fm method=POST action={{url_for('joblog', id=job.id)}}></form>';document.getElementById('_fm').submit();">Show all logs</button> </tr>
</td> {% endif %}
</tr> </tbody>
{% endif %} </table>
</tbody>
</table>
</div>
</div class="containter"> </div class="containter">
{% endblock main_content %} {% endblock main_content %}
{% block script_content %} {% block script_content %}
<script> <script>
{% if first_logs_only and job.pa_job_state != "Completed" %} {% if first_logs_only and job.pa_job_state != "Completed" %}
setTimeout(function(){ window.location.reload(1); }, 3000 ) setTimeout(function(){ window.location.reload(1); }, 3000 )
{% endif %} {% endif %}
</script> </script>
{% endblock script_content %} {% endblock script_content %}

View File

@@ -49,19 +49,21 @@
{% endfor %} {% endfor %}
</script> </script>
<div class="container-fluid">
<h3>{{page_title}}</h3> <h3>{{page_title}}</h3>
<table id="job_tbl" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true"> <table id="job_tbl" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
<thead> <thead>
<tr class="thead-light"><th>Active Jobs</th><th>Job Started</th><th>Progress</th></tr> <tr class="table-primary"><th>Active Jobs</th><th>Job Started</th><th>Progress</th></tr>
</thead> </thead>
<tbody> <tbody>
<script> <script>
for(el in active_rows) for(el in active_rows)
document.write(active_rows[el]) document.write(active_rows[el])
document.write( '<tr class="thead-light"><th>Completed Jobs</th><th>Job Started</th><th>Job Completed</th></tr>' ) document.write( '<tr class="table-primary"><th>Completed Jobs</th><th>Job Started</th><th>Job Completed</th></tr>' )
for(el in completed_rows) for(el in completed_rows)
document.write(completed_rows[el]) document.write(completed_rows[el])
</script> </script>
</tbody> </tbody>
</table> </table>
</div class="container-fluid">
{% endblock main_content %} {% endblock main_content %}

View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/fontawesome-free-5.15.3-web/css/all.min.css' ) }}"> <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/fontawesome-free-5.15.3-web/css/all.min.css' ) }}">
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-4.6.0-dist/css/bootstrap.min.css' ) }}"> <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-5.0.2-dist/css/bootstrap.min.css' ) }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/jquery.contextMenu.css' ) }}"> <link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/jquery.contextMenu.css' ) }}">
<!-- code to get bootstrap to work --> <!-- code to get bootstrap to work -->

View File

@@ -4,7 +4,7 @@
<h3>Show All People</h3> <h3>Show All People</h3>
<table id="person_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true"> <table id="person_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
<thead> <thead>
<tr class="thead-light"><th>Tag</th><th>Firstname(s)</th><th>Surname</th><th></th></tr> <tr class="table-primary"><th>Tag</th><th>Firstname(s)</th><th>Surname</th><th></th></tr>
</thead> </thead>
<tbody> <tbody>
{% for person in persons %} {% for person in persons %}

View File

@@ -4,7 +4,7 @@
<h3>Show All Reference Images</h3> <h3>Show All Reference Images</h3>
<table id="refimg_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true"> <table id="refimg_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
<thead> <thead>
<tr class="thead-light"><th>Filename</th></tr> <tr class="table-primary"><th>Filename</th></tr>
</thead> </thead>
<tbody> <tbody>
{% for refimg in refimgs %} {% for refimg in refimgs %}

View File

@@ -56,15 +56,14 @@
context.beginPath() context.beginPath()
context.lineWidth = 0.1 context.lineWidth = 0.1
context.font = "30px Arial" context.font = "30px Arial"
context.globalAlpha = 0.7 context.globalAlpha = 0.6
bbox = context.measureText(faces[i].who); bbox = context.measureText(faces[i].who);
console.log(bbox)
f_h=bbox.fontBoundingBoxAscent f_h=bbox.fontBoundingBoxAscent
if( bbox.fontBoundingBoxDescent ) if( bbox.fontBoundingBoxDescent )
f_h += bbox.fontBoundingBoxDescent f_h += bbox.fontBoundingBoxDescent
f_h -= 8 f_h -= 8
context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h ) context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h )
context.fillStyle="black" context.fillStyle="white"
context.fill() context.fill()
context.stroke(); context.stroke();
context.beginPath() context.beginPath()
@@ -102,7 +101,7 @@
<div id="viewer" class="container-fluid"> <div id="viewer" class="container-fluid">
{% set max=eids.split(',')|length %} {% set max=eids.split(',')|length %}
<div id="bbar" class="form-row offset-lg-1 col"> <div id="bbar" class="form-row offset-lg-1 col">
<span id="faces" class="badge p-2 text-secondary" data-toggle="button" onClick="Toggle('faces')" style="border: 1px solid #5bc0de" faces=0><i class="fas fa-brain fa-2x"></i></button> <span id="faces" class="badge p-2 text-secondary" onClick="Toggle('faces')" style="border: 1px solid #5bc0de" faces=0><i class="fas fa-brain fa-2x"></i></button>
</div> </div>
<center> <center>
<input type="hidden" name="eids" value={{eids}}> <input type="hidden" name="eids" value={{eids}}>