From f61ba74c2dd05b09ccaaef116fc27dc05abe444e Mon Sep 17 00:00:00 2001
From: sachin-panayil <sachinpanayil01@gmail.com>
Date: Wed, 9 Oct 2024 12:03:07 -0500
Subject: [PATCH 1/6] added age of project to frontend

Signed-off-by: sachin-panayil <sachinpanayil01@gmail.com>
---
 app/site/_layouts/repo-report.liquid | 28 ++++++++++++++++++++++++++++
 app/src/js/graphs.js                 | 14 ++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/app/site/_layouts/repo-report.liquid b/app/site/_layouts/repo-report.liquid
index 3fd984cd24..83c058fe9c 100644
--- a/app/site/_layouts/repo-report.liquid
+++ b/app/site/_layouts/repo-report.liquid
@@ -155,6 +155,34 @@ layout: base
           </div>
           <p>{{ project.pull_requests_count }}</p>
         </div>
+        <div class="stat-container" id="project-age">
+          <div class="project-age-heading">
+            <h4>
+              <span>
+                <svg
+                  class="usa-icon"
+                  aria-labelledby="project-age"
+                  role="img"
+                >
+                  {% lucide "calendar" %}
+                </svg>
+              </span>
+              Age Of Project
+            </h4>
+          </div>
+          <p onclick="toggleDateAge(this)" style="cursor: pointer;">
+            <span class="date">
+              {{ project.created_at | date: "%B %d, %Y" }}
+            </span>
+            <span class="age" style="display: none;">
+              {% assign created_date = project.created_at | date: "%s" | plus: 0 %}
+              {% assign current_date = "now" | date: "%s" | plus: 0 %}
+              {% assign age_seconds = current_date | minus: created_date %}
+              {% assign age_days = age_seconds | divided_by: 86400.0 | round %}
+              {{ age_days }} day{% if age_days != 1 %}s{% endif %}
+            </span>
+          </p>
+        </div>
       </div>
     {% else %}
       <p>Error Occurred: Object Not Found</p>
diff --git a/app/src/js/graphs.js b/app/src/js/graphs.js
index 94a85282c5..5c2237eed7 100644
--- a/app/src/js/graphs.js
+++ b/app/src/js/graphs.js
@@ -17,3 +17,17 @@ window.showGraph = function (selectedGraphId, className, buttonName) {
     }
   })
 }
+
+// goes inside includes/js for the time being
+function toggleDateAge(element) {
+  const dateSpan = element.querySelector('.date');
+  const ageSpan = element.querySelector('.age');
+  
+  if (ageSpan.style.display === 'none') {
+    dateSpan.style.display = 'none';
+    ageSpan.style.display = 'inline';
+  } else {
+    dateSpan.style.display = 'inline';
+    ageSpan.style.display = 'none';
+  }
+}
\ No newline at end of file

From aec595d14616f890f9dc2836f2b9cafa86b346bb Mon Sep 17 00:00:00 2001
From: sachin-panayil <sachinpanayil01@gmail.com>
Date: Fri, 11 Oct 2024 10:40:03 -0400
Subject: [PATCH 2/6] fixed linting and moved JS

Signed-off-by: sachin-panayil <sachinpanayil01@gmail.com>
---
 app/site/_layouts/repo-report.liquid | 26 +++++++++++++++++++++++---
 app/src/js/graphs.js                 | 14 --------------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/app/site/_layouts/repo-report.liquid b/app/site/_layouts/repo-report.liquid
index 83c058fe9c..7775cfcf23 100644
--- a/app/site/_layouts/repo-report.liquid
+++ b/app/site/_layouts/repo-report.liquid
@@ -1,7 +1,22 @@
 ---
 layout: base
 ---
+<script>
+  function toggleDateAge(element) {
+    const dateSpan = element.querySelector(".date");
+    const ageSpan = element.querySelector(".age");
+  
+    if (ageSpan.style.display === "none") {
+      dateSpan.style.display = "none";
+      ageSpan.style.display = "inline";
+    } else {
+      dateSpan.style.display = "inline";
+      ageSpan.style.display = "none";
+    }
+  }
+</script>
 <script src="{{ "/assets/js/graphs.js" | url }}"></script>
+
 <div class="grid-container">
   {% assign project = projects | findObject: repo %}
 
