moves all api logic inside PlayerView, found weird bug in unpack_gold_value (floating error)

lootalot_front/src/components/Chest.vue

@@ -47,6 +47,8 @@
             <td>
               <Request
                 v-if="perms.canGrab"
+                :id="player"
+                :claims="claims"
                 :item="item.id"
                 @claim="(data) => $emit('claim', data)"
                 @unclaim="(data) => $emit('unclaim', data)"
@@ -68,6 +70,7 @@
     import Request from './Request.vue'
     import PercentInput from './PercentInput.vue'
     import Selector from './Selector.vue'
+    import { api } from '../lootalot.js'
     /*
         The chest displays a collection of items.
 
@@ -77,6 +80,10 @@
     */
     export default {
         props: {
+            player: {
+                type: Number,
+                required: true,
+            },
             items: {
                 type: Array,
                 required: true,
@@ -85,6 +92,10 @@
                 type: Object,
                 required: true,
             },
+            claims: {
+                type: Object,
+                required: true,
+            },
         },
         components: {
             Request,

lootalot_front/src/components/PlayerView.js

@@ -11,7 +11,20 @@ export default {
         },
         notifications: [],
         loot: [],
+        claims: {},
     }},
+    created () {
+        api.fetch("claims", "GET", null)
+            .then(r => {
+                for (var idx in r.value) {
+                    var claim = r.value[idx];
+                    if (!(claim.player_id in this.claims)) {
+                        this.$set(this.claims, claim.player_id, []);
+                    }
+                    this.claims[claim.player_id].push(claim.loot_id);
+                }
+            });
+    },
     methods: {
         parseUpdate (update) {
             if (update.Wealth) {
@@ -21,16 +34,24 @@ export default {
                 this.player.gp += w.gp;
                 this.player.pp += w.pp;
             }
-            if (update.ItemAdded) {
+            else if (update.ItemAdded) {
                 var i = update.ItemAdded;
                 this.loot.push(i);
             }
-            if (update.ItemRemoved) {
+            else if (update.ItemRemoved) {
                 var i = update.ItemRemoved;
                 this.loot.splice(this.loot.indexOf(i), 1);
             }
-            if (update.ClaimAdded || update.ClaimRemoved) {
-                console.error("cannot handle claim !", update);
+            else if (update.ClaimAdded) {
+                var c = update.ClaimAdded;
+                this.claims[c.player_id].push(c.loot_id);
+            }
+            else if (update.ClaimRemoved) {
+                var c = update.ClaimRemoved;
+                this.claims[c.player_id].splice(
+                    this.claims[c.player_id].indexOf(c.loot_id),
+                    1
+                );
             }
         },
         call (resource, method, payload) {
@@ -79,7 +100,8 @@ export default {
                     withdrawClaim: this.withdrawClaim,
                     buyItems: this.buyItems,
                     sellItems: this.sellItems,
-            }
+            },
+            claims: this.claims,
         })
     }
 }

lootalot_front/src/components/Request.vue

@@ -14,7 +14,7 @@
         </span>
       </button>
     </template>
-    <button class="button is-primary is-fullwidth" 
+    <button class="button is-primary"
       @click="putRequest"
       :disabled="isRequested">
       <span class="icon is-small">
@@ -27,26 +27,36 @@
 <script>
     import { AppStorage } from '../AppStorage'
     export default {
-        props: ["item"],
-        data () { 
-            return AppStorage.state;
+        props: {
+            // Id of active player
+            id: {
+                type: Number,
+                required: true,
+            },
+            // Map of all claims
+            claims: {
+                type: Object,
+                required: true,
+            },
+            // Id of item we are bound to
+            item: {
+                type: Number,
+                required: true,
+            }
         },
         computed: {
             // Check if item is requested by active player
             isRequested () {
-                const reqs = this.player_claims[this.player_id];
-                return reqs.includes(this.item);
+                return this.claims[this.id].includes(this.item);
             },
             // Check if item is requested by multiple players including active one
             isInConflict () {
-                const reqs = this.player_claims;
-                const playerId = this.player_id;
                 var reqByPlayer = false;
                 var reqByOther = false;
-                for (var key in reqs) {
-                    const isReq = reqs[key].includes(this.item);
+                for (var id in this.claims) {
+                    const isReq = this.claims[id].includes(this.item);
                     if (isReq) {
-                        if (key == playerId) {
+                        if (id == this.id) {
                             reqByPlayer = true;
                         } else {
                             reqByOther = true;