Pages post resume step fourth and current resume

src/js/main.js

@@ -788,22 +788,26 @@ if(canvasAvatar)
 
 // Выбор должности
 
-let position = document.querySelector('#position');
-let otherPosition = document.querySelector('#other-position');
+let position = document.querySelectorAll('select[data-position="choice-position"]');
+console.log(position);
 
-if(position && otherPosition)
+if(position.length)
 {
-  position.addEventListener('change', () => {
-    console.log(1);
-    if(position.value === 'other')
+  position.forEach(elem => {
+    elem.addEventListener('change', () => {
+      if(elem.value === 'other')
       {
-      otherPosition.removeAttribute('disabled');
+        console.log(1);
+        // elem.parentElement.parentElement.querySelectorAll('[data-position="other-position"]')[1].removeAttribute('disabled');
       }
       else 
       {
-      otherPosition.setAttribute('disabled', 'disabled');
+        console.log(2);
+        // elem.parentElement.parentElement.querySelectorAll].setAttribute('disabled', 'disabled');
       }
     });
+  });
+
 }
 
 
@@ -855,79 +859,77 @@ if(inputWork.length)
   });
 }
 
-
 // Добавление места работы 
 
 let addPlaceWork = document.querySelectorAll('.add-place-work');
-let indexPlaceWork = 0;
 
 if(addPlaceWork.length)
 {
+  let indexPlacework = 0;
+
   addPlaceWork.forEach(elem => {
     elem.addEventListener('click', (e) => 
     {
       e.preventDefault();
-      let newForm = elem.parentElement.parentElement.querySelector('.data-form-experience').cloneNode(true);
-      newForm.style.marginTop = '43px';
-      let newInputs = newForm.querySelectorAll('input');
-      let newLabels = newForm.querySelectorAll('label');
-      let newSelects = newForm.querySelectorAll('select');
-      let newTextarea = newForm.querySelectorAll('textarea');
-      indexPlaceWork++;
      
-      newInputs.forEach(input => {
-        let oldName = input.name;
-        input.name = oldName + indexPlaceWork;
-        let oldId = input.id;
-        input.id = oldId + indexPlaceWork;
-      });
-
-      newLabels.forEach(label => {
-        let oldFor = label.getAttribute('for');
-        label.setAttribute('for', oldFor + indexPlaceWork);
-      });
+      indexPlacework++;
+
+      let tempateForm = `
+        <div class="data-form-experience">
+          <div class="block-mb-yellow">
+            <label for="company">Компания</label>
+            <input type="text" name="company${indexPlacework}" id="company${indexPlacework}" placeholder="КОМПАНИЯ">
+          </div>
+          <div class="block-mb-orange">
+              <label for="position${indexPlacework}">Желаемая должность</label>
+              <select name="position${indexPlacework}" id="position${indexPlacework}" data-position="choice-position">
+                  <option value="1">Должность 1</option>
+                  <option value="2">Должность 2</option>
+                  <option value="3">Должность 3</option>
+                  <option value="other">Другая</option>
+              </select>
+          </div>
+          <div class="block-mb-yellow">
+              <input type="text" name="other-position${indexPlacework}" id="other-position${indexPlacework}" data-position="other-position" placeholder="ЖЕЛАЕМАЯ ДОЛЖНОСТЬ">
+          </div>
+          <div class="block-mb-yellow">
+              <div class="work-period">
+                  <p>Период работы</p>
+                  <div class="work-period__block">
+                      <p>с</p>
+                      <input type="text" name="start-work${indexPlacework}" id="start-work${indexPlacework}">
+                  </div>
+                  <div class="work-period__block">
+                      <p>по</p>
+                      <input type="text" name="end-work${indexPlacework}" id="end-work${indexPlacework}">
+                  </div>
+              </div>
+          </div>
+          <div class="block-mb-yellow">
+              <div class="block-checkbox">
+                  <label for="working${indexPlacework}">
+                      <input type="checkbox" id="working${indexPlacework}" name="working${indexPlacework}" hidden>
+                      <div class="check"></div>
+                      <p>Работаю в данный момент</p>
+                  </label>
+              </div>
+          </div>
+          <div class="block-mb-yellow">
+              <label for="city-work${indexPlacework}">Город</label>
+              <select name="city-work${indexPlacework}" id="city-work${indexPlacework}">
+                  <option value="month">Москва</option>
+                  <option value="week">Казань</option>
+                  <option value="year">Нижний Новгород</option>
+              </select>
+          </div>
+          <div class="block-mb-green">
+              <label for="responsibility${indexPlacework}">Обязанности</label>
+              <textarea name="responsibility${indexPlacework}" id="responsibility${indexPlacework}"></textarea>
+          </div>
+        </div>`;
+
+      elem.parentElement.insertAdjacentHTML('beforebegin', tempateForm);
 
-      newSelects.forEach(select => {
-        let oldName = select.name;
-        select.name = oldName + indexPlaceWork;
-        let oldId = select.id;
-        select.id = oldId + indexPlaceWork;
-      });
-
-      newTextarea.forEach(textarea => {
-        let oldName = textarea.name;
-        textarea.name = oldName + indexPlaceWork;
-        let oldId = textarea.id;
-        textarea.id = oldId + indexPlaceWork;
-      });
-
-      elem.parentElement.parentElement.insertBefore(newForm, elem.parentElement);
-
-      newSelects.forEach(select => {
-        new Choices(select, {
-          choices: [],
-          placeholder: true,
-          searchEnabled: false,
-          itemSelectText: ''
-        });
-      });
-
-      newForm.querySelectorAll('.work-period__block input').forEach(elem => {
-        datepicker(elem, {
-          formatter: (input, date, instance) => 
-          {
-            const value = date.toLocaleDateString();
-            input.value = value; // => '1/1/2099'
-          },
-          startDay: 0,
-          customDays: ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'],
-          customMonths: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
-          showAllDates: true, 
-          overlayButton: 'Выбрать', 
-          overlayPlaceholder: 'Укажите год'
-        
-        });
-      });
   
     });
   });

src/main.html

@@ -212,9 +212,12 @@
                         <li>
                             <a href="post-resume-step3.html">Разместить резюме - Шаг 3</a>
                         </li>
-                        <!-- <li>
+                        <li>
                             <a href="post-resume-step4.html">Разместить резюме - Шаг 4</a>
-                        </li> -->
+                        </li>
+                        <li>
+                            <a href="current-resume.html">Резюме детальная</a>
+                        </li>
                     </ul>
                 </div>
             </div>

src/post-resume-step2.html

@@ -176,7 +176,7 @@
                                                 <form action="" name="post-resume-step2" id="post-resume-step2">
                                                     <div class="block-mb-orange">
                                                         <label for="position">Желаемая должность</label>
-                                                        <select name="position" id="position">
+                                                        <select name="position" id="position" data-position="choice-position">
                                                             <option value="1">Должность 1</option>
                                                             <option value="2">Должность 2</option>
                                                             <option value="3">Должность 3</option>
@@ -184,7 +184,7 @@
                                                         </select>
                                                     </div>
                                                     <div class="block-mb-yellow">
-                                                        <input type="text" name="other-position" id="other-position" placeholder="ЖЕЛАЕМАЯ ДОЛЖНОСТЬ" disabled>
+                                                        <input type="text" name="other-position" id="other-position" data-position="other-position" placeholder="ЖЕЛАЕМАЯ ДОЛЖНОСТЬ" disabled>
                                                     </div>
                                                     <div class="block-mb-green">
                                                         <label for="desired-salary">Желаемая зарплата, руб</label>

src/post-resume-step3.html

@@ -189,7 +189,7 @@
                                                         </div>
                                                         <div class="block-mb-orange">
                                                             <label for="position">Желаемая должность</label>
-                                                            <select name="position" id="position">
+                                                            <select name="position" id="position" data-position="choice-position">
                                                                 <option value="1">Должность 1</option>
                                                                 <option value="2">Должность 2</option>
                                                                 <option value="3">Должность 3</option>
@@ -197,7 +197,7 @@
                                                             </select>
                                                         </div>
                                                         <div class="block-mb-yellow">
-                                                            <input type="text" name="other-position" id="other-position" placeholder="ЖЕЛАЕМАЯ ДОЛЖНОСТЬ">
+                                                            <input type="text" name="other-position" id="other-position" data-position="other-position" placeholder="ЖЕЛАЕМАЯ ДОЛЖНОСТЬ" disabled>
                                                         </div>
                                                         <div class="block-mb-yellow">
                                                             <div class="work-period">

src/scss/style.scss

@@ -3063,6 +3063,23 @@ ymaps[class$='pie-chart-content']
     }
 }
 
