more refactoring, removing imports

lootalot_front/src/App.vue

@@ -1,18 +1,42 @@
 <template>
   <main id="app" class="container">
     <PlayerView :id="state.player_id" 
-      v-slot="{ player, notifications, actions }">
+      v-slot="{ player, loot, notifications, actions }">
       <section class="section">
         <HeaderBar :app_state="state">
           <template v-slot:title>{{ player.name }}</template>
+          <template v-slot:links>
+            <a class="navbar-item">History of Loot</a>
+            <template v-if="playerIsGroup">
+              <hr class="navbar-divider">
+              <div class="navbar-item heading">Admin</div>
+              <a class="navbar-item">"Resolve claims"</a>
+              <a class="navbar-item">"Add player"</a>
+            </template>
+            <hr class="navbar-divider">
+            <div class="navbar-item heading">Changer</div>
+            <a v-for="(p,i) in state.player_list" :key="i"
+              @click="setActivePlayer(i)"
+              href="#" class="navbar-item">
+              {{ p.name }}</a>
+          </template>
         </HeaderBar>
-        <p v-if="notifications">{{ notifications }}</p>
+        <p v-if="notifications.length > 0">{{ notifications }}</p>
         <Wealth 
             :wealth="[player.cp, player.sp, player.gp, player.pp]" 
             :debt="player.debt"
             @update="actions.updateWealth">
         </wealth>
-        <Chest :player="state.show_player_chest ? player.id : 0"
+        <div class="tabs is-centered is-boxed is-medium" v-show="!playerIsGroup">
+          <ul>
+            <li :class="{ 'is-active': !state.show_player_chest }">
+              <a @click="switchPlayerChestVisibility">Coffre de groupe</a></li>
+            <li :class="{ 'is-active': state.show_player_chest }">
+              <a @click="switchPlayerChestVisibility">Mon coffre</a></li>
+          </ul>
+        </div>
+        <Chest :items="state.show_player_chest ? loot : state.group_loot"
+               :player="state.show_player_chest ? player.id : 0"
             @claim="actions.putClaim"
             @unclaim="actions.withdrawClaim"></Chest>
       </section>
@@ -68,6 +92,13 @@ export default {
     }
     AppStorage.initStorage(playerId);
   },
+  methods: {
+    setActivePlayer (idx) { AppStorage.setActivePlayer(idx); },
+    switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
+  },
+  computed: {
+    playerIsGroup () { return this.state.player_id == 0 },
+  }
 }
 </script>
 

lootalot_front/src/AppStorage.js

@@ -5,36 +5,30 @@ const API_ENDPOINT = function (tailString) {
   return API_BASEURL + tailString;
 }
 
