src/ui/wishlist.ts
import type { Template } from "hogan.js"
import { Console } from "../console"
import { translate } from "../i18n/translate"
import { LocalStorage } from "../local_storage/local_storage"
import type { WishlistSettings } from "../templates/interfaces/wishlist_settings"
export function loadWishlist(): void {
const marketplaceMenu = document.getElementById("marketplace-menu")
if (!marketplaceMenu) return
if (!marketplaceMenu.querySelector("#wishlist-button")) {
for (const a of marketplaceMenu.querySelectorAll("a")) {
a.addEventListener("click", () => {
pageLoad(a.href, undefined, undefined, undefined, true)
})
}
}
marketplaceMenu.querySelector("#wishlist-button")?.remove()
const wishlistButtonTemplate: Template = require("../templates/html/wishlist_button.html")
marketplaceMenu.insertAdjacentHTML(
"beforeend",
wishlistButtonTemplate.render({ translate }),
)
marketplaceMenu
.querySelector<HTMLAnchorElement>("#wishlist-button")
?.addEventListener("click", insertWishlist)
}
function insertWishlist(): void {
// Assistance
const assistance = document.querySelector(".marketplace-assistance")
if (assistance) assistance.innerHTML = translate.market.wishlist.assistance
const button = document.querySelector<HTMLAnchorElement>("#wishlist-button")
if (!button) {
Console.error("Wishlist button not found", button)
return
}
// Menu
document
.querySelector("#marketplace-menu .active")
?.classList.remove("active")
button.classList.add("active")
// Filters
const filters = document.getElementById("marketplace-filters")
if (filters) filters.innerHTML = ""
// Content
const wishlistTemplate: Template = require("../templates/html/wishlist_settings.html")
const container =
document.querySelector(".marketplace-container") ??
document.getElementById("marketplace-active-auctions") ??
document.getElementById("marketplace-itemsForSale")
if (!container) {
Console.error("The wishlist cannot be placed", container)
return
}
const wishlistContext: WishlistSettings = {
wishlist: LocalStorage.wishlist,
}
container.innerHTML = wishlistTemplate.render({
...wishlistContext,
translate,
})
// Buttons
for (const tr of container.querySelectorAll("tr")) {
const icon = tr.dataset.icon
if (!icon) continue
// Reset status
const reset = tr.querySelector(".reset-item-status")
if (reset)
reset.addEventListener("click", () => {
resetStatus(icon)
insertWishlist()
})
// Delete item from wishlist
const deleteButton = tr.querySelector(".delete-wishlist-item")
if (deleteButton)
deleteButton.addEventListener("click", () => {
deleteItem(icon)
insertWishlist()
})
// Change price
const editPrice = tr.querySelector(".edit-price")
if (editPrice)
editPrice.addEventListener(
"click",
() => void changePrice(icon).then(insertWishlist),
)
}
// Reset statuses
document.querySelector(".reset-all")?.addEventListener("click", resetStatuses)
}
function resetStatus(icon: string): void {
const wishlist = LocalStorage.wishlist
const index = wishlist.findIndex(item => item.icon === icon)
const entry = wishlist[index]
if (!entry) return
delete entry.error
LocalStorage.wishlist = [
...wishlist.slice(undefined, index),
entry,
...wishlist.slice(index + 1, undefined),
]
}
function deleteItem(icon: string): void {
LocalStorage.wishlist = LocalStorage.wishlist.filter(
item => item.icon !== icon,
)
}
async function changePrice(icon: string): Promise<void> {
const template: Template = require("../templates/html/change_price_flavr.html")
const wishlist = LocalStorage.wishlist
const index = wishlist.findIndex(item => item.icon === icon)
const entry = wishlist[index]
if (!entry) return
return new Promise(resolve => {
$.flavr({
content: template.render({ translate }),
dialog: "prompt",
prompt: {
value: entry.price.toString(),
},
buttons: {
close: {
style: "close",
action: () => {
resolve()
return true
},
},
save: {
action: () => save(icon, resolve),
},
},
onBuild: $container => {
$container.addClass("new-layout-popup")
document
.querySelector<HTMLInputElement>(".flavr-prompt")
?.addEventListener("keyup", ({ key }) => {
if (key !== "Enter") return
save(icon, resolve)
})
},
})
})
}
function save(icon: string, resolve: () => void): boolean {
const wishlist = LocalStorage.wishlist
const index = wishlist.findIndex(item => item.icon === icon)
const entry = wishlist[index]
if (!entry) return false
const price = Number(
document.querySelector<HTMLInputElement>(".flavr-prompt")?.value.trim(),
)
if (!price || price <= 0) {
$.flavrNotif(translate.market.change_price.invalid_price)
return false
}
entry.price = price
LocalStorage.wishlist = [
...wishlist.slice(undefined, index),
entry,
...wishlist.slice(index + 1, undefined),
]
const template: Template = require("../templates/html/flavr_notif/icon_message.html")
$.flavrNotif(
template.render({
...entry,
message: translate.market.change_price.changed_price(
entry.name,
entry.price,
),
}),
)
resolve()
return true
}
function resetStatuses(): void {
LocalStorage.wishlist = LocalStorage.wishlist.map(item => {
delete item.error
return item
})
insertWishlist()
}