calc_embez

calc_embez.markdown

calc_embez

A Pen by Filipp Chapkovski on CodePen.

License.

index.html

<div class="container" id='vue-app'>
  <div class="row">
    <div class="col">
      <div class="form-group required">

        <label class="col-form-label" for="id_k_declare_0">Выберите для примера значение коэффициента К:</label>
        <div class="controls  field-k_declare">

          <div class="form-check form-check-inline" v-for='(i, ind) in  KChoices'>
            <input type="radio" name="k_declare" :value='i' v-model='trueK' required :id="`id_true_k_${ind}`" class="form-check-input">

            <label :for="`id_true_k_${ind}`" class="form-check-label">[[i]]</label>
          </div>

        </div>

      </div>
      <div class="alert alert-danger my-3">
        Истинное значение коэффициента: [[trueK]]
      </div>

      <div class="form-group required">

        <label class="col-form-label" for="id_k_declare_0">Выберите значение коэффициента, которое Вы объявите Гражданину:</label>
        <div class="controls  field-k_declare">

          <div class="form-check form-check-inline" v-for='(i, ind) in  KDchoices'>
            <input type="radio" name="k_declare" :value='i' v-model='declaredK' required :id="`id_k_declare_${ind}`" class="form-check-input">

            <label :for="`id_k_declare_${ind}`" class="form-check-label">[[i]]</label>
          </div>

        </div>

      </div>
      <div class="info" v-if='declaredK'>
        <div class="alert alert-info">
          Вы уменьшаете бонус Гражданина на [[citizenBonusDiff()]]
        </div>
        <div class="alert alert-info">
          Вы увеличиваете свой бонус на [[officerBonusDiff()]]
        </div>
      </div>
    </div>
  </div>
</div>

script.js

var app = new Vue({
  el: "#vue-app",
  data() {
    return {
      initialK: null,
      KChoices: [1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3],
      trueK: null,
      totalTaxesPaid: 10,
      declaredK: null
    };
  },
  computed: {
    kDiff() {
      return this.trueK - this.declaredK;
    },
    KDchoices() {
      return _.map(_.range(1, this.trueK + 0.001, 0.25), (i) => _.round(i, 2));
    }
  },
  methods: {
    citizenBonusDiff() {
      return (this.kDiff * this.totalTaxesPaid) / 2;
    },
    officerBonusDiff() {
      return this.kDiff * this.totalTaxesPaid;
    }
  },
  delimiters: ["[[", "]]"]
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />