Add/remove/change image on box detail page added

argocd/deployment.yaml

@@ -27,7 +27,7 @@ spec:
               mountPath: /data
       containers:
         - name: web
-          image: git.baumann.gr/adebaumann/labhelper:0.041
+          image: git.baumann.gr/adebaumann/labhelper:0.042
           imagePullPolicy: Always
           ports:
             - containerPort: 8000

boxes/forms.py

@@ -16,6 +16,14 @@ class ThingForm(forms.ModelForm):
         }
 
 
+class ThingPictureForm(forms.ModelForm):
+    """Form for uploading/changing a Thing picture."""
+
+    class Meta:
+        model = Thing
+        fields = ('picture',)
+
+
 ThingFormSet = forms.modelformset_factory(
     Thing,
     form=ThingForm,

boxes/templates/boxes/thing_detail.html

@@ -30,6 +30,24 @@
                 </div>
             </div>
             {% endif %}
+
+            <form method="post" enctype="multipart/form-data" style="margin-top: 20px;">
+                {% csrf_token %}
+                <input type="hidden" name="action" value="upload_picture">
+                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                    <label class="btn" style="cursor: pointer; display: inline-flex; align-items: center; gap: 8px;">
+                        <i class="fas fa-camera"></i>
+                        <span>{% if thing.picture %}Change picture{% else %}Add picture{% endif %}</span>
+                        <input type="file" name="picture" accept="image/*" style="display: none;" onchange="this.form.submit();">
+                    </label>
+                    {% if thing.picture %}
+                    <button type="submit" name="action" value="delete_picture" class="btn" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border: none;" onclick="return confirm('Are you sure you want to delete this picture?');">
+                        <i class="fas fa-trash"></i>
+                        <span>Remove</span>
+                    </button>
+                    {% endif %}
+                </div>
+            </form>
         </div>
         
         <div class="thing-details" style="flex-grow: 1; min-width: 300px;">
@@ -68,6 +86,7 @@
 
 <form method="post" class="section">
     {% csrf_token %}
+    <input type="hidden" name="action" value="move">
     <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
         <div style="flex-grow: 1;">
             <label for="new_box" style="font-weight: 600; color: #666; font-size: 14px; margin-bottom: 8px; display: block;">
@@ -99,5 +118,14 @@ $('#new_box').on('focus', function() {
     $(this).css('border-color', '#e0e0e0');
     $(this).css('box-shadow', 'none');
 });
+
+$('input[type="file"]').on('change', function() {
+    var fileName = $(this).val().split('\\').pop();
+    if (fileName) {
+        var form = $(this).closest('form');
+        form.append('<input type="hidden" name="action" value="upload_picture">');
+        form[0].submit();
+    }
+});
 </script>
 {% endblock %}

boxes/views.py

@@ -3,7 +3,7 @@ from django.db.models import Q
 from django.http import HttpResponse, JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
 
-from .forms import ThingFormSet
+from .forms import ThingFormSet, ThingPictureForm
 from .models import Box, Thing, ThingType
 
 
@@ -46,18 +46,36 @@ def thing_detail(request, thing_id):
     )
 
     boxes = Box.objects.select_related('box_type').all().order_by('id')
+    picture_form = ThingPictureForm(instance=thing)
 
     if request.method == 'POST':
-        new_box_id = request.POST.get('new_box')
-        if new_box_id:
-            new_box = get_object_or_404(Box, pk=new_box_id)
-            thing.box = new_box
-            thing.save()
+        action = request.POST.get('action')
+
+        if action == 'move':
+            new_box_id = request.POST.get('new_box')
+            if new_box_id:
+                new_box = get_object_or_404(Box, pk=new_box_id)
+                thing.box = new_box
+                thing.save()
+                return redirect('thing_detail', thing_id=thing.id)
+
+        elif action == 'upload_picture':
+            picture_form = ThingPictureForm(request.POST, request.FILES, instance=thing)
+            if picture_form.is_valid():
+                picture_form.save()
+                return redirect('thing_detail', thing_id=thing.id)
+
+        elif action == 'delete_picture':
+            if thing.picture:
+                thing.picture.delete()
+                thing.picture = None
+                thing.save()
             return redirect('thing_detail', thing_id=thing.id)
 
     return render(request, 'boxes/thing_detail.html', {
         'thing': thing,
         'boxes': boxes,
+        'picture_form': picture_form,
     })