small fixes, cleans up API

lootalot_front/src/App.vue

@@ -2,7 +2,7 @@
   <PlayerView :id="state.player_id" 
       v-slot="{ player, loot, notifications, actions }">
     <main id="app" class="container">
-      <header class="section">
+      <header style="padding-bottom: 1.5em;">
         <HeaderBar :app_state="state">
           <template v-slot:title>{{ player.name }}</template>
           <template v-slot:links>
@@ -21,12 +21,12 @@
               {{ p.name }}</a>
           </template>
         </HeaderBar>
-        <p v-show="notifications.length > 0">{{ notifications }}</p>
         <Wealth 
             :wealth="[player.cp, player.sp, player.gp, player.pp]" 
             :debt="player.debt"
             @update="actions.updateWealth">
-        </wealth>
+        </Wealth>
+        <p v-show="notifications.length > 0">{{ notifications }}</p>
       </header>
       <nav>
         <div class="tabs is-centered is-boxed is-medium">
@@ -44,7 +44,7 @@
            </ul>
         </div>
       </nav>
-      <main class="">
+      <main class="section">
         <template v-if="isAdding">
           <h2 v-show="playerIsGroup">ItemInput</h2>
           <AddingChest 

lootalot_front/src/AppStorage.js

@@ -6,8 +6,19 @@ const API_ENDPOINT = function (tailString) {
 }
 
 export const Api = {
+  __doFetch (endpoint, method, payload) {
+    return fetch(API_ENDPOINT(endpoint),
+        {
+            method,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload)
+        })
+        .then(r => r.json())
+  },
   fetchPlayerList () {
-      return fetch(API_ENDPOINT("players"))
+      return fetch(API_ENDPOINT("players/all"))
           .then(r => r.json())
   },
   fetchClaims () {
@@ -15,36 +26,20 @@ export const Api = {
           .then(r => r.json())
   },
   fetchLoot (playerId) {
-      return fetch(API_ENDPOINT(playerId + "/loot"))
+      return fetch(API_ENDPOINT("players/loot/" + playerId))
        	  .then(r => r.json())
   },
   putClaim (player_id, item_id) {
       const payload = { player_id, item_id };
-      return fetch(API_ENDPOINT("claims"),
-            {
-              method: 'PUT',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify(payload)
-            })
-       	    .then(r => r.json())
+      return this.__doFetch("claims", 'PUT', payload);
   },
   unClaim (player_id, item_id) {
        const payload = { player_id, item_id };
-       return fetch(API_ENDPOINT("claims"),
-            {
-              method: 'DELETE',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify(payload)
-            })
-       	    .then(r => r.json())
+       return this.__doFetch("claims", 'DELETE', payload);
   },
-  updateWealth (playerId, goldValue) {
-      return fetch(API_ENDPOINT(playerId + "/update-wealth/" + goldValue))
-          .then(r => r.json())
+  updateWealth (player_id, value_in_gp) {
+      const payload = { player_id, value_in_gp: Number(value_in_gp) };
+      return this.__doFetch("players/update-wealth", 'PUT', payload);
   }
 };
 

lootalot_front/src/components/HeaderBar.vue

@@ -2,24 +2,35 @@
   <nav class="navbar is-info">
     <div class="navbar-brand">
       <p class="navbar-item is-size-4"><slot name="title">...</slot></p>
-      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
+         @click="switchMobileVisibility">
 	  <span aria-hidden="true"></span>
 	  <span aria-hidden="true"></span>
 	  <span aria-hidden="true"></span>
 	</a>
     </div>
-    <div id="menu" class="navbar-menu">
+    <div id="menu" class="navbar-menu" :class="{'is-active': showOnMobile }">
       <div class="navbar-end">
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">Autres</a>
-        <div class="navbar-dropdown is-right">
+        <div class="navbar-dropdown is-right" @click="switchMobileVisibility">
           <slot name="links">
           <a class="navbar-item">History of Loot</a>
           </slot>
-	</div>
+	    </div>
       </div>
       </div>
     </div>
   </nav>
 </template>
 
+<script>
+    export default {
+        data () { return { showOnMobile: false } },
+        methods: {
+            switchMobileVisibility () {
+                this.showOnMobile = !this.showOnMobile
+            }
+        }
+    }
+</script>

lootalot_front/src/components/Wealth.vue

@@ -2,11 +2,11 @@
   <section class="level is-mobile">
     <div class="level-left">
       <div class="level-item">
-	    <span class="icon is-large" @click="edit = !edit">
+	    <span class="icon is-large" @click="editing = !editing">
 	      <i class="fas fa-2x fa-piggy-bank"></i>
 	    </span>
       </div>
-      <template v-if="edit">
+      <template v-if="editing">
       <div class="level-item">
         <div class="field has-addons">
           <p class="control">
@@ -56,7 +56,7 @@
         props: ["wealth", "debt"],
         data () { 
             return {
-            	edit: false,
+            	editing: false,
                 edit_value: 0,
             }; 
         },
@@ -66,9 +66,13 @@
                 this.resetValues();
             },
             resetValues () {
-            	this.edit = false;
+            	this.editing = false;
                 this.edit_value = 0;
             }
         }
     }
 </script>
+
+<style scoped>
+    .input { max-width: 9em; }
+</style>