From ca160781dd6702aacae1f0d91b8bfb9b6c87df01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20M=C3=BCller?=
 <9070224-W13R@users.noreply.gitlab.com>
Date: Sat, 6 Aug 2022 18:56:39 +0200
Subject: [PATCH] Added support for profile pictures

---
 application/app/admin.py                      | 11 +++++---
 application/app/models.py                     |  1 +
 .../app/templates/registration/login.html     | 24 ++++++++--------
 application/app/templates/userPanel.html      | 26 +++++++++--------
 static/css/login.css                          | 22 ++++++++++-----
 static/css/main.css                           | 11 ++++++--
 static/profilepictures/default.svg            | 28 +++++++++++++++++++
 7 files changed, 88 insertions(+), 35 deletions(-)
 create mode 100644 static/profilepictures/default.svg

diff --git a/application/app/admin.py b/application/app/admin.py
index 66b072a..7e81374 100644
--- a/application/app/admin.py
+++ b/application/app/admin.py
@@ -45,10 +45,13 @@ class CustomUserAdmin(UserAdmin):
 
     fieldsets_ = list((*UserAdmin.fieldsets,))
     fieldsets_.insert(1, (
-            "Balance",
-            {"fields": ("balance", "allow_order_with_negative_balance")},
-        )
-    )
+        "Balance",
+        {"fields": ("balance", "allow_order_with_negative_balance")},
+    ))
+    fieldsets_.insert(2, (
+        "Profile Picture",
+        {"fields": ("profile_picture_filename",)},
+    ))
     fieldsets = tuple(fieldsets_)
 
     list_display = ["username", "balance", "is_active", "allow_order_with_negative_balance"]
diff --git a/application/app/models.py b/application/app/models.py
index 7ce9370..370a0dd 100644
--- a/application/app/models.py
+++ b/application/app/models.py
@@ -20,6 +20,7 @@ class User(AbstractUser):
 
     balance = models.DecimalField(max_digits=8, decimal_places=2, default=0.00)
     allow_order_with_negative_balance = models.BooleanField(default=False)
+    profile_picture_filename = models.CharField(default="default.svg", max_length=25)
 
     def delete(self, *args, **kwargs):
         self.balance = 0
diff --git a/application/app/templates/registration/login.html b/application/app/templates/registration/login.html
index 32b6ab0..af1f25c 100644
--- a/application/app/templates/registration/login.html
+++ b/application/app/templates/registration/login.html
@@ -2,6 +2,7 @@
 {% extends "baseLayout.html" %}
 
 {% load i18n %}
+{% load static %}
 
 {% block title %}
     {% translate "Drinks - Login" %}
@@ -68,19 +69,20 @@
         <ul class="userlist">
             {% for user_ in user_list %}
                 <li class="userlistButton button" data-username="{{ user_.username }}">
-                        
-                    {% if user_.first_name %}
+                    <img src="{% static 'profilepictures/'|add:user_.profile_picture_filename %}">
+                    <div>
+                        {% if user_.first_name %}
 
-                        {% if user_.last_name %}
-                            {{ user_.last_name }},
+                            {% if user_.last_name %}
+                                {{ user_.last_name }},
+                            {% endif %}
+
+                            {{ user_.first_name }}
+
+                        {% else %}
+                            {{ user_.username }}
                         {% endif %}
-
-                        {{ user_.first_name }}
-
-                    {% else %}
-                        {{ user_.username }}
-                    {% endif %}
-
+                    </div>
                 </li>
             {% endfor %}
         </ul>
diff --git a/application/app/templates/userPanel.html b/application/app/templates/userPanel.html
index eecaf88..b634cd3 100644
--- a/application/app/templates/userPanel.html
+++ b/application/app/templates/userPanel.html
@@ -1,18 +1,22 @@
 {% load i18n %}
+{% load static %}
 
 <div class="userPanel">
     <div class="userInfo">
-        {% if user.first_name != "" %}
-            {% translate "User" %}: {{ user.first_name }} {{ user.last_name }} ({{ user.username }})
-        {% else %}
-            {% translate "User" %}: {{ user.username }}
-        {% endif %}
-        &nbsp;-&nbsp;
-        {% if user.balance < 0.01 %}
-            <span class="userBalanceWarn">{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
-        {% else %}
-            <span>{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
-        {% endif %}
+        <img src="{% static 'profilepictures/'|add:user.profile_picture_filename %}">
+        <span>
+            {% if user.first_name != "" %}
+                {% translate "User" %}: {{ user.first_name }} {{ user.last_name }} ({{ user.username }})
+            {% else %}
+                {% translate "User" %}: {{ user.username }}
+            {% endif %}
+            &nbsp;-&nbsp;
+            {% if user.balance < 0.01 %}
+                <span class="userBalanceWarn">{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
+            {% else %}
+                <span>{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
+            {% endif %}
+        </span>
     </div>
     <div class="horizontalButtonList">
         <a class="button" id="navBarBtnHome" href="/">Home</a>
diff --git a/static/css/login.css b/static/css/login.css
index 346b4f9..6414c2d 100644
--- a/static/css/login.css
+++ b/static/css/login.css
@@ -25,14 +25,27 @@ main > h1 {
     justify-content: center;
     align-items: center;
 }
-.userlist li {
+.userlist > li {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: center;
-    padding: .8rem 1.1rem;
     margin-bottom: .5rem;
+    padding: 0 .5rem;
+}
+.userlist > li > img {
+    margin-right: auto;
+    margin-left: 0;
+    height: 2rem;
+    width: 2rem;
+}
+.userlist > li > div {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
     text-align: center;
+    padding: .8rem 1.1rem;
 }
 .userlistButton {
     font-size: 1.1rem;
@@ -102,11 +115,6 @@ form .horizontalButtonList {
     .userlist {
         width: 100%;
     }
-    .userlist li {
-        width: 100%;
-        padding-left: 0;
-        padding-right: 0;
-    }
     .pinpad table tr td button {
         height: 4.2rem;
         width: 4.2rem;
diff --git a/static/css/main.css b/static/css/main.css
index fbc5d2a..c9cb878 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -67,10 +67,17 @@ main {
     align-items: center;
     margin-top: 1rem;
     font-size: 1rem;
-    width: 90%;
+    width: 94%;
 }
-.userInfo span {
+.userInfo > span {
     font-size: 1.1rem;
+    vertical-align: middle;
+}
+.userInfo > img {
+    vertical-align: middle;
+    width: 1.8rem;
+    height: 1.8rem;
+    margin: .5rem;
 }
 .userPanel > .horizontalButtonList {
     margin-left: auto;
diff --git a/static/profilepictures/default.svg b/static/profilepictures/default.svg
new file mode 100644
index 0000000..7138ef3
--- /dev/null
+++ b/static/profilepictures/default.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <circle
+       style="fill:#808080;fill-opacity:1;stroke:#fffcfe;stroke-opacity:1"
+       id="path848"
+       cx="8"
+       cy="4.5"
+       r="2.5" />
+    <path
+       style="fill:#7f7f7f;fill-opacity:1;stroke:#fffcff;stroke-opacity:1"
+       id="path3433"
+       d="m -3,-13.499699 a 5,5 0 0 1 -2.5,4.3301274 5,5 0 0 1 -5,0 5,5 0 0 1 -2.5,-4.3301274 h 5 z"
+       transform="scale(-1)" />
+  </g>
+</svg>