Refactoring of the code and add function for favorites

web/src/gallery.html

@@ -26,6 +26,9 @@
                 <li class="nav-item">
                     <a class="nav-link active" aria-current="page" href="/">Gallery</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/favorite">Favorite</a>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="/settings">Settings</a>
                 </li>
@@ -70,7 +73,26 @@
 <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.0/lottie.min.js"></script>
 <script src="/static/scripts/gallery.js" type="application/javascript"></script>
 <script src="/static/scripts/analytics.js" type="module" id="analytics"></script>
+<script type="application/javascript">
+    startDate.setDate(startDate.getUTCDate() - 17);
+    $(document).ready(function() {
+        $.ajax({
+            url: "https://api.nasa.gov/planetary/apod",
+            type: "GET",
+            data: {
+                api_key: apiKEY,
+                start_date: `${startDate.getUTCFullYear()}-${startDate.getUTCMonth() + 1}-${startDate.getUTCDate()}`,
+                end_date: `${endDate.getUTCFullYear()}-${endDate.getUTCMonth() + 1}-${endDate.getUTCDate()}`,
+            },
+            success: function(data) {
+                data.reverse();
+                wallpaperLoad(data);
+            },
+        });
+    });
+</script>
 </body>
 </html>

web/static/scripts/gallery.js

@@ -1,30 +1,13 @@
-let today = new Date();
+const startDate = new Date();
-let endDate = new Date();
+const endDate = new Date();
 
 const ids = [];
 let id = 0;
 
 const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et";
 
