new changes.

osinaweb/osinacore/views.py

@@ -16,6 +16,11 @@ from django.template.loader import render_to_string
 from .custom_context import calculate_time_ago  
 
 
+def get_point_total_time(request, point_id):
+    point = Point.objects.get(id=point_id)
+    total_time = point.total_time()
+    return JsonResponse({'hours': total_time[0], 'minutes': total_time[1], 'seconds': total_time[2]})
+
 
 # Pages views
 def signin(request):

osinaweb/osinaweb/urls.py

@@ -150,6 +150,9 @@ urlpatterns = [
 
     # TO FETCH THE EPICS OF THE SELECTED PROJECT WHEN EDITING A TASK
    path('fetch_epics/', views.fetch_epics, name='fetch_epics'),
+
+
+   path('get_point_total_time/<int:point_id>/', views.get_point_total_time, name='get_point_total_time'),
 ]
 
 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

osinaweb/static/dist/output.css

@@ -979,10 +979,6 @@ video {
   width: 13px;
 }
 
-.w-\[150px\] {
-  width: 150px;
-}
-
 .w-\[160px\] {
   width: 160px;
 }
@@ -1397,6 +1393,11 @@ video {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.border-blue-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 64 175 / var(--tw-border-opacity));
+}
+
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1427,6 +1428,16 @@ video {
   border-color: rgb(21 128 61 / var(--tw-border-opacity));
 }
 
+.border-green-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(22 101 52 / var(--tw-border-opacity));
+}
+
+.border-green-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(20 83 45 / var(--tw-border-opacity));
+}
+
 .border-orange-400 {
   --tw-border-opacity: 1;
   border-color: rgb(251 146 60 / var(--tw-border-opacity));
@@ -1482,6 +1493,11 @@ video {
   border-color: rgb(234 179 8 / var(--tw-border-opacity));
 }
 
+.border-yellow-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(202 138 4 / var(--tw-border-opacity));
+}
+
 .border-opacity-30 {
   --tw-border-opacity: 0.3;
 }
@@ -1516,6 +1532,11 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.bg-blue-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1571,6 +1592,16 @@ video {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.bg-green-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
+}
+
+.bg-green-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 83 45 / var(--tw-bg-opacity));
+}
+
 .bg-orange-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 115 22 / var(--tw-bg-opacity));
