Fix data-ids in template files

Zaista · Sep 18, 2024 · 89afc39 · 89afc39
1 parent aaf5fbe
commit 89afc39
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 53 deletions.
diff --git a/public/friends/friend.html b/public/friends/friend.html
@@ -1,29 +1,29 @@
 <div class="col">
   <div class="card rounded-0 pointer mt-4">
-    <div id="friendImage" class="text-center">
+    <div data-id="friendImage" class="text-center">
       <img
         src="/resources/images/placeholder.png"
         alt="friendImage"
         class="w-50 my-4 loading-image"
         loading="lazy"
       />
     </div>
-    <ul id="friendList" class="list-group list-group-flush">
+    <ul data-id="friendList" class="list-group list-group-flush">
       <li class="list-group-item fs-4">
-        <span id="name"></span>
+        <span data-id="name"></span>
       </li>
       <li class="list-group-item">
         <i class="bi bi-geo-alt-fill"></i>
-        <span id="street"></span>
+        <span data-id="street"></span>
       </li>
       <li class="list-group-item">
         <i class="bi bi-buildings-fill"></i>
-        <span id="postalCode"></span>
-        <span id="city"></span>
+        <span data-id="postalCode"></span>
+        <span data-id="city"></span>
       </li>
       <li class="list-group-item">
         <i class="bi bi-globe-europe-africa"></i>
-        <span id="state"></span>
+        <span data-id="state"></span>
       </li>
     </ul>
   </div>

