Refresh status and user activities container

osinaweb/osinacore/custom_context.py

@@ -89,3 +89,5 @@ def last_status(request):
     return {'last_status' : last_status, 'current_date' : current_date, 'minutes_ago' : minutes_ago, 'hours_minutes_ago': hours_minutes_ago,}
 
 
+
+

osinaweb/osinacore/views.py

@@ -12,6 +12,9 @@ from django.http import JsonResponse
 from .models import Task, Epic
 from datetime import date
 from django.http import HttpResponseRedirect
+from django.template.loader import render_to_string
+from .custom_context import calculate_time_ago  
+
 
 
 # Pages views
@@ -1216,3 +1219,66 @@ def edit_tag(request, tag_id):
      return redirect('tags')
 
  return render(request, 'edit_pages/edit-tag.html', {'tag': tag})
+
+
+
+# TO UPDATE THE STATUS CONTAINER
+def get_updated_last_status(request):
+    if request.user.is_authenticated:
+        last_status = Status.objects.filter(staff=request.user.staffprofile).last()
+        if last_status:
+            status_time = datetime.strptime(last_status.time, '%I:%M %p')
+            current_time = datetime.now().time()
+            time_difference = abs(datetime.combine(datetime.today(), current_time) - datetime.combine(datetime.today(), status_time.time()))
+            minutes_ago = int(time_difference.total_seconds() / 60)
+        else:
+            minutes_ago = 0
+    else:
+        last_status = None
+        minutes_ago = 0
+
+    if minutes_ago > 60:
+        hours_ago = minutes_ago // 60
+        remaining_minutes = minutes_ago % 60
+        hours_minutes_ago = f"{hours_ago}hr {remaining_minutes}min ago"
+    else:
+        hours_minutes_ago = f"{minutes_ago}min ago"
+
+    response_data = {
+        'last_status': last_status,
+        'minutes_ago': minutes_ago,
+        'hours_minutes_ago': hours_minutes_ago,
+    }
+
+    recent_status = render_to_string('recent-status.html', response_data)
+
+    return HttpResponse(recent_status)
+
+
+# TO GET USER ACTIVITIES
+def get_latest_activities(request):
+    if request.user.is_authenticated and request.user.is_superuser:
+        open_task_count = Task.objects.filter(status='Open').count()
+        working_on_task_count = Task.objects.filter(status='Working On').count()
+    elif request.user.is_authenticated:
+        open_task_count = Task.objects.filter(assigned_to=request.user.staffprofile, status='Open').count()
+        working_on_task_count = Task.objects.filter(assigned_to=request.user.staffprofile, status='Working On').count()
+    else:
+        open_task_count = 0
+        working_on_task_count = 0
+
+    total_tasks = open_task_count + working_on_task_count
+
+    latest_statuses = Status.objects.all().order_by('-id')[:12]
+
+    # Calculate time ago for each status and store it in a list of dictionaries
+    latest_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in latest_statuses]
+
+    response_data = {
+        'total_tasks': total_tasks,
+        'latest_statuses_time_ago': latest_statuses_time_ago,  # Include latest_statuses_time_ago in the context
+    }
+
+    recent_activities = render_to_string('recent-activities.html', response_data)
+
+    return HttpResponse(recent_activities)

osinaweb/osinaweb/urls.py

@@ -52,7 +52,6 @@ urlpatterns = [
     path('adddailyreport/', views.add_daily_report, name='adddailyreport'),
 
 
-
     #Fetch urls
     path("fetch_related_tasks/", views.fetch_related_tasks, name="fetch_related_tasks"),
 
@@ -111,6 +110,11 @@ urlpatterns = [
     path('mark_point_completed/<int:point_id>/<str:task_id>/', views.mark_point_completed, name='mark_point_completed'),
     path('mark_point_completed_task_page/<int:point_id>/<str:task_id>/', views.mark_point_completed_task_page, name='mark_point_completed_task_page'),
    
+
+
+
+   path('getupdatedlaststatus/', views.get_updated_last_status, name='getupdatedlaststatus'),
+   path('getupdatedactivities/', views.get_latest_activities, name='getupdatedactivities'),
 ]
 
 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

osinaweb/static/js/get-updated-last-status.js

@@ -0,0 +1,13 @@
+function refreshStatusContainer() {
+              
+    $.ajax({
+        url: '/getupdatedlaststatus/',
+        method: 'GET',
+        dataType: 'html',
+        success: function(data) {
+            $('#statusContainer').html(data);
+        }
+    });
+}
+
+setInterval(refreshStatusContainer, 60000); 

osinaweb/static/js/get-updated-user-activity.js

@@ -0,0 +1,13 @@
+function refreshUserActivityContainer() {
+              
+    $.ajax({
+        url: '/getupdatedactivities/',
+        method: 'GET',
+        dataType: 'html',
+        success: function(data) {
+            $('#activitiesContainer').html(data);
+        }
+    });
+}
+
+setInterval(refreshUserActivityContainer, 60000); 

osinaweb/static/js/reload-script.js

@@ -1,17 +0,0 @@
-function autoRefreshDiv() {
-    var statusContainer = document.getElementById('statusContainer');
-    var divs = document.querySelectorAll('.userActivityContainer');
-
-    divs.forEach(function (div) {
-        setInterval(function () {
-            div.innerHTML = div.innerHTML;
-        }, 15000);
-    });
-
-    // setInterval(function () {
-
-    //     statusContainer.innerHTML = statusContainer.innerHTML;
-    // }, 60000);
-}
-
-window.onload = autoRefreshDiv;

osinaweb/templates/index.html

@@ -185,51 +185,9 @@
     <!-- RIGHT SIDE / USERS ACTIVITY -->
     <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
         <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
-        <div class="w-full h-fit mt-2 userActivityContainer">
-
-
-            {% for latest in latest_statuses_time_ago %}
-            <!-- 1ST ROW -->
-            <div class="w-full flex flex-col py-3">
-                <div class="w-full flex flex-col justify-center items-start gap-2">
-                    <div class="w-full flex justify-between items-center gap-2">
-                        <div class="flex justify-start gap-2">
-                            <div class="w-[45px] h-[45px] rounded-full">
-                                <img src='{{latest.status.staff.image.url}}' alt="user profile"
-                                    class="w-full h-full object-cover rounded-full">
-                            </div>
-                            <div class="flex flex-col">
-                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.status.staff.first_name}}
-                                    {{latest.status.staff.last_name}}</h1>
-                                {% if latest.time_ago == '0min ago' %}
-                                <p class="text-sm text-gray-500">Just Now</p>
-                                {%else %}
-                                <p class="text-sm text-gray-500">{{ latest.time_ago}}</p>
-                                {%endif%}
-                            </div>
-                        </div>
-                        <div class="cursor-pointer">
-                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                        </div>
-                    </div>
-
-                    <!-- Status -->
-                    <div class="w-full">
-                        <p class="text-sm text-gray-500">{{latest.status.text}}</p>
-                    </div>
-
-                    <!-- Add comment section -->
-                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                        <input type="text" placeholder="Add Comment..."
-                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
-                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
-                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            {% endfor %}
+        <div class="w-full h-fit mt-2" id="activitiesContainer">
 
