Starlio/Starlio-web
1
0
Fork 0
mirror of https://github.com/Starlio-app/Starlio-web.git synced 2024-11-22 00:36:20 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

The gallery has been rewritten

Browse source
This commit is contained in:
Данил 2022-10-02 12:20:26 +03:00
parent 94313bc552
commit c9fcef4ab6
1 changed files with 102 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
web/static/scripts/gallery.js
View file

@ -1,120 +1,118 @@
$(document).ready(function() {
let today = new Date();
let date = today.setDate(today.getDate() - 31);
date = new Date(date);
const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et";
$.ajax({ $.ajax({
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)}`, url: "https://api.nasa.gov/planetary/apod",
type: "GET", type: "GET",
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)}-${new Date().toLocaleString().slice(0, 2)}`,
},
success: function(data) { success: function(data) {
Wallpaper(data) wallpaper(data);
}, },
error: function() { error: function() {
let prev_date = Number(new Date().toLocaleString().slice(0,2)) let prev_date = Number(new Date().toLocaleString().slice(0,2))-1;
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}`,
$.ajax({ $.ajax({
url: this.url, url: "https://api.nasa.gov/planetary/apod",
type: "GET", 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) { success: function (data) {
Wallpaper(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) { let button_modal = document.querySelector(".header-row");
if (event.target.tagName === "IMG") { button_modal.addEventListener("click", function (event) {
let id = event.target.getAttribute("idi") let id = event.target.getAttribute("idi") - 1;
let img = document.querySelector(".modal-body") let img = document.querySelector(".modal-body");
let title = document.querySelector(".w-modal-title") let title = document.querySelector(".w-modal-title");
let button = document.querySelector(".modal-footer") let button = document.querySelector(".modal-footer");
button.innerHTML = ` button.innerHTML = `<button type="button" class="btn btn-primary" id="setWallpaper">Set Wallpaper</button>`;
<button type="button" class="btn btn-primary" id="setWallpaper">Set Wallpaper</button> let setWallpaper = document.querySelector("#setWallpaper");
`
let setWallpaper = document.querySelector("#setWallpaper")
if(data[id-1].media_type === "image") { data[id]['copyright'] = data[id]['copyright'] === undefined ? "NASA" : data[id]['copyright'];
if (data[id]['media_type'] === "image") {
img.innerHTML = ` img.innerHTML = `
<img src="${data[id - 1].url}" alt="${data[id - 1].title}" class="card-img"> <img src="${data[id].url}" alt="${data[id]['title']}" class="card-img">
<p><strong>Author:</strong> ${data[id - 1].copyright}</p> <p><strong>Author:</strong> ${data[id]['copyright']}</p>
<p><strong>Date of publication:</strong> ${data[id - 1].date}</p> <p><strong>Date of publication:</strong> ${data[id]['date']}</p>
<p><strong>Explanation:</strong> ${data[id - 1].explanation}</p> <p><strong>Explanation:</strong> ${data[id]['explanation']}</p>
`.replace("undefined", "Unknown") `;
title.innerHTML = `
<h5 class="modal-title">${data[id - 1].title}</h5>
`
title.innerHTML = `<h5 class="modal-title">${data[id]['title']}</h5>`;
setWallpaper.addEventListener("click", function () { setWallpaper.addEventListener("click", function () {
$.ajax({ wallpaperUpdate(data[id]['hdurl']);
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 { } else {
img.innerHTML = ` 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> <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 - 1].copyright}</p> <p><strong>Author:</strong> ${data[id]['copyright']}</p>
<p><strong>Date of publication:</strong> ${data[id - 1].date}</p> <p><strong>Date of publication:</strong> ${data[id]['date']}</p>
<p><strong>Explanation:</strong> ${data[id - 1].explanation}</p> <p><strong>Explanation:</strong> ${data[id]['explanation']}</p>
`.replace("undefined", "Unknown") `;
title.innerHTML = `
<h5 class="modal-title">${data[id].title}</h5>
`
title.innerHTML = `<h5 class="modal-title">${data[id]['title']}</h5>`;
setWallpaper.addEventListener("click", function () { setWallpaper.addEventListener("click", function () {
wallpaperUpdate(`https://img.youtube.com/vi/${data[id]['url'].slice(30,41)}/maxresdefault.jpg`);
});
}
});
}
function wallpaperUpdate(url) {
$.ajax({ $.ajax({
url: `http://localhost:8080/api/update/wallpaper`, url: "http://localhost:8080/api/update/wallpaper",
type: "POST", type: "POST",
data: { data: {
url: `https://img.youtube.com/vi/${data[id - 1].url.slice(30,41)}/maxresdefault.jpg` url: url,
}, },
success: function () { success: function (data) {
$(".toast-body").text("The wallpaper has been installed") $(".toast-body").text(data.message);
let toastLiveExample = document.getElementById('liveToast') let toastLiveExample = document.getElementById('liveToast');
let toast = new bootstrap.Toast(toastLiveExample) let toast = new bootstrap.Toast(toastLiveExample);
toast.show() toast.show();
}, },
error: function (err) { });
console.error(err);
}
})
})
}
}
})
}
} }