@@ -1782,6 +1813,10 @@ video {
      object-fit: cover;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1872,6 +1907,10 @@ video {
   padding-bottom: 2.25rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pb-5 {
   padding-bottom: 1.25rem;
 }
@@ -1888,6 +1927,10 @@ video {
   padding-right: 2rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .pt-3 {
   padding-top: 0.75rem;
 }
@@ -1958,6 +2001,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -2095,6 +2143,10 @@ video {
   opacity: 0.4;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

osinaweb/static/js/points.js

@@ -1,17 +0,0 @@
-
-function setTextColor(color) {
-    document.querySelector('.pointTotalTime').classList.remove('text-green-700', 'text-red-500');
-    document.querySelector('.pointTotalTime').classList.add(color);
-}
-
-document.getElementById('startPointButton').addEventListener('click', function() {
-    document.getElementById('startPointButton').style.display = 'none';
-    document.getElementById('pausePointButton').style.display = 'block';
-    setTextColor('text-green-700');
-});
-
-document.getElementById('pausePointButton').addEventListener('click', function() {
-    document.getElementById('pausePointButton').style.display = 'none';
-    document.getElementById('startPointButton').style.display = 'block';
-    setTextColor('text-red-500');
-});

osinaweb/templates/popup_modals/showpoints-modal.html

@@ -18,89 +18,119 @@
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center mb-1">Points</h1>
 
-        <div class="w-full pr-4">
+        <div class="flex flex-col gap-5">
             {% for point in points %}
-
-            <div class="w-full flex flex-col gap-1">
-                <div class="w-full flex justify-between items-end py-2 border-b border-gray-200">
+            <p class="pointId" data-point-id="{{ point.id }}" style="display: none;">{{ point.id }}</p>
+            <div class="w-full flex flex-col gap-1 
+            {% if point.status == 'Completed' %}
+                bg-green-700
+            {% elif point.status == 'Working On' %}
+                    bg-orange-500
+            {% elif point.status == 'Paused' %}
+                    bg-red-500
+            {% else %}
+                    bg-slate-700
+            {% endif %}
+             bg-opacity-50 rounded-md shadow-md p-3">
+                <div class="w-full flex justify-between items-end pb-2 border-b border-gray-200">
                     <div class="w-[380px]">
                         {% if point.status == 'Completed' %}
-                        <p class="text-slate-800 line-through">{{point.text}}</p>
+                        <p class="text-white line-through">{{point.text}}</p>
                         {% else %}
-                        <p class="text-slate-800">{{point.text}}</p>
+                        <p class="text-white">{{point.text}}</p>
                         {% endif %}
                     </div>
                     <div class="flex justify-end items-center gap-2">
                         {% if point.status == 'Not Completed' or point.status == 'Paused' and not point.status == 'Completed' %}
-                        <a href="{% url 'mark_point_working_on' point.id task.id %}"><button
-                                class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 flex justify-center items-center hover:scale-105 transition-transform duration-300"
+                        <a href="{% url 'mark_point_working_on' point.id task.id %}">
+                            <button
+                                class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center hover:scale-105 transition-transform duration-300"
                                 id="startPointButton">
                                 <i class="fa fa-play"></i>
-                            </button></a> 
+                            </button>
+                        </a> 
                         {% endif %}
 
                         {% if point.status == 'Working On' and not point.status == 'Completed'  %}
-                        <a href="{% url 'mark_point_paused' point.id task.id %}"><button
-                            class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 justify-center items-center hover:scale-105 transition-transform duration-300"
-                            id="pausePointButton">
-                            <i class="fa fa-pause"></i>
-                        </button></a>
+                        <a href="{% url 'mark_point_paused' point.id task.id %}">
+                            <button
+                                class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white justify-center items-center hover:scale-105 transition-transform duration-300"
+                                id="pausePointButton">
+                                <i class="fa fa-pause"></i>
+                            </button>
+                        </a>
                         {% endif %}
 
                         {% if not point.status == 'Completed' and not point.status == 'Paused'  %}
-                        <a href="{% url 'mark_point_completed' point.id task.id %}"><button
-                            class="w-[40px] h-[40px] rounded-full bg-green-700 shadow-md text-white border border-green-700 flex justify-center items-center hover:scale-105 transition-transform duration-300">
-                            <i class="fa fa-check"></i></a>
-                        </button>
+                        <a href="{% url 'mark_point_completed' point.id task.id %}">
+                            <button
+                                class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center hover:scale-105 transition-transform duration-300">
+                                <i class="fa fa-check"></i>
+                            </button>
+                        </a>
                         {% endif %}
 
 
                         {% if point.status == 'Completed' %}
                         <button
-                            class="w-[40px] h-[40px] rounded-full bg-green-700 shadow-md text-white border border-green-700 flex justify-center items-center opacity-20 cursor-default">
+                            class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center opacity-30 cursor-default">
                             <i class="fa fa-check"></i>
                         </button>
                         {% endif %} 
 
+                        {% if not point.status == 'Completed' %}
                         <form method="post" action="{% url 'deletepointmodal' point.id task.id %}">
                             {% csrf_token %}
                             <button type="submit"
-                                class="w-[40px] h-[40px] bg-red-500 border border-red-500 rounded-full text-white flex justify-center items-center shadow-md hover:scale-105 transition-transform duration-300">
+                                class="w-[40px] h-[40px] bg-transparent border border-white rounded-full text-white flex justify-center items-center shadow-md hover:scale-105 transition-transform duration-300">
                                 <i class="fa fa-trash"></i>
                             </button>
                         </form>
+                        {% endif %}
                     </div>
                 </div>
 
-                <div class="w-full">
-                    <p class="text-gray-500 text-sm">Total Time:
-                        <span class="font-semibold pointTotalTime text-red-500">
-                            {% if point.total_time.0 > 0 %}
-                                {{ point.total_time.0 }}hr
+                <div class="flex justify-between items-center gap-3 pt-2">
+                    <div class="text-white text-sm">
+                        <p>Total Time:
+                            <span class="font-semibold pointTotalTime">
+                                {% if point.total_time.0 > 0 %}
+                                    <span class="hours">{{ point.total_time.0 }}</span>hr
+                                    {% if point.total_time.1 > 0 %}
+                                    ,
+                                    {% endif %}
+                                {% endif %}
+    
                                 {% if point.total_time.1 > 0 %}
-                                ,
+                                    <span class="minutes">{{ point.total_time.1 }}</span>min
+                                    {% if point.total_time.2 > 0 %}
+                                    ,
+                                    {%endif%}
                                 {% endif %}
-                            {% endif %}
     
-                            {% if point.total_time.1 > 0 %}
-                                {{ point.total_time.1 }}min
                                 {% if point.total_time.2 > 0 %}
-                                ,
-                                {%endif%}
-                            {% endif %}
-                
-                            {% if point.total_time.2 > 0 %}
-                                {{ point.total_time.2 }}sec
-                            {% endif %}
-                        </span>
-                    </p>
+                                    <span class="seconds">{{ point.total_time.2 }}</span>sec
+                                {% endif %}
+                            </span>
+                        </p>
+                    </div>
+
+                    <div class="w-fit py-1 px-2 bg-white text-slate-700 text-xs rounded-md shadow-md">
+                        {% if point.status == 'Completed' %}
+                        <p class="text-green-700 opacity-50">Completed</p>
+                        {% elif point.status == 'Working On' %}
+                        <p class="text-orange-500 opacity-50">Working On</p>
+                        {% elif point.status == 'Paused' %}
+                        <p class="text-red-500 opacity-50">Paused</p>
+                        {% else %}
+                        <p class="text-slate-700 opacity-50">Created</p>
+                        {% endif %}
+                    </div>
                 </div>
+            </div>            
             {% endfor %}
         </div>
     </div>    
-
-    <!---------------------- JS SCRIPTS -------------------->
-    
 </body>
 
 </html>