Project-Name-Here/hydrationhub
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented ui functions for managing products, uploading images and editiing users

Browse Source
This commit is contained in:
Leon
2025-03-09 23:09:49 +01:00
parent fa7f3004fa
commit bd43f03507
23 changed files with 888 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
static/js/lockscreenBgHandler.js
View File

@ -1,22 +1,26 @@
// Image Handler
const baseUrl = "https://api.unsplash.com/photos/random?client_id=[KEY]&orientation=landscape&topics=nature";
const apiKey = "tYOt7Jo94U7dunVcP5gt-kDKDMjWFOGQNsHuhLDLV8k"; // Take from config
const fullUrl = baseUrl.replace("[KEY]", apiKey);
const baseUrl = 'https://api.unsplash.com/photos/random?client_id=[KEY]&orientation=landscape&topics=nature';
const apiKey = 'tYOt7Jo94U7dunVcP5gt-kDKDMjWFOGQNsHuhLDLV8k'; // Take from config
const fullUrl = baseUrl.replace('[KEY]', apiKey);
const showModeImage = "/static/media/showModeLockscreen.jpg"
const showModeImage = '/static/media/showModeLockscreen.jpg';
let credits = document.getElementById("credits");
let credits = document.getElementById('credits');
let currentImageHandle;
document.body.addEventListener('click', () => {
window.location.href = '/user_select';
});
// Lock screen or show mode
let screenState = "lock";
let screenState = 'lock';
function handleImage() {
if(screenState === "lock") {
fetch("https://staging.thegreydiamond.de/projects/photoPortfolio/api/getRand.php?uuid=01919dec-b2cd-7adc-8ca2-a071d1169cbc&unsplash=true")
.then(response => response.json())
.then(data => {
if (screenState === 'lock') {
fetch('https://staging.thegreydiamond.de/projects/photoPortfolio/api/getRand.php?uuid=01919dec-b2cd-7adc-8ca2-a071d1169cbc&unsplash=true&orientation=landscape')
.then((response) => response.json())
.then((data) => {
// data = {
// urls: {
// regular: "https://imageproxy.thegreydiamond.de/ra5iqxlyve6HpjNvC1tzG50a14oIOgiWP95CxIvbBC8/sm:1/kcr:1/aHR0cHM6Ly9zdGFn/aW5nLnRoZWdyZXlk/aWFtb25kLmRlL3By/b2plY3RzL3Bob3Rv/UG9ydGZvbGlvL2Rl/bW9IaVJlcy9QMTE5/MDgzMC1zY2hpbGQu/anBn.webp"
@ -28,29 +32,29 @@ function handleImage() {
// }
// }
// }
if(!currentImageHandle) {
if (!currentImageHandle) {
// Create a page filling div which contains the image
currentImageHandle = document.createElement("div");
currentImageHandle.style.position = "absolute";
currentImageHandle.style.top = "0";
currentImageHandle.style.left = "0";
currentImageHandle.style.width = "100%";
currentImageHandle.style.height = "100%";
currentImageHandle = document.createElement('div');
currentImageHandle.style.position = 'absolute';
currentImageHandle.style.top = '0';
currentImageHandle.style.left = '0';
currentImageHandle.style.width = '100%';
currentImageHandle.style.height = '100%';
currentImageHandle.style.backgroundImage = `url(${data.urls.regular})`;
currentImageHandle.style.backgroundSize = "cover";
currentImageHandle.style.backgroundSize = 'cover';
currentImageHandle.style.opacity = 1;
} else {
// Create a new div behind the current one and delete the old one when the new one is loaded
let newImageHandle = document.createElement("div");
newImageHandle.style.position = "absolute";
newImageHandle.style.top = "0";
newImageHandle.style.left = "0";
newImageHandle.style.width = "100%";
newImageHandle.style.height = "100%";
let newImageHandle = document.createElement('div');
newImageHandle.style.position = 'absolute';
newImageHandle.style.top = '0';
newImageHandle.style.left = '0';
newImageHandle.style.width = '100%';
newImageHandle.style.height = '100%';
newImageHandle.style.backgroundImage = `url(${data.urls.regular})`;
newImageHandle.style.backgroundSize = "cover";
newImageHandle.style.backgroundSize = 'cover';
newImageHandle.style.opacity = 1;
newImageHandle.style.transition = "1s";
newImageHandle.style.transition = '1s';
newImageHandle.style.zIndex = 19999;
document.body.appendChild(newImageHandle);
@ -61,33 +65,31 @@ function handleImage() {
currentImageHandle = newImageHandle;
}, 1000);
// Set the credits
credits.innerHTML = `Photo by <a href="${data.user.links.html}" target="_blank">${data.user.name}</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>`;
credits.style.zIndex = 300000;
}
})
.catch(error => {
console.error("Error fetching image: ", error);
.catch((error) => {
console.error('Error fetching image: ', error);
});
} else {
if(currentImageHandle) {
if (currentImageHandle) {
// Check if the image is already loaded
if(currentImageHandle.style.backgroundImage === `url("${showModeImage}")`) {
if (currentImageHandle.style.backgroundImage === `url("${showModeImage}")`) {
return;
}
// Create a new div behind the current one and delete the old one when the new one is loaded
let newImageHandle = document.createElement("div");
newImageHandle.style.position = "absolute";
newImageHandle.style.top = "0";
newImageHandle.style.left = "0";
newImageHandle.style.width = "100%";
newImageHandle.style.height = "100%";
let newImageHandle = document.createElement('div');
newImageHandle.style.position = 'absolute';
newImageHandle.style.top = '0';
newImageHandle.style.left = '0';
newImageHandle.style.width = '100%';
newImageHandle.style.height = '100%';
newImageHandle.style.backgroundImage = `url(${showModeImage})`;
newImageHandle.style.backgroundSize = "cover";
newImageHandle.style.backgroundSize = 'cover';
newImageHandle.style.opacity = 1;
newImageHandle.style.transition = "1s";
newImageHandle.style.transition = '1s';
document.body.appendChild(newImageHandle);
setTimeout(() => {
@ -107,37 +109,22 @@ function handleTimeAndDate() {
month += 1;
let year = time.getFullYear();
let timeHandle = document.getElementById("time");
let dateHandle = document.getElementById("date");
let timeHandle = document.getElementById('time');
let dateHandle = document.getElementById('date');
timeHandle.innerHTML = `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}:${time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds()}`;
timeHandle.innerHTML = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()}`;
// Datum in format Montag, 22.12.2024
dateHandle.innerHTML = `${getDay(time.getDay())}, ${day < 10 ? "0" + day : day}.${month < 10 ? "0" + month : month}.${year}`;
dateHandle.innerHTML = `${getDay(time.getDay())}, ${day < 10 ? '0' + day : day}.${month < 10 ? '0' + month : month}.${year}`;
}
function getDay(day) {
switch(day) {
case 0:
return "Sonntag";
case 1:
return "Montag";
case 2:
return "Dienstag";
case 3:
return "Mittwoch";
case 4:
return "Donnerstag";
case 5:
return "Freitag";
case 6:
return "Samstag";
}
return ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'][day];
}
// Set the image handler to run every 10 minutes
setInterval(handleImage, 60 * 1000 * 10);
handleImage();
handleImage()
handleImage();
// Set the time and date handler to run every minute
setInterval(handleTimeAndDate, 500);