tobias/the_works
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added custom dropdown components for Genre and Herausgeber form fields

Browse Source
This commit is contained in:
eclipse 2025-05-11 16:19:00 +02:00
parent 05a8e69b9e
commit c5fd83b407
6 changed files with 89 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
the_works/templates/views/text.html
View File

@ -46,8 +46,8 @@
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
window.onload = function () {
initDataTable("#text-table");
initCreateButton("Text hinzufügen", "{{ url_for('text.read', id=0) }}", "#text-table");
initDataTable("text-table");
initCreateButton("text-table", "Text hinzufügen", "{{ url_for('text.read', id=0) }}");
}
</script>
{% endblock script %}

44
the_works/templates/views/text_detail.html
View File

@ -9,10 +9,8 @@ Text bearbeiten
{% endif %}
{% endblock title %}
{% block script %}
<script>
</script>
{% endblock script %}
{% block head %}
{% endblock head %}
{% block heading %}
{% if create_mode %}
@ -44,6 +42,25 @@ Text bearbeiten
{% for r in reihen %}<option value="{{ r.ID }}"{% if r.ID == text['Reihe'] %} selected{% endif %}>{{ r.Titel }}</option>{% endfor %}
</select>
</label>
<label>
Genre(s)
<details id="form_Genre_dropdown" class="dropdown">
<summary id="form_Genre_summary" data-default="kein Genre ausgewählt"></summary>
<ul>
<li>
<input type="search" id="form_Genre_search" aria-label="search" placeholder="Genres filtern …" value="" />
</li>
{% for g in genres %}
<li>
<label>
<input id="form_Genre_{{ g.ID }}" name="form_Genre" data-content="{{ g.Genre }}" type="checkbox" value="{{ g.ID }}" {% if g.ID in text["Genres"] %} checked {% endif %}/>
{{ g.Genre }}
</label>
</li>
{% endfor %}
</ul>
</details>
</label>
</div>
<div>
<label>
@ -62,16 +79,6 @@ Text bearbeiten
</label>
</div>
</section>
<hr />
<section>
<fieldset>
<legend>Genre(s)</legend>
{% for g in genres %}
<input id="form_Genres_{{ g.ID }}" name="form_Genres" type="checkbox" value="{{ g.ID }}" {% if g.ID in text["Genres"] %} checked {% endif %}/>
<label for="form_Genres_{{ g.ID }}">{{ g.Genre }}</label>
{% endfor %}
</fieldset>
</section>
<footer class="grid">
<button id="form_submit" type="submit" formmethod="post" formaction="{% if create_mode %}{{ url_for('text.create') }}{% else %}{{ url_for('text.update', id=text['ID']) }}{% endif %}">
@ -81,4 +88,11 @@ Text bearbeiten
<a role="button" class="contrast" href="{{ url_for('text.all') }}">Abbrechen (nicht speichern)</a>
</footer>
</form>
{% endblock content %}
{% endblock content %}
{% block script %}
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
window.onload = () => initDropdownSelect(document.getElementById("form_Genre_dropdown"));
</script>
{% endblock script %}

10
the_works/templates/views/werk.html
View File