-const Api = {
+export const Api = {
   fetchPlayerList () {
       return fetch(API_ENDPOINT("players"))
           .then(r => r.json())
-          .catch(e => console.error("Fetch error ", e));
   },
   fetchClaims () {
       return fetch(API_ENDPOINT("claims"))
           .then(r => r.json())
-          .catch(e => console.error("Fetch error ", e));
   },
   fetchLoot (playerId) {
       return fetch(API_ENDPOINT(playerId + "/loot"))
        	  .then(r => r.json())
-       	  .catch(e => console.error("Fetch error", e));
   },
   putClaim (playerId, itemId) {
       return fetch(API_ENDPOINT(playerId + "/claim/" + itemId))
        	  .then(r => r.json())
-       	  .catch(e => console.error("Fetch error", e));
   },
   unClaim (playerId, itemId) {
        return fetch(API_ENDPOINT(playerId + "/unclaim/" + itemId))
        	  .then(r => r.json())
-       	  .catch(e => console.error("Fetch error", e));
   },
   updateWealth (playerId, goldValue) {
       return fetch(API_ENDPOINT(playerId + "/update-wealth/" + goldValue))
           .then(r => r.json())
-          .catch(e => console.error("Fetch error", e));
   }
 };
 
@@ -44,7 +38,7 @@ export const AppStorage = {
     state: {
         player_id: 0,
         player_list: {},
-        player_loot: {},
+        group_loot: [],
         player_claims: {},
         initiated: false,
         show_player_chest: false,
@@ -55,14 +49,19 @@ export const AppStorage = {
         this.state.player_id = playerId;
         // Fetch initial data
         return Promise
-            .all([ Api.fetchPlayerList(), Api.fetchClaims(), ])
+            .all([ 
+                Api.fetchPlayerList(), 
+                Api.fetchClaims(), 
+                Api.fetchLoot(0)
+            ])
             .then(data => {
-                const [players, claims] = data;
+                const [players, claims, group_loot] = data;
                 this.__initPlayerList(players);
                 this.__initClaimsStore(claims);
+                Vue.set(this.state, 'group_loot', group_loot);
             })
-            // TODO: when __initPlayerList won't use promises
-            //.then(_ => this.state.initiated = true);
+            .then(_ => this.state.initiated = true)
+            .catch(e => { alert(e); this.state.initiated = false });
     },
     __initClaimsStore(data) {
       for (var idx in data) {
@@ -77,25 +76,8 @@ export const AppStorage = {
           if (this.debug) console.log("Creates", playerId, playerDesc.name)
           // Initiate data for a single Player.
           Vue.set(this.state.player_list, playerId, playerDesc);
-          Vue.set(this.state.player_loot, playerId, []);
           Vue.set(this.state.player_claims, playerId, []);
         }
-        // Hack for now !!
-        // Fetch all players loot and wait to set initiated to true
-        var promises = [];
-        for (var idx in data) {
-          const playerId = data[idx].id;
-          var promise = Api.fetchLoot(playerId)
-             .then(data => data.forEach(
-                item => {
-                  if (this.debug) console.log("add looted item", item, playerId)
-                  this.state.player_loot[playerId].push(item)
-                }
-             ));
-          promises.push(promise);
-        }
-        Promise.all(promises)
-            .then(_ => this.state.initiated = true)
     },
     // User actions
     // Sets a new active player by id

lootalot_front/src/components/Chest.vue

@@ -2,7 +2,7 @@
   <table class="table is-fullwidth is-striped">
     <thead>
       <tr>
-        <th>{{ player == 0 ? 'Coffre de groupe' : 'Objets'}}</th>
+        <th>Objets</th>
         <th v-if="canGrab"></th>
         <th v-if="canSell">
           <div class="buttons is-right">
@@ -18,7 +18,7 @@
       </tr>
     </thead>
     <tbody v-if="app_state.initiated">
-      <template v-for="(item, idx) in content">
+      <template v-for="(item, idx) in items">
         <tr :key="`row-${idx}`">
           <td>
             <strong>{{item.name}}</strong>
@@ -69,11 +69,16 @@
     */
     export default {
         props: {
+            items: {
+                type: Array,
+                required: true,
+                default: [] 
+            },
             player: {
                 type: Number,
                 required: true,
                 default: 0
-            }
+            },
         },
         components: {
             Request,
@@ -94,18 +99,13 @@
        	    }
         },
         computed: {
-            content () {
-            	const playerId = this.player;
-            	console.log("Refresh chest of", playerId);
-            	return this.app_state.player_loot[playerId];
-            },
             // Can the active user sell items from this chest ?
             canSell () {
                 return this.player == this.app_state.player_id;
             },
             totalSellValue () {
                 const selected = this.sell_selected;
-                return this.content
+                return this.items
                     .filter(item => selected.includes(item.id))
                     .map(item => item.base_price / 2)
                     .reduce((total,value) => total + value, 0);

lootalot_front/src/components/HeaderBar.vue

@@ -9,27 +9,13 @@
 	</a>
     </div>
     <div id="menu" class="navbar-menu">
-      <div class="navbar-start" v-if="!playerIsGroup">
-     	  <a class="navbar-item" @click="switchPlayerChestVisibility">
-     	    {{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
-      </div>
       <div class="navbar-end">
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">Autres</a>
         <div class="navbar-dropdown is-right">
+          <slot name="links">
           <a class="navbar-item">History of Loot</a>
-          <template v-if="playerIsGroup">
-            <hr class="navbar-divider">
-            <div class="navbar-item heading">Admin</div>
-            <a class="navbar-item">"Resolve claims"</a>
-            <a class="navbar-item">"Add player"</a>
-          </template>
-          <hr class="navbar-divider">
-          <div class="navbar-item heading">Changer</div>
-          <a v-for="(p,i) in app_state.player_list" :key="i"
-           @click="setActivePlayer(i)"
-           href="#" class="navbar-item">
-           {{ p.name }}</a>
+          </slot>
 	</div>
       </div>
       </div>
@@ -37,16 +23,3 @@
   </nav>
 </template>
 
-<script>
-    import { AppStorage } from '../AppStorage'
-    export default {
-        props: ["app_state"],
-        methods: {
-          setActivePlayer (idx) { AppStorage.setActivePlayer(idx); },
-          switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
-         },
-        computed: {
-          playerIsGroup () { return this.app_state.player_id == 0 },
-        }
-    }
-</script>

lootalot_front/src/components/PlayerView.js

@@ -1,9 +1,10 @@
-import { AppStorage } from '../AppStorage'
+import { Api, AppStorage } from '../AppStorage'
 
 export default {
     props: ["id"],
     data () { return {
         notifications: [],
+        loot: [],
     }},
     methods: {
         updateWealth (value) {
@@ -20,6 +21,20 @@ export default {
                 .then(_ => { if (AppStorage.debug) this.notifications.push("Claim withdrawn")})
 
         },
+        parseLoot (items) {
+            this.loot = [];
+            items.map(item => {
+                this.loot.push(item);
+            });
+        }
+    },
+    watch: {
+        id: {
+            immediate: true,
+            handler: function(newId) {
+                Api.fetchLoot(newId).then(this.parseLoot);
+            }
+        },
     },
     computed: {
         player () {
@@ -29,14 +44,14 @@ export default {
                          cp: '-', sp: '-', gp: '-', pp: '-', 
                          debt: 0 };
             } else {
-                console.log("Update player");
                 return AppStorage.state.player_list[this.id];
             }
-        }
+        },
     },
     render () {
         return this.$scopedSlots.default({
             player: this.player, 
+            loot: this.loot,
             notifications: this.notifications,
             actions: {
                     updateWealth: this.updateWealth,