feat(account): show logged user xp progress on profile avatar border

Hojagulyyev · Nov 11, 2023 · 0ca8049 · 0ca8049
1 parent 87ac440
commit 0ca8049
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 54 deletions.
diff --git a/apps/accounts/models.py b/apps/accounts/models.py
@@ -20,6 +20,9 @@ def __str__(self):
     def get_full_name(self):
         return f"{self.user.first_name} {self.user.last_name}"
 
+    def get_xp_in_percentage(self):
+        return float(self.xp / self.get_required_xp_for_next_level())
+
     def get_required_xp_for_next_level(self):
         return self.level * ADDITIONAL_GROWING_XP_PER_LEVEL
 

diff --git a/apps/diaries/models.py b/apps/diaries/models.py
@@ -18,9 +18,7 @@ def __str__(self):
         return f"{self.account} - {self.created_date}"
 
     def get_earned_xp(self):
-        print("Hello")
         xp_amount_list = self.xps.values_list("amount", flat=True)
-        print(xp_amount_list)
         return sum(xp_amount_list)
 
 

diff --git a/static/js/global/global.hexagons.js b/static/js/global/global.hexagons.js
@@ -49,21 +49,21 @@ app.plugins.createHexagon({
   lineColor: '#1d2333'
 });
 
-app.plugins.createHexagon({
-  container: '.hexagon-progress-100-110',
-  width: 100,
-  height: 110,
-  lineWidth: 6,
-  roundedCorners: true,
-  gradient: {
-    colors: ['#d9ff65', '#40d04f']
-  },
-  scale: {
-    start: 0,
-    end: 1,
-    stop: .8
-  }
-});
+//app.plugins.createHexagon({
+//  container: '.hexagon-progress-100-110',
+//  width: 100,
+//  height: 110,
+//  lineWidth: 6,
+//  roundedCorners: true,
+//  gradient: {
+//    colors: ['#d9ff65', '#40d04f']
+//  },
+//  scale: {
+//    start: 0,
+//    end: 1,
+//    stop: .8
+//  }
+//});
 
 app.plugins.createHexagon({
   container: '.hexagon-border-100-110',

diff --git a/templates/base/main.html b/templates/base/main.html
@@ -85,27 +85,63 @@
 <!-- onMounted Lifecycle Hook -->
 <script>
 window.onload = function () {
-  {% block onMounted %}
-  {% endblock onMounted %}
-  calculateLoggedAccountXPForNextLevel()
+    {% block onMounted %}
+    {% endblock onMounted %}
+    calculateLoggedAccountXPForNextLevel();
+    calculateLoggedAccountXPInHexagonProgress();
 }
 
 function calculateLoggedAccountXPForNextLevel() {
-  app.plugins.createProgressBar({
-    container: '#logged-user-level',
-    height: 4,
-    gradient: {
-      colors: ['#40d04f', '#d9ff65']
-    },
-    scale: {
-      start: 0,
-      end: {{ user.account.get_required_xp_for_next_level }},
-      stop: {{ user.account.xp }}
-    },
-    linkText: true,
-    linkUnits: 'xp',
-    invertedProgress: true
-  });
+    app.plugins.createProgressBar({
+        container: '#logged-user-level',
+        height: 4,
+        gradient: {
+            colors: ['#40d04f', '#d9ff65']
+        },
+        scale: {
+            start: 0,
+            end: {{ user.account.get_required_xp_for_next_level }},
+            stop: {{ user.account.xp }}
+        },
+        linkText: true,
+        linkUnits: 'xp',
+        invertedProgress: true
+    });
+}
+
+function calculateLoggedAccountXPInHexagonProgress() {
+    app.plugins.createHexagon({
+        container: '.logged-account-hexagon-progress-40-44',
+        width: 40,
+        height: 44,
+        lineWidth: 3,
+        roundedCorners: true,
+        roundedCornerRadius: 1,
+        gradient: {
+            colors: ['#d9ff65', '#40d04f']
+        },
+        scale: {
+            start: 0,
+            end: 1,
+            stop: {{ user.account.get_xp_in_percentage }}
+        }
+    });
+
+    app.plugins.createHexagon({
+        container: '.logged-account-hexagon-progress-100-110',
+        width: 100,
+        height: 110,
+        lineWidth: 6,
+        roundedCorners: true,
+        gradient: {
+            colors: ['#d9ff65', '#40d04f']
+        },
+        scale: {
+            start: 0,
+            end: 1,
+            stop: {{ user.account.get_xp_in_percentage }}
+        }
+    });
 }
 </script>
 

diff --git a/templates/includes/account-avatar-small.html b/templates/includes/account-avatar-small.html
@@ -1,15 +1,16 @@
 {% load static %}
 
 <!-- USER AVATAR -->
+<!--  add 'online' class below if user online  -->
 <div class="user-avatar small no-outline">
     <!-- USER AVATAR CONTENT -->
     <div class="user-avatar-content">
         <!-- HEXAGON -->
         <div class="hexagon-image-30-32"
              {% if account == user.account %}
-                data-src="{% static 'img/avatar/17.jpg' %}"
+             data-src="{% static 'img/avatar/17.jpg' %}"
              {% else %}
-                data-src="{% static 'img/avatar/08.jpg' %}"
+             data-src="{% static 'img/avatar/08.jpg' %}"
              {% endif %}
         >
         </div>
@@ -19,9 +20,12 @@
 
     <!-- USER AVATAR PROGRESS -->
     <div class="user-avatar-progress">
-      <!-- HEXAGON -->
-      <div class="hexagon-progress-40-44"></div>
-      <!-- /HEXAGON -->
+        <!-- HEXAGON -->
+        <div class="hexagon-progress-40-44
+        {% if account == user.account %}
+        logged-account-hexagon-progress-40-44
+        {% endif %}"></div>
+        <!-- /HEXAGON -->
     </div>
     <!-- /USER AVATAR PROGRESS -->
 

diff --git a/templates/partials/expanded-left-sidebar.html b/templates/partials/expanded-left-sidebar.html
@@ -27,7 +27,13 @@
             </div>
             <!-- /USER AVATAR CONTENT -->
 
-            <!-- USER AVATAR PROGRESS --><!-- /USER AVATAR PROGRESS -->
+            <!-- USER AVATAR PROGRESS -->
+            <div class="user-avatar-progress">
+              <!-- HEXAGON -->
+              <div class="hexagon-progress-100-110 logged-account-hexagon-progress-100-110"></div>
+              <!-- /HEXAGON -->
+            </div>
+            <!-- /USER AVATAR PROGRESS -->
 
             <!-- USER AVATAR PROGRESS BORDER -->
             <div class="user-avatar-progress-border">

diff --git a/templates/partials/mobile-left-sidebar.html b/templates/partials/mobile-left-sidebar.html
@@ -31,7 +31,7 @@
                 <!-- USER AVATAR PROGRESS BORDER -->
                 <div class="user-avatar-progress-border">
                     <!-- HEXAGON -->
-                    <div class="hexagon-border-40-44"></div>
+                    <div class="hexagon-border-40-44 logged-account-hexagon-progress-40-44"></div>
                     <!-- /HEXAGON -->
                 </div>
                 <!-- /USER AVATAR PROGRESS BORDER -->

diff --git a/templates/partials/shrunk-left-sidebar.html b/templates/partials/shrunk-left-sidebar.html
@@ -2,18 +2,7 @@
 
 <nav id="navigation-widget-small" class="navigation-widget navigation-widget-desktop closed sidebar left delayed">
     <!-- USER AVATAR -->
-    <!--  add 'online' class below if user online  -->
-    <a class="user-avatar small no-outline" href="#">
-        <!-- USER AVATAR CONTENT -->
-        <div class="user-avatar-content">
-            <!-- HEXAGON -->
-            <div class="hexagon-image-30-32" data-src="{% static 'img/avatar/17.jpg' %}"></div>
-            <!-- /HEXAGON -->
-        </div>
-        <!-- /USER AVATAR CONTENT -->
-        <!-- USER AVATAR PROGRESS --><!-- /USER AVATAR PROGRESS -->
-        <!-- USER AVATAR BADGE --><!-- /USER AVATAR BADGE -->
-    </a>
+    {% include "includes/account-avatar-small.html" with account=user.account %}
     <!-- /USER AVATAR -->
 
     <!-- MENU -->