-today.setDate(today.getDate() - 17);
+function wallpaperLoad(data) {
-$(document).ready(function() {
-    $.ajax({
-        url: "https://api.nasa.gov/planetary/apod",
-        type: "GET",
-        data: {
-            api_key: apiKEY,
-            start_date: `${today.getUTCFullYear()}-${today.getUTCMonth() + 1}-${today.getUTCDate()}`,
-            end_date: `${endDate.getUTCFullYear()}-${endDate.getUTCMonth() + 1}-${endDate.getUTCDate()}`,
-        },
-        success: function(data) {
-            wallpaper(data);
-        },
-    });
-});
-
-function wallpaper(data) {
     $(".preloader").hide();
-    data = data.reverse();
 
     for (let i = 0; i < data.length; i++, id++) {
         ids.push(data[i]);
@@ -71,7 +54,7 @@ function wallpaper(data) {
         $(this).removeClass("shimmer");
     });
 
-    let button_modal = document.querySelector(".header-row");
+    const button_modal = document.querySelector(".header-row");
     button_modal.addEventListener("click", function (event) {
         if (event.target === button_modal) {
             return;
@@ -84,18 +67,46 @@ function wallpaper(data) {
         let button = document.querySelector(".modal-footer");
 
         if($(`img#${id}.card-img-top`).attr("src") !== "http://localhost:3000/static/image/placeholder.png") {
-            button.innerHTML = `<button type="button" class="btn btn-primary" id="setWallpaper">Set Wallpaper</button>`;
+            button.innerHTML = `<lottie-player id="favorite" 
+                                    src="https://assets2.lottiefiles.com/private_files/lf30_rcvcAS.json" 
+                                    background="transparent" 
+                                    speed="1">
+                                </lottie-player>
+                                <button type="button" class="btn btn-primary" id="setWallpaper">Set Wallpaper</button>
+            `;
         } else {
-            button.innerHTML = `<button type="button" 
+            button.innerHTML = `<lottie-player id="favorite" 
+                                    src="https://assets2.lottiefiles.com/private_files/lf30_rcvcAS.json" 
+                                    background="transparent" 
+                                    speed="1">
+                                </lottie-player>
+                                <button type="button" 
                                     class="btn" 
                                     id="setWallpaper" 
                                     disabled 
                                     style="background-color: grey; color: white;">
                                     Set Wallpaper
-                                </button>`;
+                                </button>
+            `;
         }
 
-        let setWallpaper = document.querySelector("#setWallpaper");
+        const setWallpaper = document.querySelector("#setWallpaper");
+        const favorite = document.querySelector("#favorite");
+
+        $.ajax({
+            url: "http://localhost:3000/api/get/favorites",
+            type: "GET",
+            data: {
+                title: ids[id]['title'],
+            },
+            success: function (data) {
+                if (data !== "No favorites found") {
+                    favorite.setDirection(1);
+                    favorite.play();
+                }
+            },
+        })
+
         ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright'];
 
         let explanation = ids[id]['explanation'].length > 200 ? ids[id]['explanation'].slice(0, 200) + "..." : ids[id]['explanation'];
@@ -106,6 +117,7 @@ function wallpaper(data) {
                 <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
                 <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
                 <p><strong>Explanation:</strong> ${explanation}</p>
+                
                 <button type="button" class="show-more btn btn-primary" id="show-more">Show more</button>
             `;
 
@@ -133,6 +145,45 @@ function wallpaper(data) {
             });
         }
 
+        favorite.addEventListener("click", function() {
+            $.ajax({
+                url: "http://localhost:3000/api/get/favorites",
+                type: "GET",
+                data: {
+                    title: ids[id]['title'],
+                },
+                success: function(data) {
+                    if (data === "No favorites found") {
+                        if (ids[id]['media_type'] === "image") {
+                            favoriteAdd(ids[id]['title'],
+                                ids[id]['explanation'],
+                                ids[id]['copyright'],
+                                ids[id]['date'],
+                                ids[id]['url'],
+                                ids[id]['hdurl'],
+                                ids[id]['media_type'],
+                            );
+                        } else {
+                            favoriteAdd(ids[id]['title'],
+                                ids[id]['explanation'],
+                                ids[id]['copyright'],
+                                ids[id]['date'],
+                                `https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/0.jpg`,
+                                `https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg`,
+                                ids[id]['media_type'],
+                            );
+                        }
+
+                        favorite.setDirection(1);
+                        favorite.play()
+                    } else {
+                        favoriteRemove(ids[id]['title']);
+                        favorite.setDirection(-1);
+                        favorite.play();
+                    }
+                }
+            });
+        });
 
         let showMore = document.querySelector("#show-more");
         showMore.addEventListener("click", function () {
@@ -152,7 +203,7 @@ function wallpaper(data) {
             $(".preloader").show();
             $(window).off("scroll");
 
-            today.setDate(today.getDate() - 1);
+            startDate.setDate(startDate.getDate() - 1);
 
             endDate.setDate(endDate.getDate() - 15);
             endDate.setMonth(endDate.getMonth() - 1);
@@ -162,10 +213,10 @@ function wallpaper(data) {
                 data: {
                     api_key: apiKEY,
                     start_date: `${endDate.getUTCFullYear()}-${endDate.getUTCMonth() + 1}-${endDate.getUTCDate()}`,
-                    end_date: `${today.getUTCFullYear()}-${today.getUTCMonth() + 1}-${today.getUTCDate()}`,
+                    end_date: `${startDate.getUTCFullYear()}-${startDate.getUTCMonth() + 1}-${startDate.getUTCDate()}`,
                 },
                 success: function (data) {
-                    wallpaper(data);
+                    wallpaperLoad(data);
                     $(window).on("scroll");
                 },
             });
@@ -173,6 +224,10 @@ function wallpaper(data) {
     });
 }
 
+/**
+ * @param url {String} Url of the image to be set as wallpaper
+ */
+
 function wallpaperUpdate(url) {
     $.ajax({
         url: "http://localhost:3000/api/update/wallpaper",
@@ -188,3 +243,54 @@ function wallpaperUpdate(url) {
         },
     });
 }
+
+/**
+ * @param title {String} Title of the image
+ * @param explanation {String} Explanation of the image
+ * @param copyright {String} Author of the image
+ * @param date {String} Date of publication
+ * @param url {String} Url of the image
+ * @param hdurl {String} Url of the image in high definition
+ * @param media_type {String} Type of media
+ */
+
+function favoriteAdd(title, explanation, copyright, date, url, hdurl, media_type) {
+    $.ajax({
+        url: "http://localhost:3000/api/add/favorite",
+        type: "POST",
+        data: {
+            title: title,
+            explanation: explanation,
+            date: date,
+            url: url,
+            hdurl: hdurl,
+            media_type: media_type,
+        },
+        success: function (data) {
+            $(".toast-body").text(data.message);
+            let toastLiveExample = document.getElementById('liveToast');
+            let toast = new bootstrap.Toast(toastLiveExample);
+            toast.show();
+        },
+    });
+}
+
+/**
+ * @param title {String} Title of the image
+ */
+
+function favoriteRemove(title) {
+    $.ajax({
+        url: "http://localhost:3000/api/del/favorite",
+        type: "POST",
+        data: {
+            title: title,
+        },
+        success: function (data) {
+            $(".toast-body").text(data.message);
+            let toastLiveExample = document.getElementById('liveToast');
+            let toast = new bootstrap.Toast(toastLiveExample);
+            toast.show();
+        },
+    });
+}