+                {% include 'recent-activities.html' %}
 
         </div>
     </div>

osinaweb/templates/main.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 
 <body class="bg-gray-200">
@@ -222,22 +224,8 @@
                         <div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
                     </div>
 
-                    <div class="flex justify-start items-center gap-5">
-                        <div id="statusContainer">
-                            <p class="text-sm text-gray-500">Recent Status: <span
-                                    class="text-slate-700 font-semibold">{{last_status.text}}</span></p>
-                            <p class="text-sm text-gray-500">Last update:
-                                {% if last_status.date == current_date %}
-                                Today | {{last_status.time}},
-                                {% if minutes_ago == 0 %}
-                                Just Now
-                                {%else%}
-                                {{hours_minutes_ago}}
-                                {%endif%}
-                                {% else %}
-                                {{last_status.date}} | {{last_status.time}}
-                                {%endif %}</p>
-                        </div>
+                    <div class="flex justify-start items-center gap-5" id="statusContainer">
+                        {% include 'recent-status.html' %}
                         <button
                             class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton"
                             data-modal-url="{% url 'addstatus' %}">
@@ -339,8 +327,12 @@
             <!-- SIDE BAR SCRIPT -->
             <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
 
+            <!-- TO RELOAD THE STATUS CONTAINER -->
+            <script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>
+
+
             <!-- TO RELOAD THE USERS ACTIVITY CONTAINER -->
-            <script type="text/javascript" src='{% static "js/reload-script.js" %}'></script>
+            <script type="text/javascript" src='{% static "js/get-updated-user-activity.js" %}'></script>
 
 </body>
 

osinaweb/templates/recent-activities.html

@@ -0,0 +1,41 @@
+{% for latest in latest_statuses_time_ago %}
+<div class="w-full flex flex-col py-3">
+    <div class="w-full flex flex-col justify-center items-start gap-2">
+        <div class="w-full flex justify-between items-center gap-2">
+            <div class="flex justify-start gap-2">
+                <div class="w-[45px] h-[45px] rounded-full">
+                    <img src='{{latest.status.staff.image.url}}' alt="user profile"
+                        class="w-full h-full object-cover rounded-full">
+                </div>
+                <div class="flex flex-col">
+                    <h1 class="text-sm text-slate-700 font-semibold">{{latest.status.staff.first_name}}
+                        {{latest.status.staff.last_name}}</h1>
+                    {% if latest.time_ago == '0min ago' %}
+                    <p class="text-sm text-gray-500">Just Now</p>
+                    {%else %}
+                    <p class="text-sm text-gray-500">{{ latest.time_ago}}</p>
+                    {%endif%}
+                </div>
+            </div>
+            <div class="cursor-pointer">
+                <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+            </div>
+        </div>
+
+        <!-- Status -->
+        <div class="w-full">
+            <p class="text-sm text-gray-500">{{latest.status.text}}</p>
+        </div>
+
+        <!-- Add comment section -->
+        <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+            <input type="text" placeholder="Add Comment..."
+                class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+            <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+            </button>
+        </div>
+    </div>
+</div>
+
+{% endfor %}

osinaweb/templates/recent-status.html

@@ -0,0 +1,15 @@
+<div>
+    <p class="text-sm text-gray-500">Recent Status: <span
+            class="text-slate-700 font-semibold">{{last_status.text}}</span></p>
+    <p class="text-sm text-gray-500">Last update:
+        {% if last_status.date == current_date %}
+        Today | {{last_status.time}},
+        {% if minutes_ago == 0 %}
+        Just Now
+        {%else%}
+        {{hours_minutes_ago}}
+        {%endif%}
+        {% else %}
+        {{last_status.date}} | {{last_status.time}}
+        {%endif %}</p>
+</div>