diff --git a/web/src/gallery.html b/web/src/gallery.html index f6bad11..28ecf68 100644 --- a/web/src/gallery.html +++ b/web/src/gallery.html @@ -26,6 +26,9 @@
  • Gallery
    • +
  • + Favorite +
  • Settings
    • @@ -70,7 +73,26 @@ + + \ No newline at end of file diff --git a/web/static/scripts/gallery.js b/web/static/scripts/gallery.js index 826789e..c2d809e 100644 --- a/web/static/scripts/gallery.js +++ b/web/static/scripts/gallery.js @@ -1,30 +1,13 @@ -let today = new Date(); -let endDate = new Date(); +const startDate = new Date(); +const endDate = new Date(); const ids = []; let id = 0; const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et"; -today.setDate(today.getDate() - 17); -$(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) { +function wallpaperLoad(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.innerHTML = ` + + + `; } else { - button.innerHTML = ``; + button.innerHTML = ` + + + `; } - 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) {

    Author: ${ids[id]['copyright']}

    Date of publication: ${ids[id]['date']}

    Explanation: ${explanation}

    + `; @@ -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", @@ -187,4 +242,55 @@ function wallpaperUpdate(url) { toast.show(); }, }); +} + +/** + * @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(); + }, + }); } \ No newline at end of file