diff --git a/src/block.ts b/src/block.ts index 6cdccec..78ee88b 100644 --- a/src/block.ts +++ b/src/block.ts @@ -1,149 +1,255 @@ -import {BlockPropsType, QueryBlockType} from "./types.ts"; -import $ from "jquery"; +import {BlocksDataValueType, QueryBlockType} from "./types.ts"; +// import $ from "jquery"; +import {Component} from "./library/Component.ts"; -const Block = (props: BlockPropsType) => { - const query: QueryBlockType = { - aex_only: props.aex_only === '1' ? 'Да' : 'Нет', - mst_pr_aex: props.mst_pr_aex === '1' ? 'Да' : 'Нет', - mst_pr_virt: props.mst_pr_virt === '1' ? 'Да' : 'Нет', - max_ves: props.max_ves === '0' ? 'Не установлено' : props.max_ves, - max_obyom: props.max_obyom === '0' ? 'Не установлено' : props.max_obyom, - max_ves_gm: props.max_ves_gm === '0' ? 'Не установлено' : props.max_ves_gm, - max_obyom_gm: props.max_obyom_gm === '0' ? 'Не установлено' : props.max_obyom_gm, - max_l_gm: props.max_l_gm === '0' ? 'Не установлено' : props.max_l_gm, - max_w_gm: props.max_w_gm === '0' ? 'Не установлено' : props.max_w_gm, - max_h_gm: props.max_h_gm === '0' ? 'Не установлено' : props.max_h_gm, - person_count: 'Не установлено', - features: props.features || '', - contact_profile: null, - features_changeable: "" - } +class Block extends Component { + component(props: BlocksDataValueType): string { + return ` +
+
+
+

${this.props!.title}

+ ${this.props!.addr} +
+
+ ${this.props!.code} + КЛАДР: ${this.props!.kladr_code} +
+
- if (props.changeable_info) { - query.person_count = `${props.changeable_info.person_count}` || query.person_count - query.features_changeable = `${props.changeable_info.features}` || '' - if (props.changeable_info.contact_person) { - query.contact_profile = { - id: props.changeable_info.contact_person.id!, - fullName: props.changeable_info.contact_person.full_name!, - email: props.changeable_info.contact_person.email!, - phone: props.changeable_info.contact_person.phone! - } +
+ ` - return str +
` + } } -export const toggleBlocks = (element: JQuery) => { - const jqSelector = '.office-block.active .office-block__additional-info' - - $(jqSelector).addClass('hidden') - $('.office-block.active').toggleClass('active') - - element.toggleClass('active') - $(jqSelector).removeClass('hidden') -} - -export default Block \ No newline at end of file +// const Block = (props: BlockPropsType) => { +// const query: QueryBlockType = { +// aex_only: props.aex_only === '1' ? 'Да' : 'Нет', +// mst_pr_aex: props.mst_pr_aex === '1' ? 'Да' : 'Нет', +// mst_pr_virt: props.mst_pr_virt === '1' ? 'Да' : 'Нет', +// max_ves: props.max_ves === '0' ? 'Не установлено' : props.max_ves, +// max_obyom: props.max_obyom === '0' ? 'Не установлено' : props.max_obyom, +// max_ves_gm: props.max_ves_gm === '0' ? 'Не установлено' : props.max_ves_gm, +// max_obyom_gm: props.max_obyom_gm === '0' ? 'Не установлено' : props.max_obyom_gm, +// max_l_gm: props.max_l_gm === '0' ? 'Не установлено' : props.max_l_gm, +// max_w_gm: props.max_w_gm === '0' ? 'Не установлено' : props.max_w_gm, +// max_h_gm: props.max_h_gm === '0' ? 'Не установлено' : props.max_h_gm, +// person_count: 'Не установлено', +// features: props.features || '', +// contact_profile: null, +// features_changeable: "" +// } +// +// if (props.changeable_info) { +// query.person_count = `${props.changeable_info.person_count}` || query.person_count +// query.features_changeable = `${props.changeable_info.features}` || '' +// if (props.changeable_info.contact_person) { +// query.contact_profile = { +// id: props.changeable_info.contact_person.id!, +// fullName: props.changeable_info.contact_person.full_name!, +// email: props.changeable_info.contact_person.email!, +// phone: props.changeable_info.contact_person.phone! +// } +// +// } +// +// } +// const str = `
+//
+//
+//

${props.title}

+// ${props.addr} +//
+//
+// ${props.code} +// КЛАДР: ${props.kladr_code} +//
+//
+// +//
+// +// +// +//
` +// return str +// } +// +// export const toggleBlocks = (element: JQuery) => { +// const jqSelector = '.office-block.active .office-block__additional-info' +// +// $(jqSelector).addClass('hidden') +// $('.office-block.active').toggleClass('active') +// +// element.toggleClass('active') +// $(jqSelector).removeClass('hidden') +// } +// +// export default Block \ No newline at end of file diff --git a/src/library/Component.ts b/src/library/Component.ts new file mode 100644 index 0000000..b8d4fbb --- /dev/null +++ b/src/library/Component.ts @@ -0,0 +1,39 @@ +export type ComponentProps = { + [x: string]: any + children?: JQuery[] +} + +export class Component { + _element: JQuery | undefined + props: ComponentProps | undefined + + constructor(props: ComponentProps) { + this.props = new Proxy({...props}, { + set: (target: ComponentProps, p: string, newValue: any): boolean => { + target[p] = newValue + this.rerender() + return true + } + }) + } + + component(): string { + return `` + } + rerender() { + const component = $(this.component()) + this._element.replaceWith(component) + this._element = component + } + + render() { + this._element = $(this.component()) + this.props?.children && this._element.append(...this.props.children) + } + + mount(element: JQuery) { + this.render() + element.append(this._element) + } + +} \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index ed22005..fb14c0c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,6 +1,6 @@ import {ListOfficesResponse} from './backend/types.ts' -export type BlocksDataValueType = { +export type BlocksDataValueType = { block: JQuery, data: ListOfficesResponse[0] }