fix linting
This commit is contained in:
Mehdi Benadel
parent
f549142ae4
commit
fb7f44692c
@ -6,5 +6,7 @@ import type { ChannelConfiguration } from 'shared/lib/types'
|
||||
import { createContext } from '@lit/context'
|
||||
import { ChannelDetailsService } from '../services/channel-details'
|
||||
|
||||
export const channelConfigurationContext = createContext<ChannelConfiguration | undefined>(Symbol('channel-configuration'))
|
||||
export const channelDetailsServiceContext = createContext<ChannelDetailsService | undefined>(Symbol('channel-configuration-service'))
|
||||
export const channelConfigurationContext =
|
||||
createContext<ChannelConfiguration | undefined>(Symbol('channel-configuration'))
|
||||
export const channelDetailsServiceContext =
|
||||
createContext<ChannelDetailsService | undefined>(Symbol('channel-configuration-service'))
|
||||
|
||||
@ -16,7 +16,6 @@ import { LivechatElement } from '../../lib/elements/livechat'
|
||||
|
||||
@customElement('livechat-channel-configuration')
|
||||
export class ChannelConfigurationElement extends LivechatElement {
|
||||
|
||||
@provide({ context: registerClientOptionsContext })
|
||||
@property({ attribute: false })
|
||||
public registerClientOptions: RegisterClientOptions | undefined
|
||||
@ -34,38 +33,36 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
@state()
|
||||
public _formStatus: boolean | any = undefined
|
||||
|
||||
private _asyncTaskRender = new Task(this, {
|
||||
|
||||
task: async ([registerClientOptions], { signal }) => {
|
||||
if (this.registerClientOptions) {
|
||||
this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
|
||||
private readonly _asyncTaskRender = new Task(this, {
|
||||
task: async ([registerClientOptions]) => {
|
||||
if (registerClientOptions) {
|
||||
this._channelDetailsService = new ChannelDetailsService(registerClientOptions)
|
||||
this._channelConfiguration = await this._channelDetailsService.fetchConfiguration(this.channelId ?? 0)
|
||||
}
|
||||
},
|
||||
|
||||
args: () => [this.registerClientOptions]
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
private _saveConfig = (ev?: Event) => {
|
||||
private readonly _saveConfig = (ev?: Event): undefined => {
|
||||
ev?.preventDefault()
|
||||
if (this._channelDetailsService && this._channelConfiguration) {
|
||||
this._channelDetailsService.saveOptions(this._channelConfiguration.channel.id, this._channelConfiguration.configuration)
|
||||
.then((value) => {
|
||||
this._channelDetailsService.saveOptions(this._channelConfiguration.channel.id,
|
||||
this._channelConfiguration.configuration)
|
||||
.then(() => {
|
||||
this._formStatus = { success: true }
|
||||
console.log(`Configuration has been updated`)
|
||||
console.log('Configuration has been updated')
|
||||
this.requestUpdate('_formStatus')
|
||||
})
|
||||
.catch((error) => {
|
||||
this._formStatus = error
|
||||
console.log(`An error occurred : ${JSON.stringify(this._formStatus)}`)
|
||||
this.requestUpdate('_formStatus')
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render = () => {
|
||||
let tableHeaderList = {
|
||||
protected override render = (): unknown => {
|
||||
const tableHeaderList = {
|
||||
forbiddenWords: {
|
||||
entries: {
|
||||
colName: ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL),
|
||||
@ -113,16 +110,16 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
}
|
||||
}
|
||||
}
|
||||
let tableSchema = {
|
||||
const tableSchema = {
|
||||
forbiddenWords: {
|
||||
entries: {
|
||||
inputType: 'textarea',
|
||||
default: [''],
|
||||
separator: '\n',
|
||||
separator: '\n'
|
||||
},
|
||||
regex: {
|
||||
inputType: 'checkbox',
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
applyToModerators: {
|
||||
inputType: 'checkbox',
|
||||
@ -140,34 +137,35 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
comments: {
|
||||
inputType: 'textarea',
|
||||
default: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
quotes: {
|
||||
messages: {
|
||||
inputType: 'textarea',
|
||||
default: [''],
|
||||
separator: '\n',
|
||||
separator: '\n'
|
||||
},
|
||||
delay: {
|
||||
inputType: 'number',
|
||||
default: 10,
|
||||
default: 10
|
||||
}
|
||||
},
|
||||
commands: {
|
||||
command: {
|
||||
inputType: 'text',
|
||||
default: '',
|
||||
default: ''
|
||||
},
|
||||
message: {
|
||||
inputType: 'text',
|
||||
default: '',
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this._asyncTaskRender.render({
|
||||
complete: () => html`
|
||||
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel">
|
||||
<div class="margin-content peertube-plugin-livechat-configuration
|
||||
peertube-plugin-livechat-configuration-channel">
|
||||
<h1>
|
||||
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE)}:
|
||||
<span class="peertube-plugin-livechat-configuration-channel-info">
|
||||
@ -185,7 +183,7 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
|
||||
.helpPage=${"documentation/user/streamers/slow_mode"}>
|
||||
.helpPage=${'documentation/user/streamers/slow_mode'}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
@ -199,8 +197,10 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
max="1000"
|
||||
id="peertube-livechat-slow-mode-duration"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.slowMode.duration = Number((event.target as HTMLInputElement).value)
|
||||
if (event?.target && this._channelConfiguration) {
|
||||
this._channelConfiguration.configuration.slowMode.duration =
|
||||
Number((event.target as HTMLInputElement).value)
|
||||
}
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
@ -215,7 +215,7 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
|
||||
.description=${''}
|
||||
.helpPage=${"documentation/user/streamers/channel"}>
|
||||
.helpPage=${'documentation/user/streamers/channel'}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
@ -226,8 +226,10 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
name="bot"
|
||||
id="peertube-livechat-bot"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.bot.enabled = (event.target as HTMLInputElement).checked
|
||||
if (event?.target && this._channelConfiguration) {
|
||||
this._channelConfiguration.configuration.bot.enabled =
|
||||
(event.target as HTMLInputElement).checked
|
||||
}
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
@ -237,17 +239,21 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
|
||||
</label>
|
||||
</div>
|
||||
${this._channelConfiguration?.configuration.bot.enabled ?
|
||||
html`<div class="form-group">
|
||||
<label for="peertube-livechat-bot-nickname">${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}</label>
|
||||
${this._channelConfiguration?.configuration.bot.enabled
|
||||
? html`<div class="form-group">
|
||||
<labelfor="peertube-livechat-bot-nickname">
|
||||
${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="bot_nickname"
|
||||
class="form-control"
|
||||
id="peertube-livechat-bot-nickname"
|
||||
@input=${(event: InputEvent) => {
|
||||
if (event?.target && this._channelConfiguration)
|
||||
this._channelConfiguration.configuration.bot.nickname = (event.target as HTMLInputElement).value
|
||||
if (event?.target && this._channelConfiguration) {
|
||||
this._channelConfiguration.configuration.bot.nickname =
|
||||
(event.target as HTMLInputElement).value
|
||||
}
|
||||
this.requestUpdate('_channelConfiguration')
|
||||
}
|
||||
}
|
||||
@ -258,13 +264,13 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
${this._channelConfiguration?.configuration.bot.enabled ?
|
||||
html`<div class="row mt-5">
|
||||
${this._channelConfiguration?.configuration.bot.enabled
|
||||
? html`<div class="row mt-5">
|
||||
<div class="col-12 col-lg-4 col-xl-3">
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/forbidden_words"}>
|
||||
.helpPage=${'documentation/user/streamers/bot/forbidden_words'}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
@ -288,7 +294,7 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/quotes"}>
|
||||
.helpPage=${'documentation/user/streamers/bot/quotes'}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
@ -312,7 +318,7 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
<livechat-configuration-row
|
||||
.title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
|
||||
.description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
|
||||
.helpPage=${"documentation/user/streamers/bot/commands"}>
|
||||
.helpPage=${'documentation/user/streamers/bot/commands'}>
|
||||
</livechat-configuration-row>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8 col-xl-9">
|
||||
@ -336,14 +342,14 @@ export class ChannelConfigurationElement extends LivechatElement {
|
||||
<div class="form-group mt-5">
|
||||
<input type="submit" class="peertube-button-link orange-button" value=${ptTr(LOC_SAVE)} />
|
||||
</div>
|
||||
${(this._formStatus && this._formStatus.success === undefined) ?
|
||||
html`<div class="alert alert-warning" role="alert">
|
||||
${(this._formStatus && this._formStatus.success === undefined)
|
||||
? html`<div class="alert alert-warning" role="alert">
|
||||
An error occurred : ${JSON.stringify(this._formStatus)}
|
||||
</div>`
|
||||
: ''
|
||||
}
|
||||
${(this._formStatus && this._formStatus.success === true) ?
|
||||
html`<div class="alert alert-success" role="alert">
|
||||
${(this._formStatus && this._formStatus.success === true)
|
||||
? html`<div class="alert alert-success" role="alert">
|
||||
Configuration has been updated
|
||||
</div>`
|
||||
: ''
|
||||
|
||||
@ -6,7 +6,7 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
|
||||
import { html } from 'lit'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
import { ptTr } from '../../lib/directives/translation'
|
||||
import { Task } from '@lit/task';
|
||||
import { Task } from '@lit/task'
|
||||
import type { ChannelLiveChatInfos } from 'shared/lib/types'
|
||||
import { ChannelDetailsService } from '../services/channel-details'
|
||||
import { provide } from '@lit/context'
|
||||
@ -16,7 +16,6 @@ import { LivechatElement } from '../../lib/elements/livechat'
|
||||
|
||||
@customElement('livechat-channel-home')
|
||||
export class ChannelHomeElement extends LivechatElement {
|
||||
|
||||
@provide({ context: registerClientOptionsContext })
|
||||
@property({ attribute: false })
|
||||
public registerClientOptions: RegisterClientOptions | undefined
|
||||
@ -30,26 +29,23 @@ export class ChannelHomeElement extends LivechatElement {
|
||||
@state()
|
||||
public _formStatus: boolean | any = undefined
|
||||
|
||||
private _asyncTaskRender = new Task(this, {
|
||||
|
||||
task: async ([registerClientOptions], {signal}) => {
|
||||
private readonly _asyncTaskRender = new Task(this, {
|
||||
task: async ([registerClientOptions]) => {
|
||||
// Getting the current username in localStorage. Don't know any cleaner way to do.
|
||||
const username = window.localStorage.getItem('username')
|
||||
if (!username) {
|
||||
throw new Error('Can\'t get the current username.')
|
||||
}
|
||||
|
||||
if (this.registerClientOptions) {
|
||||
this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
|
||||
if (registerClientOptions) {
|
||||
this._channelDetailsService = new ChannelDetailsService(registerClientOptions)
|
||||
this._channels = await this._channelDetailsService.fetchUserChannels(username)
|
||||
}
|
||||
},
|
||||
|
||||
args: () => [this.registerClientOptions]
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
render = () => {
|
||||
protected override render = (): unknown => {
|
||||
return this._asyncTaskRender.render({
|
||||
complete: () => html`
|
||||
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
|
||||
@ -64,10 +60,9 @@ export class ChannelHomeElement extends LivechatElement {
|
||||
${this._channels?.map((channel) => html`
|
||||
<li>
|
||||
<a href="${channel.livechatConfigurationUri}">
|
||||
${channel.avatar ?
|
||||
html`<img class="avatar channel" src="${channel.avatar.path}">`
|
||||
:
|
||||
html`<div class="avatar channel initial gray"></div>`
|
||||
${channel.avatar
|
||||
? html`<img class="avatar channel" src="${channel.avatar.path}">`
|
||||
: html`<div class="avatar channel initial gray"></div>`
|
||||
}
|
||||
</a>
|
||||
<div class="peertube-plugin-livechat-configuration-home-info">
|
||||
|
||||
@ -8,17 +8,16 @@ import { LivechatElement } from '../../lib/elements/livechat'
|
||||
|
||||
@customElement('livechat-configuration-row')
|
||||
export class ConfigurationRowElement extends LivechatElement {
|
||||
@property({ attribute: false })
|
||||
public title: string = 'title'
|
||||
|
||||
@property({ attribute: false })
|
||||
public title: string = `title`
|
||||
|
||||
@property({ attribute: false })
|
||||
public description: string = `Here's a description`
|
||||
public description: string = 'Here\'s a description'
|
||||
|
||||
@property({ attribute: false })
|
||||
public helpPage: string = 'documentation'
|
||||
|
||||
render() {
|
||||
protected override render = (): unknown => {
|
||||
return html`
|
||||
<h2>${this.title}</h2>
|
||||
<p>${this.description}</p>
|
||||
|
||||
@ -4,32 +4,30 @@
|
||||
|
||||
import type { RegisterClientOptions } from '@peertube/peertube-types/client'
|
||||
import { ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions } from 'shared/lib/types'
|
||||
import { getBaseRoute } from "../../../utils/uri"
|
||||
|
||||
import { getBaseRoute } from '../../../utils/uri'
|
||||
|
||||
export class ChannelDetailsService {
|
||||
|
||||
public _registerClientOptions: RegisterClientOptions
|
||||
|
||||
private _headers : any = {}
|
||||
private readonly _headers: any = {}
|
||||
|
||||
constructor(registerClientOptions: RegisterClientOptions) {
|
||||
constructor (registerClientOptions: RegisterClientOptions) {
|
||||
this._registerClientOptions = registerClientOptions
|
||||
|
||||
this._headers = this._registerClientOptions.peertubeHelpers.getAuthHeader() ?? {}
|
||||
this._headers['content-type'] = 'application/json;charset=UTF-8'
|
||||
}
|
||||
|
||||
validateOptions = (channelConfigurationOptions: ChannelConfigurationOptions) => {
|
||||
return true
|
||||
validateOptions = (channelConfigurationOptions: ChannelConfigurationOptions): boolean => {
|
||||
return !!channelConfigurationOptions
|
||||
}
|
||||
|
||||
saveOptions = async (channelId: number, channelConfigurationOptions: ChannelConfigurationOptions) => {
|
||||
saveOptions = async (channelId: number,
|
||||
channelConfigurationOptions: ChannelConfigurationOptions): Promise<Response> => {
|
||||
if (!await this.validateOptions(channelConfigurationOptions)) {
|
||||
throw new Error('Invalid form data')
|
||||
}
|
||||
|
||||
|
||||
const response = await fetch(
|
||||
getBaseRoute(this._registerClientOptions) + '/api/configuration/channel/' + encodeURIComponent(channelId),
|
||||
{
|
||||
@ -43,7 +41,7 @@ export class ChannelDetailsService {
|
||||
throw new Error('Failed to save configuration options.')
|
||||
}
|
||||
|
||||
return await response.json()
|
||||
return response.json()
|
||||
}
|
||||
|
||||
fetchUserChannels = async (username: string): Promise<ChannelLiveChatInfos[]> => {
|
||||
@ -90,6 +88,6 @@ export class ChannelDetailsService {
|
||||
throw new Error('Can\'t get channel configuration options.')
|
||||
}
|
||||
|
||||
return await response.json()
|
||||
return response.json()
|
||||
}
|
||||
}
|
||||
@ -5,4 +5,5 @@
|
||||
import type { RegisterClientOptions } from '@peertube/peertube-types/client/types'
|
||||
import { createContext } from '@lit/context'
|
||||
|
||||
export const registerClientOptionsContext = createContext<RegisterClientOptions | undefined>(Symbol('register-client-options'))
|
||||
export const registerClientOptionsContext =
|
||||
createContext<RegisterClientOptions | undefined>(Symbol('register-client-options'))
|
||||
|
||||
@ -2,33 +2,32 @@
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { PartInfo, directive } from 'lit/directive.js'
|
||||
import { /* PartInfo, */ directive } from 'lit/directive.js'
|
||||
import { AsyncDirective } from 'lit/async-directive.js'
|
||||
import { RegisterClientHelpers } from '@peertube/peertube-types/client';
|
||||
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
||||
import { html } from 'lit';
|
||||
import { RegisterClientHelpers } from '@peertube/peertube-types/client'
|
||||
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
|
||||
import { html } from 'lit'
|
||||
|
||||
export class TranslationDirective extends AsyncDirective {
|
||||
private readonly _peertubeHelpers?: RegisterClientHelpers
|
||||
|
||||
private _peertubeHelpers?: RegisterClientHelpers
|
||||
|
||||
private _translatedValue : string = ''
|
||||
private _localizationId : string = ''
|
||||
private _translatedValue: string = ''
|
||||
private _localizationId: string = ''
|
||||
|
||||
private _allowUnsafeHTML = false
|
||||
|
||||
constructor(partInfo: PartInfo) {
|
||||
super(partInfo);
|
||||
// constructor (partInfo: PartInfo) {
|
||||
// super(partInfo)
|
||||
|
||||
//_peertubeOptionsPromise.then((options) => this._peertubeHelpers = options.peertubeHelpers)
|
||||
}
|
||||
// _peertubeOptionsPromise.then((options) => this._peertubeHelpers = options.peertubeHelpers)
|
||||
// }
|
||||
|
||||
// update = (part: ElementPart) => {
|
||||
// if (part) console.log(`Element : ${part?.element?.getAttributeNames?.().join(' ')}`);
|
||||
// return this.render(this._localizationId);
|
||||
// }
|
||||
|
||||
override render = (locId: string, allowHTML: boolean = false) => {
|
||||
public override render = (locId: string, allowHTML: boolean = false): unknown => {
|
||||
this._localizationId = locId // TODO Check current component for context (to infer the prefix)
|
||||
|
||||
this._allowUnsafeHTML = allowHTML
|
||||
@ -42,19 +41,20 @@ export class TranslationDirective extends AsyncDirective {
|
||||
return this._internalRender()
|
||||
}
|
||||
|
||||
_internalRender = () => {
|
||||
private readonly _internalRender = (): unknown => {
|
||||
return this._allowUnsafeHTML ? html`${unsafeHTML(this._translatedValue)}` : this._translatedValue
|
||||
}
|
||||
|
||||
_asyncUpdateTranslation = async () => {
|
||||
let newValue = await this._peertubeHelpers?.translate(this._localizationId) ?? ''
|
||||
private readonly _asyncUpdateTranslation = async (): Promise<true> => {
|
||||
const newValue = await this._peertubeHelpers?.translate(this._localizationId) ?? ''
|
||||
|
||||
if (newValue !== '' && newValue !== this._translatedValue) {
|
||||
this._translatedValue = newValue
|
||||
this.setValue(this._internalRender())
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
export const ptTr = directive(TranslationDirective)
|
||||
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
/* eslint no-fallthrough: "off" */
|
||||
|
||||
import { html, nothing, TemplateResult } from 'lit'
|
||||
import { repeat } from 'lit/directives/repeat.js'
|
||||
import { customElement, property, state } from 'lit/decorators.js'
|
||||
@ -9,43 +11,45 @@ import { ifDefined } from 'lit/directives/if-defined.js'
|
||||
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
|
||||
import { LivechatElement } from './livechat'
|
||||
|
||||
// This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
|
||||
// This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
|
||||
const AddSVG: string =
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square">
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="feather feather-plus-square">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line>
|
||||
</svg>`
|
||||
|
||||
// This content comes from the file assets/images/x-square.svg, from the Feather icons set https://feathericons.com/
|
||||
// This content comes from the file assets/images/x-square.svg, from the Feather icons set https://feathericons.com/
|
||||
const RemoveSVG: string =
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square">
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="feather feather-x-square">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line>
|
||||
</svg>`
|
||||
|
||||
|
||||
type DynamicTableAcceptedTypes = number | string | boolean | Date | Array<number | string>
|
||||
|
||||
type DynamicTableAcceptedInputTypes = 'textarea'
|
||||
| 'select'
|
||||
| 'checkbox'
|
||||
| 'range'
|
||||
| 'color'
|
||||
| 'date'
|
||||
| 'datetime'
|
||||
| 'datetime-local'
|
||||
| 'email'
|
||||
| 'file'
|
||||
| 'image'
|
||||
| 'month'
|
||||
| 'number'
|
||||
| 'password'
|
||||
| 'tel'
|
||||
| 'text'
|
||||
| 'time'
|
||||
| 'url'
|
||||
| 'week'
|
||||
|
||||
| 'select'
|
||||
| 'checkbox'
|
||||
| 'range'
|
||||
| 'color'
|
||||
| 'date'
|
||||
| 'datetime'
|
||||
| 'datetime-local'
|
||||
| 'email'
|
||||
| 'file'
|
||||
| 'image'
|
||||
| 'month'
|
||||
| 'number'
|
||||
| 'password'
|
||||
| 'tel'
|
||||
| 'text'
|
||||
| 'time'
|
||||
| 'url'
|
||||
| 'week'
|
||||
|
||||
interface CellDataSchema {
|
||||
min?: number
|
||||
@ -63,19 +67,17 @@ interface CellDataSchema {
|
||||
|
||||
@customElement('livechat-dynamic-table-form')
|
||||
export class DynamicTableFormElement extends LivechatElement {
|
||||
|
||||
@property({ attribute: false })
|
||||
public header: { [key: string]: { colName: TemplateResult, description: TemplateResult } } = {}
|
||||
|
||||
|
||||
@property({ attribute: false })
|
||||
public schema: { [key: string]: CellDataSchema } = {}
|
||||
|
||||
@property({ attribute: false })
|
||||
public rows: { [key: string]: DynamicTableAcceptedTypes }[] = []
|
||||
public rows: Array<{ [key: string]: DynamicTableAcceptedTypes }> = []
|
||||
|
||||
@state()
|
||||
public _rowsById: { _id: number; row: { [key: string]: DynamicTableAcceptedTypes } }[] = []
|
||||
public _rowsById: Array<{ _id: number, row: { [key: string]: DynamicTableAcceptedTypes } }> = []
|
||||
|
||||
@property({ attribute: false })
|
||||
public formName: string = ''
|
||||
@ -87,29 +89,28 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
private columnOrder: string[] = []
|
||||
|
||||
// fixes situations when list has been reinitialized or changed outside of CustomElement
|
||||
private _updateLastRowId = () => {
|
||||
for (let rowById of this._rowsById) {
|
||||
this._lastRowId = Math.max(this._lastRowId, rowById._id + 1);
|
||||
private readonly _updateLastRowId = (): void => {
|
||||
for (const rowById of this._rowsById) {
|
||||
this._lastRowId = Math.max(this._lastRowId, rowById._id + 1)
|
||||
}
|
||||
}
|
||||
|
||||
private _getDefaultRow = () : { [key: string]: DynamicTableAcceptedTypes } => {
|
||||
private readonly _getDefaultRow = (): { [key: string]: DynamicTableAcceptedTypes } => {
|
||||
this._updateLastRowId()
|
||||
return Object.fromEntries([...Object.entries(this.schema).map((entry) => [entry[0], entry[1].default ?? ''])])
|
||||
}
|
||||
|
||||
private _addRow = () => {
|
||||
let newRow = this._getDefaultRow()
|
||||
this._rowsById.push({_id:this._lastRowId++, row: newRow})
|
||||
private readonly _addRow = (): void => {
|
||||
const newRow = this._getDefaultRow()
|
||||
this._rowsById.push({ _id: this._lastRowId++, row: newRow })
|
||||
this.rows.push(newRow)
|
||||
this.requestUpdate('rows')
|
||||
this.requestUpdate('_rowsById')
|
||||
this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
|
||||
}
|
||||
|
||||
|
||||
private _removeRow = (rowId: number) => {
|
||||
let rowToRemove = this._rowsById.filter(rowById => rowById._id == rowId).map(rowById => rowById.row)[0]
|
||||
private readonly _removeRow = (rowId: number): void => {
|
||||
const rowToRemove = this._rowsById.filter(rowById => rowById._id === rowId).map(rowById => rowById.row)[0]
|
||||
this._rowsById = this._rowsById.filter(rowById => rowById._id !== rowId)
|
||||
this.rows = this.rows.filter((row) => row !== rowToRemove)
|
||||
this.requestUpdate('rows')
|
||||
@ -117,16 +118,16 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
|
||||
}
|
||||
|
||||
render = () => {
|
||||
protected override render = (): unknown => {
|
||||
const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-table`
|
||||
|
||||
this._updateLastRowId()
|
||||
|
||||
this._rowsById.filter(rowById => this.rows.includes(rowById.row))
|
||||
|
||||
for (let row of this.rows) {
|
||||
if (this._rowsById.filter(rowById => rowById.row === row).length == 0) {
|
||||
this._rowsById.push({_id: this._lastRowId++, row })
|
||||
for (const row of this.rows) {
|
||||
if (this._rowsById.filter(rowById => rowById.row === row).length === 0) {
|
||||
this._rowsById.push({ _id: this._lastRowId++, row })
|
||||
}
|
||||
}
|
||||
|
||||
@ -148,50 +149,68 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
`
|
||||
}
|
||||
|
||||
private _renderHeader = () => {
|
||||
private readonly _renderHeader = (): TemplateResult => {
|
||||
return html`<thead>
|
||||
<tr>
|
||||
${Object.entries(this.header).sort(([k1,_1], [k2,_2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
|
||||
.map(([k,v]) => this._renderHeaderCell(v))}
|
||||
${Object.entries(this.header)
|
||||
.sort(([k1, _1], [k2, _2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
|
||||
.map(([_, v]) => this._renderHeaderCell(v))}
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>`
|
||||
}
|
||||
|
||||
private _renderHeaderCell = (headerCellData: { colName: TemplateResult, description: TemplateResult }) => {
|
||||
private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult
|
||||
description: TemplateResult }): TemplateResult => {
|
||||
return html`<th scope="col">
|
||||
<div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}>${headerCellData.colName}</div>
|
||||
<div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}>
|
||||
${headerCellData.colName}
|
||||
</div>
|
||||
</th>`
|
||||
}
|
||||
|
||||
private _renderDataRow = (rowData: { _id: number; row: {[key: string]: DynamicTableAcceptedTypes} }) => {
|
||||
private readonly _renderDataRow = (rowData: { _id: number
|
||||
row: {[key: string]: DynamicTableAcceptedTypes} }): TemplateResult => {
|
||||
const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}`
|
||||
|
||||
return html`<tr id=${inputId}>
|
||||
${Object.keys(this.header).sort((k1, k2) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
|
||||
${Object.keys(this.header)
|
||||
.sort((k1, k2) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
|
||||
.map(k => this.renderDataCell([k, rowData.row[k] ?? this.schema[k].default], rowData._id))}
|
||||
<td class="form-group"><button type="button" class="peertube-button-link orange-button dynamic-table-remove-row" @click=${() => this._removeRow(rowData._id)}>${unsafeHTML(RemoveSVG)}</button></td>
|
||||
<td class="form-group">
|
||||
<button type="button"
|
||||
class="peertube-button-link orange-button dynamic-table-remove-row"
|
||||
@click=${() => this._removeRow(rowData._id)}>
|
||||
${unsafeHTML(RemoveSVG)}
|
||||
</button>
|
||||
</td>
|
||||
</tr>`
|
||||
|
||||
}
|
||||
|
||||
private _renderFooter = () => {
|
||||
private readonly _renderFooter = (): TemplateResult => {
|
||||
return html`<tfoot>
|
||||
<tr>
|
||||
${Object.values(this.header).map(() => html`<td></td>`)}
|
||||
<td><button type="button" class="peertube-button-link orange-button dynamic-table-add-row" @click=${this._addRow}>${unsafeHTML(AddSVG)}</button></td>
|
||||
<td>
|
||||
<button type="button"
|
||||
class="peertube-button-link orange-button dynamic-table-add-row"
|
||||
@click=${this._addRow}>
|
||||
${unsafeHTML(AddSVG)}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>`
|
||||
}
|
||||
|
||||
renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number) => {
|
||||
renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number): TemplateResult => {
|
||||
let [propertyName, propertyValue] = property
|
||||
const propertySchema = this.schema[propertyName] ?? {}
|
||||
|
||||
let formElement
|
||||
|
||||
const inputName = `${this.formName.replace(/-/g, '_')}_${propertyName.toString().replace(/-/g, '_')}_${rowId}`
|
||||
const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-${propertyName.toString().replace(/_/g, '-')}-${rowId}`
|
||||
const inputId =
|
||||
`peertube-livechat-${this.formName.replace(/_/g, '-')}-${propertyName.toString().replace(/_/g, '-')}-${rowId}`
|
||||
|
||||
switch (propertySchema.default?.constructor) {
|
||||
case String:
|
||||
@ -215,15 +234,30 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
case 'time':
|
||||
case 'url':
|
||||
case 'week':
|
||||
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
|
||||
formElement = this._renderInput(rowId,
|
||||
inputId,
|
||||
inputName,
|
||||
propertyName,
|
||||
propertySchema,
|
||||
propertyValue as string)
|
||||
break
|
||||
|
||||
case 'textarea':
|
||||
formElement = this._renderTextarea(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
|
||||
formElement = this._renderTextarea(rowId,
|
||||
inputId,
|
||||
inputName,
|
||||
propertyName,
|
||||
propertySchema,
|
||||
propertyValue as string)
|
||||
break
|
||||
|
||||
case 'select':
|
||||
formElement = this._renderSelect(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
|
||||
formElement = this._renderSelect(rowId,
|
||||
inputId,
|
||||
inputName,
|
||||
propertyName,
|
||||
propertySchema,
|
||||
propertyValue as string)
|
||||
break
|
||||
}
|
||||
break
|
||||
@ -237,7 +271,12 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
case 'datetime':
|
||||
case 'datetime-local':
|
||||
case 'time':
|
||||
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, (propertyValue as Date).toISOString())
|
||||
formElement = this._renderInput(rowId,
|
||||
inputId,
|
||||
inputName,
|
||||
propertyName,
|
||||
propertySchema,
|
||||
(propertyValue as Date).toISOString())
|
||||
break
|
||||
}
|
||||
break
|
||||
@ -249,7 +288,12 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
|
||||
case 'number':
|
||||
case 'range':
|
||||
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
|
||||
formElement = this._renderInput(rowId,
|
||||
inputId,
|
||||
inputName,
|
||||
propertyName,
|
||||
propertySchema,
|
||||
propertyValue as string)
|
||||
break
|
||||
}
|
||||
break
|
||||
@ -260,7 +304,12 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
propertySchema.inputType = 'checkbox'
|
||||
|
||||
case 'checkbox':
|
||||
formElement = this._renderCheckbox(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as boolean)
|
||||
formElement = this._renderCheckbox(rowId,
|
||||
inputId,
|
||||
inputName,
|
||||
propertyName,
|
||||
propertySchema,
|
||||
propertyValue as boolean)
|
||||
break
|
||||
}
|
||||
break
|
||||
@ -290,27 +339,32 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
propertyValue = (propertyValue) ? [propertyValue as (number | string)] : []
|
||||
}
|
||||
formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema,
|
||||
(propertyValue as Array<number | string>)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
|
||||
(propertyValue)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
|
||||
break
|
||||
case 'textarea':
|
||||
if (propertyValue.constructor !== Array) {
|
||||
propertyValue = (propertyValue) ? [propertyValue as (number | string)] : []
|
||||
}
|
||||
formElement = this._renderTextarea(rowId, inputId, inputName, propertyName, propertySchema,
|
||||
(propertyValue as Array<number | string>)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
|
||||
(propertyValue)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!formElement) {
|
||||
console.warn(`value type '${propertyValue.constructor}' is incompatible`
|
||||
+ `with field type '${propertySchema.inputType}' for form entry '${propertyName.toString()}'.`)
|
||||
console.warn(`value type '${(propertyValue.constructor.toString())}' is incompatible` +
|
||||
`with field type '${propertySchema.inputType as string}' for form entry '${propertyName.toString()}'.`)
|
||||
}
|
||||
|
||||
return html`<td class="form-group">${formElement}</td>`
|
||||
}
|
||||
|
||||
_renderInput = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
|
||||
_renderInput = (rowId: number,
|
||||
inputId: string,
|
||||
inputName: string,
|
||||
propertyName: string,
|
||||
propertySchema: CellDataSchema,
|
||||
propertyValue: string): TemplateResult => {
|
||||
return html`<input
|
||||
type=${propertySchema.inputType}
|
||||
name=${inputName}
|
||||
@ -324,13 +378,20 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
@change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
|
||||
.value=${propertyValue}
|
||||
/>
|
||||
${(propertySchema.datalist) ? html`<datalist id=${inputId + '-datalist'}>
|
||||
${(propertySchema.datalist)
|
||||
? html`<datalist id=${inputId + '-datalist'}>
|
||||
${(propertySchema.datalist ?? []).map((value) => html`<option value=${value} />`)}
|
||||
</datalist>` : nothing}
|
||||
</datalist>`
|
||||
: nothing}
|
||||
`
|
||||
}
|
||||
|
||||
_renderTextarea = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
|
||||
_renderTextarea = (rowId: number,
|
||||
inputId: string,
|
||||
inputName: string,
|
||||
propertyName: string,
|
||||
propertySchema: CellDataSchema,
|
||||
propertyValue: string): TemplateResult => {
|
||||
return html`<textarea
|
||||
name=${inputName}
|
||||
class="form-control"
|
||||
@ -344,7 +405,12 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
></textarea>`
|
||||
}
|
||||
|
||||
_renderCheckbox = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: boolean) => {
|
||||
_renderCheckbox = (rowId: number,
|
||||
inputId: string,
|
||||
inputName: string,
|
||||
propertyName: string,
|
||||
propertySchema: CellDataSchema,
|
||||
propertyValue: boolean): TemplateResult => {
|
||||
return html`<input
|
||||
type="checkbox"
|
||||
name=${inputName}
|
||||
@ -356,7 +422,12 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
/>`
|
||||
}
|
||||
|
||||
_renderSelect = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
|
||||
_renderSelect = (rowId: number,
|
||||
inputId: string,
|
||||
inputName: string,
|
||||
propertyName: string,
|
||||
propertySchema: CellDataSchema,
|
||||
propertyValue: string): TemplateResult => {
|
||||
return html`<select
|
||||
class="form-select"
|
||||
aria-label="Default select example"
|
||||
@ -370,13 +441,19 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
</select>`
|
||||
}
|
||||
|
||||
|
||||
_updatePropertyFromValue = (event: Event, propertyName: string, propertySchema: CellDataSchema, rowId: number) => {
|
||||
let target = event.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)
|
||||
let value = (target) ? (target instanceof HTMLInputElement && target.type == "checkbox") ? !!(target.checked) : target.value : undefined
|
||||
_updatePropertyFromValue = (event: Event,
|
||||
propertyName: string,
|
||||
propertySchema: CellDataSchema,
|
||||
rowId: number): undefined => {
|
||||
const target = event.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)
|
||||
const value = (target)
|
||||
? (target instanceof HTMLInputElement && target.type === 'checkbox')
|
||||
? !!(target.checked)
|
||||
: target.value
|
||||
: undefined
|
||||
|
||||
if (value !== undefined) {
|
||||
for (let rowById of this._rowsById) {
|
||||
for (const rowById of this._rowsById) {
|
||||
if (rowById._id === rowId) {
|
||||
switch (propertySchema.default?.constructor) {
|
||||
case Array:
|
||||
@ -397,9 +474,8 @@ export class DynamicTableFormElement extends LivechatElement {
|
||||
}
|
||||
|
||||
console.warn(`Could not update property : Did not find a property named '${propertyName}' in row '${rowId}'`)
|
||||
}
|
||||
else {
|
||||
console.warn(`Could not update property : Target or value was undefined`)
|
||||
} else {
|
||||
console.warn('Could not update property : Target or value was undefined')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,6 @@ import { LivechatElement } from './livechat'
|
||||
|
||||
@customElement('livechat-help-button')
|
||||
export class HelpButtonElement extends LivechatElement {
|
||||
|
||||
@consume({ context: registerClientOptionsContext, subscribe: true })
|
||||
public registerClientOptions: RegisterClientOptions | undefined
|
||||
|
||||
@ -30,14 +29,16 @@ export class HelpButtonElement extends LivechatElement {
|
||||
@state()
|
||||
public url: URL = new URL('https://lmddgtfy.net/')
|
||||
|
||||
private _asyncTaskRender = new Task(this, {
|
||||
task: async ([registerClientOptions], {signal}) => {
|
||||
this.url = new URL(registerClientOptions ? await localizedHelpUrl(registerClientOptions, { page: this.page }) : '')
|
||||
private readonly _asyncTaskRender = new Task(this, {
|
||||
task: async ([registerClientOptions]) => {
|
||||
this.url = new URL(registerClientOptions
|
||||
? await localizedHelpUrl(registerClientOptions, { page: this.page })
|
||||
: '')
|
||||
},
|
||||
args: () => [this.registerClientOptions]
|
||||
});
|
||||
})
|
||||
|
||||
render() {
|
||||
protected override render = (): unknown => {
|
||||
return this._asyncTaskRender.render({
|
||||
complete: () => html`<a
|
||||
href="${this.url.href}"
|
||||
|
||||
@ -8,7 +8,7 @@ import { LitElement } from 'lit'
|
||||
* Base class for all Custom Elements.
|
||||
*/
|
||||
export class LivechatElement extends LitElement {
|
||||
protected createRenderRoot = () => {
|
||||
protected override createRenderRoot = (): Element | ShadowRoot => {
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user