mirror of
https://github.com/Starlio-app/StarlioX
synced 2024-11-22 08:46:22 +03:00
The gallery has been rewritten
This commit is contained in:
parent
94313bc552
commit
c9fcef4ab6
1 changed files with 102 additions and 104 deletions
|
|
@ -1,120 +1,118 @@
|
||||||
$.ajax({
|
$(document).ready(function() {
|
||||||
url: `https://api.nasa.gov/planetary/apod?api_key=1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et&start_date=${new Date().toLocaleString().slice(6, 10)}-${new Date().toLocaleString().slice(3, 5)}-01&end_date=${new Date().toLocaleString().slice(6,10)}-${new Date().toLocaleString().slice(3, 5)}-${new Date().toLocaleString().slice(0,2)}`,
|
let today = new Date();
|
||||||
type: "GET",
|
let date = today.setDate(today.getDate() - 31);
|
||||||
success: function(data){
|
date = new Date(date);
|
||||||
Wallpaper(data)
|
|
||||||
},
|
const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et";
|
||||||
error: function(){
|
|
||||||
let prev_date = Number(new Date().toLocaleString().slice(0,2))
|
$.ajax({
|
||||||
this.url = `https://api.nasa.gov/planetary/apod?api_key=1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et&start_date=${new Date().toLocaleString().slice(6, 10)}-${new Date().toLocaleString().slice(3, 5)}-01&end_date=${new Date().toLocaleString().slice(6,10)}-${new Date().toLocaleString().slice(3, 5)}-${prev_date-1}`,
|
url: "https://api.nasa.gov/planetary/apod",
|
||||||
$.ajax({
|
type: "GET",
|
||||||
url: this.url,
|
data: {
|
||||||
type: "GET",
|
api_key: apiKEY,
|
||||||
success: function(data){
|
start_date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
|
||||||
Wallpaper(data)
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const myModal = new bootstrap.Modal('#Wallpaper', {
|
const myModal = new bootstrap.Modal('#Wallpaper', {
|
||||||
keyboard: false
|
keyboard: false
|
||||||
})
|
});
|
||||||
myModal.show()
|
myModal.show();
|
||||||
|
|
||||||
|
function wallpaper(data) {
|
||||||
|
$(".preloader").hide();
|
||||||
|
data = data.reverse();
|
||||||
|
|
||||||
function Wallpaper(data) {
|
|
||||||
$(".preloader").fadeOut(0)
|
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
if (data[i].media_type === "image") {
|
if (data[i]['media_type'] === "image") {
|
||||||
$(".header-row").append(`
|
$(".header-row").append(`
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<a data-bs-toggle="modal" href="#WallpaperModal" role="button">
|
<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="${data[i].url}" alt="${data[i]['title']}" class="card-img-top" idi="${i + 1}">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
`)
|
`);
|
||||||
} else {
|
} else {
|
||||||
$(".header-row").append(`
|
$(".header-row").append(`
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<a data-bs-toggle="modal" href="#WallpaperModal" role="button">
|
<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}">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
`)
|
`);
|
||||||
}
|
}
|
||||||
let buttons = document.querySelector(".header-row")
|
|
||||||
buttons.addEventListener("click", function (event) {
|
|
||||||
if (event.target.tagName === "IMG") {
|
|
||||||
let id = event.target.getAttribute("idi")
|
|
||||||
let img = document.querySelector(".modal-body")
|
|
||||||
let title = document.querySelector(".w-modal-title")
|
|
||||||
|
|
||||||
let button = document.querySelector(".modal-footer")
|
|
||||||
button.innerHTML = `
|
|
||||||
<button type="button" class="btn btn-primary" id="setWallpaper">Set Wallpaper</button>
|
|
||||||
`
|
|
||||||
let setWallpaper = document.querySelector("#setWallpaper")
|
|
||||||
|
|
||||||
if(data[id-1].media_type === "image") {
|
|
||||||
img.innerHTML = `
|
|
||||||
<img src="${data[id - 1].url}" alt="${data[id - 1].title}" class="card-img">
|
|
||||||
<p><strong>Author:</strong> ${data[id - 1].copyright}</p>
|
|
||||||
<p><strong>Date of publication:</strong> ${data[id - 1].date}</p>
|
|
||||||
<p><strong>Explanation:</strong> ${data[id - 1].explanation}</p>
|
|
||||||
`.replace("undefined", "Unknown")
|
|
||||||
title.innerHTML = `
|
|
||||||
<h5 class="modal-title">${data[id - 1].title}</h5>
|
|
||||||
`
|
|
||||||
|
|
||||||
setWallpaper.addEventListener("click", function () {
|
|
||||||
$.ajax({
|
|
||||||
url: `http://localhost:8080/api/update/wallpaper`,
|
|
||||||
type: "POST",
|
|
||||||
data: {
|
|
||||||
url: data[id - 1].hdurl
|
|
||||||
},
|
|
||||||
success: function () {
|
|
||||||
$(".toast-body").text("The wallpaper has been installed")
|
|
||||||
let toastLiveExample = document.getElementById('liveToast')
|
|
||||||
let toast = new bootstrap.Toast(toastLiveExample)
|
|
||||||
toast.show()
|
|
||||||
},
|
|
||||||
error: function (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
img.innerHTML = `
|
|
||||||
<iframe width="460" height="315" src="${data[id - 1].url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
||||||
<p><strong>Author:</strong> ${data[id - 1].copyright}</p>
|
|
||||||
<p><strong>Date of publication:</strong> ${data[id - 1].date}</p>
|
|
||||||
<p><strong>Explanation:</strong> ${data[id - 1].explanation}</p>
|
|
||||||
`.replace("undefined", "Unknown")
|
|
||||||
title.innerHTML = `
|
|
||||||
<h5 class="modal-title">${data[id].title}</h5>
|
|
||||||
`
|
|
||||||
|
|
||||||
setWallpaper.addEventListener("click", function () {
|
|
||||||
$.ajax({
|
|
||||||
url: `http://localhost:8080/api/update/wallpaper`,
|
|
||||||
type: "POST",
|
|
||||||
data: {
|
|
||||||
url: `https://img.youtube.com/vi/${data[id - 1].url.slice(30,41)}/maxresdefault.jpg`
|
|
||||||
},
|
|
||||||
success: function () {
|
|
||||||
$(".toast-body").text("The wallpaper has been installed")
|
|
||||||
let toastLiveExample = document.getElementById('liveToast')
|
|
||||||
let toast = new bootstrap.Toast(toastLiveExample)
|
|
||||||
toast.show()
|
|
||||||
},
|
|
||||||
error: function (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
let button_modal = document.querySelector(".header-row");
|
||||||
|
button_modal.addEventListener("click", function (event) {
|
||||||
|
let id = event.target.getAttribute("idi") - 1;
|
||||||
|
let img = document.querySelector(".modal-body");
|
||||||
|
let title = document.querySelector(".w-modal-title");
|
||||||
|
|
||||||
|
let button = document.querySelector(".modal-footer");
|
||||||
|
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'];
|
||||||
|
|
||||||
|
if (data[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>
|
||||||
|
`;
|
||||||
|
|
||||||
|
title.innerHTML = `<h5 class="modal-title">${data[id]['title']}</h5>`;
|
||||||
|
setWallpaper.addEventListener("click", function () {
|
||||||
|
wallpaperUpdate(data[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>
|
||||||
|
`;
|
||||||
|
|
||||||
|
title.innerHTML = `<h5 class="modal-title">${data[id]['title']}</h5>`;
|
||||||
|
setWallpaper.addEventListener("click", function () {
|
||||||
|
wallpaperUpdate(`https://img.youtube.com/vi/${data[id]['url'].slice(30,41)}/maxresdefault.jpg`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function wallpaperUpdate(url) {
|
||||||
|
$.ajax({
|
||||||
|
url: "http://localhost:8080/api/update/wallpaper",
|
||||||
|
type: "POST",
|
||||||
|
data: {
|
||||||
|
url: url,
|
||||||
|
},
|
||||||
|
success: function (data) {
|
||||||
|
$(".toast-body").text(data.message);
|
||||||
|
let toastLiveExample = document.getElementById('liveToast');
|
||||||
|
let toast = new bootstrap.Toast(toastLiveExample);
|
||||||
|
toast.show();
|
||||||
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
Loading…
Add table
Reference in a new issue