Reload containers - Failed.

osinaweb/static/js/reload-script.js

@@ -0,0 +1,17 @@
+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,7 +185,7 @@
     <!-- 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">
+        <div class="w-full h-fit mt-2 userActivityContainer">
 
 
             {% for latest in latest_statuses_time_ago %}
@@ -235,6 +235,7 @@
     </div>
 </div>
 
+
 <!-- TICKETS SECTION -->
 <div class="w-full h-fit px-10 py-5">
     <!-- TICKETS FILTERING BAR -->

osinaweb/templates/main.html

@@ -102,7 +102,8 @@
                         </a>
 
                         <a>
-                            <div class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px]">
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px]">
                                 <p class="text-white">My Tickets</p>
                             </div>
                         </a>
@@ -222,20 +223,20 @@
                     </div>
 
                     <div class="flex justify-start items-center gap-5">
-                        <div>
+                        <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>
+                            <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>
                         <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"
@@ -338,6 +339,9 @@
             <!-- SIDE BAR SCRIPT -->
             <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
 
+            <!-- TO RELOAD THE USERS ACTIVITY CONTAINER -->
+            <script type="text/javascript" src='{% static "js/reload-script.js" %}'></script>
+
 </body>
 
 </html>