ross/toptrumps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

p

Browse Source
This commit is contained in:
Ross
2025-12-05 13:33:34 +00:00
parent 78240090f1
commit bb8298b18c
9 changed files with 185 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_form.html
+32 -4
View File
@@ -131,19 +131,47 @@
<div class="field-body">
<div class="field">
<label class="label">{{ form.speed.label }}</label>
<div class="control">{{ form.speed }}</div>
<div class="control">
<div class="field has-addons">
<div class="control is-expanded">{{ form.speed }}</div>
<div class="control">
<a class="button is-static">km/h</a>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">{{ form.weight.label }}</label>
<div class="control">{{ form.weight }}</div>
<div class="control">
<div class="field has-addons">
<div class="control is-expanded">{{ form.weight }}</div>
<div class="control">
<a class="button is-static">kg</a>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">{{ form.intelligence.label }}</label>
<div class="control">{{ form.intelligence }}</div>
<div class="control">
<div class="field has-addons">
<div class="control is-expanded">{{ form.intelligence }}</div>
<div class="control">
<a class="button is-static">score</a>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">{{ form.height.label }}</label>
<div class="control">{{ form.height }}</div>
<div class="control">
<div class="field has-addons">
<div class="control is-expanded">{{ form.height }}</div>
<div class="control">
<a class="button is-static">m</a>
</div>
</div>
</div>
</div>
</div>
</div>
cards/templates/cards/bulk_edit.html
+69 -12
View File
@@ -2,13 +2,30 @@
{% block content %}
<section class="section">
<div class="container">
<h2 class="title is-4">Cards overview — bulk edit</h2>
<p class="subtitle is-6">Edit multiple cards inline and save changes in one go.</p>
<style>
/* Allow inputs inside the table to wrap on narrow viewports */
.table-container .field.has-addons{white-space:normal}
.table-container .control.is-expanded{width:100%}
.table-container input.input{min-width:100px}
.table-container td{padding-left: 0.1rem; padding-right: 0.1rem;}
/* Ensure thumbnails don't shrink layout unexpectedly */
.bulk-thumb{flex:none}
/* Make this page full-bleed: allow the app container to use the full viewport width */
.app-container{max-width:none; width:100%; padding-left:0.5rem; padding-right:0.5rem}
/* Remove extra section padding so content touches edges if needed */
section.section{padding-left:0; padding-right:0}
/* Table container: allow horizontal scroll and make table use full available width */
.table-container{width:100%; overflow-x:auto}
.table-container .table{min-width:1100px}
</style>
<form method="post" action="{% url 'cards:overview_bulk_update' %}">
{% csrf_token %}
<table class="table is-fullwidth is-striped">
<div class="table-container">
<table class="table is-fullwidth is-striped">
<thead>
<tr>
<th>Preview</th>
@@ -35,10 +52,30 @@
</td>
<td>{{ form.name }}</td>
<td>{{ form.background }}</td>
<td style="width:90px">{{ form.speed }}</td>
<td style="width:90px">{{ form.weight }}</td>
<td style="width:90px">{{ form.height }}</td>
<td style="width:90px">{{ form.intelligence }}</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded">{{ form.speed }}</div>
<div class="control"><a class="button is-static">km/h</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded">{{ form.weight }}</div>
<div class="control"><a class="button is-static">kg</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded">{{ form.height }}</div>
<div class="control"><a class="button is-static">m</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded">{{ form.intelligence }}</div>
<div class="control"><a class="button is-static">score</a></div>
</div>
</td>
<td style="width:90px">ID: {{ form.instance.pk }}</td>
</tr>
{% endfor %}
@@ -61,16 +98,37 @@
{% endfor %}
</select></div>
</td>
<td><input class="input" name="speed-{{ card.pk }}" value="{{ card.speed }}"></td>
<td><input class="input" name="weight-{{ card.pk }}" value="{{ card.weight }}"></td>
<td><input class="input" name="height-{{ card.pk }}" value="{{ card.height }}"></td>
<td><input class="input" name="intelligence-{{ card.pk }}" value="{{ card.intelligence }}"></td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" name="speed-{{ card.pk }}" value="{{ card.speed }}"></div>
<div class="control"><a class="button is-static">km/h</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" name="weight-{{ card.pk }}" value="{{ card.weight }}"></div>
<div class="control"><a class="button is-static">kg</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" name="height-{{ card.pk }}" value="{{ card.height }}"></div>
<div class="control"><a class="button is-static">m</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" name="intelligence-{{ card.pk }}" value="{{ card.intelligence }}"></div>
<div class="control"><a class="button is-static">score</a></div>
</div>
</td>
<td>ID: {{ card.pk }}</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</table>
</div>
<div class="field">
<div class="control">
@@ -79,6 +137,5 @@
</div>
</div>
</form>
</div>
</section>
{% endblock %}
cards/views.py
+29 -6
View File
@@ -1,6 +1,7 @@
from django.shortcuts import render, get_object_or_404, redirect
from django.http import HttpResponse, HttpResponseBadRequest
from django.template.loader import render_to_string
import os
from .models import Dinosaur, BackgroundImage
from .forms import DinosaurBulkFormSet
from .forms import DinosaurForm
@@ -26,7 +27,16 @@ def card_create(request):
if request.method == 'POST':
form = DinosaurForm(request.POST, request.FILES)
if form.is_valid():
card = form.save()
# Save instance with commit=False so we can set a default name
# from the uploaded image filename when the name is empty.
card = form.save(commit=False)
if not card.name:
image_file = form.cleaned_data.get('image')
if image_file and getattr(image_file, 'name', None):
base = os.path.splitext(image_file.name)[0]
# replace separators and title-case for a nicer default
card.name = base.replace('_', ' ').replace('-', ' ').strip().title()
card.save()
if is_htmx(request):
card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
# Also return an out-of-band fragment to replace/clear the form container
@@ -53,7 +63,15 @@ def card_edit(request, pk):
if request.method == 'POST':
form = DinosaurForm(request.POST, request.FILES, instance=card)
if form.is_valid():
card = form.save()
# Save with commit=False to allow setting a default name from an
# uploaded image if the instance has no name.
card = form.save(commit=False)
if not card.name:
image_file = form.cleaned_data.get('image')
if image_file and getattr(image_file, 'name', None):
base = os.path.splitext(image_file.name)[0]
card.name = base.replace('_', ' ').replace('-', ' ').strip().title()
card.save()
if is_htmx(request):
card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
# Clear the form container via OOB so the edit form disappears after successful save
@@ -150,17 +168,22 @@ def cards_overview(request):
"""Overview page showing all cards in a table for quick edits."""
backgrounds = BackgroundImage.objects.all()
qs = Dinosaur.objects.order_by('name')
formset = None
return render(request, 'cards/bulk_edit.html', {'cards': qs, 'backgrounds': backgrounds})
# Use a modelformset so the template renders the management form
formset = DinosaurBulkFormSet(queryset=qs)
return render(request, 'cards/bulk_edit.html', {'formset': formset, 'backgrounds': backgrounds})
def cards_bulk_update(request):
"""Handle POST from the bulk edit formset and save changes."""
if request.method != 'POST':
return HttpResponseBadRequest('Only POST allowed')
# If someone visits the bulk-update URL with GET, redirect them back
# to the overview page instead of returning a 400 Bad Request.
return redirect('cards:overview')
formset = None
qs = Dinosaur.objects.order_by('name')
try:
formset = DinosaurBulkFormSet(request.POST)
# Pass the same queryset so management/initial forms align with the rendered formset
formset = DinosaurBulkFormSet(request.POST, queryset=qs)
except Exception:
return HttpResponseBadRequest('Invalid submission')
if formset.is_valid():
db.sqlite3
BIN
View File
Binary file not shown.
media/dinosaurs/Barosaurus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

