Assigning Visitors to Sessions and Images

.gitignore

@@ -1 +1,2 @@
 django_web_galleries/media/*
+django_web_galleries/static/*

Pipfile

@@ -7,8 +7,7 @@ name = "pypi"
 django = "*"
 django-responsive-images = "*"
 pillow = "*"
-
-[dev-packages]
+django-widget-tweaks = "*"
 
 [requires]
 python_version = "3.8"

django_web_galleries/django_web_galleries/settings.py

@@ -38,6 +38,7 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'responsive_images',
+    'widget_tweaks',
     'web_galleries',
 ]
 

django_web_galleries/django_web_galleries/urls.py

@@ -16,7 +16,20 @@ Including another URLconf
 from django.contrib import admin
 from django.urls import path, include
 
+from django.conf import settings
+from django.conf.urls.static import static
+
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('', include('web_galleries.urls'))
 ]
+
+if settings.DEBUG:
+    urlpatterns += static(
+        settings.MEDIA_URL,
+        document_root=settings.MEDIA_ROOT
+    )
+    urlpatterns += static(
+        settings.STATIC_URL,
+        document_root=settings.STATIC_ROOT
+    )

django_web_galleries/web_galleries/forms.py

@@ -6,4 +6,7 @@ from .models import Image
 class ImageUploadForm(forms.ModelForm):
     class Meta:
         model = Image
-        fields = ['description', 'image_file', 'private']
+        fields = ['description', 'image_file', 'private', 'title']
+        labels = {
+            'private': 'Make this image private'
+        }

django_web_galleries/web_galleries/models.py

@@ -1,7 +1,12 @@
+import uuid
+
 from django.db import models
 from django.core.exceptions import ValidationError
 from django.utils.translation import gettext as _
 
+def get_uuid():
+    return str(uuid.uuid4())
+
 class Visitor(models.Model):
     """
     Stores information about a visitor of this application.
@@ -10,7 +15,8 @@ class Visitor(models.Model):
     """
     session_id = models.CharField(
         _('A cookie set by this application to identify a visitor by session'),
-        max_length=50
+        max_length=50,
+        default=get_uuid
     )
     name = models.CharField(
         _('Human readable, self assigned name of the visitor'),
@@ -67,6 +73,13 @@ class Image(models.Model):
     An image contains the path to the image file and several information
     like description, uploader and affiliation to galleries.
     """
+
+    title = models.CharField(
+        _('Title of the image'),
+        max_length=100,
+        null=True,
+        blank=True
+    )
     description = models.TextField(
         _('An optional description of the Image'),
         null=True
@@ -105,3 +118,11 @@ class Image(models.Model):
         related_name='images'
     )
 
+    def __str__(self):
+        if self.title:
+            return self.title
+        elif self.description:
+            return self.description[:100]
+        else:
+            return super.__str__()
+

django_web_galleries/web_galleries/static/web-galleries.css

@@ -0,0 +1,74 @@
+.RV-Header {
+    height: 80px;
+    margin-bottom: 70px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    border-bottom: 1px solid gray;
+}
+
+.RV-Navigation__list {
+    display: flex;
+    flex-direction: row;
+
+    list-style-type: none;
+    gap: 1em;
+
+    font-size: 22px;
+}
+
+.RV-Navigation__link {
+    text-decoration: none;
+    display: inline-block;
+    transition: transform 300ms ease-in-out;
+}
+
+.RV-Navigation__link:hover {
+    transform: scale(1.2);
+}
+
+.RV-Images__list {
+    list-style-type: none;
+    display: grid;
+    gap: 22px;
+
+    grid-template-columns: repeat(auto-fit, 200px);
+}
+
+.RV-Image__link {
+    transition: transform 300ms ease-in-out;
+}
+
+.RV-Image__link:hover {
+    transform: scale(1.1);
+}
+
+.RV-Fieldset {
+    margin: 50px 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.RV-Input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.RV-Input--compact {
+    flex-direction: row;
+}
+
+.RV-Input.RV-Input--reverse {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+}
+
+.RV-Input--compact.RV-Input--reverse {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}

django_web_galleries/web_galleries/templates/global.html

@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,10 +7,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Web Gallery</title>
+    <link rel="stylesheet" href="{% static 'web-galleries.css' %}">
 </head>
 <body>
     <div class="RV-Page">
-        <head class="RV-Head">
+        <header class="RV-Header">
             <nav class="RV-Navigation">
                 <ul class="RV-Navigation__list">
                     <li class="RV-Navigation__item">
@@ -33,7 +36,7 @@
                     </li>
                 </ul>
             </nav>
-        </head>
+        </header>
         <main class="RV-Content">
             {% block content %}
             {% endblock content %}

django_web_galleries/web_galleries/templates/list_images/image_list.html

@@ -6,7 +6,9 @@
     <sectoin class="RV-Images">
         <li class="RV-Images__list">
             {% for image in images %}
-                <img src="{% src image.image_file 200x200 %}">
+                <a href="#" class="RV-Image__link RV-Image__link--detail">
+                    <img class="RV-Image__source" src="{% src image.image_file 200x200 %}">
+                </a>
             {% endfor %}
         </li>
     </sectoin>

django_web_galleries/web_galleries/templates/partials/form_input.html

@@ -0,0 +1,16 @@
+{% load widget_tweaks %}
+
+<div class="RV-Input {% if classes%}{{classes}}{% endif %} {% if field.errors %} RV-Input--error {% endif %}">
+    <label for="{{field.id_for_label}}" class="RV-Input__Label">{{field.label}}</label>
+    {% render_field field class+='RV-Input__Field' %}
+
+    <span class="RV-Input__Message">
+        {% if field.errors %}
+        {% for error in field.errors%}
+        {{error}}
+        {% endfor %}
+        {% elif field.help_text%}
+        {{ field.help_text }}
+        {% endif %}
+    </span>
+</div>

django_web_galleries/web_galleries/templates/upload_image/upload.html

@@ -3,7 +3,15 @@
 {% block content %}
     <form method="POST" enctype="multipart/form-data">
         {% csrf_token %}
-        {{ form }}
-        <button type="submit">Upload</button>
+        <div class="RV-Fieldset">
+            {% include 'partials/form_input.html' with field=form.title %}
+            {% include 'partials/form_input.html' with field=form.image_file %}
+            {% include 'partials/form_input.html' with field=form.description %}
+            {% include 'partials/form_input.html' with field=form.private classes='RV-Input--compact RV-Input--reverse' %}
+
+        </div>
+        <div class="RV-Fieldset">
+            <button type="submit">Upload</button>
+        </div>
     </form>
 {% endblock content %}

django_web_galleries/web_galleries/urls.py

@@ -1,6 +1,4 @@
 from django.urls import path
-from django.conf import settings
-from django.conf.urls.static import static
 
 from .views import (
     ImageUploadView,
@@ -11,9 +9,3 @@ urlpatterns = [
     path('', PublicImageListView.as_view(), name='home'),
     path('upload/', ImageUploadView.as_view(), name='upload_image')
 ]
-
-if settings.DEBUG:
-    urlpatterns += static(
-        settings.MEDIA_URL,
-        document_root=settings.MEDIA_ROOT
-    )

django_web_galleries/web_galleries/views.py

@@ -6,9 +6,26 @@ from django.shortcuts import render, redirect
 from django.urls import reverse
 
 from .forms import ImageUploadForm
-from .models import Image
+from .models import (
+    Image,
+    Visitor
+)
 
-class ImageUploadView(View):
+class VisitorSessionMixin(View):
+    def get_visitor(self):
+        if self.request.session:
+            if 'visitor_session' in self.request.session:
+                if Visitor.objects.get(session_id=self.request.session['visitor_session']).exists():
+                    return Visitor.objects.get(session_id=self.request.session['visitor_session'])
+            else:
+                visitor = Visitor.objects.create()
+                self.request.session['visitor_session'] = visitor.session_id
+                return visitor
+        else:   
+            return None
+
+
+class ImageUploadView(VisitorSessionMixin, View):
     def get(self, request):
         form = ImageUploadForm()
         return render(
@@ -31,6 +48,8 @@ class ImageUploadView(View):
             if image.private:
                 image.access_code = secrets.token_hex(32)
 
+            image.uploaded_by = self.get_visitor()
+            print(image.uploaded_by)
             image.save()
             return redirect(
                 reverse('home')