https://musor-vyvoz-spb.ru/assets/calculator/calculator.js

1//************* Global variables *********
2const rangeSlider = document.querySelector('.range-input')
3const rangeLabel = document.querySelector('.range__label')
4const rangeTicks = document.querySelector('.range__ticks')
5const totalLabel = document.querySelector('.calc__total-sum label')
6const descriptionText = document.querySelector('.description-text')
7const modalWindowDescription = document.querySelector('.modal-description')
8const moversCheckbox = document.querySelector('.calc__checkbox-input[name=pogruzka]')
9const cashlessCheckbox = document.querySelector('.calc__checkbox-input[name=beznal]')
10
11const removeActiveClass = (elements) => {
12  for (const element of elements) {
13    if (element.classList.contains('_active')) {
14      element.classList.remove('_active')
15    }
16  }
17}
18const checkWhatIcon = (element) => {
19  if (element.parentElement.classList.contains('slider-item')) {
20    rangeLabel.classList.remove('disabled-range')
21    rangeTicks.classList.remove('disabled-range')
22    rangeSlider.disabled = false
23  } else {
24    rangeLabel.classList.add('disabled-range')
25    rangeTicks.classList.add('disabled-range')
26    rangeSlider.disabled = true
27  }
28}
29// клик по иконке выбор газели или пухто
30const iconsImgs = document.querySelectorAll('.item-img')
31if (iconsImgs.length > 0) {
32  for (const iconsImg of iconsImgs) {
33    iconsImg.addEventListener('click', () => {
34      removeActiveClass(iconsImgs)
35      iconsImg.classList.add('_active')
36      checkWhatIcon(iconsImg)
37      getTotalSum()
38    })
39  }
40}
41//изменение значения rangeSlider
42if (rangeSlider) {
43  rangeSlider.addEventListener('input', (event) => {
44    if (Number(event.target.value) !== 0) {
45      rangeLabel.textContent = event.target.value + 'м\u00B3'
46    } else {
47      rangeLabel.textContent = '1м\u00B3'
48    }
49    getTotalSum()
50  })
51}
52// изменение чекбоксов
53if (moversCheckbox) {
54  moversCheckbox.addEventListener('change', () => {
55    getTotalSum()
56  })
57}
58if (cashlessCheckbox) {
59  cashlessCheckbox.addEventListener('change', () => {
60    getTotalSum()
61  })
62}
63// создание описания выбранных параметров
64const createDescription = (descriptionObject) => {
65  let descriptionString = ''
66  let moversString = ''
67  let cashlessString = ''
68
69  descriptionString = `${descriptionObject.type}${descriptionObject.volume}м\u00B3`
70
71  descriptionObject.movers ? moversString = ', с грузчиками' : moversString = ''
72  descriptionString = descriptionString + moversString
73
74  descriptionObject.cashless ? cashlessString = ', безналичный расчет (+22%)' : cashlessString = ''
75  descriptionString = descriptionString + cashlessString
76
77  descriptionText.textContent = descriptionString
78  // добавление описания в модальное окно
79  if (modalWindowDescription) {
80    // добавление описания в модальное окно
81    modalWindowDescription.value = descriptionString
82  }
83}
84// рассчет и вывод итоговой суммы
85const getTotalSum = () => {
86  let totalSum = 0
87  let descriptionObject = {}
88
89  if (iconsImgs.length > 0) {
90    for (const iconsImg of iconsImgs) {
91      if (iconsImg.classList.contains('_active')) {
92        if (iconsImg.dataset.type === 'puhto27') {
93          totalSum = moversCheckbox.checked ? prices['puhto27'].movers : prices['puhto27'].nomovers
94          descriptionObject = { type: 'Пухто ', volume: 27, movers: moversCheckbox.checked, cashless: cashlessCheckbox.checked}
95        } else if (iconsImg.dataset.type === 'puhto20') {
96          totalSum = moversCheckbox.checked ? prices['puhto20'].movers : prices['puhto20'].nomovers
97          descriptionObject = { type: 'Пухто ', volume: 20, movers: moversCheckbox.checked, cashless: cashlessCheckbox.checked}
98        } else if (iconsImg.dataset.type === 'gazel') {
99          const index = Number(rangeSlider.value) === 0 ? 1 :  Number(rangeSlider.value)
100          totalSum = moversCheckbox.checked ? prices.gazel[`gazel${index}`].movers : prices.gazel[`gazel${index}`].nomovers
101          descriptionObject = { type: 'Газель ', volume: index, movers: moversCheckbox.checked, cashless: cashlessCheckbox.checked}
102        }
103      } 
104    }
105  }
106
107  if (cashlessCheckbox) totalLabel.textContent = cashlessCheckbox.checked ? Math.trunc(totalSum * 1.22) : totalSum
108  createDescription(descriptionObject)
109}
110
111getTotalSum()