Compare commits
1 Commits
feature/co
...
master
| Author | SHA1 | Date |
|---|---|---|
Ernest Litvinenko
|
5c3c2d39ad |
|
|
@ -24,6 +24,7 @@
|
|||
<h1 class="text-base sm:text-xl font-mania flex-1 text-center">Список филиалов</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="block sm:flex container">
|
||||
<aside class="w-full sm:w-1/2 mr-8 shadow-2xl text-black text-base
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"@types/react": "^18.2.33",
|
||||
"axios": "^1.6.0",
|
||||
"flexsearch": "^0.7.31",
|
||||
"izitoast": "^1.4.0",
|
||||
"jquery": "^3.7.1",
|
||||
"lodash": "^4.17.21",
|
||||
"node-html-parser": "^6.1.11"
|
||||
|
|
|
|||
|
|
@ -36,6 +36,11 @@ class Office extends BaseHandler {
|
|||
async update_office(office: UpdateOfficeRequest) {
|
||||
await this.instance.post('offices/', office)
|
||||
}
|
||||
|
||||
async getById(idx: string | number) {
|
||||
const {data} = await this.instance.get<ListOfficesResponse[0]>(`offices/${idx}`)
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
class Profile extends BaseHandler {
|
||||
|
|
@ -44,9 +49,16 @@ class Profile extends BaseHandler {
|
|||
return data
|
||||
}
|
||||
async getById(idx: string | number): Promise<ListProfilesResponse> {
|
||||
const {data} = await this.instance.get<ListProfilesResponse>(`profile/${idx}`)
|
||||
const {data} = await this.instance.get<ListProfilesResponse>(`profiles/${idx}`)
|
||||
return data
|
||||
}
|
||||
async createUser(profile: { full_name: string, phone: string, email: string }) {
|
||||
return (await this.instance.post('profiles/', profile)).data
|
||||
}
|
||||
|
||||
async updateUser(profile: {id: number, full_name: string, phone: string, email: string}) {
|
||||
await this.instance.post('profiles/', profile)
|
||||
}
|
||||
}
|
||||
|
||||
export default new Backend()
|
||||
260
src/block.ts
260
src/block.ts
|
|
@ -1,20 +1,66 @@
|
|||
import {BlocksDataValueType, QueryBlockType} from "./types.ts";
|
||||
// import $ from "jquery";
|
||||
import {BlockPropsType, QueryBlockType} from "./types.ts";
|
||||
import $ from "jquery";
|
||||
|
||||
import {Component} from "./library/Component.ts";
|
||||
function generateStars(rating: number) {
|
||||
let str = ''
|
||||
for (let i = 0; i < rating; i++) {
|
||||
str += '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
|
||||
'<path d="M5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>\n' +
|
||||
'</svg>'
|
||||
}
|
||||
for (let i = rating; i < 5; i++) {
|
||||
str += '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
|
||||
'<path d="M8.85 17.825L12 15.925L15.15 17.85L14.325 14.25L17.1 11.85L13.45 11.525L12 8.125L10.55 11.5L6.9 11.825L9.675 14.25L8.85 17.825ZM5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>\n' +
|
||||
'</svg>'
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
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">
|
||||
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}` || ''
|
||||
query.rating = `${props.changeable_info.rating}`
|
||||
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">${this.props!.title}</h2>
|
||||
<span class="text-base opacity-50">${this.props!.addr}</span>
|
||||
<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">${this.props!.code}</span>
|
||||
<span class="text-sm sm:text-base opacity-50">КЛАДР: ${this.props!.kladr_code}</span>
|
||||
<span class="flex">
|
||||
${generateStars(query.rating)}
|
||||
</span>
|
||||
<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>
|
||||
|
||||
|
|
@ -33,41 +79,41 @@ class Block extends Component {
|
|||
|
||||
<div>
|
||||
<span class="font-bold">Прием/Выдача груза осуществляется только путем автоэкспедирования (забора/доставки)</span>
|
||||
<span class="text-primary font-bold">${this.props!.aex_only}</span>
|
||||
<span class="text-primary font-bold">${query.aex_only}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold">Наличие услуги автоэкспедирования на станции</span>
|
||||
<span class="text-primary font-bold">${this.props!.mst_pr_aex}</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">${this.props!.mst_pr_virt}</span>
|
||||
<span class="text-primary font-bold">${query.mst_pr_virt}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="font-bold">Максимальный вес по ТТН: <span class="text-primary font-bold">${this.props!.max_ves}</span>, кг</span>
|
||||
<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">${this.props!.max_obyom}</span>, м3</span>
|
||||
<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">${this.props!.max_ves_gm}</span>, кг</span>
|
||||
<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">${this.props!.max_obyom_gm}</span>, м3</span>
|
||||
<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">${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>
|
||||
<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">${this.props!.person_count}</span>, чел
|
||||
<span class="text-primary font-bold">${query.person_count}</span>, чел
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -75,18 +121,18 @@ class Block extends Component {
|
|||
<div>
|
||||
<span class="block font-bold">Особые условия работы филиала</span>
|
||||
<div class="inline-flex items-center">
|
||||
<p>${this.props!.features}</p>
|
||||
<p>${props.features}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="block font-bold">Контактное лицо</span>
|
||||
<div class="">
|
||||
${this.props!.contact_profile ?
|
||||
${query.contact_profile ?
|
||||
`
|
||||
<p>${this.props!.contact_profile && this.props!.contact_profile.fullName}</p>
|
||||
<p>${this.props!.contact_profile && this.props!.contact_profile.phone}</p>
|
||||
<p>${this.props!.contact_profile && this.props!.contact_profile.email}</p>` : `<span>Данные не установлены</span>`}
|
||||
<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>`}
|
||||
|
||||
|
||||
|
||||
|
|
@ -97,7 +143,7 @@ class Block extends Component {
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -105,151 +151,17 @@ class Block extends Component {
|
|||
|
||||
|
||||
</div>`
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
// 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 = `<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
|
||||
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
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
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)
|
||||
}
|
||||
|
||||
}
|
||||
67
src/main.ts
67
src/main.ts
|
|
@ -1,14 +1,15 @@
|
|||
import './style.css'
|
||||
import './fonts/ManiaExtended/stylesheet.css'
|
||||
import './fonts/OfficinaSerifBoldSCC/stylesheet.css'
|
||||
import 'izitoast/dist/css/iziToast.min.css';
|
||||
import $ from 'jquery';
|
||||
import _ from 'lodash';
|
||||
import _, {min} from 'lodash';
|
||||
import {BlocksDataValueType, FilterType} from "./types.ts";
|
||||
import Block, {toggleBlocks} from "./block.ts";
|
||||
import {renderModal} from "./modal.ts";
|
||||
import Backend from "./backend";
|
||||
|
||||
|
||||
let min_rating = 0
|
||||
// use this for search
|
||||
|
||||
class Search {
|
||||
|
|
@ -84,6 +85,14 @@ const filterUpdate = (value: string | null, name: Exclude<keyof FilterType, 'ful
|
|||
return filtratedBlocks.map(el => el.data.code)
|
||||
}
|
||||
|
||||
const filterRating = () => {
|
||||
return _.filter(blocksData, obj => {
|
||||
const {data} = obj
|
||||
console.log(data)
|
||||
|
||||
return data.changeable_info && data.changeable_info.rating && data.changeable_info.rating >= min_rating
|
||||
}).map(el => el.data.code)
|
||||
}
|
||||
|
||||
const submitHandler = (e: JQuery.SubmitEvent<HTMLFormElement> | JQuery.ChangeEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -99,7 +108,8 @@ const submitHandler = (e: JQuery.SubmitEvent<HTMLFormElement> | JQuery.ChangeEve
|
|||
max_l_gm: filterUpdate(formData.get('max_l_gm') as string | null, 'max_l_gm'),
|
||||
max_w_gm: filterUpdate(formData.get('max_w_gm') as string | null, 'max_w_gm'),
|
||||
max_h_gm: filterUpdate(formData.get('max_h_gm') as string | null, 'max_h_gm'),
|
||||
people: filterUpdate(formData.get('people') as string | null, 'people')
|
||||
rating: filterRating()
|
||||
// people: filterUpdate(formData.get('people') as string | null, 'people')
|
||||
}
|
||||
const dd = _.intersection(...Object.values(values))
|
||||
updateDisplayingData(...dd)
|
||||
|
|
@ -126,21 +136,8 @@ const reRenderHandler = () => {
|
|||
dataContainer.append(Object.values(blocksData).map(elem => elem.block))
|
||||
Object.values(blocksData).forEach(elem => {
|
||||
elem.block.find('button').on('click', () => {
|
||||
const contact = {}
|
||||
if (elem.data.changeable_info && elem.data.changeable_info.contact_person) {
|
||||
contact.id = elem.data.changeable_info.contact_person.id
|
||||
contact.fullName = elem.data.changeable_info.contact_person.full_name
|
||||
contact.email = elem.data.changeable_info.contact_person.email
|
||||
contact.phone = elem.data.changeable_info.contact_person.phone
|
||||
}
|
||||
renderModal({
|
||||
code: elem.data.code,
|
||||
title: elem.data.title,
|
||||
rating: (elem.data.changeable_info && elem.data.changeable_info.rating) || 1,
|
||||
features: (elem.data.changeable_info && elem.data.changeable_info.features) || '',
|
||||
personalCount: (elem.data.changeable_info && elem.data.changeable_info.person_count) || 0,
|
||||
contact,
|
||||
|
||||
}, reRenderHandler)
|
||||
})
|
||||
})
|
||||
|
|
@ -156,3 +153,41 @@ $("#fullTextSearch").on('input', () => {
|
|||
{preventDefault: () => null, target: document.querySelector('#filterForm')}
|
||||
)
|
||||
})
|
||||
|
||||
$('#star1, #star2, #star3, #star4, #star5').on('click', (e)=> {
|
||||
const func = (e: JQuery.Event) => {
|
||||
const getParentObj = (elem) => {
|
||||
if (typeof $(elem).attr('id') === 'undefined') {
|
||||
return getParentObj(elem.parentElement)
|
||||
}
|
||||
return $(elem)
|
||||
}
|
||||
let idx: string | number | undefined = getParentObj(e.target).attr('id')
|
||||
idx = +idx!.replace('star', '')
|
||||
min_rating = idx
|
||||
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
const block = $(`#star${i}`)
|
||||
const star_filled = `
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>
|
||||
</svg>
|
||||
`
|
||||
const star_stroked = `
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.85 17.825L12 15.925L15.15 17.85L14.325 14.25L17.1 11.85L13.45 11.525L12 8.125L10.55 11.5L6.9 11.825L9.675 14.25L8.85 17.825ZM5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>
|
||||
</svg>
|
||||
|
||||
`
|
||||
|
||||
const obj = i <= idx ? $(star_filled) : $(star_stroked)
|
||||
|
||||
obj.on('click', e => func(e))
|
||||
block.empty()
|
||||
block.append(obj)
|
||||
}
|
||||
}
|
||||
|
||||
func(e)
|
||||
|
||||
})
|
||||
|
|
|
|||
253
src/modal.ts
253
src/modal.ts
|
|
@ -1,19 +1,10 @@
|
|||
import $ from 'jquery';
|
||||
import Backend from "./backend";
|
||||
import {UpdateOfficeRequest} from './backend/types.ts'
|
||||
import iziToast from "izitoast";
|
||||
|
||||
type ModalPropsType = {
|
||||
title: string
|
||||
code: string
|
||||
rating?: number | string
|
||||
features?: string
|
||||
contact: {
|
||||
id?: number,
|
||||
fullName?: string
|
||||
email?: string
|
||||
phone?: string
|
||||
}
|
||||
personalCount?: number
|
||||
}
|
||||
|
||||
let selectedValueUser = 0;
|
||||
|
|
@ -24,44 +15,36 @@ let selectedUser = {
|
|||
phone: ""
|
||||
}
|
||||
|
||||
const updateCurrentUser = new Proxy({html: ``}, {
|
||||
set(target, p: string, newValue: any): boolean {
|
||||
target[p] = newValue
|
||||
return true
|
||||
},
|
||||
get(target, prop) {
|
||||
if (prop === 'html') {
|
||||
Backend.profile.listProfiles()
|
||||
.then(data => data.map(
|
||||
elem => `<option value="${elem.id}">${elem.full_name}</option>`
|
||||
))
|
||||
.then(data => `<select name="selectUser">${data.join('')}</select>`)
|
||||
.then(data => updateCurrentUser.html = data)
|
||||
return target.html
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const UserCreationBlock = (props: ModalPropsType) => {
|
||||
const UserCreationBlock = (props) => {
|
||||
const createUser = `
|
||||
<div>
|
||||
<input class="border-2 border-secondary flex-1" type="text" name="profileFullName" placeholder="ФИО" value=""/>
|
||||
<input class="border-2 border-secondary flex-1" type="email" name="profileEmail" placeholder="Email" />
|
||||
<input class="border-2 border-secondary flex-1" type="email" name="profilePhone" placeholder="+79999999999" />
|
||||
<input class="border-2 border-secondary flex-1" type="text" name="profileFullName" placeholder="ФИО" required/>
|
||||
<input class="border-2 border-secondary flex-1" type="email" name="profileEmail" placeholder="Email" required/>
|
||||
<input class="border-2 border-secondary flex-1" type="tel" name="profilePhone" placeholder="+79999999999" required/>
|
||||
<button class="bg-primary text-white px-4 py-2" id="createProfileBtn">Создать профиль</button>
|
||||
</div>
|
||||
`
|
||||
return $(createUser)
|
||||
const block = $(createUser)
|
||||
|
||||
block.find('#createProfileBtn').on('click', (e) => {
|
||||
e.preventDefault()
|
||||
Backend.profile.createUser({
|
||||
full_name: String(block.find('input[name="profileFullName"]').val()),
|
||||
phone: String(block.find('input[name="profilePhone"]').val()),
|
||||
email: String(block.find('input[name="profileEmail"]').val())
|
||||
}).then(
|
||||
(data) => {iziToast.success({
|
||||
title: "Пользователь успешно создан",
|
||||
position: "topRight",
|
||||
zindex: 30
|
||||
}); return data}
|
||||
).then((data) => block.append(`<input type="hidden" name="profileId" value="${data.id}">`))
|
||||
})
|
||||
|
||||
return block
|
||||
}
|
||||
|
||||
const UserSelectingBlock = (props: ModalPropsType) => {
|
||||
console.log('user id: ', selectedUser.id)
|
||||
if (selectedUser.id === '') {
|
||||
selectedUser.id = props.contact.id ? String(props.contact.id) : ''
|
||||
selectedUser.phone = props.contact.phone || ''
|
||||
selectedUser.email = props.contact.email || ''
|
||||
selectedUser.full_name = props.contact.fullName || ''
|
||||
}
|
||||
console.log(selectedUser)
|
||||
const query = `
|
||||
<div>
|
||||
<select name="profileId" id="selectUserField">
|
||||
|
|
@ -70,32 +53,105 @@ const UserSelectingBlock = (props: ModalPropsType) => {
|
|||
|
||||
<input class="border-2 border-secondary flex-1" type="text" name="profileFullName" placeholder="ФИО" value="${selectedUser.full_name}"/>
|
||||
<input class="border-2 border-secondary flex-1" type="email" name="profileEmail" placeholder="Email" value="${selectedUser.email}"/>
|
||||
<input class="border-2 border-secondary flex-1" type="email" name="profilePhone" placeholder="+79999999999" value="${selectedUser.phone}" />
|
||||
<input class="border-2 border-secondary flex-1" type="tel" name="profilePhone" placeholder="+79999999999" value="${selectedUser.phone}" />
|
||||
<button class="bg-primary text-white px-4 py-2">Изменить профиль</button>
|
||||
|
||||
</div>
|
||||
`
|
||||
const queryBlock = $(query)
|
||||
Backend.profile.listProfiles()
|
||||
.then(data => data.map(elem => `<option value="${elem.id}">${elem.full_name}</option>`).join(""))
|
||||
Backend.office.getById(props.code).then(
|
||||
data => {
|
||||
console.log(data)
|
||||
if (data.changeable_info) {
|
||||
return data.changeable_info.contact_person_id
|
||||
}
|
||||
return null
|
||||
}
|
||||
)
|
||||
.then(idx => idx && Backend.profile.getById(idx))
|
||||
.then(data => {
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
selectedUser.id = String(data.id)
|
||||
selectedUser.phone = String(data.phone)
|
||||
selectedUser.email = String(data.email)
|
||||
selectedUser.full_name = String(data.full_name)
|
||||
})
|
||||
.then(() => Backend.profile.listProfiles())
|
||||
.then(data => data.map(elem => `<option value="${elem.id}" ${elem.id === +selectedUser.id ? 'checked' : ''}>${elem.full_name}</option>`).join(""))
|
||||
.then(e => queryBlock.find('select').append(e))
|
||||
.then(() => selectHandler(selectedUser.id))
|
||||
|
||||
|
||||
function selectHandler(idx: string | number) {
|
||||
Backend.profile.getById(idx).then(
|
||||
data => {
|
||||
console.log(data)
|
||||
$('[name="profileId"]').val(String(data.id))
|
||||
$('[name="profileFullName"]').val(String(data.full_name))
|
||||
$('[name="profileEmail"]').val(String(data.email))
|
||||
$('[name="profilePhone"]').val(String(data.phone))
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
queryBlock.find('select').on('change', (e) => selectHandler(e.target.value))
|
||||
|
||||
|
||||
return queryBlock
|
||||
}
|
||||
|
||||
const Modal = (props: ModalPropsType) => `
|
||||
function generateStars(rating: number) {
|
||||
let str = ''
|
||||
for (let i = 1; i <= +rating; i++) {
|
||||
str += `
|
||||
<div class="ratingBlock">
|
||||
<label for="ratingField${i}" class="block">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>
|
||||
</svg>
|
||||
</label>
|
||||
<input class="border-2 border-secondary flex-1 hidden" type="radio" name="rating"
|
||||
value="${i}" id="ratingField${i}" ${i == rating ? 'checked' : ''}>
|
||||
</div>
|
||||
`
|
||||
|
||||
}
|
||||
for (let i = +rating+1; i <= 5; i++) {
|
||||
str += `
|
||||
<div class="ratingBlock">
|
||||
<label for="ratingField${i}" class="block">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.85 17.825L12 15.925L15.15 17.85L14.325 14.25L17.1 11.85L13.45 11.525L12 8.125L10.55 11.5L6.9 11.825L9.675 14.25L8.85 17.825ZM5.825 22L7.45 14.975L2 10.25L9.2 9.625L12 3L14.8 9.625L22 10.25L16.55 14.975L18.175 22L12 18.275L5.825 22Z" fill="#E5352D"/>
|
||||
</svg>
|
||||
</label>
|
||||
<input class="border-2 border-secondary flex-1 hidden" type="radio" name="rating"
|
||||
value="${i}" id="ratingField${i}">
|
||||
</div>`
|
||||
}
|
||||
return str
|
||||
}
|
||||
|
||||
const Modal = () => `
|
||||
<div class="fixed top-0 left-0 w-full h-full bg-secondary bg-opacity-50 z-10 flex flex-col justify-center" id="modal">
|
||||
<button class="text-white absolute top-14 right-14" id="removeModal">x</button>
|
||||
<div class="container flex flex-col mx-auto bg-white px-4 py-2">
|
||||
<span class="text-xl">${props.title}</span>
|
||||
<span class="text-xl" id="modalTitle"></span>
|
||||
<form class="[&_div]:mb-4 [&_input]:px-2 [&_textarea]:px-2" id="changeForm">
|
||||
<input type="hidden" name="code" id="codeField" value="${props.code}">
|
||||
<input type="hidden" name="code" id="codeField" value="">
|
||||
<div class="inline-flex w-1/2 [&_*]:mr-4 mb-6">
|
||||
<span>Рейтинг</span>
|
||||
<input class="border-2 border-secondary flex-1" type="number" name="rating" max="5" min="1"
|
||||
value="${props.rating || '1'}" id="ratingField">
|
||||
|
||||
|
||||
<div class="ratingBlocks flex">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="inline-flex w-1/2 [&_*]:mr-4 flex-col">
|
||||
<span>Особенности филиала</span>
|
||||
<textarea class="border-2 border-secondary flex-1" type="text" name="features" id="featuresField">${props.features || ''}</textarea>
|
||||
<textarea class="border-2 border-secondary flex-1" type="text" name="features" id="featuresField"></textarea>
|
||||
</div>
|
||||
<div class="inline-flex w-1/2 [&_*]:mb-2 flex-col">
|
||||
<span>Контактное лицо</span>
|
||||
|
|
@ -105,7 +161,7 @@ const Modal = (props: ModalPropsType) => `
|
|||
<label class="mr-4" for="userCreationFieldFalse">Выбрать пользователя из уже существующих</label>
|
||||
<input type="radio" name="userCreationField" value="1" id="userCreationFieldTrue" ${selectedValueUser === 1 && 'checked'}>
|
||||
<label for="userCreationFieldTrue">Создать нового пользователя</label>
|
||||
</div
|
||||
</div>
|
||||
<div id="userBlock">
|
||||
|
||||
</div>
|
||||
|
|
@ -113,7 +169,7 @@ const Modal = (props: ModalPropsType) => `
|
|||
</div>
|
||||
<div class="inline-flex w-1/2 [&_*]:mr-4 flex-col">
|
||||
<span>Количество сотрудников</span>
|
||||
<input class="border-2 border-secondary flex-1" type="number" name="personalCount" min="0" value="${props.personalCount}" id="personalCountField"/>
|
||||
<input class="border-2 border-secondary flex-1" type="number" name="personalCount" min="0" value="" id="personalCountField"/>
|
||||
</div>
|
||||
<button class="block bg-primary font-bold text-white px-4 py-2" type="submit">Изменить</button>
|
||||
</form>
|
||||
|
|
@ -121,36 +177,80 @@ const Modal = (props: ModalPropsType) => `
|
|||
</div>
|
||||
`
|
||||
|
||||
function afterRendering(modal: JQuery<HTMLElement>, props: ModalPropsType) {
|
||||
const func = (value) => {
|
||||
const blockWrapper = modal.find(".ratingBlocks")
|
||||
console.log('call')
|
||||
blockWrapper.empty()
|
||||
blockWrapper.append(generateStars(value))
|
||||
blockWrapper.find('[name="rating"]').on('change', (e) => func(e.target.value))
|
||||
|
||||
}
|
||||
Backend.office.getById(props.code).then(
|
||||
data => {
|
||||
|
||||
if (data.changeable_info) {
|
||||
// modal.find("#ratingField").val(data.changeable_info.rating || 1)
|
||||
modal.find('.ratingBlocks').append(generateStars(data.changeable_info.rating || 1))
|
||||
modal.find("#featuresField").val(data.changeable_info.features || '')
|
||||
modal.find("#featuresField").val(data.changeable_info.features || '')
|
||||
modal.find("#personalCountField").val(data.changeable_info.person_count || 0)
|
||||
}
|
||||
else {
|
||||
modal.find('.ratingBlocks').append(generateStars(0))
|
||||
}
|
||||
modal.find('#modalTitle').text(data.title)
|
||||
modal.find('#codeField').val(props.code)
|
||||
}
|
||||
)
|
||||
.then(
|
||||
() => modal.find('[name="rating"]').on('change', e => {
|
||||
func(e.target.value)
|
||||
})
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export const renderModal = (props: ModalPropsType, reRenderHandler: () => void) => {
|
||||
const modal = $(Modal(props))
|
||||
registerEvents(modal, reRenderHandler, props)
|
||||
const modal = $(Modal())
|
||||
afterRendering(modal, props)
|
||||
$('body').append(modal)
|
||||
registerEvents(modal, reRenderHandler, props)
|
||||
}
|
||||
|
||||
const addModulesToModal = (props: ModalPropsType) => {
|
||||
$('#userBlock').append(selectedValueUser === 0 ? UserSelectingBlock(props): UserCreationBlock(props))
|
||||
$('#userBlock').append(selectedValueUser === 0 ? UserSelectingBlock(props) : UserCreationBlock(props))
|
||||
}
|
||||
|
||||
const registerEvents = (modal: JQuery<HTMLElement>, reRenderHandler: () => void, props: ModalPropsType) => {
|
||||
addModulesToModal(props);
|
||||
|
||||
function selectedUserChangeHandler(val) {
|
||||
selectedValueUser = +val
|
||||
const mdNew = $(Modal())
|
||||
afterRendering(mdNew, props)
|
||||
modal.replaceWith(mdNew)
|
||||
registerEvents(mdNew, reRenderHandler, props)
|
||||
}
|
||||
|
||||
modal.find('form').on('submit',
|
||||
(e) => {
|
||||
e.preventDefault()
|
||||
const fields = {
|
||||
code: $('#codeField'),
|
||||
contact_person_id: $('#profileIdField'),
|
||||
features: $('#featuresField'),
|
||||
person_count: $('#personalCountField'),
|
||||
rating: $('#ratingField'),
|
||||
code: () => modal.find('#codeField'),
|
||||
contact_person_id: () => modal.find('[name=profileId]'),
|
||||
features: () => modal.find('#featuresField'),
|
||||
person_count: () => modal.find('#personalCountField'),
|
||||
rating: () => modal.find('[name="rating"]:checked'),
|
||||
}
|
||||
const query: UpdateOfficeRequest = {
|
||||
code: +fields.code.val()!,
|
||||
contact_person_id: null,
|
||||
features: fields.features.val() ? String(fields.features.val()) : null,
|
||||
person_count: fields.person_count.val() ? +fields.person_count.val()! : null,
|
||||
rating: fields.rating.val() ? +fields.rating.val()! : null,
|
||||
code: +fields.code().val()!,
|
||||
contact_person_id: +fields.contact_person_id().val()!,
|
||||
features: fields.features().val() ? String(fields.features().val()) : null,
|
||||
person_count: fields.person_count().val() ? +fields.person_count().val()! : null,
|
||||
rating: fields.rating().val() ? +fields.rating().val()! : null,
|
||||
}
|
||||
console.log(query)
|
||||
|
||||
Backend.office.update_office(query).then(
|
||||
() => {
|
||||
|
|
@ -164,23 +264,8 @@ const registerEvents = (modal: JQuery<HTMLElement>, reRenderHandler: () => void,
|
|||
modal.remove()
|
||||
reRenderHandler()
|
||||
})
|
||||
modal.find('[type="radio"]').on('change', (e) => {
|
||||
selectedValueUser = +e.target.value
|
||||
console.log(selectedValueUser)
|
||||
const mdNew = $(Modal(props))
|
||||
modal.replaceWith(mdNew)
|
||||
registerEvents(mdNew, reRenderHandler, props)
|
||||
})
|
||||
modal.find('select').on('change', e => {
|
||||
console.log(e.target.value)
|
||||
Backend.profile.getById(e.target.value).then(
|
||||
data => {
|
||||
selectedUser.id = String(data.id)
|
||||
selectedUser.email = data.email || ''
|
||||
selectedUser.phone = data.phone || ''
|
||||
selectedUser.full_name = data.full_name || ''
|
||||
}
|
||||
)
|
||||
})
|
||||
addModulesToModal(props);
|
||||
modal.find('[name="userCreationField"]').on('change', ({target: {value}}) => selectedUserChangeHandler(value))
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -625,6 +625,11 @@ is-number@^7.0.0:
|
|||
resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
|
||||
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
|
||||
|
||||
izitoast@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/izitoast/-/izitoast-1.4.0.tgz#1aa4e3408b7159fba743506af66d8be54fd929fb"
|
||||
integrity sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w==
|
||||
|
||||
jiti@^1.19.1:
|
||||
version "1.20.0"
|
||||
resolved "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue