Adding user picture and username to navbar.

When the user is logged into Hotails, they'll see their profile picture, and their username in every page on Hotails on the navbar. If the dog owner / daycare doesn't have any profile picture, a default one will be presented. Signed-off-by: Ofir Matasas <[email protected]> Signed-off-by: tamirmatok <[email protected]>
redhat-beyond · May 6, 2022 · 05ce7f4 · 05ce7f4
1 parent 467add9
commit 05ce7f4
Show file tree

Hide file tree

Showing 12 changed files with 112 additions and 36,765 deletions.
diff --git a/Hotails/settings.py b/Hotails/settings.py
@@ -67,6 +67,7 @@
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'main.context_processors.navbar_extras'
             ],
         },
     },

diff --git a/daycare/test_image.py b/daycare/test_image.py
@@ -1,6 +1,5 @@
 import pytest
-from .models import DayCare
-from .models import Image
+from .models import DayCare, Image
 from django.core.exceptions import ValidationError
 
 DEFAULT_DAYCARE_PROFILE_URL = "../../static/images/daycare-default-profile-image.jpeg"
@@ -25,9 +24,10 @@ def test_image_creation_with_invalid_image_url(self, create_daycare_user):
 
     def test_daycare_has_customized_profile_image(self, create_image1, create_image2, create_daycare_user):
         daycare_profile_image = create_daycare_user.get_daycare_primary_image_url()
-        assert daycare_profile_image != DEFAULT_DAYCARE_PROFILE_URL
+        assert daycare_profile_image != "../../static/images/daycare-default-profile-image.jpeg"
         assert daycare_profile_image is not None
 
-    def test_daycare_has_default_profile_image_when_no_customized_picture_was_found(self, create_daycare_user):
+    def test_daycare_has_default_profile_image(self, create_daycare_user):
         daycare_profile_image = create_daycare_user.get_daycare_primary_image_url()
-        assert daycare_profile_image == DEFAULT_DAYCARE_PROFILE_URL
+        assert daycare_profile_image == "../../static/images/daycare-default-profile-image.jpeg"
+        assert daycare_profile_image is not None
diff --git a/dogowner/models.py b/dogowner/models.py
@@ -32,7 +32,6 @@ def create(email, username, password, dog_name,
                first_name, last_name, phone_number,
                dog_race, dog_picture_url, dog_age,
                dog_weight, dog_gender):
-
         ValidateDogOwner(email, username, password, dog_name,
                          first_name, last_name, phone_number,
                          dog_race, dog_picture_url, dog_age,
@@ -56,3 +55,8 @@ def create(email, username, password, dog_name,
         new_dog_owner.user.save()
         new_dog_owner.save()
         return new_dog_owner
+
+    def get_dog_owner_profile_image_url(self):
+        if self.dog_picture_url is not None:
+            return self.dog_picture_url
+        return "../../static/images/dog-owner-default-profile-picture.jpeg"
diff --git a/dogowner/test_dog_owner.py b/dogowner/test_dog_owner.py
@@ -163,3 +163,14 @@ def test_dog_owner_user_creation_with_url_not_an_image(self):
                             dog_picture_url="https://www.not/an/image.com",
                             dog_age=10, dog_weight=6, dog_gender='M'
                             )
+
+    def test_dogowner_has_customized_profile_image(self, create_dog_owner_user):
+        dogowner_profile_image = create_dog_owner_user.get_dog_owner_profile_image_url()
+        assert dogowner_profile_image != "../../static/images/dog-owner-default-profile-picture.jpeg"
+        assert dogowner_profile_image is not None
+
+    def test_dogowner_has_default_profile_image(self, create_dog_owner_user):
+        create_dog_owner_user.dog_picture_url = None
+        dogowner_profile_image = create_dog_owner_user.get_dog_owner_profile_image_url()
+        assert dogowner_profile_image == "../../static/images/dog-owner-default-profile-picture.jpeg"
+        assert dogowner_profile_image is not None
diff --git a/main/context_processors.py b/main/context_processors.py
@@ -0,0 +1,21 @@
+from daycare.models import DayCare
+from dogowner.models import DogOwner
+
+
+def navbar_extras(request):
+    navbar_picture_url = navbar_name = None
+    if request.user.is_authenticated:
+        if DogOwner.objects.filter(user=request.user).exists():
+            dog_owner = DogOwner.objects.filter(user=request.user).first()
+            navbar_name = dog_owner.__str__()
+            navbar_picture_url = dog_owner.get_dog_owner_profile_image_url()
+        elif DayCare.objects.filter(user=request.user).exists():
+            daycare = DayCare.objects.filter(user=request.user).first()
+            navbar_name = daycare.name
+            navbar_picture_url = daycare.get_daycare_primary_image_url()
+
+    context = {
+        'navbar_picture_url': navbar_picture_url,
+        'navbar_name': navbar_name,
+    }
+    return context
diff --git a/main/templates/main/base_template.html b/main/templates/main/base_template.html
@@ -12,36 +12,43 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'css/navbar.css' %}">
     {% block stylesheets %}
     {% endblock %}
 </head>
 <header>
