added images and avatars and updated readme

.gitignore

@@ -1,3 +1,4 @@
 db.sqlite3
 .DS_store
-.env
+.env
+pekoe_web/media

README.md

@@ -3,6 +3,8 @@
 
 A web app for 🌿**PEKOE**🌿, crypto safe tips service. Written in Python3 x Django.
 
+![main page of PEKOE web app](assets/images/main1.png "Main page of PEKOE web app")
+
 ### 🔧 Development guide
 #### Setup development environment
 ```

pekoe_web/settings.py

@@ -12,11 +12,12 @@
 
 from pathlib import Path
 from dotenv import load_dotenv
+from os.path import join
 load_dotenv()
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
-
+MEDIA_ROOT = join(BASE_DIR, "pekoe_web", "media/")
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/
@@ -119,6 +120,7 @@
 # https://docs.djangoproject.com/en/4.1/howto/static-files/
 
 STATIC_URL = 'static/'
+MEDIA_URL = '/media/'
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field

pekoe_web/urls.py

@@ -15,8 +15,13 @@
 """
 from django.contrib import admin
 from django.urls import include, path
+from django.conf import settings
+from django.conf.urls.static import static
 
 urlpatterns = [
     path('tips/', include('tips.urls')),
     path('admin/', admin.site.urls),
 ]
+
+if settings.DEBUG:
+     urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

requirements.txt

@@ -27,6 +27,7 @@ lru-dict==1.1.8
 mccabe==0.7.0
 multidict==6.0.4
 parsimonious==0.9.0
+Pillow==9.5.0
 protobuf==4.22.3
 psycopg2-binary==2.9.5
 pycodestyle==2.10.0

tips/migrations/0004_cafe_avatar_user_avatar_alter_cafe_slug_and_more.py

@@ -0,0 +1,34 @@
+# Generated by Django 4.1.7 on 2023-06-03 17:03
+
+from django.db import migrations, models
+import tips.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tips', '0003_alter_cafe_slug_alter_customer_customer_wallet_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='cafe',
+            name='avatar',
+            field=models.ImageField(blank=True, upload_to=tips.models.cafe_upload_path),
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='avatar',
+            field=models.ImageField(blank=True, upload_to=tips.models.user_upload_path),
+        ),
+        migrations.AlterField(
+            model_name='cafe',
+            name='slug',
+            field=models.CharField(default='5cfae2c84f214b47', max_length=20, unique=True),
+        ),
+        migrations.AlterField(
+            model_name='user',
+            name='username',
+            field=models.CharField(default='f9abc7f787f448bf', max_length=20, unique=True),
+        ),
+    ]

tips/models.py

@@ -6,20 +6,28 @@
 from django.core.validators import MinLengthValidator
 
 
+def cafe_upload_path(instance, filename):
+    return f"cafe_{instance.slug}/{filename}"
+
 class Cafe(models.Model):
     slug = models.CharField(max_length=20, unique=True, default=uuid.uuid4().hex[:16])
     title = models.CharField(max_length=50)
     location = models.CharField(max_length=100)
+    avatar = models.ImageField(upload_to=cafe_upload_path, blank=True)
 
     def __str__(self):
         return f"Cafe @{self.slug} {self.title}, location: {self.location}"
 
 
+def user_upload_path(instance, filename):
+    return f"user_{instance.username}/{filename}"
+
 class User(AbstractBaseUser, PermissionsMixin):
     username = models.CharField(max_length=20, unique=True, default=uuid.uuid4().hex[:16])
     first_name = models.CharField(max_length=20)
     last_name = models.CharField(max_length=20)
     email = models.CharField(max_length=50)
+    avatar = models.ImageField(upload_to=user_upload_path, blank=True)
     is_active = models.BooleanField(default=True)
     is_staff = models.BooleanField(default=False)  # a admin user; non super-user
     is_superuser = models.BooleanField(default=False)  # a superuser

tips/templates/base.html

@@ -28,7 +28,7 @@ <h1 class="title" style="color: ghostwhite;">PEKOE</h1>
                 {% if request.user.is_authenticated %}
                   <span class="navbar-item">
                     <a class="image is-32x32" href="{% url 'tips:user' user.username %}">
-                      <img class="is-rounded" src="https://loremflickr.com/200/200" alt="Placeholder Image">
+                      <img class="is-rounded" src="{{ user.avatar.url }}">
                     </a>
                   </span>
                   <span class="navbar-item">

tips/templates/tips/cafe.html

@@ -8,8 +8,7 @@
     <div class="media">
         <div class="media-left">
           <figure class="image is-48x48">
-            <img src="https://loremflickr.com/200/200/cafe?random=1"
-                alt="Placeholder image">
+            <img src="{{ cafe.avatar.url }}">
           </figure>
         </div>
         <div class="media-content">
@@ -36,17 +35,15 @@ <h1 class="title" style="color: ghostwhite;">Waiters</h1><br>
                     <div class="card large">
                       <a href="{% url 'tips:waiter' cafe_slug=cafe.slug waiter_username=waiter.user.username %}">
                         <div class="card-image">
-                          <figure class="image is-16by9">
-                            <img src="https://loremflickr.com/200/200?random=1"
-                                      alt="Placeholder image">
+                          <figure class="image is-1by1">
+                            <img src="{{ waiter.user.avatar.url }}">
                           </figure>
                         </div>
                         <div class="card-content">
                             <div class="media">
                               <div class="media-left">
                                 <figure class="image is-48x48">
-                                  <img src="https://loremflickr.com/200/200?random=1"
-                                        alt="Placeholder image">
+                                  <img src="{{ waiter.user.avatar.url }}">
                                 </figure>
                               </div>
                               <div class="media-content">

tips/templates/tips/iam.html

@@ -10,8 +10,7 @@
 <div class="media">
     <div class="media-left">
         <figure class="image is-48x48">
-        <img src="https://loremflickr.com/200/200?random=1"
-                alt="Placeholder image">
+        <img src="{{ user.avatar.url }}">
         </figure>
     </div>
     <div class="media-content">
@@ -172,8 +171,7 @@
             <div class="media-left">
                 <a href="{% url 'tips:waiter' cafe_slug=key waiter_username=user.username %}">
                 <figure class="image is-48x48">
-                    <img src="https://loremflickr.com/200/200/cafe?random=1"
-                        alt="Placeholder image">
+                    <img src="{{ cafes_avatars|get_item:key }}">
                   </figure>
                 </a>
             </div>
@@ -265,8 +263,7 @@ <h2 class="subtitle is-6" style="color: ghostwhite;">
         <div class="media">
             <div class="media-left">
                 <figure class="image is-48x48">
-                    <img src="https://loremflickr.com/200/200/cafe?random=1"
-                        alt="Placeholder image">
+                    <img src="{{ cafe_admin.cafe.avatar.url }}">
                 </figure>
             </div>
             <div class="media-content">

tips/templates/tips/index.html

@@ -19,17 +19,15 @@ <h1 class="title" style="color: ghostwhite;">Cafes</h1><br>
       <div class="card large">
         <a href="{% url 'tips:cafe' cafe.slug %}">
           <div class="card-image">
-            <figure class="image is-16by9">
-              <img src="https://loremflickr.com/200/200?random=1"
-                        alt="Placeholder image">
+            <figure class="image is-1by1">
+              <img src="{{ cafe.avatar.url }}">
             </figure>
           </div>
           <div class="card-content">
               <div class="media">
                 <div class="media-left">
                   <figure class="image is-48x48">
-                    <img src="https://loremflickr.com/200/200?random=1"
-                          alt="Placeholder image">
+                    <img src="{{ cafe.avatar.url }}">
                   </figure>
                 </div>
                 <div class="media-content">

tips/templates/tips/waiter.html

@@ -10,8 +10,7 @@
     <div class="media">
         <div class="media-left">
           <figure class="image is-48x48">
-            <img src="https://loremflickr.com/200/200?random=1"
-                 alt="Placeholder image">
+            <img src="{{ waiter.user.avatar.url }}">
           </figure>
         </div>
         <div class="media-content">

tips/urls.py

@@ -13,4 +13,4 @@
     path('login', views.login_user, name='login'),
     path('logout', login_required(views.logout_user), name='logout'),
     path('<str:username>', views.iamview, name='user')
-]
+]

tips/views.py

@@ -124,6 +124,8 @@ def iamview(request, username):
         "customer_transactions": request.user.customer.transaction_set.all(),
         "customer_balance":  web3client.balance_of(request.user.customer.customer_wallet),
         "waiter_forms": waiter_forms,
+        "cafes_avatars": {waiter.cafe.slug: waiter.cafe.avatar.url
+                          for waiter in request.user.waiter_set.all()},
         "waiter_transactions": {waiter.cafe.slug: waiter.transaction_set.all()
                                 for waiter in request.user.waiter_set.all()},
         "waiter_balance": {waiter.cafe.slug: web3client.balance_of(waiter.waiter_wallet)