refactor PlayerView, plans to replace ApiStorage.js by lootalot.js api module

lootalot_front/src/components/PlayerView.js

@@ -1,70 +1,73 @@
-import { Api, AppStorage } from '../AppStorage'
+import { api } from '../lootalot.js'
 
 export default {
     props: ["id"],
     data () { return {
+        player: {
+            name: "Loading",
+            id: 0,
+            cp: '-', sp: '-', gp: '-', pp: '-',
+            debt: 0,
+        },
         notifications: [],
         loot: [],
     }},
     methods: {
-        updateWealth (value) {
-            AppStorage.updatePlayerWealth(value)
-                .then(_ => {if (AppStorage.debug) this.notifications.push("Wealth updated")})
-                .catch(e => {if (AppStorage.debug) console.error("wealthUpdate Error", e)})
+        parseUpdate (update) {
+            if (update.Wealth) {
+                var w = update.Wealth;
+                this.player.cp += w.cp;
+                this.player.sp += w.sp;
+                this.player.gp += w.gp;
+                this.player.pp += w.pp;
+            }
+            if (update.ItemAdded) {
+                var i = update.ItemAdded;
+                this.loot.push(i);
+            }
+            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);
+            }
         },
-        putClaim (itemId) {
-            AppStorage.putRequest(itemId)
-                .then(_ => { if (AppStorage.debug) this.notifications.push("Claim put")})
-        },
-        withdrawClaim (itemId) {
-            AppStorage.cancelRequest(itemId)
-                .then(_ => { if (AppStorage.debug) this.notifications.push("Claim withdrawn")})
-
-        },
-        buyItems(items) {
-            AppStorage.buyItems(items)
-                .then((items) => {
-                    this.notifications.push(`Bought ${items.length} items`)
-                    this.loot = this.loot.concat(items);
+        call (resource, method, payload) {
+            return api.fetch(`players/${this.id}/${resource}`, method, payload)
+                .then(response => {
+                    if (response.notification) {
+                        this.notifications.push(response.notification)
+                    }
+                    if (response.errors) {
+                        this.notifications.push(response.errors)
+                    }
+                    if (response.updates) {
+                        for (var idx in response.updates) {
+                            this.parseUpdate(response.updates[idx]);
+                        }
+                    }
+                    return response.value;
                 })
         },
-        sellItems (items) {
-            AppStorage.sellItems(items)
-              .then(_ => {
-                  this.notifications.push(`Sold ${items.length} items`)
-                  for (var idx in items) {
-                      var to_remove = items[idx][0];
-                      this.loot = this.loot.filter((item) => item.id != to_remove);
-                  }
-              })
-        },
-        parseLoot (items) {
-            this.loot = [];
-            items.map(item => {
-                this.loot.push(item);
-            });
-        }
+        updateWealth (value) { this.call("wealth", "PUT", Number(value)) },
+        putClaim (itemId) { this.call("claims", "PUT", itemId) },
+        withdrawClaim (itemId) { this.call("claims", "DELETE", itemId) },
+        buyItems(items) { this.call("loot", "PUT", items) },
+        sellItems (items) { this.call("loot", "DELETE", items) },
     },
     watch: {
         id: {
             immediate: true,
             handler: function(newId) {
-                Api.fetchLoot(newId).then(this.parseLoot);
-            }
-        },
-    },
-    computed: {
-        player () {
-            if (!AppStorage.state.initiated) {
-                return { name: "Loading", 
-                         id: 0, 
-                         cp: '-', sp: '-', gp: '-', pp: '-', 
-                         debt: 0 };
-            } else {
-                return AppStorage.state.player_list[this.id];
+                this.call("", "GET", null)
+                    .then(p => this.player = p)
+                this.call("loot", "GET", null)
+                    .then(l => this.loot = l)
             }
         },
     },
+    computed: {},
     render () {
         return this.$scopedSlots.default({
             player: this.player, 

lootalot_front/src/lootalot.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+
+const API_BASEURL = "http://localhost:8088/api/"
+const API_ENDPOINT = function (tailString) {
+  return API_BASEURL + tailString;
+}
+
+export const api = {
+    fetch: function(endpoint, method, payload) {
+        var config = {
+            method,
+             headers: {
+                'Content-Type': 'application/json',
+            },
+        };
+        if (payload) {
+            config.body = JSON.stringify(payload);
+        }
+        return fetch(API_ENDPOINT(endpoint), config)
+            .then(r => r.json());
+    }
+}