#184 timezone follow ups for the profile and service lists (#193)

gcivil-nyu-org · Nov 18, 2024 · bc288f2 · bc288f2
1 parent 2216281
commit bc288f2
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 49 deletions.
diff --git a/src/accounts/templates/profile_base.html b/src/accounts/templates/profile_base.html
@@ -81,8 +81,7 @@ <h2 class="text-xl font-semibold text-blue-700 mb-4">My Reviews</h2>
                             <p class="font-semibold text-gray-800">{{ review.ServiceName }}</p>
                             <p class="text-gray-600">Rating: {{ review.RatingStars }} stars</p>
                             <p class="text-gray-600">{{ review.RatingMessage }}</p>
-                            <p class="text-sm text-gray-500">{{ review.Timestamp|date:"M d, Y" }}</p>
-                        </div>
+                            <p class="text-sm text-gray-500" data-timestamp="{{ review.Timestamp.isoformat }}"></p>                        </div>
                     {% endfor %}
                 </div>
             {% else %}
@@ -177,4 +176,13 @@ <h3 class="text-lg font-semibold mb-2">Leave a Review</h3>
     const userIsAuthenticated = {{ user.is_authenticated|lower }};
 </script>
 <script src="{% static 'js/profile.js' %}"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Convert all timestamps
+        document.querySelectorAll('[data-timestamp]').forEach(element => {
+            const timestamp = element.getAttribute('data-timestamp');
+            element.textContent = formatTimestamp(timestamp);
+        });
+    });
+</script>
 {% endblock %}
diff --git a/src/forum/templates/category_detail.html b/src/forum/templates/category_detail.html
@@ -86,7 +86,7 @@ <h2 class="text-xl font-semibold text-blue-700">
 
 {% block scripts %}
     {{ block.super }}
-    <script src="{% static 'js/forum_common.js' %}"></script>
+    <script src="{% static 'js/common.js' %}"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             // Convert all timestamps

diff --git a/src/forum/templates/post_detail.html b/src/forum/templates/post_detail.html
@@ -204,7 +204,7 @@ <h2 class="text-2xl font-bold mb-4">Delete Comment</h2>
 {% block scripts %}
     <script src="{% static 'js/forum_delete.js' %}"></script>
     <script src="{% static 'js/forum_edit.js' %}"></script>
