${t('auth.loginRequired')}
`
}
async loadCategories() {
try {
this.categories = await directus.getCategories()
} catch (e) {
console.error('Failed to load categories:', e)
this.categories = []
}
}
validateMoneroAddress(address) {
if (!address) return false
// Standard addresses: start with 4, 95 chars
// Subaddresses: start with 8, 95 chars
// Integrated addresses: start with 4, 106 chars
const standardRegex = /^4[0-9A-Za-z]{94}$/
const subaddressRegex = /^8[0-9A-Za-z]{94}$/
const integratedRegex = /^4[0-9A-Za-z]{105}$/
return standardRegex.test(address) || subaddressRegex.test(address) || integratedRegex.test(address)
}
disconnectedCallback() {
if (this.unsubscribe) this.unsubscribe()
}
render() {
const pageTitle = this.editMode ? t('create.editTitle') : t('create.title')
this.innerHTML = /* html */`
${pageTitle}
${!this.editMode && this.hasDraft ? `
${t('create.draftRestored')}
` : ''}
`
this.setupEventListeners()
}
setupEventListeners() {
const form = this.querySelector('#create-form')
const cancelBtn = this.querySelector('#cancel-btn')
const imageInput = this.querySelector('#images')
form.addEventListener('submit', (e) => this.handleSubmit(e))
cancelBtn.addEventListener('click', () => router.back())
form.querySelectorAll('input:not([type="checkbox"]), textarea, select').forEach(input => {
input.addEventListener('input', (e) => {
if (e.target.name) {
this.formData[e.target.name] = e.target.value
this.saveDraft()
}
})
})
// Checkbox handler with shipping cost toggle
const shippingCheckbox = this.querySelector('#shipping')
const shippingCostGroup = this.querySelector('#shipping-cost-group')
shippingCheckbox?.addEventListener('change', (e) => {
this.formData.shipping = e.target.checked
if (shippingCostGroup) {
shippingCostGroup.style.display = e.target.checked ? 'block' : 'none'
}
this.saveDraft()
})
// Location picker handler
const locationPicker = this.querySelector('#location-picker')
locationPicker?.addEventListener('location-select', (e) => {
this.formData.locationData = e.detail
this.formData.location = e.detail.name
this.saveDraft()
})
imageInput?.addEventListener('change', (e) => this.handleImageSelect(e))
// Clear draft button
this.querySelector('#clear-draft-btn')?.addEventListener('click', () => {
this.clearDraft()
this.formData = {
title: '',
description: '',
price: '',
currency: 'EUR',
price_mode: 'fiat',
price_type: 'fixed',
category: '',
condition: 'good',
location: '',
shipping: false,
moneroAddress: ''
}
this.hasDraft = false
this.render()
this.setupEventListeners()
})
}
handleImageSelect(e) {
const files = Array.from(e.target.files)
this.pendingFiles = [...files]
this.processNextImage()
}
processNextImage() {
if (this.pendingFiles.length === 0) return
if (this.imageFiles.length >= 5) {
this.pendingFiles = []
return
}
const file = this.pendingFiles.shift()
const cropper = this.querySelector('#image-cropper')
if (cropper) {
cropper.open(
file,
(croppedFile, previewUrl) => {
// On crop complete
this.imageFiles.push(croppedFile)
this.imagePreviews.push(previewUrl)
this.updateImagePreviews()
// Process next image
this.processNextImage()
},
() => {
// On cancel - skip this image
this.processNextImage()
}
)
}
}
updateImagePreviews() {
const container = this.querySelector('#image-previews')
const uploadArea = this.querySelector('#upload-area')
if (container) {
container.innerHTML = this.renderImagePreviews()
this.setupRemoveListeners()
}
if (uploadArea) {
uploadArea.style.display = this.imageFiles.length >= 5 ? 'none' : 'flex'
}
}
renderImagePreviews() {
if (this.imagePreviews.length === 0) return ''
return this.imagePreviews.map((src, index) => /* html */`