Refactoring of the code and add function for favorites

This commit is contained in:
Данил 2022-12-15 21:07:16 +03:00
parent ae354ff5d1
commit 20a1bdb2b3
2 changed files with 161 additions and 33 deletions

View file

@ -26,6 +26,9 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Gallery</a> <a class="nav-link active" aria-current="page" href="/">Gallery</a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="/favorite">Favorite</a>
</li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/settings">Settings</a> <a class="nav-link" href="/settings">Settings</a>
</li> </li>
@ -70,7 +73,26 @@
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <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://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://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/gallery.js" type="application/javascript"></script>
<script src="/static/scripts/analytics.js" type="module" id="analytics"></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> </body>
</html> </html>

View file

@ -1,30 +1,13 @@
let today = new Date(); const startDate = new Date();
let endDate = new Date(); const endDate = new Date();
const ids = []; const ids = [];
let id = 0; let id = 0;
const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et"; 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(); $(".preloader").hide();
data = data.reverse();
for (let i = 0; i < data.length; i++, id++) { for (let i = 0; i < data.length; i++, id++) {
ids.push(data[i]); ids.push(data[i]);
@ -71,7 +54,7 @@ function wallpaper(data) {
$(this).removeClass("shimmer"); $(this).removeClass("shimmer");
}); });
let button_modal = document.querySelector(".header-row"); const button_modal = document.querySelector(".header-row");
button_modal.addEventListener("click", function (event) { button_modal.addEventListener("click", function (event) {
if (event.target === button_modal) { if (event.target === button_modal) {
return; return;
@ -84,18 +67,46 @@ function wallpaper(data) {
let button = document.querySelector(".modal-footer"); let button = document.querySelector(".modal-footer");
if($(`img#${id}.card-img-top`).attr("src") !== "http://localhost:3000/static/image/placeholder.png") { 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 { } else {
button.innerHTML = `<button type="button" button.innerHTML = `<lottie-player id="favorite"
class="btn" src="https://assets2.lottiefiles.com/private_files/lf30_rcvcAS.json"
id="setWallpaper" background="transparent"
disabled speed="1">
style="background-color: grey; color: white;"> </lottie-player>
Set Wallpaper <button type="button"
</button>`; class="btn"
id="setWallpaper"
disabled
style="background-color: grey; color: white;">
Set Wallpaper
</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']; 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']; 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>Author:</strong> ${ids[id]['copyright']}</p>
<p><strong>Date of publication:</strong> ${ids[id]['date']}</p> <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
<p><strong>Explanation:</strong> ${explanation}</p> <p><strong>Explanation:</strong> ${explanation}</p>
<button type="button" class="show-more btn btn-primary" id="show-more">Show more</button> <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"); let showMore = document.querySelector("#show-more");
showMore.addEventListener("click", function () { showMore.addEventListener("click", function () {
@ -152,7 +203,7 @@ function wallpaper(data) {
$(".preloader").show(); $(".preloader").show();
$(window).off("scroll"); $(window).off("scroll");
today.setDate(today.getDate() - 1); startDate.setDate(startDate.getDate() - 1);
endDate.setDate(endDate.getDate() - 15); endDate.setDate(endDate.getDate() - 15);
endDate.setMonth(endDate.getMonth() - 1); endDate.setMonth(endDate.getMonth() - 1);
@ -162,10 +213,10 @@ function wallpaper(data) {
data: { data: {
api_key: apiKEY, api_key: apiKEY,
start_date: `${endDate.getUTCFullYear()}-${endDate.getUTCMonth() + 1}-${endDate.getUTCDate()}`, 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) { success: function (data) {
wallpaper(data); wallpaperLoad(data);
$(window).on("scroll"); $(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) { function wallpaperUpdate(url) {
$.ajax({ $.ajax({
url: "http://localhost:3000/api/update/wallpaper", 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();
},
});
}