-    <script src="{% static 'js/forum_common.js' %}"></script>
+    <script src="{% static 'js/common.js' %}"></script>
     <script>
     document.addEventListener('DOMContentLoaded', function() {
         // Convert all timestamps

diff --git a/src/services/templates/service_list.html b/src/services/templates/service_list.html
@@ -164,4 +164,5 @@ <h3 class="text-2xl font-bold text-gray-900 mb-2">
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
     <script src="{% static 'js/service_list.js' %}"></script>
     <script src="{% static 'js/service_delete.js' %}"></script>
+    <script src="{% static 'js/common.js' %}"></script>
 {% endblock %}
diff --git a/src/static/js/forum_common.js → src/static/js/common.js b/src/static/js/forum_common.js → src/static/js/common.js
@@ -1,6 +1,5 @@
 // static/js/forum.js
 function formatDateTime(utcTimestamp) {
-    console.log('Input timestamp:', utcTimestamp); // Keep this for debugging
 
     try {
         let date = new Date(utcTimestamp);

diff --git a/src/static/js/profile.js b/src/static/js/profile.js
@@ -5,31 +5,46 @@ function toggleEdit() {
     editSection.classList.toggle('hidden');
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-    function formatTimestamp(utcTimestamp) {
-    // Ensure we're parsing the UTC timestamp correctly
-    const date = new Date(utcTimestamp + 'Z'); // Append 'Z' to ensure UTC interpretation
-
-    const options = {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: true,
-    };
-
-    return date.toLocaleString(undefined, options);
+function formatTimestamp(utcTimestamp) {
+    if (!utcTimestamp) {
+        return 'N/A';
+    }
+
+    try {
+        // Remove the timezone offset if it exists
+        const cleanTimestamp = utcTimestamp.replace(/([+-]\d{2}:\d{2}|Z)$/, '');
+        const date = new Date(cleanTimestamp + 'Z');
+
+        if (isNaN(date.getTime())) {
+            console.log('Invalid date created for:', utcTimestamp);
+            return 'Invalid Date';
+        }
+
+        const options = {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: true,
+        };
+
+        return date.toLocaleString(undefined, options);
+    } catch (error) {
+        console.error('Error formatting date:', error);
+        return 'Error formatting date';
+    }
 }
 
+document.addEventListener('DOMContentLoaded', () => {
     async function fetchAndDisplayReviews(serviceId, page = 1) {
         try {
             const response = await fetch(`/home/get_reviews/${serviceId}/?page=${page}`);
             if (!response.ok) {
                 throw new Error(`Failed to fetch reviews. Status: ${response.status}`);
             }
 
-            const { reviews, has_next, has_previous, current_page } = await response.json();
+            const {reviews, has_next, has_previous, current_page} = await response.json();
 
             const reviewsContainer = document.getElementById('reviewsContainer');
             reviewsContainer.innerHTML = '';
@@ -76,6 +91,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     responseDiv.appendChild(responseText);
 
                     const respondedAt = formatTimestamp(review.RespondedAt);
+                    console.log(review.RespondedAt)
                     const responseMeta = document.createElement('p');
                     responseMeta.classList.add('text-xs', 'text-gray-500');
                     responseMeta.textContent = `Responded on ${respondedAt}`;
@@ -255,7 +271,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Add event listeners for bookmark checkboxes
     const bookmarkCheckboxes = document.querySelectorAll('.bookmark-checkbox');
     bookmarkCheckboxes.forEach(checkbox => {
-        checkbox.addEventListener('change', async function() {
+        checkbox.addEventListener('change', async function () {
             const serviceId = this.dataset.serviceId;
             const action = this.checked ? 'add' : 'remove';
 

diff --git a/src/static/js/service_list.js b/src/static/js/service_list.js
@@ -1,21 +1,21 @@
 // service_list.js
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     const servicesGrid = document.getElementById('servicesGrid');
     const serviceModal = document.getElementById('serviceModal');
     const closeModal = document.getElementById('closeModal');
     let map = null;
 
     // Service name click event
-    servicesGrid.addEventListener('click', function(e) {
+    servicesGrid.addEventListener('click', function (e) {
         if (e.target.classList.contains('service-name')) {
             const serviceId = e.target.dataset.serviceId;
             openServiceModal(serviceId);
         }
     });
 
     // Close modal event
-    closeModal.addEventListener('click', function() {
+    closeModal.addEventListener('click', function () {
         serviceModal.classList.add('hidden');
     });
 
@@ -50,11 +50,7 @@ document.addEventListener('DOMContentLoaded', function() {
                         const hasResponseText = review.ResponseText && review.ResponseText.trim() !== "";
                         let respondedAtDate = "Responded just now";
                         if (review.RespondedAt) {
-                            const date = new Date(review.RespondedAt);
-                            const day = String(date.getDate()).padStart(2, '0');
-                            const month = date.toLocaleString('default', { month: 'long' });
-                            const year = date.getFullYear();
-                            respondedAtDate = `${day} ${month} ${year}`;
+                            respondedAtDate = formatDateTime(review.RespondedAt);
                         }
 
                         reviewsContainer.innerHTML += `
@@ -65,7 +61,7 @@ document.addEventListener('DOMContentLoaded', function() {
                                     <div class="mt-3 p-3 bg-blue-50 rounded" id="reviewResponse-${review.ReviewId}">
                                         <p class="font-semibold">Provider Response:</p>
                                         <p>${review.ResponseText}</p>
-                                        <p class="text-sm text-gray-600">Responded at: ${respondedAtDate}</p>
+                                        <p class="text-sm text-gray-600">Responded on ${respondedAtDate}</p>
                                     </div>
                                 ` : `
                                     <button class="respond-button bg-blue-500 text-white py-1 px-3 rounded mt-2" 
@@ -114,7 +110,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const searchInput = document.getElementById('serviceSearch');
     const serviceCards = document.querySelectorAll('.service-box');
 
-    searchInput.addEventListener('input', function(e) {
+    searchInput.addEventListener('input', function (e) {
         const searchTerm = e.target.value.toLowerCase();
 
         serviceCards.forEach(card => {
@@ -178,30 +174,30 @@ function sendResponse(serviceId, reviewId) {
             'Content-Type': 'application/x-www-form-urlencoded',
             'X-CSRFToken': csrfToken,
         },
-        body: new URLSearchParams({ responseText: responseText }),
+        body: new URLSearchParams({responseText: responseText}),
     })
-    .then(response => response.json())
-    .then(data => {
-        if (data.status === "success") {
-            // Update the response container
-            responseContainer.innerHTML = `
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === "success") {
+                // Update the response container
+                responseContainer.innerHTML = `
                 <div class="mt-3 p-3 bg-blue-50 rounded">
                     <p class="font-semibold">Provider Response:</p>
                     <p>${responseText}</p>
                     <p class="text-sm text-gray-600">Responded just now</p>
                 </div>
             `;
 
-            const form = document.getElementById(`responseForm-${reviewId}`);
-            if (form) {
-                form.remove();
+                const form = document.getElementById(`responseForm-${reviewId}`);
+                if (form) {
+                    form.remove();
+                }
+            } else {
+                alert(`Failed to send response: ${data.message}`);
             }
-        } else {
-            alert(`Failed to send response: ${data.message}`);
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        alert(error.message);
-    });
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert(error.message);
+        });
 }