Added project progress bar.

osinaweb/static/dist/output.css

@@ -792,6 +792,10 @@ video {
   height: 100px;
 }
 
+.h-\[10px\] {
+  height: 10px;
+}
+
 .h-\[13px\] {
   height: 13px;
 }
@@ -1335,6 +1339,11 @@ video {
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
 
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+
 .bg-green-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));

osinaweb/static/js/calculate-project-time.js

@@ -0,0 +1,40 @@
+const startDateElement = document.querySelector(".startDate");
+const endDateElement = document.querySelector(".endDate");
+
+const mainBar = document.querySelector(".mainBar");
+const progressBar = document.querySelector(".progressBar");
+
+const startDate = new Date(startDateElement.textContent);
+const endDate = new Date(endDateElement.textContent);
+
+// Get the current date
+const currentDate = new Date();
+
+if (endDate <= currentDate) {
+    // If the end date is before or equal to the current date
+    progressBar.style.width = "100%";
+    progressBar.classList.add('bg-red-500');
+} else if (startDate > currentDate) {
+    // If the start date is after the current date
+    progressBar.style.width = "0%";
+} else {
+    // Calculate the passed time in milliseconds
+    const passedTime = currentDate - startDate;
+
+    // Calculate the total project duration in milliseconds
+    const totalDuration = endDate - startDate;
+
+    // Calculate the percentage of passed time
+    const percentage = (passedTime / totalDuration) * 100;
+
+    // Set the width of progressBar based on the percentage
+    progressBar.style.width = percentage + "%";
+
+    if (percentage <= 50) {
+        progressBar.classList.add('bg-green-700');
+    } else if (percentage <= 80) {
+        progressBar.classList.add('bg-yellow-400');
+    } else if (percentage <= 100) {
+        progressBar.classList.add('bg-red-500');
+    }
+}

osinaweb/templates/details_pages/project-details.html

@@ -88,6 +88,13 @@
             <p class="text-white text-base">{{project.project_id}}</p>
         </div>
         {% endif %}
+
+        <!-- PROJECT PROGRESS BAR -->
+        <div class="w-full h-[10px] bg-gray-100 shadow-md mt-1 mainBar">
+            <div class="h-full  progressBar">
+            </div>
+        </div>
+
         <div class="w-full h-[70px] flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
             <div class="flex justify-start items-center gap-3">
                 <a href="{% url 'createepic' project.project_id %}">
@@ -169,12 +176,12 @@
 
             <div>
                 <p class="text-gray-500 text-xl">Start Date: <span
-                        class="text-slate-800 text-xl font-semibold">{{project.start_date}}</span></p>
+                        class="text-slate-800 text-xl font-semibold startDate">{{project.start_date}}</span></p>
             </div>
 
             <div>
                 <p class="text-gray-500 text-xl">End Date: <span
-                        class="text-slate-800 text-xl font-semibold">{{project.end_date}}</span></p>
+                        class="text-slate-800 text-xl font-semibold endDate">{{project.end_date}}</span></p>
             </div>
 
             <!-- PROJECT DETAILS -->
@@ -585,4 +592,7 @@
 
 <!-- THE SCRIPT FOR THE EPICS BAR -->
 <script type="text/javascript" src='{% static "js/epics.js" %}'></script>
+
+<!-- TO DISPLAY THE PROJECT PROGRESS BAR BASED ON ITS REMAINING TIME -->
+<script type="text/javascript" src='{% static "js/calculate-project-time.js" %}'></script>
 {% endblock content %}