149 lines
4.9 KiB
JavaScript
149 lines
4.9 KiB
JavaScript
const assetForms = [
|
|
"create-other-asset-form",
|
|
"create-saving-asset-form",
|
|
"create-stock-asset-form"
|
|
];
|
|
|
|
/**
|
|
* resetAll asset creation forms
|
|
*/
|
|
function resetAll() {
|
|
document.getElementById("dropdown-icon-button").innerHTML = `
|
|
<img src="/static/svgs/icons/Other.svg" class="h-4 w-4 me-2" alt="Other"> Other
|
|
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
|
</svg>
|
|
`;
|
|
document.getElementById("create-other-asset-form").reset();
|
|
document.getElementById("create-saving-asset-form").reset();
|
|
document.getElementById("create-stock-asset-form").reset();
|
|
}
|
|
|
|
/**
|
|
* selectAssetForm changes which form is displayed
|
|
* to create specified assets.
|
|
* @param {string} assetFormId
|
|
*/
|
|
function selectAssetForm(assetFormId) {
|
|
for (let i = 0; i < assetForms.length; i++) {
|
|
if (assetForms[i] == assetFormId) {
|
|
document.getElementById(assetFormId).style.display = "block";
|
|
} else {
|
|
document.getElementById(assetForms[i]).style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* resetRadio to default to other asset type.
|
|
*/
|
|
function resetRadio() {
|
|
document.getElementById("asset-other").checked = true;
|
|
document.getElementById("asset-saving").checked = false;
|
|
document.getElementById("asset-stock").checked = false;
|
|
}
|
|
|
|
const assetKeys = {
|
|
other: [
|
|
"name",
|
|
"dropdown-icon-button",
|
|
"value",
|
|
"description",
|
|
"purchaseDate",
|
|
],
|
|
saving: [
|
|
"name",
|
|
"value",
|
|
],
|
|
stock: [
|
|
"ticker",
|
|
"price",
|
|
"quantity",
|
|
"purchaseDate",
|
|
],
|
|
}
|
|
|
|
/**
|
|
* lockAsset prevents edits to asset view modal
|
|
* @param {string} assetId
|
|
* @param {string} icon to defualt to
|
|
*/
|
|
function lockAsset(assetId, icon) {
|
|
let dropdown = document.getElementById(`dropdown-icon-button-${assetId}`);
|
|
if (dropdown) dropdown.innerHTML = `
|
|
<img src="/static/svgs/icons/${icon}.svg" class="h-4 w-4 me-2" alt="${icon}"> ${icon}
|
|
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
|
</svg>
|
|
`;
|
|
|
|
document.getElementById(`${assetId}-form`).reset();
|
|
|
|
const type = document.getElementById(`type-${assetId}`).value;
|
|
|
|
assetKeys[type].forEach((key) => {
|
|
document.getElementById(`${key}-${assetId}`).disabled = true;
|
|
});
|
|
|
|
document.getElementById(`save-${assetId}`).disabled = true;
|
|
document.getElementById(`save-${assetId}`).classList.remove("cursor-pointer");
|
|
document.getElementById(`save-${assetId}`).classList.add("cursor-not-allowed");
|
|
|
|
document.getElementById(`edit-${assetId}`).innerHTML = "Edit";
|
|
document.getElementById(`edit-${assetId}`).onclick = () => { unlockAsset(assetId, icon) };
|
|
}
|
|
|
|
/**
|
|
* unlockAsset allows edits to asset view modal
|
|
* @param {string} assetId
|
|
* @param {string} icon to defualt to
|
|
*/
|
|
function unlockAsset(assetId, icon) {
|
|
const type = document.getElementById(`type-${assetId}`).value;
|
|
|
|
assetKeys[type].forEach((key) => {
|
|
document.getElementById(`${key}-${assetId}`).disabled = false;
|
|
});
|
|
|
|
document.getElementById(`save-${assetId}`).disabled = false;
|
|
document.getElementById(`save-${assetId}`).classList.remove("cursor-not-allowed");
|
|
document.getElementById(`save-${assetId}`).classList.add("cursor-pointer");
|
|
|
|
document.getElementById(`edit-${assetId}`).innerHTML = "Cancel";
|
|
document.getElementById(`edit-${assetId}`).onclick = () => { lockAsset(assetId, icon) };
|
|
}
|
|
|
|
/**
|
|
* autoOpenCreate checks if popup param
|
|
* in url to auto open create popup
|
|
*/
|
|
function autoOpenCreate() {
|
|
const query = window.location.search;
|
|
const params = new URLSearchParams(query);
|
|
|
|
if (params.has("popup")) {
|
|
document.getElementById('create-asset-modal').showModal();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* selectIcon updated selected icon while creating
|
|
* or modifying assets.
|
|
* @param {button element} selectedIcon
|
|
* @param {string} assetId
|
|
*/
|
|
function selectIcon(selectedIcon, assetId="") {
|
|
document.getElementById(`dropdown-icon-button${assetId != "" ? "-" : ""}${assetId}`).value = selectedIcon.value;
|
|
document.getElementById(`icon${assetId != "" ? "-" : ""}${assetId}`).value = selectedIcon.value
|
|
|
|
document.getElementById(`dropdown-icon-button${assetId != "" ? "-" : ""}${assetId}`).innerHTML = selectedIcon.innerHTML +
|
|
`
|
|
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
|
</svg>
|
|
`;
|
|
}
|
|
|
|
resetRadio();
|
|
autoOpenCreate();
|