@@ -172,13 +187,18 @@ layout: base
           </div>
           <p onclick="toggleDateAge(this)" style="cursor: pointer;">
             <span class="date">
-              {{ project.created_at | date: "%B %d, %Y" }}
+              {{ project.created_at | date: '%B %d, %Y' }}
             </span>
             <span class="age" style="display: none;">
-              {% assign created_date = project.created_at | date: "%s" | plus: 0 %}
-              {% assign current_date = "now" | date: "%s" | plus: 0 %}
+              {% comment %} takes project created + todays date and turns it into seconds {% endcomment %}
+              {% assign created_date = project.created_at | date: '%s' | plus: 0 %}
+              {% assign current_date = 'now' | date: '%s' | plus: 0 %}
+
               {% assign age_seconds = current_date | minus: created_date %}
+
+              {% comment %} divide by how many seconds are in a day to convert back into days {% endcomment %}
               {% assign age_days = age_seconds | divided_by: 86400.0 | round %}
+
               {{ age_days }} day{% if age_days != 1 %}s{% endif %}
             </span>
           </p>
diff --git a/app/src/js/graphs.js b/app/src/js/graphs.js
index 5c2237eed7..94a85282c5 100644
--- a/app/src/js/graphs.js
+++ b/app/src/js/graphs.js
@@ -17,17 +17,3 @@ window.showGraph = function (selectedGraphId, className, buttonName) {
     }
   })
 }
-
-// goes inside includes/js for the time being
-function toggleDateAge(element) {
-  const dateSpan = element.querySelector('.date');
-  const ageSpan = element.querySelector('.age');
-  
-  if (ageSpan.style.display === 'none') {
-    dateSpan.style.display = 'none';
-    ageSpan.style.display = 'inline';
-  } else {
-    dateSpan.style.display = 'inline';
-    ageSpan.style.display = 'none';
-  }
-}
\ No newline at end of file

From 338dc6640bb670fa9092efb732909d314f1cc377 Mon Sep 17 00:00:00 2001
From: sachin-panayil <sachinpanayil01@gmail.com>
Date: Fri, 11 Oct 2024 14:15:52 -0400
Subject: [PATCH 3/6] added requested changes

Signed-off-by: sachin-panayil <sachinpanayil01@gmail.com>
---
 app/site/_layouts/repo-report.liquid | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/site/_layouts/repo-report.liquid b/app/site/_layouts/repo-report.liquid
index 7775cfcf23..5af2c66eea 100644
--- a/app/site/_layouts/repo-report.liquid
+++ b/app/site/_layouts/repo-report.liquid
@@ -3,16 +3,16 @@ layout: base
 ---
 <script>
   function toggleDateAge(element) {
-    const dateSpan = element.querySelector(".date");
-    const ageSpan = element.querySelector(".age");
+    const dateElements = element.querySelectorAll(".date");
+    const ageElements = element.querySelectorAll(".age");
   
-    if (ageSpan.style.display === "none") {
-      dateSpan.style.display = "none";
-      ageSpan.style.display = "inline";
-    } else {
-      dateSpan.style.display = "inline";
-      ageSpan.style.display = "none";
-    }
+    dateElements.forEach(element => {
+      element.style.display = element.style.display === 'none' ? 'inline' : 'none';
+    });
+  
+    ageElements.forEach(element => {
+      element.style.display = element.style.display === 'none' ? 'inline' : 'none';
+    });
   }
 </script>
 <script src="{{ "/assets/js/graphs.js" | url }}"></script>
@@ -170,7 +170,7 @@ layout: base
           </div>
           <p>{{ project.pull_requests_count }}</p>
         </div>
-        <div class="stat-container" id="project-age">
+        <div class="stat-container" id="project-age" onclick="toggleDateAge(this)" style="cursor: pointer;">
           <div class="project-age-heading">
             <h4>
               <span>
@@ -182,10 +182,11 @@ layout: base
                   {% lucide "calendar" %}
                 </svg>
               </span>
-              Age Of Project
+              <span class="date">Project Creation Date</span>
+              <span class="age" style="display: none;">Age of Project</span>
             </h4>
           </div>
-          <p onclick="toggleDateAge(this)" style="cursor: pointer;">
+          <p style= "text-decoration: underline;">
             <span class="date">
               {{ project.created_at | date: '%B %d, %Y' }}
             </span>