@ -45,13 +45,9 @@
<script src="{{ url_for('static', filename='datatables.js') }}"></script>
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
window.onload = function () {
initDataTable("#werk-table");
initCreateButton({
title: "Werk hinzufügen",
href: "{{ url_for('werk.read', id=0) }}",
table_id: "#werk-table"
});
window.onload = () => {
initDataTable("werk-table");
initCreateButton("werk-table", "Werk hinzufügen", "{{ url_for('werk.read', id=0) }}");
}
</script>
{% endblock script %}

120
the_works/templates/views/werk_detail.html
View File

@ -53,16 +53,6 @@ Werk bearbeiten
Reihennummer
<input id="form_Reihennummer" name="form_Reihennummer" aria-label="Reihennummer" placeholder="keine Reihennummer" value="{{ werk['Reihennummer'] }}" />
</label>
<label>
Erscheinungsdatum (TT-MM-JJJJ, MM-JJJJ, JJJJ oder leer)
<div class="grid">
<input type="number" min="1" max="31" id="form_Erscheinungstag" name="form_Erscheinungstag" aria-label="Erscheinungstag" placeholder="Tag" value="{{ werk['Erscheinungsdatum'][8:] }}" />
<input type="number" min="1" max="12" id="form_Erscheinungsmonat" name="form_Erscheinungsmonat" aria-label="Erscheinungsmonat" placeholder="Monat" value="{{ werk['Erscheinungsdatum'][5:7] }}" />
<input type="number" min="1980" max="2100" id="form_Erscheinungsjahr" name="form_Erscheinungsjahr" aria-label="Erscheinungsjahr" placeholder="Jahr" value="{{ werk['Erscheinungsdatum'][:4] }}" />
</div>
</label>
</div>
<div>
<label>
Verlag
<select id="form_Verlag" name="form_Verlag" aria-label="Verlag">
@ -74,6 +64,16 @@ Werk bearbeiten
Preis
<input id="form_Preis" name="form_Preis" aria-label="Preis" placeholder="kein Preis" value="{{ werk['Preis'] }}" />
</label>
</div>
<div>
<label>
Erscheinungsdatum (TT-MM-JJJJ, MM-JJJJ, JJJJ oder leer)
<div class="grid">
<input type="number" min="1" max="31" id="form_Erscheinungstag" name="form_Erscheinungstag" aria-label="Erscheinungstag" placeholder="Tag" value="{{ werk['Erscheinungsdatum'][8:] }}" />
<input type="number" min="1" max="12" id="form_Erscheinungsmonat" name="form_Erscheinungsmonat" aria-label="Erscheinungsmonat" placeholder="Monat" value="{{ werk['Erscheinungsdatum'][5:7] }}" />
<input type="number" min="1980" max="2100" id="form_Erscheinungsjahr" name="form_Erscheinungsjahr" aria-label="Erscheinungsjahr" placeholder="Jahr" value="{{ werk['Erscheinungsdatum'][:4] }}" />
</div>
</label>
<label>
ISBN-13
<input id="form_ISBN_13" name="form_ISBN_13" aria-label="ISBN-13" placeholder="keine ISBN-13" value="{{ werk['ISBN_13'] }}" />
@ -86,45 +86,47 @@ Werk bearbeiten
ISSN
<input id="form_ISSN" name="form_ISSN" aria-label="ISSN" placeholder="keine ISSN" value="{{ werk['ISSN'] }}" />
</label>
<label>
Genre(s)
<details id="form_Genre_dropdown" class="dropdown">
<summary id="form_Genre_summary" data-default="kein Genre ausgewählt"></summary>
<ul>
<li>
<input type="search" id="form_Genre_search" aria-label="search" placeholder="Genres filtern …" value="" />
</li>
{% for g in genres %}
<li>
<label>
<input id="form_Genre_{{ g.ID }}" name="form_Genre" data-content="{{ g.Genre }}" type="checkbox" value="{{ g.ID }}" {% if g.ID in werk["Genres"] %} checked {% endif %}/>
{{ g.Genre }}
</label>
</li>
{% endfor %}
</ul>
</details>
</label>
<label>
Herausgeber:in(nen)
<details id="form_Herausgeber_dropdown" class="dropdown">
<summary id="form_Herausgeber_summary" data-default="kein(e) Herausgeber:in(nen) ausgewählt"></summary>
<ul>
<li>
<input type="search" id="form_Herausgeber_search" aria-label="search" placeholder="Herausgeber:innen filtern …" value="" />
</li>
{% for h in hrsg %}
<li>
<label>
<input id="form_Herausgeber_{{ h.ID }}" name="form_Herausgeber" data-content="{{ h.Name }}" type="checkbox" value="{{ h.ID }}" {% if h.ID in werk["Herausgeber"] %} checked {% endif %}/>
{{ h.Name }}
</label>
</li>
{% endfor %}
</ul>
</details>
</label>
</div>
</section>
<hr />
<section>
<fieldset>
<legend>Herausgeber:in(nen)</legend>
<div class="grid">
{% for column in hrsg | slice(4) %}
<div>
{% for h in column %}
<label>
<input id="form_Herausgeber_{{ h.ID }}" name="form_Herausgeber" type="checkbox" value="{{ h.ID }}" {% if h.ID in werk["Herausgeber"] %} checked {% endif %}/>
{{ h.Name }}
</label>
{% endfor %}
</div>
{% endfor %}
</div>
</fieldset>
</section>
<hr />
<section>
<fieldset>
<legend>Genre(s)</legend>
<div class="grid">
{% for column in genres | slice(4) %}
<div>
{% for g in column %}
<label>
<input id="form_Genres_{{ g.ID }}" name="form_Genres" type="checkbox" value="{{ g.ID }}" {% if g.ID in werk["Genres"] %} checked {% endif %}/>
{{ g.Genre }}
</label>
{% endfor %}
</div>
{% endfor %}
</div>
</fieldset>
</section>
<hr />
<section class="grid">
<label>
Klappentext
@ -155,29 +157,11 @@ Werk bearbeiten
{% endblock content %}
{% block script %}
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
function validate_date() {
let t = document.getElementById("form_Erscheinungstag");
let m = document.getElementById("form_Erscheinungsmonat");
let j = document.getElementById("form_Erscheinungsjahr");
t.setCustomValidity("");
t.setAttribute("aria-invalid", "false");
m.setCustomValidity("");
m.setAttribute("aria-invalid", "false");
console.log("This is function validate_date(): tag/monat/jahr is " + t.value + "/" + m.value + "/" + j.value); //DEBUG
if ( t.value != "" ) {
if ( j.value == "" || m.value == "" ) {
t.setCustomValidity("wenn der Tag angegeben ist, müssen Monat und Jahr ebenfalls angegeben sein");
t.setAttribute("aria-invalid", "true");
t.reportValidity();
}
} else if ( m.value != "" ) {
if ( j.value == "") {
m.setCustomValidity("wenn der Monat angegeben ist, muss das Jahr ebenfalls angegeben sein");
m.setAttribute("aria-invalid", "true");
m.reportValidity();
}
}
window.onload = () => {
initDropdownSelect(document.getElementById("form_Genre_dropdown"));
initDropdownSelect(document.getElementById("form_Herausgeber_dropdown"));
}
</script>
{% endblock script %}

2
the_works/views/text.py
View File

@ -75,7 +75,7 @@ def update(id):
text.Sprache = request.form["form_Sprache"]
# update genre list by removing genres not in form selection and adding selected ones not currently in list
form_set = set(map(lambda g: int(g), request.form.getlist("form_Genres")))
form_set = set(map(lambda g: int(g), request.form.getlist("form_Genre")))
for g in set(text.genres) - form_set:
text.genres.remove(g)
for g in form_set - set(text.genres):

4
the_works/views/werk.py
View File

@ -74,7 +74,7 @@ def create():
Klappentext = request.form["form_Klappentext"] or None,
Anmerkungen = request.form["form_Anmerkungen"] or None
)
for g in request.form.getlist("form_Genres"):
for g in request.form.getlist("form_Genre"):
werk.genres.append(g)
for h in request.form.getlist("form_Herausgeber"):
werk.herausgeber.append(h)
@ -105,7 +105,7 @@ def update(id):
werk.Anmerkungen = request.form["form_Anmerkungen"] or None
# update genre list by removing genres not in form selection and adding selected ones not currently in list
form_set = set(map(lambda g: int(g), request.form.getlist("form_Genres")))
form_set = set(map(lambda g: int(g), request.form.getlist("form_Genre")))
for g in set(werk.genres) - form_set:
werk.genres.remove(g)
for g in form_set - set(werk.genres):