From 5c3c2d39adde0c036389f94ee657435918038fd0 Mon Sep 17 00:00:00 2001 From: Ernest Litvinenko Date: Tue, 21 Nov 2023 01:00:24 +0300 Subject: [PATCH] add stars --- index.html | 1 + package.json | 1 + src/backend/index.ts | 14 ++- src/block.ts | 20 +++- src/main.ts | 67 +++++++++--- src/modal.ts | 253 +++++++++++++++++++++++++++++-------------- yarn.lock | 5 + 7 files changed, 259 insertions(+), 102 deletions(-) diff --git a/index.html b/index.html index a222bc2..4c12a75 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@

Список филиалов

+
-
+
+ + ${generateStars(query.rating)} + ${props.code} КЛАДР: ${props.kladr_code}
diff --git a/src/main.ts b/src/main.ts index e0f7f5e..addd34f 100644 --- a/src/main.ts +++ b/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 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 | JQuery.ChangeEvent) => { e.preventDefault(); @@ -99,7 +108,8 @@ const submitHandler = (e: JQuery.SubmitEvent | 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 = ` + + + + ` + const star_stroked = ` + + + + + ` + + const obj = i <= idx ? $(star_filled) : $(star_stroked) + + obj.on('click', e => func(e)) + block.empty() + block.append(obj) + } + } + + func(e) + +}) diff --git a/src/modal.ts b/src/modal.ts index 4cafa9f..63d6bc0 100644 --- a/src/modal.ts +++ b/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 => `` - )) - .then(data => ``) - .then(data => updateCurrentUser.html = data) - return target.html - } - } -}) - -const UserCreationBlock = (props: ModalPropsType) => { +const UserCreationBlock = (props) => { const createUser = `
- - - + + + +
` - 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(``)) + }) + + 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 = `
- + +
` const queryBlock = $(query) - Backend.profile.listProfiles() - .then(data => data.map(elem => ``).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 => ``).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 += ` +
+ + +
+` + + } + for (let i = +rating+1; i <= 5; i++) { + str += ` +
+ + +
` + } + return str +} + +const Modal = () => ` ` +function afterRendering(modal: JQuery, 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, 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, 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)) + + + } diff --git a/yarn.lock b/yarn.lock index 7ff284c..8e6ec74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"