media/dinosaurs/Diplodocus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

media/dinosaurs/ankylosaurus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

templates/cards/_form.html
+11
View File
@@ -112,6 +112,17 @@
if(!label) return;
if(fi.files.length === 0) label.textContent = 'No file chosen';
else label.textContent = fi.files.length > 1 ? fi.files.length + ' files selected' : fi.files[0].name;
try {
const nameInput = formRoot.querySelector('input[name="name"]');
if(nameInput && (!nameInput.value || nameInput.value.trim() === '')){
const f = fi.files && fi.files[0];
if(f && f.name){
const base = f.name.replace(/\.[^/.]+$/, '');
const title = base.replace(/[_-]+/g, ' ').split(/\s+/).map(function(w){ return w.length? (w.charAt(0).toUpperCase() + w.slice(1)) : ''; }).join(' ').trim();
if(title) nameInput.value = title;
}
}
}catch(e){ /* ignore UI enhancement errors */ }
});
const outerLabel = fi.closest('.file').querySelector('.file-label');
if(outerLabel && !outerLabel.contains(fi)){
templates/cards/bulk_edit.html
+44 -8
View File
@@ -2,13 +2,29 @@
{% block content %}
<section class="section">
<div class="container">
<h2 class="title is-4">Cards overview — bulk edit</h2>
<p class="subtitle is-6">Edit multiple cards inline and save changes in one go.</p>
<style>
/* Allow inputs inside the table to wrap on narrow viewports */
.table-container .field.has-addons{white-space:normal}
.table-container .control.is-expanded{width:100%}
.table-container input.input{min-width:50px}
/* Ensure thumbnails don't shrink layout unexpectedly */
.bulk-thumb{flex:none}
/* Make this page full-bleed: allow the app container to use the full viewport width */
.app-container{max-width:none; width:100%; padding-left:0.5rem; padding-right:0.5rem}
/* Remove extra section padding so content touches edges if needed */
section.section{padding-left:0; padding-right:0}
/* Table container: allow horizontal scroll and make table use full available width */
.table-container{width:100%; overflow-x:auto}
.table-container .table{min-width:1100px}
</style>
<form method="post" action="{% url 'cards:overview_bulk_update' %}">
{% csrf_token %}
<table class="table is-fullwidth is-striped">
<div class="table-container">
<table class="table is-fullwidth is-striped">
<thead>
<tr>
<th>Preview</th>
@@ -61,16 +77,37 @@
{% endfor %}
</select></div>
</td>
<td><input class="input" name="speed-{{ card.pk }}" value="{{ card.speed }}"></td>
<td><input class="input" name="weight-{{ card.pk }}" value="{{ card.weight }}"></td>
<td><input class="input" name="height-{{ card.pk }}" value="{{ card.height }}"></td>
<td><input class="input" name="intelligence-{{ card.pk }}" value="{{ card.intelligence }}"></td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" name="speed-{{ card.pk }}" value="{{ card.speed }}"></div>
<div class="control"><a class="button is-static">km/h</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" name="weight-{{ card.pk }}" value="{{ card.weight }}"></div>
<div class="control"><a class="button is-static">kg</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" name="height-{{ card.pk }}" value="{{ card.height }}"></div>
<div class="control"><a class="button is-static">m</a></div>
</div>
</td>
<td style="width:90px">
<div class="field has-addons">
<div class="control is-expanded"><input class="input" name="intelligence-{{ card.pk }}" value="{{ card.intelligence }}"></div>
<div class="control"><a class="button is-static">score</a></div>
</div>
</td>
<td>ID: {{ card.pk }}</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</table>
</div>
<div class="field">
<div class="control">
@@ -79,6 +116,5 @@
</div>
</div>
</form>
</div>
</section>
{% endblock %}