52391c922e
* front-end: translate the form fields labels
137 lines
4.2 KiB
JavaScript
137 lines
4.2 KiB
JavaScript
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
import { XMLNS_POLL } from '../constants.js'
|
|
import { tplPollForm } from '../templates/poll-form.js'
|
|
import { CustomElement } from 'shared/components/element.js'
|
|
import { converse, api } from '@converse/headless/core'
|
|
import { webForm2xForm } from '@converse/headless/utils/form'
|
|
import { __ } from 'i18n'
|
|
import '../styles/poll-form.scss'
|
|
const $iq = converse.env.$iq
|
|
const u = converse.env.utils
|
|
const sizzle = converse.env.sizzle
|
|
const Strophe = converse.env.Strophe
|
|
|
|
export default class MUCPollFormView extends CustomElement {
|
|
static get properties () {
|
|
return {
|
|
model: { type: Object, attribute: true },
|
|
modal: { type: Object, attribute: true },
|
|
form_fields: { type: Object, attribute: false },
|
|
alert_message: { type: Object, attribute: false },
|
|
title: { type: String, attribute: false },
|
|
instructions: { type: String, attribute: false }
|
|
}
|
|
}
|
|
|
|
_fieldTranslationMap = new Map()
|
|
|
|
async initialize () {
|
|
this.alert_message = undefined
|
|
if (!this.model) {
|
|
this.alert_message = __('Error')
|
|
return
|
|
}
|
|
try {
|
|
this._initFieldTranslations()
|
|
const stanza = await this._fetchPollForm()
|
|
const query = stanza.querySelector('query')
|
|
const xform = sizzle(`x[xmlns="${Strophe.NS.XFORM}"]`, query)[0]
|
|
if (!xform) {
|
|
throw Error('Missing xform in stanza')
|
|
}
|
|
|
|
// eslint-disable-next-line no-undef
|
|
this.title = __(LOC_poll_title) // xform.querySelector('title')?.textContent ?? ''
|
|
// eslint-disable-next-line no-undef
|
|
this.instructions = __(LOC_poll_instructions) // xform.querySelector('instructions')?.textContent ?? ''
|
|
this.form_fields = Array.from(xform.querySelectorAll('field')).map(field => {
|
|
this._translateField(field)
|
|
return u.xForm2TemplateResult(field, stanza)
|
|
})
|
|
} catch (err) {
|
|
console.error(err)
|
|
this.alert_message = __('Error')
|
|
}
|
|
}
|
|
|
|
render () {
|
|
return tplPollForm(this)
|
|
}
|
|
|
|
_fetchPollForm () {
|
|
return api.sendIQ(
|
|
$iq({
|
|
to: this.model.get('jid'),
|
|
type: 'get'
|
|
}).c('query', { xmlns: XMLNS_POLL })
|
|
)
|
|
}
|
|
|
|
_initFieldTranslations () {
|
|
// eslint-disable-next-line no-undef
|
|
this._fieldTranslationMap.set('muc#roompoll_question', __(LOC_poll_question))
|
|
// eslint-disable-next-line no-undef
|
|
this._fieldTranslationMap.set('muc#roompoll_duration', __(LOC_poll_duration))
|
|
// eslint-disable-next-line no-undef
|
|
this._fieldTranslationMap.set('muc#roompoll_anonymous_results', __(LOC_poll_anonymous_results))
|
|
for (let i = 1; i <= 10; i++) {
|
|
this._fieldTranslationMap.set(
|
|
'muc#roompoll_choice' + i.toString(),
|
|
// eslint-disable-next-line no-undef
|
|
__(LOC_poll_choice_n).replace('{{N}}', i.toString())
|
|
)
|
|
}
|
|
}
|
|
|
|
_translateField (field) {
|
|
const v = field.getAttribute('var')
|
|
const label = this._fieldTranslationMap.get(v)
|
|
if (label) {
|
|
field.setAttribute('label', label)
|
|
}
|
|
}
|
|
|
|
async formSubmit (ev) {
|
|
ev.preventDefault()
|
|
try {
|
|
this.alert_message = undefined
|
|
const form = ev.target
|
|
const inputs = sizzle(':input:not([type=button]):not([type=submit])', form)
|
|
|
|
const iq = $iq({
|
|
type: 'set',
|
|
to: this.model.get('jid'),
|
|
id: u.getUniqueId()
|
|
}).c('query', { xmlns: XMLNS_POLL })
|
|
|
|
iq.c('x', { xmlns: Strophe.NS.XFORM, type: 'submit' })
|
|
|
|
const xmlNodes = inputs.map(i => webForm2xForm(i)).filter(n => n)
|
|
xmlNodes.forEach(n => iq.cnode(n).up())
|
|
|
|
await api.sendIQ(iq)
|
|
|
|
if (this.modal) {
|
|
this.modal.onHide()
|
|
}
|
|
} catch (err) {
|
|
if (u.isErrorStanza(err)) {
|
|
// Checking if there is a text error that we can show to the user.
|
|
if (sizzle('error bad-request', err).length) {
|
|
const text = sizzle('error text', err)
|
|
if (text.length) {
|
|
this.alert_message = __('Error') + ': ' + text[0].textContent
|
|
return
|
|
}
|
|
}
|
|
}
|
|
console.error(err)
|
|
this.alert_message = __('Error')
|
|
}
|
|
}
|
|
}
|
|
|
|
api.elements.define('livechat-converse-poll-form', MUCPollFormView)
|