\n
\n \n {% extends 'base.html' %}\n{% load static %}\n{% load mptt_tags %}\n{% load thumbnail %}\n\n{% block meta %}\n<title>\u0420\u0435\u0437\u044e\u043c\u0435 - anvendo.ru</title>\n<meta property="og:type" content="website">\n<meta property="og:title" content="\u0420\u0435\u0437\u044e\u043c\u0435 - anvendo.ru">\n<meta property="og:image" content="https://anvendo.ru{% static 'img/blank.jpg' %}">\n{% endblock meta %} \n\n{% block content %}\n<div class="container">\n <!-- \u0445\u043b\u0435\u0431\u043d\u044b\u0435 \u043a\u0440\u043e\u0448\u043a\u0438 -->\n <div class=' mt-3 mb-3'>\n <nav aria-label="breadcrumb">\n <ol class="breadcrumb">\n <li class="breadcrumb-item"><a href="/">\u0413\u043b\u0430\u0432\u043d\u0430\u044f</a></li>\n <li class="breadcrumb-item active" aria-current="page">\u0420\u0435\u0437\u044e\u043c\u0435</li>\n </ol>\n </nav>\n </div>\n <!-- \u0445\u043b\u0435\u0431\u043d\u044b\u0435 \u043a\u0440\u043e\u0448\u043a\u0438 -->\n\n <div class="row p-2">\n <h1 style="font-weight: 700;" id="title_page"></h1>\n <p>Anvendo.ru \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u0440\u0435\u0437\u044e\u043c\u0435 \u043e\u0442 \u0442\u0430\u043b\u0430\u043d\u0442\u043b\u0438\u0432\u044b\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043f\u043e \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c, \u0442\u0438\u043f\u0430\u043c \u0437\u0430\u043d\u044f\u0442\u043e\u0441\u0442\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0434\u043b\u044f \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432.</p> \n </div>\n \n <div class="row p-3" id="root">\n </div>\n</div>\n\n\n<script>\n const currentUrl = window.location.href;\n const title = document.getElementById('title_page')\n if(currentUrl == 'https://anvendo.ru/resumes_list/'){title.innerHTML = '\u0420\u0435\u0437\u044e\u043c\u0435{% if city_user.name %}, {{city_user.name}}{% endif %}'}\n else{title.innerHTML = '\u0420\u0435\u0437\u044e\u043c\u0435 \u0441\u0430\u043c\u043e\u0437\u0430\u043d\u044f\u0442\u044b\u0445{% if city_user.name %}, {{city_user.name}}{% endif %}'}\n</script>\n\n<!-- \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u043f\u0440\u0438 \u0434\u0435\u043f\u043b\u043e\u0435 \u043d\u0430 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u00abdevelopment.js\u00bb \u043d\u0430 \u00abproduction.min.js\u00bb. -->\n<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>\n<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>\n<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>\n\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">\n\n\n\n{{ posts|json_script:"posts" }}\n{{ professionals|json_script:"professionals" }}\n<script id="cityId" type="application/json"> \n {%if city_user%}\n {"name": "{{city_user.name}}", "id": {{city_user.id}}}\n {%else%}\n {"name": "0", "id": 0}\n {%endif%}\n</script> \n\n<script type="text/babel">\n'use strict';\n\nconst {useState, useCallback, useEffect, useRef} = React;\n\n// \u041a\u043b\u044e\u0447\u0438\nlet filterKeys = []\n\nfunction splitToNChunks(array, n) {\n\nif (array.length<10){\n n=1\n}\n\nlet result = [];\nfor (let i = n; i > 0; i--) {\n result.push(array.splice(0, Math.ceil(array.length / i)));\n}\nreturn result;\n}\n\nconst PostListAll = ({ posts, setPosts, handlePost }) => {\n const newposts = splitToNChunks([...posts], 2)\n\n return (\n <div className="row">\n {newposts.map((item, index) =>\n <div key={index} className="col-6">\n {\n item.map((p) =>\n <label key={p.pk} className="linkProf">\n <input name="post" type="radio" className="circleProf" onChange={() => handlePost(p.pk, p.fields.name)} />\n <span className="spanLinkProf">{p.fields.name}</span>\n </label>\n )\n }\n </div>\n )}\n </div>\n )\n}\nconst ProfessionalsListAll = ({ profs, setProfs, handleProf }) => {\n const newprofs = splitToNChunks([...profs], 2)\n return (\n <div className="row">\n {newprofs.map((item, index) =>\n <div key={index} className="col-12 col-lg-6">\n {\n item.map((p) =>\n <label key={p.pk} className="linkProf">\n <input name="prof" type="radio" className="circleProf" onChange={() => handleProf(p.pk, p.fields.name)}/>\n <span className="spanLinkProf">{p.fields.name}</span> \n </label>\n )\n }\n </div>\n )}\n </div>\n )\n}\n\nconst SearchPosts = ({ posts, setPosts, handlePost }) => {\n const dataPosts = JSON.parse(document.getElementById('posts').textContent)\n const handleChange = event => {\n handlePost(event.target.value, event.target.options[event.target.selectedIndex].text)\n };\n\n return (\n <div className="row mb-3">\n <div className="col-12">\n <select title="\u0414\u043e\u043b\u0436\u043d\u043e\u0441\u0442\u044c..." className="selectpicker rounded-3 mainSearchCat" data-live-search="true" data-width="100%" onChange={handleChange} data-style="btn-light" id="SearchPosts">\n {\n dataPosts.map(p => (\n <option key={p.pk} value={p.pk}>{p.fields.name}</option>\n ))\n }\n \n </select>\n </div>\n </div>\n )\n }\n\n\nconst NavTabs = () => {\n return(\n <div>\n <ul className="nav nav-tabs" id="myTab" role="tablist">\n <li className="nav-item " role="presentation">\n <button className="nav-link active" id="contact-tab" data-bs-toggle="tab" data-bs-target="#prof1" type="button" role="tab" aria-selected="false">\n <i className="bi bi-person-vcard-fill"></i> \u0414\u043e\u043b\u0436\u043d\u043e\u0441\u0442\u044c\n </button>\n </li>\n <li className="nav-item " role="presentation">\n <button className="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#oblast1" type="button" role="tab" aria-selected="false">\n <i className="bi bi-briefcase-fill"></i> \u041f\u0440\u043e\u0444. \u043e\u0431\u043b\u0430\u0441\u0442\u044c\n </button>\n </li>\n <li className="nav-item " role="presentation">\n <button className="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#salary1" type="button" role="tab" aria-selected="false">\n <i className="bi bi-wallet-fill"></i> \u0423\u0440\u043e\u0432\u0435\u043d\u044c \u0434\u043e\u0445\u043e\u0434\u0430\n </button>\n </li>\n <li className="nav-item " role="presentation">\n <button className="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#employment" type="button" role="tab" aria-selected="false">\n <i className="bi bi-stopwatch-fill"></i> \u0417\u0430\u043d\u044f\u0442\u043e\u0441\u0442\u044c\n </button>\n </li>\n <li className="nav-item " role="presentation">\n <button className="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#additionally1" type="button" role="tab" aria-selected="false">\n <i className="bi bi-layers-fill"></i> \u041e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435\n </button>\n </li>\n <li className="nav-item " role="presentation">\n <button className="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#experience1" type="button" role="tab" aria-selected="false">\n <i className="bi bi-calendar2-fill"></i> \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f \u043f\u0440\u0430\u0432\n </button>\n </li>\n <li className="nav-item " role="presentation">\n <button className="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#company1" type="button" role="tab" aria-selected="false">\n <i className="bi bi-bookmarks-fill"></i> \u0414\u0440\u0443\u0433\u043e\u0435\n </button>\n </li>\n </ul> \n \n </div>\n )\n}\n\n\nconst FilterBusy = ({setItems, setIsLoaded, setError, countAdvert, setCountAdvert}) => {\n\n const [check, setCheck] = useState(false) \n const initialState = [];\n const [filterButtons, setfilterButtons] = useState(initialState);\n \n const [butAll, setButAll] = useState(false)\n \n \n \n\n const dataPosts = JSON.parse(document.getElementById('posts').textContent)\n const dataProfessionals = JSON.parse(document.getElementById('professionals').textContent)\n \n const [prof, setProf] = useState('')\n const [profs, setProfs] = useState(dataProfessionals)\n\n const [post, setPost] = useState('')\n const [posts, setPosts] = useState(dataPosts.filter(post => post.fields.parent == null))\n\n const [gender, setGender] = useState('')\n const [car, setCar] = useState('')\n \n const [minSalary, setMinSalary] = useState(1)\n const [agefrom, setAgeFrom] = useState('')\n const [ageto, setAgeTo] = useState('')\n\n\n let city_user = JSON.parse(document.getElementById('cityId').textContent)\n let city = ''\n if (city_user.id == 0){\n city = ''\n }\n else {\n city = '&city='+city_user.id\n }\n\n const currentUrl = window.location.href;\n let samoz = ''\n if(currentUrl == 'https://anvendo.ru/resumes_list/'){samoz = ''}\n else{samoz = '&additional=4'}\n\n\n // \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 Url\n let Url = `https://anvendo.ru/api/resumes/?format=json${prof}&salary__gt=${minSalary}${post}${gender}${car}${agefrom}${ageto}${city}${samoz}`\n\n // \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a Api\n const apiReq = async () => {\n \n document.body.style.height = 2000+'px'\n \n let tabContent = document.getElementById('myTabContent')\n \n tabContent.classList.add("ApiStyle");\n \n setIsLoaded(false)\n setCountAdvert('\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430...')\n fetch(Url+filterKeys.join(''))\n .then(res => res.json())\n .then(\n (result) => {\n\n tabContent.classList.remove("ApiStyle");\n \n setIsLoaded(true);\n setItems(result['results']);\n setCountAdvert(result['count'])\n },\n (error) => {\n setIsLoaded(true);\n setError(error);\n }\n )\n console.log(Url+filterKeys.join('')) \n }\n \n // \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u0441\u043d\u0438\u0437\u0443\n const handleClick = (title, id) => {\n \n if (id=='post') {\n setfilterButtons(filterButtons.filter((a) => a.id !== 'post'));\n setfilterButtons(current => [...current, {id: id, name: title}]);\n }\n else if (id=='prof') {\n setfilterButtons(filterButtons.filter((a) => a.id !== 'prof'));\n setfilterButtons(current => [...current, {id: id, name: title}]);\n }\n else {\n setfilterButtons(current => [...current, {id: id, name: title}]);\n }\n };\n\n // \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0440\u043f\u043b\u0430\u0442\u044b \u0438 \u043f\u0430\u0443\u0437\u0430\n useEffect(() => {\n const delayDebounceFn = setTimeout(() => {\n if (minSalary == 0) {\n setfilterButtons(filterButtons.filter((a) => a.id !== 'minsalary'));\n apiReq()\n }\n else if (minSalary > 1){\n setfilterButtons(filterButtons.filter((a) => a.id !== 'minsalary'));\n handleClick(minSalary, 'minsalary')\n apiReq()\n }\n }, 700)\n return () => clearTimeout(delayDebounceFn)\n }, [minSalary])\n \n useEffect(() => {\n apiReq()\n }, [post, prof, gender, car, agefrom, ageto])\n\n\n\n // \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u0441\u043d\u0438\u0437\u0443\n const delHandleClick = (id) => {\n setfilterButtons(filterButtons.filter((a) => a.id !== id));\n if (id=='minsalary') {\n setMinSalary(0)\n document.getElementById('minSalary').value = ''\n }\n else if (id=='agefrom') {\n setAgeFrom('')\n document.getElementById('ageFrom').value = ''\n }\n else if (id=='ageto') {\n setAgeTo('')\n document.getElementById('ageTo').value = ''\n }\n else if (id=='post') {\n setPost('')\n setPosts(dataPosts.filter(post => post.fields.parent == null))\n filterKeys = filterKeys.filter((key) => key !== post)\n setButAll(false) \n setProfs(dataProfessionals)\n $("#SearchPosts").val('default');\n $("#SearchPosts").selectpicker("refresh");\n }\n else if (id=='gender') {\n var ele = document.getElementsByName("gender");\n for(var i=0;i<ele.length;i++)\n ele[i].checked = false;\n setGender('')\n }\n else if (id=='car') {\n console.log(1)\n let el1 = document.querySelector(`[data-id="car"]`)\n el1.checked = false\n setCar('')\n }\n else if (id=='prof') {\n setProf('')\n setPosts(dataPosts.filter(post => post.fields.parent == null))\n setButAll(false) \n setProfs(dataProfessionals)\n\n filterKeys = filterKeys.filter((key) => key !== prof)\n\n var ele = document.getElementsByName("prof");\n for(var i=0;i<ele.length;i++)\n ele[i].checked = false;\n }\n else{\n filterKeys = filterKeys.filter((key) => key !== id);\n const el1 = document.querySelector(`[data-id="${id}"]`)\n el1.checked = false\n apiReq()\n }\n };\n \n // \u041f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0440\u043f\u043b\u0430\u0442\u044b\n const minSalaryChange = (event) => {\n setMinSalary(event.target.value)\n }\n\n \n \n // \u0412\u043e\u0437\u0440\u0430\u0441\u0442\n const [inputAge, setInputAge] = useState("");\n const [inputAgeTo, setInputAgeTo] = useState("");\n\n useEffect(() => {\n const timeoutId = setTimeout(() => {\n if (inputAge !== agefrom) {\n setAgeFrom('&age_gte=' + inputAge);\n setfilterButtons(filterButtons.filter((a) => a.id !== 'agefrom'));\n handleClick('\u043e\u0442 '+inputAge+' \u043b\u0435\u0442', 'agefrom')\n }\n }, 700);\n return () => clearTimeout(timeoutId);\n }, [inputAge]);\n\n const ageFrom = (event) => {\n if (event.target.value == '') {\n setAgeFrom('')\n setfilterButtons(filterButtons.filter((a) => a.id !== 'agefrom'));\n }\n setInputAge(event.target.value);\n }\n\n useEffect(() => {\n const timeoutId = setTimeout(() => {\n if (inputAgeTo !== ageto) {\n setAgeTo('&age_lte=' + inputAgeTo);\n setfilterButtons(filterButtons.filter((a) => a.id !== 'ageto'));\n handleClick('\u0434\u043e '+inputAgeTo+' \u043b\u0435\u0442', 'ageto')\n }\n }, 700);\n return () => clearTimeout(timeoutId);\n }, [inputAgeTo])\n\n //const [ageto, setAgeTo] = useState('')\n const ageTo = (event) => {\n if (event.target.value == '') {\n setAgeTo('')\n setfilterButtons(filterButtons.filter((a) => a.id !== 'ageto'));\n }\n setInputAgeTo(event.target.value);\n }\n \n\n\n const handlePost = (id, name) => {\n handleClick(name, 'post')\n setPost('&post='+id)\n\n setButAll(true) \n let newPosts = dataPosts.filter(post => post.fields.parent == id)\n if (newPosts.length < 1) {\n }\n else{\n setPosts(newPosts)\n const ids = (dataPosts.find(post => post.fields.name == name)).fields.professional\n let test2 = dataProfessionals.filter(post => ids.includes(post.pk))\n setProfs(test2)\n }\n }\n \n const handleProf = (id, name) => {\n handleClick(name, 'prof')\n const ids = dataProfessionals.find(post => post.fields.name == name).pk\n let test2 = dataPosts.filter(post => post.fields.professional.includes(ids))\n setPosts(test2)\n setProf('&professional='+id)\n }\n\n const handlerList= (event) => {\n if (event.target.checked) {\n handleClick(event.target.getAttribute('data-name'), event.target.getAttribute('data-id')) \n filterKeys.push(event.target.getAttribute('data-id'));\n apiReq()\n } else {\n delHandleClick(event.target.getAttribute('data-id'))\n filterKeys = filterKeys.filter((key) => key !== event.target.getAttribute('data-id'));\n }\n }\n\n const handleGender = (event) => {\n setGender('&gender='+event.target.getAttribute('data-id'))\n setfilterButtons(filterButtons.filter((a) => a.id !== 'gender'));\n setfilterButtons(current => [...current, {id: 'gender', name: event.target.getAttribute('data-name')}]);\n }\n\n const handleCar = (event) => {\n if (event.target.checked) {\n setCar('&car=true')\n setfilterButtons(current => [...current, {id: 'car', name: event.target.getAttribute('data-name')}]);\n }\n else{\n delHandleClick(event.target.getAttribute('data-id'))\n }\n }\n\n \n\n \n \n return (\n <div>\n <SearchPosts posts={posts} setPosts={setPosts} handlePost={handlePost}/>\n <NavTabs />\n <div className="tab-content mt-2" id="myTabContent">\n <div className="tab-pane fade show active pt-3 pb-3 " id="prof1" role="tabpanel" aria-labelledby="contact-tab">\n {butAll? <button type="button" className="btn btn-secondary btn-sm mb-3" onClick={()=>delHandleClick('post')}><i className="bi bi-arrow-left"></i> \u0412\u0441\u0435</button>: ''}\n <PostListAll posts={posts} setPosts={setPosts} handlePost={handlePost}/>\n </div>\n <div className="tab-pane fade pt-3 pb-3 " id="oblast1" role="tabpanel" aria-labelledby="contact-tab">\n <ProfessionalsListAll profs={profs} setProfs={setProfs} handleProf={handleProf}/>\n </div>\n <div className="tab-pane fade pt-3 pb-3" id="employment" role="tabpanel" aria-labelledby="contact-tab">\n \n <div className="row">\n <div className="col-12 col-lg-4 mt-2">\n {% for p in employment|slice:"0:6" %}\n <label className="linkBusy"><input className="cb1" type="checkbox" data-pk="{{p.pk}}" data-id="&busy={{p.pk}}" data-name="{{p.name}}" onChange={handlerList} /> {{p.name}}</label><br/>\n {% endfor %}\n </div>\n <div className="col-12 col-lg-4 mt-2">\n {% for p in employment|slice:"6:20" %}\n <label className="linkBusy"><input className="cb1" type="checkbox" data-pk="{{p.pk}}" data-id="&busy={{p.pk}}" data-name="{{p.name}}" onChange={handlerList}/> {{p.name}}</label><br/>\n {% endfor %}\n </div>\n </div>\n </div>\n <div className="tab-pane fade pt-3 pb-3" id="additionally1" role="tabpanel" aria-labelledby="contact-tab">\n \n <div className="row">\n <div className="col-4 mt-2">\n {% for p in educations %}\n <label className="linkBusy"><input className="cb1" type="checkbox" data-pk="{{p.pk}}" data-id="&education={{p.pk}}" data-name="{{p.name}}" onChange={handlerList}/> {{p.name}}</label><br/>\n {% endfor %}\n </div>\n </div>\n </div>\n <div className="tab-pane fade pt-3 pb-3" id="experience1" role="tabpanel" aria-labelledby="contact-tab">\n \n <div className="row">\n <div className="col-12 mt-2">\n {% for p in driver_licenses %}\n <label className="linkBusy"><input className="cb1" type="checkbox" data-pk="{{p.pk}}" data-id="&driver_license={{p.pk}}" data-name="{{p.name}}" onChange={handlerList}/> {{p.name}}</label><br/>\n {% endfor %}\n </div>\n </div>\n </div>\n <div className="tab-pane fade pt-3 pb-3" id="salary1" role="tabpanel" aria-labelledby="contact-tab">\n \n <div className="row">\n <div className="col-12 mt-2">\n <div className="row">\n <p>\u043e\u0442 <input id="minSalary" type="number" className="form-control" min="100" step="100" onChange={minSalaryChange} /> \u20bd</p>\n </div>\n </div>\n </div>\n </div>\n <div className="tab-pane fade pt-3 pb-3" id="company1" role="tabpanel" aria-labelledby="contact-tab">\n \n <div className="row">\n <div className="col-12 col-lg-4 mt-2">\n <p className="subTitleCat">\u0412\u043e\u0437\u0440\u0430\u0441\u0442</p>\n <p>\u043e\u0442 <input id="ageFrom" type="number" className="form-control" min="16" step="1" max="100" onChange={ageFrom} /> \u043b\u0435\u0442</p>\n <p>\u0434\u043e <input id="ageTo" type="number" className="form-control" min="16" step="1" max="100" onChange={ageTo} /> \u043b\u0435\u0442</p>\n </div>\n <div className="col-12 col-lg-4 mt-2">\n <p className="subTitleCat">\u041f\u043e\u043b</p>\n {%for p in gender%}\n <label className="form-check-label"><input className="form-check-input" type="radio" value="{{p.pk}}" id="gender" name="gender" data-id="{{p.pk}}" data-name="{{p.name}}" onChange={handleGender}/> {{p.name}}</label><br/>\n {%endfor%}\n </div>\n <div className="col-12 col-lg-4 mt-2">\n <p className="subTitleCat">\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044f</p>\n <label className="form-check-label"><input className="form-check-input" type="checkbox" id="car" name="car" data-id="car" data-name="\u0415\u0441\u0442\u044c \u0430\u0432\u0442\u043e" onChange={handleCar}/> \u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0430\u0432\u0442\u043e</label><br/>\n </div>\n </div>\n </div>\n <p className="totalAdverCount">\u0412\u0441\u0435\u0433\u043e \u0440\u0435\u0437\u044e\u043c\u0435: {countAdvert}</p>\n {filterButtons.map((element, index, id) => {\n return (\n <button className="checkFalse" key={index} onClick={()=>delHandleClick(element.id)}>{element.name} <i className="bi bi-x-lg"></i></button>\n );\n })}\n \n </div>\n </div>\n \n )\n}\n\nconst ListAdvert = ({isLoaded, items, setItems, error}) => {\n if (error) {\n return <div>\u041e\u0448\u0438\u0431\u043a\u0430: {error.message}</div>;\n } else if (!isLoaded) {\n return (\n <div className="text-center">\n <svg id="indicator" viewBox="0 0 100 100">\n <circle id="circle" cx="50" cy="50" r="45"></circle>\n </svg><br/>\n \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430</div>\n );\n } else {\n return (\n <div>\n {items.map(item => (\n <div className="col-12 mb-2" key={item.id}>\n <a href={'/resume/'+item.slug} className="link_advert_in_category">\n <div className="row advert_in_category shadow rounded-3">\n <div className="col-12 col-lg-2 advert_in_category_img text-center text-lg-start mb-2 mb-lg-0">\n <img height='140px' src={item.main_photo} alt="" />\n </div>\n <div className="col-12 col-lg-10 text-center text-lg-start">\n <p className="advert_in_category_title">{ item.post.map((x) => `${x}, `)}</p>\n <p className="advert_company">\n {item.education} \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435, {item.total_experience? '\u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b '+item.total_experience : '\u0411\u0435\u0437 \u043e\u043f\u044b\u0442\u0430'}\n </p>\n <p className="dateViewList"><span className="viewTotalCard"><i className="bi bi-eye-fill"></i> \u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u043e\u0432: {item.total_views}</span> <span className="viewTotalCard"><i className="bi bi-calendar"></i> \u0414\u0430\u0442\u0430 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438: {item.published_date}</span></p>\n <p className="advert_in_cat_salar">\u043e\u0442 {item.salary} \u20bd</p>\n </div>\n </div>\n </a>\n </div>\n ))}\n </div>\n );\n}\n}\n\nfunction MyComponent() {\n\n const [error, setError] = useState(null);\n const [isLoaded, setIsLoaded] = useState(false);\n const [items, setItems] = useState([]);\n const [countAdvert, setCountAdvert] = useState('\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430...')\n \n\n return (\n <div>\n <div className="shadow row p-3 mb-3 rounded-3">\n <FilterBusy isLoaded={isLoaded} items={items} setItems={setItems} error={error} setIsLoaded={setIsLoaded} setError={setError} countAdvert={countAdvert} setCountAdvert={setCountAdvert}/>\n </div>\n <ListAdvert isLoaded={isLoaded} items={items} setItems={setItems} error={error} />\n </div>\n )\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n<div>\n<MyComponent />\n</div>\n);\n</script>\n{% endblock content %}\n \n
\n