From cdca6b9619d646c92f05b1b7c849ba5f491d9453 Mon Sep 17 00:00:00 2001
From: Redume <Danilivasenko09@gmail.com>
Date: Tue, 4 Oct 2022 11:50:37 +0300
Subject: [PATCH] An endless loading of images has been made

---
 web/static/scripts/gallery.js | 118 ++++++++++++++++++++++------------
 1 file changed, 78 insertions(+), 40 deletions(-)

diff --git a/web/static/scripts/gallery.js b/web/static/scripts/gallery.js
index ab2406d..146f7f0 100644
--- a/web/static/scripts/gallery.js
+++ b/web/static/scripts/gallery.js
@@ -1,33 +1,39 @@
+let prev_date = Number(new Date().toLocaleString().slice(0,2))-1;
+let today = new Date();
+let endDate = new Date();
+
+let ids = [];
+let id = 0;
+
+const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et";
+
+today.setDate(today.getDate() - 17);
 $(document).ready(function() {
-    let today = new Date();
-    let date = today.setDate(today.getDate() - 31);
-    date = new Date(date);
-
-    const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et";
-
     $.ajax({
         url: "https://api.nasa.gov/planetary/apod",
         type: "GET",
         data: {
             api_key: apiKEY,
-            start_date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
+            start_date: `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`,
             end_date: `${new Date().toLocaleString().slice(6, 10)}-${new Date().toLocaleString().slice(3, 5)}-${new Date().toLocaleString().slice(0, 2)}`,
         },
         success: function(data) {
             wallpaper(data);
         },
         error: function() {
-            let prev_date = Number(new Date().toLocaleString().slice(0,2))-1;
             $.ajax({
-               url: "https://api.nasa.gov/planetary/apod",
-               data: {
-                   api_key: apiKEY,
-                   start_date: `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`,
-                   end_date: `${new Date().toLocaleString().slice(6,10)}-${new Date().toLocaleString().slice(3, 5)}-${prev_date}`,
-               },
-               success: function (data) {
-                   wallpaper(data);
-               }
+                url: "https://api.nasa.gov/planetary/apod",
+                data: {
+                    api_key: apiKEY,
+                    start_date: `${today.getFullYear()}-${today.getMonth()+1}-${today.getDate()}`,
+                    end_date: `${new Date().toLocaleString().slice(6,10)}-${new Date().toLocaleString().slice(3, 5)}-${prev_date}`,
+                },
+                success: function (data) {
+                    wallpaper(data);
+                },
+                error: function (data) {
+                    console.error(data);
+                },
             });
         },
     });
@@ -42,28 +48,35 @@ function wallpaper(data) {
     $(".preloader").hide();
     data = data.reverse();
 
-    for (let i = 0; i < data.length; i++) {
-        if (data[i]['media_type'] === "image") {
+    for (let i = 0; i < data.length; i++, id++) {
+        ids.push(data[i]);
+
+        if (ids.filter((item) => item.url === data[i].url).length > 1) {
+            continue;
+        }
+
+        if (ids[id]['media_type'] === "image") {
             $(".header-row").append(`
                 <div class="card">
                     <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
-                        <img src="${data[i].url}" alt="${data[i]['title']}" class="card-img-top" idi="${i + 1}">
+                        <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top" idi="${id}">
                     </a>
                 </div>
         `);
         } else {
             $(".header-row").append(`
-                    <div class="card">
-                        <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
-                            <img src="https://img.youtube.com/vi/${data[i]['url'].slice(30,41)}/maxresdefault.jpg" alt="${data[i]['title']}" class="card-img-top" idi="${i+1}">
-                        </a>
-                    </div>
+                <div class="card">
+                    <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
+                        <img src="https://img.youtube.com/vi/${ids[id]['url'].slice(30,41)}/maxresdefault.jpg" alt="${ids[id]['title']}" class="card-img-top" idi="${id}">
+                    </a>
+                </div>
             `);
         }
     }
+
     let button_modal = document.querySelector(".header-row");
     button_modal.addEventListener("click", function (event) {
-        let id = event.target.getAttribute("idi") - 1;
+        let id = event.target.getAttribute("idi");
         let img = document.querySelector(".modal-body");
         let title = document.querySelector(".w-modal-title");
 
@@ -71,31 +84,56 @@ function wallpaper(data) {
         button.innerHTML = `<button type="button" class="btn btn-primary" id="setWallpaper">Set Wallpaper</button>`;
         let setWallpaper = document.querySelector("#setWallpaper");
 
-        data[id]['copyright'] = data[id]['copyright'] === undefined ? "NASA" : data[id]['copyright'];
+        ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright'];
 
-        if (data[id]['media_type'] === "image") {
+        if (ids[id]['media_type'] === "image") {
             img.innerHTML = `
-                <img src="${data[id].url}" alt="${data[id]['title']}" class="card-img">
-                <p><strong>Author:</strong> ${data[id]['copyright']}</p>
-                <p><strong>Date of publication:</strong> ${data[id]['date']}</p>
-                <p><strong>Explanation:</strong> ${data[id]['explanation']}</p>
+                <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img">
+                <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
+                <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
+                <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
             `;
 
-            title.innerHTML = `<h5 class="modal-title">${data[id]['title']}</h5>`;
+            title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
             setWallpaper.addEventListener("click", function () {
-                wallpaperUpdate(data[id]['hdurl']);
+                wallpaperUpdate(ids[id]['hdurl']);
             });
         } else {
             img.innerHTML = `
-                <iframe width="460" height="315" src="${data[id]['url']}" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
-                <p><strong>Author:</strong> ${data[id]['copyright']}</p>
-                <p><strong>Date of publication:</strong> ${data[id]['date']}</p>
-                <p><strong>Explanation:</strong> ${data[id]['explanation']}</p>
+                <iframe width="460" height="315" src="${ids[id]['url']}" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+                <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
+                <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
+                <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
             `;
 
-            title.innerHTML = `<h5 class="modal-title">${data[id]['title']}</h5>`;
+            title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
             setWallpaper.addEventListener("click", function () {
-                wallpaperUpdate(`https://img.youtube.com/vi/${data[id]['url'].slice(30,41)}/maxresdefault.jpg`);
+                wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30,41)}/maxresdefault.jpg`);
+            });
+        }
+    });
+
+    $(window).scroll(function () {
+        if (($(window).scrollTop() >  $(document).height() - $(window).height() - 100)) {
+            $(".preloader").show();
+            $(window).off("scroll");
+
+            today.setDate(today.getDate() - 1);
+
+            endDate.setDate(endDate.getDate() - 15);
+            endDate.setMonth(endDate.getMonth() - 1);
+
+            $.ajax({
+                url: "https://api.nasa.gov/planetary/apod",
+                data: {
+                    api_key: apiKEY,
+                    start_date: `${endDate.getFullYear()}-${endDate.getMonth() + 1}-${endDate.getDate()}`,
+                    end_date: `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`,
+                },
+                success: function (data) {
+                    wallpaper(data);
+                    $(window).on("scroll");
+                },
             });
         }
     });