the_works/the_works/templates/views/titelbild.html

113 lines
4.9 KiB
HTML

{% extends 'base.html' %}
{% block title %}Titelbilder{% endblock title %}
{% block head %}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/datatables.css') }}">
{% endblock head %}
{% block heading %}Titelbilder{% endblock heading %}
{% block content %}
{% include "_icons.svg" %}
<table id="titelbild-table">
<thead>
<tr>
<th>Titelbild</th>
<th>Dateiname</th>
<th>Abmessungen (BxH)</th>
<th>Dateigröße</th>
<th colspan="2">Aktionen</th>
</tr>
</thead>
<tbody>
{% for titelbild in titelbilder %}
<tr id="titelbild-{{ titelbild['ID'] }}">
<td title="Titelbild"><a href="{{ titelbild['Bild'] }}"><img src="{{ titelbild['Thumbnail'] }}" /></a></td>
<td>{{ titelbild["Dateiname"] }}</td>
<td>{{ titelbild["Breite"] }}x{{ titelbild["Hoehe"]}}</td>
<td>{{ sizeof_fmt(titelbild["Dateigroesse"]) }}</td>
<td class="action action-update" data-id="{{ titelbild['ID'] }}" data-current-bild="{{ titelbild['Bild'] }}" data-current-thumbnail="{{ titelbild['Thumbnail'] }}" data-current-dateiname="{{ titelbild['Dateiname'] }}" data-current-dateigroesse="{{ titelbild['Dateigroesse'] }}" data-current-breite="{{ titelbild['Breite'] }}" data-current-hoehe="{{ titelbild['Hoehe'] }}"><a href="#" title="Titelbild bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
<td id="delete-{{ titelbild['ID'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('titelbild.delete', id=titelbild['ID']) }}" title="Titelbild löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
</tr>
{% endfor %}
</tbody>
</table>
<dialog aria-labelledby="dialog-heading" id="titelbild-modal">
<article>
<form id="titelbild_detail_form" enctype="multipart/form-data" method="dialog" method="dialog">
<header>
<button class="modal-close" aria-label="close" rel="prev" formnovalidate></button>
<h1 id="dialog-heading">#</h1>
</header>
<section id="titelbild">
<label>
<span class="required">Neues Bild</span>
</label>
<label for="titelbild-upload" role="button">Bild aussuchen</label>
<div class="thumbnail-div">
<a class="thumbnail-a display-none" id="titelbild-bild" href="" title="zum Originalbild">
<img class="thumbnail-img" id="titelbild-thumbnail" alt="Thumbnail" src="" />
</a>
<div class="placeholder" id="titelbild-placeholder">
<svg viewbox="0 0 90 128">
<use href="#placeholder" />
</svg>
</div>
</div>
<div id="titelbild-info" class="display-none">
<small>
<span id="titelbild-dateiname"></span> Bytes<br />
<span id="titelbild-dateigroesse"></span> Bytes, <span id="titelbild-breite"></span>x<span id="titelbild-hoehe"></span> px
</small>
</div>
<div id="titelbild-controls">
<input type="file" id="titelbild-upload" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" accept="image/*"/>
<small>max. Dateigröße: 2 MB</small>
<input type="hidden" id="titelbild-haschanged" name="form_Titelbild_haschanged" value="" />
</div>
</section>
<section id="current" class="display-none">
<label>Bisheriges Bild</label>
<div class="thumbnail-div">
<a class="thumbnail-a" id="current-bild" href="" title="zum Originalbild">
<img class="thumbnail-img" id="current-thumbnail" alt="Thumbnail" src="" />
</a>
</div>
<div id="current-info">
<small>
<span id="current-dateiname"></span> Bytes<br />
<span id="current-dateigroesse"></span> Bytes, <span id="current-breite"></span>x<span id="current-hoehe"></span> px
</small>
</div>
</section>
<footer class="grid">
<button id="form_submit" type="submit" formmethod="post" formaction="{{ url_for('titelbild.create') }}">OK</button>
<button class="secondary" aria-label="close" formmethod="dialog" formnovalidate>Abbrechen</button>
</footer>
</form>
</article>
</dialog>
{% endblock content %}
{% block script %}
<script src="{{ url_for('static', filename='js/datatables.js') }}"></script>
<script src="{{ url_for('static', filename='js/init_dt.js') }}"></script>
<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
<script src="{{ url_for('static', filename='js/fileinput.js') }}"></script>
<script>
window.onload = function () {
initDataTable("titelbild-table");
initCreateButton("titelbild-table", "titelbild hinzufügen …");
initModal("titelbild-modal", [], ["Neues Titelbild", "Titelbild bearbeiten"], ["{{ url_for('titelbild.create') }}", "{{ url_for('titelbild.update', id=-1) }}"]);
initFileinput("titelbild", "current", "titelbild-modal");
}
</script>
{% endblock script %}