ernestlitvinenko
/
jde-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: ernestlitvinenko:master
Branches Tags
ernestlitvinenko:feature/star
ernestlitvinenko:master
ernestlitvinenko:feature/component
...
pull from: ernestlitvinenko:feature/component
Branches Tags
ernestlitvinenko:feature/star
ernestlitvinenko:master
ernestlitvinenko:feature/component

1 Commits
master ... feature/co

Author SHA1 Message Date
Ernest Litvinenko f2deb92086 Trying to make JQuery Component reactivity 2023-11-15 15:42:51 +03:00
3 changed files with 276 additions and 131 deletions
Show Stats Expand all files Collapse all files

394
src/block.ts
View File

@ -1,149 +1,255 @@
import {BlockPropsType, QueryBlockType} from "./types.ts"; import {BlocksDataValueType, QueryBlockType} from "./types.ts";
import $ from "jquery"; // import $ from "jquery";
import {Component} from "./library/Component.ts";
class Block extends Component {
component(props: BlocksDataValueType): string {
return `
<div class="border-2 border-primary rounded px-2 py-4 shadow-xl office mb-4 office-block">
<div class="flex justify-between mb-2">
<div>
<h2 class="text-lg">${this.props!.title}</h2>
<span class="text-base opacity-50">${this.props!.addr}</span>
</div>
<div>
<span class="text-sm sm:text-base font-bold block">${this.props!.code}</span>
<span class="text-sm sm:text-base opacity-50">КЛАДР: ${this.props!.kladr_code}</span>
</div>
</div>
<hr />
<div class="hidden office-block__additional-info">
<div>
<span class="font-bold">
Обрабатываемые транспортные средства:
</span>
<div>
<ul class="[&_li]:text-primary [&_li]:font-bold [&_li]:pl-2">
Не указано
</ul>
</div>
</div>
<div>
<span class="font-bold">Прием/Выдача груза осуществляется только путем автоэкспедирования (забора/доставки)</span>
<span class="text-primary font-bold">${this.props!.aex_only}</span>
</div>
<div>
<span class="font-bold">Наличие услуги автоэкспедирования на станции</span>
<span class="text-primary font-bold">${this.props!.mst_pr_aex}</span>
</div>
<div>
<span class="font-bold">Виртуальный склад</span>
<span class="text-primary font-bold">${this.props!.mst_pr_virt}</span>
</div>
<div>
<span class="font-bold">Максимальный вес по ТТН: <span class="text-primary font-bold">${this.props!.max_ves}</span>, кг</span>
</div>
<div>
<span class="font-bold">Максимальный объем по ТТН: <span class="text-primary font-bold">${this.props!.max_obyom}</span>, м3</span>
</div>
<div>
<span class="font-bold">Максимальный вес 1 усредненного груза: <span class="text-primary">${this.props!.max_ves_gm}</span>, кг</span>
</div>
<div>
<span class="font-bold">Максимальный объем 1 усредненного груза: <span class="text-primary">${this.props!.max_obyom_gm}</span>, м3</span>
</div>
<div>
<span class="font-bold">Максимальные габариты груза</span>
<p>Длина: <span class="text-primary font-bold">${this.props!.max_l_gm}</span>, м</p>
<p>Ширина: <span class="text-primary font-bold">${this.props!.max_w_gm}</span>, м</p>
<p>Высота: <span class="text-primary font-bold">${this.props!.max_h_gm}</span>, м</p>
</div>
<div>
<span class="font-bold">Количество сотрудников</span>
<div class="inline-flex items-center">
<span class="text-primary font-bold">${this.props!.person_count}</span>, чел
</div>
</div>
const Block = (props: BlockPropsType) => { <div>
const query: QueryBlockType = { <span class="block font-bold">Особые условия работы филиала</span>
aex_only: props.aex_only === '1' ? 'Да' : 'Нет', <div class="inline-flex items-center">
mst_pr_aex: props.mst_pr_aex === '1' ? 'Да' : 'Нет', <p>${this.props!.features}</p>
mst_pr_virt: props.mst_pr_virt === '1' ? 'Да' : 'Нет', </div>
max_ves: props.max_ves === '0' ? 'Не установлено' : props.max_ves, </div>
max_obyom: props.max_obyom === '0' ? 'Не установлено' : props.max_obyom,
max_ves_gm: props.max_ves_gm === '0' ? 'Не установлено' : props.max_ves_gm, <div>
max_obyom_gm: props.max_obyom_gm === '0' ? 'Не установлено' : props.max_obyom_gm, <span class="block font-bold">Контактное лицо</span>
max_l_gm: props.max_l_gm === '0' ? 'Не установлено' : props.max_l_gm, <div class="">
max_w_gm: props.max_w_gm === '0' ? 'Не установлено' : props.max_w_gm, ${this.props!.contact_profile ?
max_h_gm: props.max_h_gm === '0' ? 'Не установлено' : props.max_h_gm, `
person_count: 'Не установлено', <p>${this.props!.contact_profile && this.props!.contact_profile.fullName}</p>
features: props.features || '', <p>${this.props!.contact_profile && this.props!.contact_profile.phone}</p>
contact_profile: null, <p>${this.props!.contact_profile && this.props!.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
features_changeable: ""
</div>
</div>
<div>
<span class="block font-bold">Особенности филиала</span>
<div class="inline-flex items-center">
<textarea class="block border-primary border-2 px-4 py-2 disabled:border-[1px] disabled:border-[#a2a2a2] mb-4" cols="30" disabled>${this.props!.changeable_info ? this.props!.changeable_info.features || '' : ''}</textarea>
</div>
</div>
<button class="bg-primary text-white font-bold px-4 py-2 text-sm w-full">Изменить</button>
</div>
</div>`
} }
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 = `<div class="border-2 border-primary rounded px-2 py-4 shadow-xl office mb-4 office-block">
<div class="flex justify-between mb-2">
<div>
<h2 class="text-lg">${props.title}</h2>
<span class="text-base opacity-50">${props.addr}</span>
</div>
<div>
<span class="text-sm sm:text-base font-bold block">${props.code}</span>
<span class="text-sm sm:text-base opacity-50">КЛАДР: ${props.kladr_code}</span>
</div>
</div>
<hr />
<div class="hidden office-block__additional-info">
<div>
<span class="font-bold">
Обрабатываемые транспортные средства:
</span>
<div>
<ul class="[&_li]:text-primary [&_li]:font-bold [&_li]:pl-2">
Не указано
</ul>
</div>
</div>
<div>
<span class="font-bold">Прием/Выдача груза осуществляется только путем автоэкспедирования (забора/доставки)</span>
<span class="text-primary font-bold">${query.aex_only}</span>
</div>
<div>
<span class="font-bold">Наличие услуги автоэкспедирования на станции</span>
<span class="text-primary font-bold">${query.mst_pr_aex}</span>
</div>
<div>
<span class="font-bold">Виртуальный склад</span>
<span class="text-primary font-bold">${query.mst_pr_virt}</span>
</div>
<div>
<span class="font-bold">Максимальный вес по ТТН: <span class="text-primary font-bold">${query.max_ves}</span>, кг</span>
</div>
<div>
<span class="font-bold">Максимальный объем по ТТН: <span class="text-primary font-bold">${query.max_obyom}</span>, м3</span>
</div>
<div>
<span class="font-bold">Максимальный вес 1 усредненного груза: <span class="text-primary">${query.max_ves_gm}</span>, кг</span>
</div>
<div>
<span class="font-bold">Максимальный объем 1 усредненного груза: <span class="text-primary">${query.max_obyom_gm}</span>, м3</span>
</div>
<div>
<span class="font-bold">Максимальные габариты груза</span>
<p>Длина: <span class="text-primary font-bold">${query.max_l_gm}</span>, м</p>
<p>Ширина: <span class="text-primary font-bold">${query.max_w_gm}</span>, м</p>
<p>Высота: <span class="text-primary font-bold">${query.max_h_gm}</span>, м</p>
</div>
<div>
<span class="font-bold">Количество сотрудников</span>
<div class="inline-flex items-center">
<span class="text-primary font-bold">${query.person_count}</span>, чел
</div>
</div>
<div>
<span class="block font-bold">Особые условия работы филиала</span>
<div class="inline-flex items-center">
<p>${props.features}</p>
</div>
</div>
<div>
<span class="block font-bold">Контактное лицо</span>
<div class="">
${query.contact_profile ?
`
<p>${query.contact_profile && query.contact_profile.fullName}</p>
<p>${query.contact_profile && query.contact_profile.phone}</p>
<p>${query.contact_profile && query.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
</div>
</div>
<div>
<span class="block font-bold">Особенности филиала</span>
<div class="inline-flex items-center">
<textarea class="block border-primary border-2 px-4 py-2 disabled:border-[1px] disabled:border-[#a2a2a2] mb-4" cols="30" disabled>${props.changeable_info ? props.changeable_info.features || '' : ''}</textarea>
</div>
</div>
<button class="bg-primary text-white font-bold px-4 py-2 text-sm w-full">Изменить</button>
</div>
</div>`
return str
} }
export const toggleBlocks = (element: JQuery<HTMLElement>) => { // const Block = (props: BlockPropsType) => {
const jqSelector = '.office-block.active .office-block__additional-info' // const query: QueryBlockType = {
// aex_only: props.aex_only === '1' ? 'Да' : 'Нет',
$(jqSelector).addClass('hidden') // mst_pr_aex: props.mst_pr_aex === '1' ? 'Да' : 'Нет',
$('.office-block.active').toggleClass('active') // mst_pr_virt: props.mst_pr_virt === '1' ? 'Да' : 'Нет',
// max_ves: props.max_ves === '0' ? 'Не установлено' : props.max_ves,
element.toggleClass('active') // max_obyom: props.max_obyom === '0' ? 'Не установлено' : props.max_obyom,
$(jqSelector).removeClass('hidden') // 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,
export default Block // 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 = `<div class="border-2 border-primary rounded px-2 py-4 shadow-xl office mb-4 office-block">
// <div class="flex justify-between mb-2">
// <div>
// <h2 class="text-lg">${props.title}</h2>
// <span class="text-base opacity-50">${props.addr}</span>
// </div>
// <div>
// <span class="text-sm sm:text-base font-bold block">${props.code}</span>
// <span class="text-sm sm:text-base opacity-50">КЛАДР: ${props.kladr_code}</span>
// </div>
// </div>
//
// <hr />
// <div class="hidden office-block__additional-info">
// <div>
// <span class="font-bold">
// Обрабатываемые транспортные средства:
// </span>
// <div>
// <ul class="[&_li]:text-primary [&_li]:font-bold [&_li]:pl-2">
// Не указано
// </ul>
// </div>
// </div>
//
// <div>
// <span class="font-bold">Прием/Выдача груза осуществляется только путем автоэкспедирования (забора/доставки)</span>
// <span class="text-primary font-bold">${query.aex_only}</span>
// </div>
// <div>
// <span class="font-bold">Наличие услуги автоэкспедирования на станции</span>
// <span class="text-primary font-bold">${query.mst_pr_aex}</span>
// </div>
// <div>
// <span class="font-bold">Виртуальный склад</span>
// <span class="text-primary font-bold">${query.mst_pr_virt}</span>
// </div>
//
// <div>
// <span class="font-bold">Максимальный вес по ТТН: <span class="text-primary font-bold">${query.max_ves}</span>, кг</span>
// </div>
//
// <div>
// <span class="font-bold">Максимальный объем по ТТН: <span class="text-primary font-bold">${query.max_obyom}</span>, м3</span>
// </div>
// <div>
// <span class="font-bold">Максимальный вес 1 усредненного груза: <span class="text-primary">${query.max_ves_gm}</span>, кг</span>
// </div>
// <div>
// <span class="font-bold">Максимальный объем 1 усредненного груза: <span class="text-primary">${query.max_obyom_gm}</span>, м3</span>
// </div>
// <div>
// <span class="font-bold">Максимальные габариты груза</span>
// <p>Длина: <span class="text-primary font-bold">${query.max_l_gm}</span>, м</p>
// <p>Ширина: <span class="text-primary font-bold">${query.max_w_gm}</span>, м</p>
// <p>Высота: <span class="text-primary font-bold">${query.max_h_gm}</span>, м</p>
// </div>
//
// <div>
// <span class="font-bold">Количество сотрудников</span>
// <div class="inline-flex items-center">
// <span class="text-primary font-bold">${query.person_count}</span>, чел
// </div>
// </div>
//
//
// <div>
// <span class="block font-bold">Особые условия работы филиала</span>
// <div class="inline-flex items-center">
// <p>${props.features}</p>
// </div>
// </div>
//
// <div>
// <span class="block font-bold">Контактное лицо</span>
// <div class="">
// ${query.contact_profile ?
// `
// <p>${query.contact_profile && query.contact_profile.fullName}</p>
// <p>${query.contact_profile && query.contact_profile.phone}</p>
// <p>${query.contact_profile && query.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
//
//
//
//
// </div>
// </div>
//
// <div>
// <span class="block font-bold">Особенности филиала</span>
// <div class="inline-flex items-center">
// <textarea class="block border-primary border-2 px-4 py-2 disabled:border-[1px] disabled:border-[#a2a2a2] mb-4" cols="30" disabled>${props.changeable_info ? props.changeable_info.features || '' : ''}</textarea>
// </div>
// </div>
// <button class="bg-primary text-white font-bold px-4 py-2 text-sm w-full">Изменить</button>
// </div>
//
//
// </div>`
// return str
// }
//
// export const toggleBlocks = (element: JQuery<HTMLElement>) => {
// 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

39
src/library/Component.ts Normal file
View File

@ -0,0 +1,39 @@
export type ComponentProps = {
[x: string]: any
children?: JQuery<HTMLElement>[]
}
export class Component {
_element: JQuery<HTMLElement> | undefined
props: ComponentProps | undefined
constructor(props: ComponentProps) {
this.props = new Proxy<ComponentProps>({...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<HTMLElement>) {
this.render()
element.append(this._element)
}
}

2
src/types.ts
View File

@ -1,6 +1,6 @@
import {ListOfficesResponse} from './backend/types.ts' import {ListOfficesResponse} from './backend/types.ts'
export type BlocksDataValueType = { export type BlocksDataValueType = {
block: JQuery<HTMLElement>, block: JQuery<HTMLElement>,
data: ListOfficesResponse[0] data: ListOfficesResponse[0]
} }