+.block-to-edit 
+{
+    width: 210px;
+    height: 188px;
+    border-radius: 3px;
+    background-color: #ffffff;
+    box-shadow: 0 10px 20px 0 rgba(15, 20, 91, 0.1);
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
 .rating__group
 {
     position: relative;
@@ -3138,6 +3155,7 @@ ymaps[class$='pie-chart-content']
 {
     display: flex;
     justify-content: space-between;
+    position: relative;
     &-block 
     {
         display: flex;
@@ -3213,7 +3231,7 @@ ymaps[class$='pie-chart-content']
         }
         &__contacts 
         {
-            p, a 
+            a, p
             {
                 font-family: Montserrat Regular;
                 font-size: 15px;
@@ -3231,6 +3249,12 @@ ymaps[class$='pie-chart-content']
                     margin-right: 20px;
                     width: 20px;
                 }
+                p 
+                {
+                    color: $color-disabled;
+                    margin-top: 7px;
+                    margin-left: 42px;
+                }
             }
         }
     }
@@ -3246,6 +3270,7 @@ ymaps[class$='pie-chart-content']
     {
         display: flex;
         margin-bottom: 32px;
+        justify-content: space-between;
         &__name 
         {
             width: 16%;
@@ -3442,6 +3467,22 @@ input[type="submit"]
             padding-left: 25px;
             padding-right: 25px;
         }
+        .detailed-description-block__name
+        {
+            width: 22%;
+            p 
+            {
+                line-height: normal;
+            }
+        }
+        .detailed-description-block__text
+        {
+            width: 76%;
+            p 
+            {
+                line-height: normal;
+            }
+        }
     }
     .sidebar-profile 
     {
@@ -3941,6 +3982,7 @@ input[type="submit"]
 
 .post-resume 
 {
+    position: relative;
     .steps-post-resume 
     {
         display: flex;
@@ -4093,9 +4135,10 @@ input[type="submit"]
 
 // Разместить резюме - Шаг 3
 
-.form-experience
+.data-form-experience
 {
     border-bottom: 2px solid #DDDCE8;
+    margin-bottom: 43px;
 }
 
 .block-skip-step 
@@ -4136,6 +4179,31 @@ input[type="submit"]
 }
 
 
+// Разместить резюме - Шаг 4
+
+.work-experience
+{
+    &-block 
+    {
+        &__time 
+        {
+            font-family: Montserrat Bold;
+            font-size: 16px;
+            font-weight: bold;
+            font-stretch: normal;
+            font-style: normal;
+            line-height: 1.31;
+            letter-spacing: normal;
+            color: $color-primary;
+        }
+        p 
+        {
+            margin-bottom: 22px;
+        }
+    }
+}
+
+
 
 .footer 
 {

webpack.config.js

@@ -8,7 +8,7 @@ const isDev = process.env.NODE_ENV = 'development';
 const pages = ['index', 'articles', 'faq', 'vacancies-list', 'current-article', 'main', 'service-rules', 'access-account', 'password-recovery', 'registration', 'companies-list',
 'vacancies-map', 'companies-map', 'current-vacancy', 'current-company', '404', 'profile', 'profile-editing', 'my-resumes', 'favorites-vacancies-list',
 'favorites-vacancies-map', 'response', 'response-resume', 'response-vacancy', 'response-vacancy-not-reg', 'subscription',
-'post-resume-step1', 'post-resume-step2', 'post-resume-step3', 'post-resume-step4'];
+'post-resume-step1', 'post-resume-step2', 'post-resume-step3', 'post-resume-step4', 'current-resume'];
 
 const webpackConfig = {
     context: path.resolve(__dirname, 'src'),