From 388c3eed9b1c9f202de9660af971085d8b026834 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Sun, 4 Jul 2021 20:05:15 +1000
Subject: [PATCH] reference images are now added in person.py (and removed) as
 buttons on person page.  Will need to re-think the whole of refimg.py

---
 templates/person.html | 59 ++++++++++++++++++++++++++++++-------------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/templates/person.html b/templates/person.html
index 727ca68..a46ec94 100644
--- a/templates/person.html
+++ b/templates/person.html
@@ -1,42 +1,67 @@
 {% extends "base.html" %} {% block main_content %}
-		<div class="container">
-			<h3 class="offset-lg-2">{{page_title}}</h3>
-			<div class="row">
-				<form class="form form-inline col-lg-12" action="" method="POST">
+		<div class="container-fluid">
+                <h3 class="offset-lg-3">{{page_title}}</h3>
+				<form id="pfm" class="form form-inline" action="" method="POST">
 					{% for field in form %}
 						{% if field.type == 'HiddenField' or field.type == 'CSRFTokenField' %}
 							{{field}}<br>
 						{% elif field.type != 'SubmitField' %}
 							<div class="form-row col-lg-12">
-							{{ field.label( class="col-lg-2" ) }}
+							{{ field.label( class="col-lg-3" ) }}
 							{{ field( class="form-control col" ) }}
 							</div class="form-row col-lg-12">
 						{% endif %}
 					{% endfor %}
 					<div class="form-row col-lg-12">
-						<span class="col-lg-2"><center>Reference Images:</center></span>
-                        <div class="form-row col">
-						{% for ref_img in reference_imgs %}
-                            <div class="form-control col-lg">
-                                <input id="ref-img-id-{{ref_img.id}}" name="ref-img-id-{{ref_img.id}}" type="checkbox"
-                                {% if object is defined and ref_img in object.refimg %}
-                                checked
-                                {% endif %}
-                                > {{ref_img.fname}}</input>
-                            </div>
+						<span class="col-lg-3"><center>Reference Images:</center></span>
+						{% for ref_img in person.refimg %}
+                            {% set offset="" %}
+                            {% if (loop.index % 10) == 0 %}
+                                {% set offset= "offset-lg-3" %}
+                            {% endif %}
+                            <div id="RI{{ref_img.id}}" class="px-0 col-lg-1 w-100 {{offset}}">
+                                <input type="hidden" id="ref-img-id-{{ref_img.id}}" name="ref-img-id-{{ref_img.id}}" value="1"></input>
+                                <figure style="border: 1px solid #5bc0de; border-radius: 3px;" class="figure my-auto h-100 w-100">
+                                    <div style="position:relative">
+                                        <center><img height="128" class="thumb" src="data:image/jpeg;base64,{{ref_img.thumbnail}}"></img></center>
+                                        <div style="position:absolute; top: 2; right: 2;">
+                                            <button type="button" style="font-size:12px" class="btn btn-danger" 
+                                                onClick="DelImg({{ref_img.id}})">X</button>
+                                        </div>
+                                        <figcaption class="figure-caption text-center text-wrap text-break">{{ref_img.fname}}</figcaption>
+                                    </div>
+                                </figure>
+                            </div id="/RI*">
 						{% endfor %}
-                        </div class="form-row col-lg-10">
 					</div class="form-row col-lg-12">
 					<div class="form-row col-lg-12">
 					<br>
 					</div class="form-row">
 					<div class="form-row col-lg-12">
-						{{ form.submit( class="btn btn-primary offset-lg-2 col-lg-2" )}}
+						{{ form.save( id="save", class="btn btn-primary offset-lg-3 col-lg-2" )}}
 						{% if 'Edit' in page_title %}
 							{{ form.delete( class="btn btn-outline-danger col-lg-2" )}}
 						{% endif %}
 					</div class="form-row">
 				</form>
+                <form id="new_ri" class="form" action="{{url_for('add_refimg')}}" method="POST" enctype="multipart/form-data">
+                    <input type="hidden" name="person_id" value="{{person.id}}"></input>
+                    <label class="btn btn-success offset-lg-3 col-lg-2">
+                        Add reference image
+                        <input name="refimg_file" type="file" onChange="$('#new_ri').submit()" style="display:none;" id="new_file_chooser">
+                    </label>
+                </form>
 			</div class="row">
 		</div class="container">
 {% endblock main_content %}
+
+{% block script_content %}
+<script>
+function DelImg(ri_num)
+{
+    $('#RI'+ri_num).remove()
+    $('#pfm').submit()
+}
+</script>
+{% endblock script_content %}
+