wallos/scripts/settings.js
2024-01-23 22:46:26 +01:00

608 lines
20 KiB
JavaScript

function toggleAvatarSelect() {
var avatarSelect = document.getElementById("avatarSelect");
if (avatarSelect.classList.contains("is-open")) {
avatarSelect.classList.remove("is-open");
} else {
avatarSelect.classList.add("is-open");
}
}
function closeAvatarSelect() {
var avatarSelect = document.getElementById("avatarSelect");
avatarSelect.classList.remove("is-open");
}
function changeAvatar(number) {
document.getElementById("avatarImg").src = "images/avatars/" + number + ".svg";
document.getElementById("avatarUser").value = number;
closeAvatarSelect();
}
function addMemberButton(memberId) {
document.getElementById("addMember").disabled = true;
const url = 'endpoints/household/household.php?action=add';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(translate('network_response_error'));
showErrorMessage(translate('failed_add_member'));
}
return response.json();
})
.then(responseData => {
if(responseData.success) {
const newMemberId = responseData.householdId;;
let container = document.getElementById("householdMembers");
let div = document.createElement("div");
div.className = "form-group-inline";
div.dataset.memberid = newMemberId;
let input = document.createElement("input");
input.type = "text";
input.placeholder = translate('member');
input.name = "member";
input.value = translate('member');
let editLink = document.createElement("button");
editLink.className = "image-button medium"
editLink.name = "save";
editLink.onclick = function() {
editMember(newMemberId);
};
let editImage = document.createElement("img");
editImage.src = "images/siteicons/save.png";
editImage.title = translate('save_member');
editLink.appendChild(editImage);
let deleteLink = document.createElement("button");
deleteLink.className = "image-button medium"
deleteLink.name = "delete";
deleteLink.onclick = function() {
removeMember(newMemberId);
};
let deleteImage = document.createElement("img");
deleteImage.src = "images/siteicons/delete.png";
deleteImage.title = translate('delete_member');
deleteLink.appendChild(deleteImage);
div.appendChild(input);
div.appendChild(editLink);
div.appendChild(deleteLink);
container.appendChild(div);
} else {
showErrorMessage(responseData.errorMessage);
}
document.getElementById("addMember").disabled = false;
})
.catch(error => {
showErrorMessage(translate('failed_add_member'));
document.getElementById("addMember").disabled = false;
});
}
function removeMember(memberId) {
let url = `endpoints/household/household.php?action=delete&memberId=${memberId}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(translate('network_response_error'));
}
return response.json();
})
.then(responseData => {
if (responseData.success) {
let divToRemove = document.querySelector(`[data-memberid="${memberId}"]`);
if (divToRemove) {
divToRemove.parentNode.removeChild(divToRemove);
}
showSuccessMessage(responseData.message);
} else {
showErrorMessage(responseData.errorMessage || translate('failed_remove_member'));
}
})
.catch(error => {
showErrorMessage(translate('failed_remove_member'));
});
}
function editMember(memberId) {
var saveButton = document.querySelector(`div[data-memberid="${memberId}"] button[name="save"]`);
var inputElement = document.querySelector(`div[data-memberid="${memberId}"] input[name="member"]`);
saveButton.classList.add("disabled");
saveButton.disabled = true;
if (inputElement) {
var memberName = encodeURIComponent(inputElement.value);
var url = `endpoints/household/household.php?action=edit&memberId=${memberId}&name=${memberName}`;
fetch(url)
.then(response => {
saveButton.classList.remove("disabled");
if (!response.ok) {
showErrorMessage(translate('failed_save_member'));
}
return response.json();
})
.then(responseData => {
if (responseData.success) {
showSuccessMessage(responseData.message);
} else {
showErrorMessage(responseData.errorMessage || translate('failed_save_member'));
}
})
.catch(error => {
showErrorMessage(translate('failed_save_member'));
});
}
}
function addCategoryButton(categoryId) {
document.getElementById("addCategory").disabled = true;
const url = 'endpoints/categories/category.php?action=add';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(translate('network_response_error'));
showErrorMessage(translate('failed_add_category'));
}
return response.json();
})
.then(responseData => {
if(responseData.success) {
const newCategoryId = responseData.categoryId;;
let container = document.getElementById("categories");
let div = document.createElement("div");
div.className = "form-group-inline";
div.dataset.categoryid = newCategoryId;
let input = document.createElement("input");
input.type = "text";
input.placeholder = translate('category');
input.name = "category";
input.value = translate('category');
let editLink = document.createElement("button");
editLink.className = "image-button medium"
editLink.name = "save";
editLink.onclick = function() {
editCategory(newCategoryId);
};
let editImage = document.createElement("img");
editImage.src = "images/siteicons/save.png";
editImage.title = translate('save_category');
editLink.appendChild(editImage);
let deleteLink = document.createElement("button");
deleteLink.className = "image-button medium"
deleteLink.name = "delete";
deleteLink.onclick = function() {
removeCategory(newCategoryId);
};
let deleteImage = document.createElement("img");
deleteImage.src = "images/siteicons/delete.png";
deleteImage.title = translate('delete_category');
deleteLink.appendChild(deleteImage);
div.appendChild(input);
div.appendChild(editLink);
div.appendChild(deleteLink);
container.appendChild(div);
} else {
showErrorMessage(responseData.errorMessage);
}
document.getElementById("addCategory").disabled = false;
})
.catch(error => {
showErrorMessage(translate('failed_add_category'));
document.getElementById("addCategory").disabled = false;
});
}
function removeCategory(categoryId) {
let url = `endpoints/categories/category.php?action=delete&categoryId=${categoryId}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(translate('network_response_error'));
}
return response.json();
})
.then(responseData => {
if (responseData.success) {
let divToRemove = document.querySelector(`[data-categoryid="${categoryId}"]`);
if (divToRemove) {
divToRemove.parentNode.removeChild(divToRemove);
}
showSuccessMessage(responseData.message);
} else {
showErrorMessage(responseData.errorMessage || translate('failed_remove_category'));
}
})
.catch(error => {
showErrorMessage(translate('failed_remove_category'));
});
}
function editCategory(categoryId) {
var saveButton = document.querySelector(`div[data-categoryid="${categoryId}"] button[name="save"]`);
var inputElement = document.querySelector(`div[data-categoryid="${categoryId}"] input[name="category"]`);
saveButton.classList.add("disabled");
saveButton.disabled = true;
if (inputElement) {
var categoryName = encodeURIComponent(inputElement.value);
var url = `endpoints/categories/category.php?action=edit&categoryId=${categoryId}&name=${categoryName}`;
fetch(url)
.then(response => {
saveButton.classList.remove("disabled");
if (!response.ok) {
showErrorMessage(translate('failed_save_category'));
}
return response.json();
})
.then(responseData => {
if (responseData.success) {
showSuccessMessage(responseData.message);
} else {
showErrorMessage(responseData.errorMessage || translate('failed_save_category'));
}
})
.catch(error => {
showErrorMessage(translate('failed_save_category'));
});
}
}
function addCurrencyButton(currencyId) {
document.getElementById("addCurrency").disabled = true;
const url = 'endpoints/currency/currency.php?action=add';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(translate('network_response_error'));
showErrorMessage(response.text());
}
return response.text();
})
.then(responseText => {
if(responseText !== "Error") {
const newCurrencyId = responseText;
let container = document.getElementById("currencies");
let div = document.createElement("div");
div.className = "form-group-inline";
div.dataset.currencyid = newCurrencyId;
let inputSymbol = document.createElement("input");
inputSymbol.type = "text";
inputSymbol.placeholder = "$";
inputSymbol.name = "symbol";
inputSymbol.value = "$";
inputSymbol.classList.add("short");
let inputName = document.createElement("input");
inputName.type = "text";
inputName.placeholder = translate('currency');
inputName.name = "currency";
inputName.value = translate('currency');
let inputCode = document.createElement("input");
inputCode.type = "text";
inputCode.placeholder = translate('currency_code');
inputCode.name = "code";
inputCode.value = "CODE";
let editLink = document.createElement("button");
editLink.className = "image-button medium"
editLink.name = "save";
editLink.onclick = function() {
editCurrency(newCurrencyId);
};
let editImage = document.createElement("img");
editImage.src = "images/siteicons/save.png";
editImage.title = translate('save_currency');
editLink.appendChild(editImage);
let deleteLink = document.createElement("button");
deleteLink.className = "image-button medium"
deleteLink.name = "delete";
deleteLink.onclick = function() {
removeCurrency(newCurrencyId);
};
let deleteImage = document.createElement("img");
deleteImage.src = "images/siteicons/delete.png";
deleteImage.title = translate('delete_currency');
deleteLink.appendChild(deleteImage);
div.appendChild(inputSymbol);
div.appendChild(inputName);
div.appendChild(inputCode);
div.appendChild(editLink);
div.appendChild(deleteLink);
container.appendChild(div);
} else {
// TODO: Show error
}
document.getElementById("addCurrency").disabled = false;
})
.catch(error => {
// TODO: Show error
document.getElementById("addCurrency").disabled = false;
});
}
function removeCurrency(currencyId) {
let url = `endpoints/currency/currency.php?action=delete&currencyId=${currencyId}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(translate('network_response_error'));
}
return response.json();
})
.then(data => {
if (data.success) {
showSuccessMessage(data.message);
let divToRemove = document.querySelector(`[data-currencyid="${currencyId}"]`);
if (divToRemove) {
divToRemove.parentNode.removeChild(divToRemove);
}
} else {
showErrorMessage(data.message || translate('failed_remove_currency'));
}
})
.catch(error => {
showErrorMessage(error.message || translate('failed_remove_currency'));
});
}
function editCurrency(currencyId) {
var saveButton = document.querySelector(`div[data-currencyid="${currencyId}"] button[name="save"]`);
var inputSymbolElement = document.querySelector(`div[data-currencyid="${currencyId}"] input[name="symbol"]`);
var inputNameElement = document.querySelector(`div[data-currencyid="${currencyId}"] input[name="currency"]`);
var inputCodeElement = document.querySelector(`div[data-currencyid="${currencyId}"] input[name="code"]`);
saveButton.classList.add("disabled");
saveButton.disabled = true;
if (inputNameElement) {
var currencyName = encodeURIComponent(inputNameElement.value);
var currencySymbol = encodeURIComponent(inputSymbolElement.value);
var currencyCode = encodeURIComponent(inputCodeElement.value);
var url = `endpoints/currency/currency.php?action=edit&currencyId=${currencyId}&name=${currencyName}&symbol=${currencySymbol}&code=${currencyCode}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(translate('network_response_error'));
}
return response.json();
})
.then(data => {
if (data.success) {
saveButton.classList.remove("disabled");
saveButton.disabled = false;
showSuccessMessage(decodeURI(data.message));
} else {
saveButton.classList.remove("disabled");
saveButton.disabled = false;
showErrorMessage(data.message || translate('failed_save_currency'));
}
})
.catch(error => {
saveButton.classList.remove("disabled");
saveButton.disabled = false;
showErrorMessage(error.message || translate('failed_save_currency'));
});
}
}
function togglePayment(paymentId) {
const element = document.querySelector(`div[data-paymentid="${paymentId}"]`);
if (element.dataset.inUse === 'yes') {
return showErrorMessage(translate(cant_disable_payment_in_use));
}
const newEnabledState = element.dataset.enabled === '1' ? '0' : '1';
const paymentMethodName = element.querySelector('.payment-name').innerText;
const url = `endpoints/payments/payment.php?action=toggle&paymentId=${paymentId}&enabled=${newEnabledState}`;
fetch(url).then(response => {
if (!response.ok) {
throw new Error(translate('network_response_error'));
}
return response.json();
}).then(data => {
if (data.success) {
element.dataset.enabled = newEnabledState;
showSuccessMessage(`${paymentMethodName} ${data.message}`);
} else {
showErrorMessage(data.message || translate('failed_save_payment_method'));
}
}).catch(error => {
showErrorMessage(error.message || translate('failed_save_payment_method'));
});
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault();
document.getElementById("userSubmit").disabled = true;
const formData = new FormData(event.target);
fetch("endpoints/user/save_user.php", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
var newAvatar = document.getElementById("avatarUser").value;
document.getElementById("avatar").src = "images/avatars/" + newAvatar + ".svg";
var newUsername = document.getElementById("username").value;
document.getElementById("user").textContent = newUsername;
showSuccessMessage(data.message);
} else {
showErrorMessage(data.errorMessage);
}
document.getElementById("userSubmit").disabled = false;
})
.catch(error => {
showErrorMessage(translate('unknown_error'));
});
});
});
function addFixerKeyButton() {
document.getElementById("addFixerKey").disabled = true;
const apiKeyInput = document.querySelector("#fixerKey");
apiKey = apiKeyInput.value.trim();
fetch("endpoints/currency/fixer_api_key.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: `api_key=${encodeURIComponent(apiKey)}`,
})
.then(response => response.json())
.then(data => {
if (data.success) {
showSuccessMessage(data.message);
document.getElementById("addFixerKey").disabled = false;
} else {
showErrorMessage(data.message);
document.getElementById("addFixerKey").disabled = false;
}
})
.catch(error => {
showErrorMessage(error);
document.getElementById("addFixerKey").disabled = false;
});
}
function saveNotificationsButton() {
const button = document.getElementById("saveNotifications");
button.disabled = true;
const enabled = document.getElementById("notifications").checked ? 1 : 0;
const days = document.getElementById("days").value;
const smtpAddress = document.getElementById("smtpaddress").value;
const smtpPort = document.getElementById("smtpport").value;
const smtpUsername = document.getElementById("smtpusername").value;
const smtpPassword = document.getElementById("smtppassword").value;
const fromEmail = document.getElementById("fromemail").value;
const data = {
enabled: enabled,
days: days,
smtpaddress: smtpAddress,
smtpport: smtpPort,
smtpusername: smtpUsername,
smtppassword: smtpPassword,
fromemail: fromEmail
};
fetch('/endpoints/notifications/save.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
showSuccessMessage(data.message);
} else {
showErrorMessage(data.errorMessage);
}
button.disabled = false;
})
.catch(error => {
showErrorMessage(translate('error_saving_notification_data'));
button.disabled = false;
});
}
function testNotificationButton() {
const button = document.getElementById("testNotifications");
button.disabled = true;
const smtpAddress = document.getElementById("smtpaddress").value;
const smtpPort = document.getElementById("smtpport").value;
const smtpUsername = document.getElementById("smtpusername").value;
const smtpPassword = document.getElementById("smtppassword").value;
const fromEmail = document.getElementById("fromemail").value;
const data = {
smtpaddress: smtpAddress,
smtpport: smtpPort,
smtpusername: smtpUsername,
smtppassword: smtpPassword,
fromemail: fromEmail
};
fetch('/endpoints/notifications/sendtestmail.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
showSuccessMessage(data.message);
} else {
showErrorMessage(data.errorMessage);
}
button.disabled = false;
})
.catch(error => {
showErrorMessage(translate('error_sending_notification'));
button.disabled = false;
});
}
function switchTheme() {
const darkThemeCss = document.querySelector("#dark-theme");
darkThemeCss.disabled = !darkThemeCss.disabled;
const themeChoice = darkThemeCss.disabled ? 'light' : 'dark';
document.cookie = `theme=${themeChoice}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
}
function setShowMonthlyPriceCookie() {
const showMonthlyPriceCheckbox = document.querySelector("#monthlyprice");
const value = showMonthlyPriceCheckbox.checked;
document.cookie = `showMonthlyPrice=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
}
function setConvertCurrencyCookie() {
const convertCurrencyCheckbox = document.querySelector("#convertcurrency");
const value = convertCurrencyCheckbox.checked;
document.cookie = `convertCurrency=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
}
function setRemoveBackgroundCookie() {
const removeBackgroundCheckbox = document.querySelector("#removebackground");
const value = removeBackgroundCheckbox.checked;
document.cookie = `removeBackground=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
}