From b3dce6d60956fa68d549e984baa7675391597ce7 Mon Sep 17 00:00:00 2001
From: sachin-panayil <sachinpanayil01@gmail.com>
Date: Fri, 11 Oct 2024 14:55:56 -0400
Subject: [PATCH 4/6] linting

Signed-off-by: sachin-panayil <sachinpanayil01@gmail.com>
---
 app/site/_layouts/repo-report.liquid | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/site/_layouts/repo-report.liquid b/app/site/_layouts/repo-report.liquid
index 5af2c66eea..58d38c5acb 100644
--- a/app/site/_layouts/repo-report.liquid
+++ b/app/site/_layouts/repo-report.liquid
@@ -3,14 +3,14 @@ layout: base
 ---
 <script>
   function toggleDateAge(element) {
-    const dateElements = element.querySelectorAll(".date");
-    const ageElements = element.querySelectorAll(".age");
+    const dateElements = element.querySelectorAll('.date');
+    const ageElements = element.querySelectorAll('.age');
   
-    dateElements.forEach(element => {
+    dateElements.forEach((element) => {
       element.style.display = element.style.display === 'none' ? 'inline' : 'none';
     });
   
-    ageElements.forEach(element => {
+    ageElements.forEach((element) => {
       element.style.display = element.style.display === 'none' ? 'inline' : 'none';
     });
   }
@@ -186,7 +186,7 @@ layout: base
               <span class="age" style="display: none;">Age of Project</span>
             </h4>
           </div>
-          <p style= "text-decoration: underline;">
+          <p style="text-decoration: underline;">
             <span class="date">
               {{ project.created_at | date: '%B %d, %Y' }}
             </span>

From f3218254be030f844e5fc544a6d6b5a7198d2830 Mon Sep 17 00:00:00 2001
From: sachin-panayil <sachinpanayil01@gmail.com>
Date: Fri, 11 Oct 2024 14:59:40 -0400
Subject: [PATCH 5/6] more linting

Signed-off-by: sachin-panayil <sachinpanayil01@gmail.com>
---
 app/site/_layouts/repo-report.liquid | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/site/_layouts/repo-report.liquid b/app/site/_layouts/repo-report.liquid
index 58d38c5acb..a5ccbddc3e 100644
--- a/app/site/_layouts/repo-report.liquid
+++ b/app/site/_layouts/repo-report.liquid
@@ -3,16 +3,16 @@ layout: base
 ---
 <script>
   function toggleDateAge(element) {
-    const dateElements = element.querySelectorAll('.date');
-    const ageElements = element.querySelectorAll('.age');
+    const dateElements = element.querySelectorAll('.date')
+    const ageElements = element.querySelectorAll('.age')
   
     dateElements.forEach((element) => {
-      element.style.display = element.style.display === 'none' ? 'inline' : 'none';
-    });
+      element.style.display = element.style.display === 'none' ? 'inline' : 'none'
+    })
   
     ageElements.forEach((element) => {
-      element.style.display = element.style.display === 'none' ? 'inline' : 'none';
-    });
+      element.style.display = element.style.display === 'none' ? 'inline' : 'none'
+    })
   }
 </script>
 <script src="{{ "/assets/js/graphs.js" | url }}"></script>

From 655c58585890450945e5bdc2c7653a03eacd004b Mon Sep 17 00:00:00 2001
From: sachin-panayil <sachinpanayil01@gmail.com>
Date: Fri, 11 Oct 2024 15:05:19 -0400
Subject: [PATCH 6/6] even more linting

Signed-off-by: sachin-panayil <sachinpanayil01@gmail.com>
---
 app/site/_layouts/repo-report.liquid | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/site/_layouts/repo-report.liquid b/app/site/_layouts/repo-report.liquid
index a5ccbddc3e..8470dfbffb 100644
--- a/app/site/_layouts/repo-report.liquid
+++ b/app/site/_layouts/repo-report.liquid
@@ -5,11 +5,11 @@ layout: base
   function toggleDateAge(element) {
     const dateElements = element.querySelectorAll('.date')
     const ageElements = element.querySelectorAll('.age')
-  
+
     dateElements.forEach((element) => {
       element.style.display = element.style.display === 'none' ? 'inline' : 'none'
     })
-  
+
     ageElements.forEach((element) => {
       element.style.display = element.style.display === 'none' ? 'inline' : 'none'
     })