From 0fcaa422142893778da8e9ab848e27054b4630f0 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Wed, 30 Mar 2016 23:03:14 -0400
Subject: [PATCH] Updated the user_data array to store the position from
 `item.bundles`.

All of the associated check, get, and set methods have been updated.
I have no idea if these are as performant or not.
---
 index.html | 24 ++++++++++++------------
 main.js    | 30 +++++++++++++++++++-----------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 208f315..1a7a636 100644
--- a/index.html
+++ b/index.html
@@ -163,11 +163,11 @@
                                 <div class="content">
                                     <p class="control">
                                         <a class="button is-fullwidth" v-for="bundle_id in item.bundles"
-                                           v-on:click="toggleItemInBundle(bundle_id, item.id)"
-                                           v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'is-success' : 'is-danger']">
+                                           v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
+                                           v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
                                                 <span class="icon">
                                     <i class="fa"
-                                       v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'fa-check-square-o' : 'fa-square-o']"></i>
+                                       v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
                                 </span>
                                             <span>{{ static.bundles[bundle_id].name }}</span>
                                         </a>
@@ -237,11 +237,11 @@
                         <div class="content">
                             <p class="control">
                                 <a class="button is-danger is-fullwidth" v-for="bundle_id in item.bundles"
-                                   v-on:click="toggleItemInBundle(bundle_id, item.id)"
-                                   v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'is-success' : 'is-danger']">
+                                   v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
+                                   v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
                                         <span class="icon">
                                     <i class="fa"
-                                       v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'fa-check-square-o' : 'fa-square-o']"></i>
+                                       v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
                                 </span>
                                     <span>{{ static.bundles[bundle_id].name }}</span>
                                 </a>
@@ -312,11 +312,11 @@
                                 <div class="content">
                                     <p class="control">
                                         <a class="button is-danger is-fullwidth" v-for="bundle_id in item.bundles"
-                                           v-on:click="toggleItemInBundle(bundle_id, item.id)"
-                                           v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'is-success' : 'is-danger']">
+                                           v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
+                                           v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
                                                 <span class="icon">
                                             <i class="fa"
-                                               v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'fa-check-square-o' : 'fa-square-o']"></i>
+                                               v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
                                         </span>
                                             <span>{{ static.bundles[bundle_id].name }}</span>
                                         </a>
@@ -389,11 +389,11 @@
                                 <div class="content">
                                     <p class="control">
                                         <a class="button is-danger is-fullwidth" v-for="bundle_id in item.bundles"
-                                           v-on:click="toggleItemInBundle(bundle_id, item.id)"
-                                           v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'is-success' : 'is-danger']">
+                                           v-on:click="toggleItemInBundle(bundle_id, item.id, $index)"
+                                           v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'is-success' : 'is-danger']">
                                                 <span class="icon">
                                             <i class="fa"
-                                               v-bind:class="[isItemInBundle(bundle_id, item.id) ? 'fa-check-square-o' : 'fa-square-o']"></i>
+                                               v-bind:class="[isItemInBundle(bundle_id, item.id, $index) ? 'fa-check-square-o' : 'fa-square-o']"></i>
                                         </span>
                                             <span>{{ static.bundles[bundle_id].name }}</span>
                                         </a>
diff --git a/main.js b/main.js
index f5132a2..0574481 100644
--- a/main.js
+++ b/main.js
@@ -70,23 +70,31 @@ var v = new Vue({
         change_skill: function(new_skill){
             this.active_skill = new_skill;
         },
-        addItemToBundle: function(bundleId, itemId){
-            this.user_data[bundleId].push(itemId);
+        addItemToBundle: function(bundleId, itemId, itemPosition){
+            this.user_data[bundleId].push({item: itemId, position: itemPosition});
         },
-        removeItemFromBundle: function(bundleId, itemId){
-            i = this.user_data[bundleId].indexOf(itemId);
-            this.user_data[bundleId].splice(i, 1);
+        removeItemFromBundle: function(bundleId, itemId, itemPosition){
+            console.log("Removing item from bundle" + bundleId + " | " + itemId + " | " + itemPosition);
+            for(i = 0; i < this.user_data[bundleId].length; i++){
+                if(this.user_data[bundleId][i].item === itemId && this.user_data[bundleId][i].position === itemPosition){
+                    console.log("Found a match with: ");
+                    console.log(this.user_data[bundleId][i]);
+                    this.user_data[bundleId].splice(i, 1);
+                }
+            }
         },
-        toggleItemInBundle: function(bundleId, itemId){
-            if(this.isItemInBundle(bundleId, itemId)){
-                this.removeItemFromBundle(bundleId, itemId);
+        toggleItemInBundle: function(bundleId, itemId, itemPosition){
+            if(this.isItemInBundle(bundleId, itemId, itemPosition)){
+                this.removeItemFromBundle(bundleId, itemId, itemPosition);
             }
             else{
-                this.addItemToBundle(bundleId, itemId);
+                this.addItemToBundle(bundleId, itemId, itemPosition);
             }
         },
-        isItemInBundle: function(bundleId, itemId){
-            if(this.user_data[bundleId].indexOf(itemId) > -1){
+        isItemInBundle: function(bundleId, itemId, itemPosition){
+            if(this.user_data[bundleId].filter(function(element){
+                    return element.item === itemId && element.position === itemPosition;
+                }).length > 0){
                 return true;
             }
             else{