From de3d7e40586a289192fd374c31e0aa1d0f6e67c0 Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Thu, 28 Apr 2022 18:34:13 +0200
Subject: [PATCH] Add color to items without picture

---
 src/purchase/models.py                                 |  8 ++++++++
 src/purchase/static/purchase/css/basket_form.css       | 10 ++++++++++
 src/purchase/templates/purchase/basket_form.html       |  4 ++++
 .../templates/purchase/snippets/basket_item.html       |  7 +++++++
 4 files changed, 29 insertions(+)
 create mode 100644 src/purchase/static/purchase/css/basket_form.css

diff --git a/src/purchase/models.py b/src/purchase/models.py
index dd4e8fa..38a399a 100644
--- a/src/purchase/models.py
+++ b/src/purchase/models.py
@@ -1,5 +1,7 @@
 from __future__ import annotations
 
+import hashlib
+
 from django.db import models
 from django.db.models import Avg, Count, F, Sum
 from django.db.models.functions import Coalesce
@@ -102,6 +104,12 @@ class Product(Model):
     def natural_key(self):
         return (self.name,)
 
+    @property
+    def color_hue(self):
+        return int(
+            hashlib.sha256(bytes(self.name, encoding="utf-8")).hexdigest()[:2], base=16
+        )
+
     def save(self, *args, **kwargs):
         super().save()
         if not self.image:
diff --git a/src/purchase/static/purchase/css/basket_form.css b/src/purchase/static/purchase/css/basket_form.css
new file mode 100644
index 0000000..725ad75
--- /dev/null
+++ b/src/purchase/static/purchase/css/basket_form.css
@@ -0,0 +1,10 @@
+.product-img-placeholder {
+    aspect-ratio: 1/1;
+    font-size: 6em;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.product-img-placeholder span {
+    text-align: center;
+}
diff --git a/src/purchase/templates/purchase/basket_form.html b/src/purchase/templates/purchase/basket_form.html
index 5c6ef93..db5094e 100644
--- a/src/purchase/templates/purchase/basket_form.html
+++ b/src/purchase/templates/purchase/basket_form.html
@@ -1,6 +1,10 @@
 {% extends "common/base.html" %}
+{% load static %}
 {% load i18n %}
 {% load crispy_forms_tags purchase %}
+{% block extrahead %}
+    <link rel="stylesheet" href="{% static "purchase/css/basket_form.css" %}">
+{% endblock %}
 {% block content %}
     {% if object %}
         <h1>{{ object }} <span class="badge bg-secondary">{{ object.price|currency }}</span></h1>
diff --git a/src/purchase/templates/purchase/snippets/basket_item.html b/src/purchase/templates/purchase/snippets/basket_item.html
index 3d860d7..affd6d1 100644
--- a/src/purchase/templates/purchase/snippets/basket_item.html
+++ b/src/purchase/templates/purchase/snippets/basket_item.html
@@ -3,6 +3,13 @@
     <div class="card h-100 {% if field.value %}bg-success text-white{% endif %}">
         {% if product.image %}
             <img src="{{ product.image.url }}" class="card-img">
+        {% else %}
+            <div class="card-img product-img-placeholder"
+                style="background-color: hsl({{ product.color_hue }}, 60%, 80%)">
+                <span>
+                    {{ product.name|slice:"1" }}
+                </span>
+            </div>
         {% endif %}
         <div class="card-body">
             <h4 class="card-title">{{ product.name }}</h4>