-    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
+    <nav class="navbar navbar-expand-lg navbar-light bg-dark" style="padding: 0 10px 0 10px;">
         <a class="navbar-brand" href="..\">
-            <img src="..\..\..\static\images\Hotails-logo-smaller.png" style="width:50px; height:50px;" class="d-inline-block align-top" loading="lazy"></a>
-        <button class="navbar-toggler" type="button" data-target="#navbarText"
-            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-        </button>
-            <ul class="navbar-nav mr-auto">
-                {% if request.user.is_authenticated %}
+            <img src="{% static 'images/Hotails-logo-smaller.png' %}" style="width:50px; height:50px;" class="d-inline-block align-top" loading="lazy">
+        </a>
+        <button class="navbar-toggler" type="button" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"></button>
+        <ul class="navbar-nav mr-auto">
+            {% if request.user.is_authenticated %}
                     <li class="nav-item"><a class="nav-link text-white" href="/profile">Profile</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="">Orders</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="">Search</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="">Chats</a></li>
-                {% endif %}
-                <li class="nav-item"><a class="nav-link text-white" href="/about">About</a></li>
-            </ul>
+                <li class="nav-item"><a class="nav-link text-white" href="">Orders</a></li>
+                <li class="nav-item"><a class="nav-link text-white" href="">Search</a></li>
+                <li class="nav-item"><a class="nav-link text-white" href="">Chats</a></li>
+            {% endif %}
+            <li class="nav-item"><a class="nav-link text-white" href="/about">About</a></li>
+        </ul>
         {% if request.user.is_authenticated %}
         <ul class="nav navbar-nav navbar-right">
-            <li class="nav-item"><a class="nav-link text-white" style="font-size:1.3rem" href="/logout">Logout</a></li>
+            <li class="nav-item"><img src="{{ navbar_picture_url }}" alt="{{ name }} image" class="navbar-profile-img"></li>
+            <li class="nav-item">
+                <span id="welcomeMsg">Welcome, {{ navbar_name }}!</span><a class="nav-link" id="logoutHref" href="/logout">Logout</a>
+            </li>
         </ul>
         {% endif %}
     </nav>
 </header>
-
 <body>
-    {% block content %}
-    {% endblock %}
+    <div class="row">
+        <div class="col-12 col-lg-12">
+            {% block content %}
+            {% endblock %}
+        </div>
+    </div>
+
 </body>
 
-</html>
+</html>
diff --git a/main/tests.py b/main/tests.py
@@ -77,3 +77,18 @@ def test_dog_owner_homepage_is_visible_for_dog_owner(self, client, create_dog_ow
         response = client.get("/homepage/")
         assert response.status_code == 200
         assert list(response.context['daycares']) == list(DayCare.objects.all())
+
+
+@pytest.mark.django_db
+class TestNavbarView:
+    def test_navbar_getting_dog_owner_nickname_and_profile_picture(self, client, create_dog_owner_user):
+        client.force_login(user=create_dog_owner_user.user)
+        response = client.get("/homepage/")
+        assert response.context['navbar_picture_url'] == create_dog_owner_user.dog_picture_url
+        assert response.context['navbar_name'] == create_dog_owner_user.__str__()
+
+    def test_navbar_getting_daycare_nickname_and_profile_picture(self, client, create_daycare_user):
+        client.force_login(user=create_daycare_user.user)
+        response = client.get("/homepage/")
+        assert response.context['navbar_picture_url'] == create_daycare_user.get_daycare_primary_image_url()
+        assert response.context['navbar_name'] == create_daycare_user.name
diff --git a/static/CSS/navbar.css b/static/CSS/navbar.css
@@ -0,0 +1,29 @@
+header ul li {
+    font-size: 1.1rem;
+}
+
+.navbar-profile-img
+{
+    border-radius: 50%;
+    height: 2.5rem;
+    width: 2.5rem;
+}
+
+#welcomeMsg {
+    padding-left:10px;
+    padding-bottom:0;
+    margin-top:5px;
+    color:#FFF;
+    float:left;
+}
+
+#logoutHref {
+    background-color:#1e1e1e;
+    border-radius:12px;
+    color:#E19512;
+    font-weight:bold;
+    float:right;
+    padding: 5px 10px 5px 10px;
+    font-size:1rem;
+    margin:1px 0 0 20px;
+}