simulator_controller.js

import { Controller } from "stimulus"
import Inputmask from 'inputmask';

export default class extends Controller {
  static targets = ['employees', 'amount', 'fullresult', 'result', 'economy', 'resultContent', 'calculator', 'id', 'emailBtn', 'leadBtn']
  connect(){
    this.params = ['employees', 'amount', 'fullresult', 'result', 'economy', 'id']
    var _component = this
    this.state = 'valid'
    var im = new Inputmask('999,99')
    im.mask(this.amountTarget)
    this.amountTarget.value = '230,00'
    this.employeesTarget.value = '10'
    if (sessionStorage.getItem('simulatorLeadId') != null) { this.idTarget.value = sessionStorage.getItem('simulatorLeadId') }
  }
  calculate(){
    let amount = parseFloat(this.amountTarget.value)
    let employees = parseInt(this.employeesTarget.value)
    if (this.state == 'valid') {
      let fullResult = (amount * employees).toFixed(2)
      let result = (fullResult * 0.7).toFixed(2)
      let economy = (fullResult - result).toFixed(2)

      this.fullresultTarget.textContent = fullResult.replace(/\./,',')
      this.resultTarget.textContent = result.replace(/\./,',')
      this.economyTarget.textContent = economy.replace(/\./,',')
      this.resultContentTarget.classList.remove('d-none')
      this.resultContentTarget.classList.add('animated', 'bounceInDown')
      this.calculatorTarget.classList.add('d-none')
    }
  }
  reset() {
    this.calculatorTarget.classList.remove('d-none')
    this.calculatorTarget.classList.add('animated', 'bounceInDown')
    this.resultContentTarget.classList.add('d-none')

    this.emailBtnTarget.classList.add('btn-primary')
    this.emailBtnTarget.classList.remove('btn-success')
    $(this.emailBtnTarget).html('<i class="fa fa-envelope-open-text " style=""></i> Enviar simulação para o meu e-mail.').attr('disabled', false)
  }
  validate() {
    let element = event.target
    let value = parseInt(element.value)
    if (value <= 0 || Number.isNaN(value)) {
      $(element).addClass('is-invalid')
      $(element).siblings('.invalid-feedback').text('Preencha corretamente o campo')
      this.state = 'invalid'
    } else {
      $(element).removeClass('is-invalid').addClass('is-valid')
      $(element).siblings('.invalid-feedback').text('')
      this.state = 'valid'
    }
  }
  sendEmail() {
    var token = document.getElementsByName('csrf-token')[0].content
    let values = {
    }
    var _component = this
    $(this.params).each(function(){
      values[this] = _component[this+'Target'].value || _component[this+'Target'].textContent
    })
    let url = this.idTarget.dataset.path
    $.ajax(url,
      {
        data: { lead: values },
        method: "POST",
        headers: {
          "X-CSRF-Token": token
        },
        beforeSend: function(response) {
          $(_component.emailBtnTarget).attr('disabled', true)
        },
        success: function(response) {
          _component.emailBtnTarget.classList.remove('btn-primary')
          _component.emailBtnTarget.classList.add('btn-success')
          $(_component.emailBtnTarget).html('<i class="fa fa-check"></i> ' + response.message).attr('disabled', true)
        }
      }
    )
  }
  leadForm() {
    let target_top = $('#cotacao').offset().top
    if (target_top < 0) { target_top = 0 }

    $('html, body').animate({scrollTop:target_top}, 1500)
    let $name_field = $('#new_lead').find('input[name="lead[name]"]')
    let $email_field = $('#new_lead').find('input[name="lead[email]"]')
    $name_field.val(window.sessionStorage.getItem('simulatorLeadName'))
    $('#new_lead').find('input[name="lead[email]"]')
    $email_field.val(window.sessionStorage.getItem('simulatorEmail'))

  }
}