Your IP : 216.73.216.86
import { Dom, Tag, Text } from 'main.core';
import { BaseField } from 'ui.form-elements.view';
type FieldParams = {
fieldName: string,
setting: Object,
value: string,
};
export default class ReservationMode extends BaseField
{
defaultValue: string;
#mode: FieldParams;
#period: FieldParams;
constructor(params)
{
super(params);
this.#mode = params.mode;
this.#period = params.period;
}
prefixId(): string
{
return 'reservation_';
}
renderContentField(): HTMLElement
{
return Tag.render`
<div id="${this.getId()}" class="ui-section__field-selector --field-separator">
<div class="ui-section__field-container">
<div class="ui-section__field-inline-box">
<label class="ui-section__field-label" for="${this.#mode.fieldName}">${this.#mode.setting.name}</label>
<div class="ui-section__field-inline-label-separator"></div>
<label class="ui-section__field-label" for="${this.#period.fieldName}">${this.#period.setting.name}</label>
</div>
<div class="ui-section__field-inline-box">
<div class="ui-section__field">
<div class="${this.#getModeSelectorClasses()}">
<div class="ui-ctl-after ui-ctl-icon-angle"></div>
${this.#buildModeSelector()}
</div>
</div>
<div class="ui-section__field-inline-separator"></div>
<div class="${this.#getPeriodClasses()}">
${this.#buildPeriodInput()}
</div>
</div>
</div>
</div>
`;
}
#getModeSelectorClasses(): string
{
let result = 'ui-ctl ui-ctl-w100 ui-ctl-after-icon ui-ctl-dropdown';
if (this.#mode.setting.disabled)
{
result += ' ui-ctl-disabled';
}
return result;
}
#buildModeSelector(): HTMLElement
{
const options = [];
for (const { code, name } of this.#mode.setting.values)
{
let selectedAttr = '';
if (code === this.#mode.value)
{
selectedAttr = 'selected';
}
options.push(Tag.render`<option ${selectedAttr} value="${code}">${name}</option>`);
}
const selector = Dom.create('select', {
attrs: {
class: 'ui-ctl-element',
disabled: this.#mode.setting.disabled,
},
children: options,
});
selector.name = this.#mode.fieldName;
return selector;
}
#getPeriodClasses(): string
{
let result = 'ui-section__hint';
if (this.#period.setting.disabled)
{
result += ' ui-ctl-disabled';
}
return result;
}
#buildPeriodInput(): HTMLElement
{
const periodInput = Tag.render`
<input
value="${Text.encode(this.#period.value)}"
name="${this.#period.fieldName}"
type="text"
class="ui-ctl-element"
>
`;
if (this.#period.setting.disabled)
{
periodInput.disabled = true;
}
return periodInput;
}
}