mirror of
https://github.com/Starlio-app/StarlioX
synced 2024-11-05 06:03:57 +03:00
Refactoring of the code and add function for favorites
This commit is contained in:
parent
ae354ff5d1
commit
20a1bdb2b3
2 changed files with 161 additions and 33 deletions
|
|
@ -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>
|
||||
|
|
@ -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 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();
|
||||
},
|
||||
});
|
||||
}
|
||||
Loading…
Reference in a new issue