TSC Form

Payment Form

by popsyjunior

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="payment-form">
  <form method="post">
    <input type="hidden" name="request" />
    
    <hr />
    I am paying for 
    <att-counter p-type="children" v-on:paymentUpdated="updateTotal"></att-counter>
    <att-counter p-type="adults" v-on:paymentUpdated="updateTotal"></att-counter>
    
    <label v-text="total"></label>

  </form>
</div>

CSS

.cp-amt {
    margin-top: 40px;
    float: right;
    right: 77px;
    z-index: 38;
    position: absolute;
    color: #3aa1bb;
}

JavaScript

var paymentPlan = {
	"children": 10000,
  "adults": 20000
};

Vue.component('att-counter', {
	props: ["pType"],
  data: function() {
    return {
      item_count: 0
    };
  },
  computed: {
  	amount: function() {
    	var amt = paymentPlan[this.pType] * this.item_count;
      
      return amt;
    }
  },
  methods: {
  	reduceCount: function() {
    	if( this.item_count == 0 ) {
      	return;
      }
      
      this.item_count -= 1;
      this.$emit("paymentUpdated");
    },
    addCount: function() {
    	this.item_count += 1;
      this.$emit("paymentUpdated");
    }
  },
	template: `
  	<div class="form-group">
      <label>Number of {{pType}}: </label>
      <label v-text="amount" class="cp-amt"></label>
      <div class="input-group">
      	<input type="number" class="form-control" v-model="item_count" />
      	<span class="input-group-btn">
        <button class="btn btn-secondary" type="button" v-on:click="reduceCount">-</button>
        <button class="btn btn-secondary" type="button" v-on:click="item_count += 1">+</button>
      	</span>
      </div>
	</div>`
});

var app = new Vue({
	el: "#payment-form",
  data: {
  	total: 0
  },
  methods: {
  	updateTotal: function(){
      console.log("faslfjfl");
    	alert("Updating");
    }
  }
});