diff --git a/public/friends/santaFriends.js b/public/friends/santaFriends.js
@@ -16,7 +16,7 @@ $(async () => {
       $.each(result, (i, userData) => {
         const friendElement = $.parseHTML(friendTemplate);
         $(friendElement)
-          .find('#name')
+          .find('[data-id="name"]')
           .text(userData.name || userData.email);
         if (userData.imageUploaded) {
           lazyLoadImage(userData._id, $(friendElement).find('img')).then(
@@ -31,16 +31,16 @@ $(async () => {
           $(friendElement).find('img').removeClass('loading-image');
         }
         $(friendElement)
-          .find('#street')
+          .find('[data-id="street"]')
           .text(userData.address?.street || 'N/A');
         $(friendElement)
-          .find('#postalCode')
+          .find('[data-id="postalCode"]')
           .text(userData.address?.postalCode || '(N/A)');
         $(friendElement)
-          .find('#city')
+          .find('[data-id="city"]')
           .text(userData.address?.city || 'N/A');
         $(friendElement)
-          .find('#state')
+          .find('[data-id="state"]')
           .text(userData.address?.state || 'N/A');
         $(friendElement).on('click', function () {
           window.location.href = `/profile?id=${userData._id}`;

diff --git a/public/history/santaHistory.js b/public/history/santaHistory.js
@@ -19,21 +19,21 @@ $(async () => {
 
   function listYears(year) {
     const yearElement = $.parseHTML(yearTemplate);
-    $(yearElement).find('#yearTitle').text(year.year);
+    $(yearElement).find('[data-id="yearTitle"]').text(year.year);
     if (year.location === null) {
       year.location = 'N/A';
     }
-    $(yearElement).find('#yearLocation').text(year.location);
+    $(yearElement).find('[data-id="yearLocation"]').text(year.location);
     if (year.imageUploaded) {
       lazyLoadImage(year._id, $(yearElement).find('img')).then((image) => {
         $(yearElement)
-          .find('#locationImage')
+          .find('[data-id="locationImage"]')
           .attr('src', image.src)
           .attr('hidden', false);
-        $(yearElement).find('#locationIcon').attr('hidden', true);
+        $(yearElement).find('[data-id="locationIcon"]').attr('hidden', true);
       });
     } else {
-      $(yearElement).find('#locationIcon').removeClass('loading-image');
+      $(yearElement).find('[data-id="locationIcon"]').removeClass('loading-image');
     }
     $(yearElement).on('click', function () {
       window.location.href = `/history/year?id=${year._id}`;

diff --git a/public/history/year.html b/public/history/year.html
@@ -1,21 +1,21 @@
 <div class="col">
   <div class="card rounded-0 text-center pointer mt-4">
     <div class="card-header">
-      <h5 id="yearTitle" class="card-title"></h5>
+      <h5 data-id="yearTitle" class="card-title"></h5>
     </div>
     <div class="card-body p-0">
-      <h1 id="locationIcon" class="m-5 loading-image">
+      <h1 data-id="locationIcon" class="m-5 loading-image">
         <i class="bi bi-image color-red"></i>
       </h1>
       <img
-        id="locationImage"
+        data-id="locationImage"
         class="img-fluid"
         src=""
         alt="Location image"
         hidden
         loading="lazy"
       />
-      <p id="yearLocation" class="mt-3"></p>
+      <p data-id="yearLocation" class="mt-3"></p>
     </div>
   </div>
 </div>
diff --git a/public/history/year/gift.html b/public/history/year/gift.html
@@ -1,16 +1,16 @@
 <tr>
-  <td id="santa"></td>
-  <td id="child"></td>
+  <td data-id="santa"></td>
+  <td data-id="child"></td>
   <td>
-    <span id="giftText"></span>
-    <i id="descriptionEdit" class="bi bi-pencil-square pointer color-red"></i>
+    <span data-id="giftText"></span>
+    <i data-id="descriptionEdit" class="bi bi-pencil-square pointer color-red"></i>
   </td>
   <td data-bs-toggle="modal" data-bs-target="#imageModal">
-    <h2 id="giftIcon" class="loading-image">
+    <h2 data-id="giftIcon" class="loading-image">
       <i class="bi bi-image pointer color-red"></i>
     </h2>
     <img
-      id="giftImage"
+      data-id="giftImage"
       class="img-thumbnail pointer"
       src=""
       alt="Gift image"

diff --git a/public/history/year/santaYear.js b/public/history/year/santaYear.js
@@ -67,12 +67,12 @@ $(async () => {
     if (gift.child === '') {
       childName = gift.childEmail;
     }
-    $(giftElement).find('#santa').text(santaName);
-    $(giftElement).find('#child').text(childName);
+    $(giftElement).find('[data-id="santa"]').text(santaName);
+    $(giftElement).find('[data-id="child"]').text(childName);
     if (gift.gift === null) {
       gift.gift = 'N/A';
     }
-    $(giftElement).find('#giftText').text(gift.gift);
+    $(giftElement).find('[data-id="giftText"]').text(gift.gift);
 
     $(giftElement)
       .find('#descriptionEdit')
@@ -81,16 +81,16 @@ $(async () => {
           .attr('data-id', gift.giftId)
           .attr('data-type', 'gift')
           .val(gift.gift);
-        descriptionEditElement = $(giftElement).find('#giftText');
+        descriptionEditElement = $(giftElement).find('[data-id="giftText"]');
         editDescriptionModal.show();
       });
 
     $(giftElement)
-      .find('#giftIcon, #giftImage')
+      .find('[data-id="giftIcon"], [data-id="giftImage"]')
       .on('click', (e) => {
         uploadEndpoint = `gift-image?yearId=${searchParams.get('id')}&giftId=${gift.giftId}`;
-        imageElement = $(giftElement).find('#giftImage');
-        iconElement = $(giftElement).find('#giftIcon');
+        imageElement = $(giftElement).find('[data-id="giftImage"]');
+        iconElement = $(giftElement).find('[data-id="giftIcon"]');
 
         if (e.currentTarget.src === undefined) {
           $('#imagePopup').attr('src', '');
@@ -102,15 +102,15 @@ $(async () => {
     $(giftElement).find('#giftImageUpload').on('change', showCroppie);
 
     if (gift.imageUploaded !== undefined) {
-      lazyLoadImage(gift.giftId, $(giftElement).find('#giftImage')).then(
+      lazyLoadImage(gift.giftId, $(giftElement).find('[data-id="giftImage"]')).then(
         (image) => {
-          $(giftElement).find('#giftImage').attr('src', image.src);
-          $(giftElement).find('#giftIcon').attr('hidden', true);
-          $(giftElement).find('#giftImage').attr('hidden', false);
+          $(giftElement).find('[data-id="giftImage"]').attr('src', image.src);
+          $(giftElement).find('[data-id="giftIcon"]').attr('hidden', true);
+          $(giftElement).find('[data-id="giftImage"]').attr('hidden', false);
         }
       );
     } else {
-      $(giftElement).find('#giftIcon').removeClass('loading-image');
+      $(giftElement).find('[data-id="giftIcon"]').removeClass('loading-image');
     }
     $('tbody').append(giftElement);
   }

diff --git a/public/modules/santa.html b/public/modules/santa.html