gallery.html
HTML document, ASCII text
1{% extends "default.html" %} 2 3{% block title %}Gallery {{ gallery.title }} | gigadata{% endblock %} 4 5{% block content %} 6<x-frame style="--width: 768px" class="vbox"> 7<h1>{{ gallery.title }}</h1> 8<p>{{ gallery.description }}</p> 9<p> 10<a href="/gallery/{{ gallery.id }}/users">Users</a> {% if have_permission %} | 11<a href="/gallery/{{ gallery.id }}/edit">Edit</a>{% endif %} 12</p> 13{% if have_permission %} 14<form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/add-picture"> 15<input name="picture_id" type="text" placeholder="Picture ID" required aria-label="Picture ID"> 16<button type="submit">Add picture</button> 17</form> 18<details> 19<summary>Add from query</summary> 20<form method="POST" action="/gallery/{{ gallery.id }}/add-pictures-from-query"> 21<label> 22<span class="required-asterisk">Query YAML</span> 23<textarea name="query" required rows="8"></textarea> 24</label> 25<button type="submit">Add pictures</button> 26</form> 27</details> 28{% endif %} 29<h2>Pictures</h2> 30<ul class="thumbnail-list"> 31{% for picture in gallery.pictures %} 32<li> 33<a href="/picture/{{ picture.resource.id }}"> 34<div class="annotation-zone"> 35<img src="/raw/picture/{{ picture.resource.id }}" alt="{{ picture.resource.title }}"> 36{% for region in picture.resource.regions %} 37{% if region.json.type == "bbox" %} 38<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 39<rect x="{{ region.json.shape.x * picture.resource.width }}" 40y="{{ region.json.shape.y * picture.resource.height }}" 41width="{{ region.json.shape.w * picture.resource.width }}" 42height="{{ region.json.shape.h * picture.resource.height }}" 43fill="none" class="shape-bbox shape" 44></rect> 45</svg> 46{% elif region.json.type == "polygon" %} 47<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 48<polygon points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon> 49</svg> 50{% elif region.json.type == "polyline" %} 51<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 52<polyline points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline> 53</svg> 54{% elif region.json.type == "point" %} 55<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 56<circle cx="{{ region.json.shape.x * picture.resource.width }}" cy="{{ region.json.shape.y * picture.resource.height }}" r="0" fill="none" class="shape-point shape"></circle> 57</svg> 58{% endif %} 59{% endfor %} 60</div> 61<div class="list-detail"> 62{{ picture.resource.title }} 63</div> 64</a> 65<div class="list-more"> 66<form action="/gallery/{{ gallery.id }}/remove-picture" method="POST"> 67<input type="hidden" name="picture_id" value="{{ picture.resource.id }}"> 68<button type="submit" class="button-flat">Remove</button> 69</form> 70</div> 71</li> 72{% endfor %} 73</ul> 74</x-frame> 75{% endblock %}