ionic 3 calculate items after doing drag and drop

Question

I'm very new in software project and currently working on final year project, mobile apps using ionic 3 framework. I have drag and drop function, first bucket with list of items and second bucket is empty. When I want to drag the items from 1st bucket to the 2nd bucket, I want to calculate the price for each entry at the second bucket but I really don't have idea to do it. Can someone help me with the codes :(

this is my calculate.ts

  q1 = [];
  q2 = [];
  details: any = [];
  totalPrice: number;

  constructor(public navCtrl: NavController, private postPvdr: PostProvider, public navParams: NavParams, public dragulaService: DragulaService, public AlertController:AlertController) {

    dragulaService.drop().subscribe((value) => {

      console.log(value)
  });

    const bag: any = this.dragulaService.find('bag');
    if (bag !== undefined ) this.dragulaService.destroy('bag');

    this.dragulaService.createGroup('bag', {
      revertOnSpill: true,
    });


  }

  ionViewDidLoad() {
    this.details = [];
    this.getlist();
    this.getTotalPrice()
  }

  getlist(){
    let body = {
      aksi: 'get_user'
    };
    this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
      for(let detail of data.result){
        this.details.push(detail);
        console.log(data);
      }

    });
  }

  getTotalPrice(){
    let totalPrice = 0;
    let body = {
      aksi: 'get_user'
    };
    this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
    for(let detail of data.result){
      totalPrice += Number.parseFloat(detail.dest_budget);

    }
  });
  console.log(totalPrice);
    return totalPrice;
  }

these lines of codes seem weird because i just do try n error

this is my calculate.html

<ion-content padding>
  <ion-row>
    <ion-col width-50 class="left">
      <div class="header">First Bucket</div>
      <ion-list [dragula]='"bag"' [(dragulaModel)]="details">
        <button ion-item *ngFor="let detail of details">
          {{detail.dest_name}}
          <p>{{ detail.dest_budget}}</p>
        </button>
      </ion-list>
    </ion-col>

    <ion-col width-50 class="right">
      <div class="header">Second Bucket</div>
      <ion-list [dragula]='"bag"' [(dragulaModel)]="q2">
        <div ion-item *ngFor="let detail of q2">
          {{detail.dest_name}}
          <p>{{ detail.dest_budget }}</p>
        </div>
      </ion-list>
    </ion-col>
  </ion-row>
</ion-content>

<ion-footer>
    <ion-toolbar>
      <ion-title>Total Price:</ion-title>
    </ion-toolbar>
  </ion-footer>

the total price should be showing at the footer

here is my interface looks like

hope someone can help :)

score 0 · Answer 1 · answered May 16 '19 at 09:08

call function here

dragulaService.drop().subscribe((value) => {
    this.getTotalPrice();
});

modify the function

getTotalPrice(){
    this.totalPrice = 0;
    let body = {
        aksi: 'get_user'
    };
    this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
        for(let detail of data.result){
            this.totalPrice += Number.parseFloat(detail.dest_budget);
        }
    });
}

and bind model

<ion-footer>
    <ion-toolbar>
        <ion-title>Total Price:{{totalPrice}}</ion-title>
    </ion-toolbar>
</ion-footer>

it works but the problem is, when i drag only one item in 2nd bucket, it shows total price for all the items in 1st bucket instead of the 2nd bucket — ween, May 16 '19 at 11:03

ionic 3 calculate items after doing drag and drop

1 Answers1