Added storage stats to the account page

app/imports/ui/creature/creatureList/CharacterListToolbarItems.vue

@@ -1,33 +1,19 @@
 <template lang="html">
   <div>
-    {{ creatureCount }} /
-    <v-icon v-if="characterSlots === -1">
-      mdi-infinity
-    </v-icon>
-    <template v-else>
-      {{ characterSlots }}
-    </template>
+    <creature-storage-stats />
     <archive-button />
   </div>
 </template>
 
 <script lang="js">
-import Creatures from '/imports/api/creature/creatures/Creatures.js';
-import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import CreatureStorageStats from '/imports/ui/creature/creatureList/CreatureStorageStats.vue';
 import ArchiveButton from '/imports/ui/creature/creatureList/ArchiveButton.vue';
 
 export default {
   components: {
+    CreatureStorageStats,
     ArchiveButton,
   },
-  meteor: {
-    creatureCount(){
-      return Creatures.find({owner: Meteor.userId()}).count();
-    },
-    characterSlots(){
-      return getUserTier(Meteor.userId()).characterSlots;
-    }
-  },
 }
 </script>
 

app/imports/ui/creature/creatureList/CreatureStorageStats.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="creature-storage-stats"
+    style="display: inline-block;"
+  >
+    {{ creatureCount }} /
+    <v-icon v-if="characterSlots === -1">
+      mdi-infinity
+    </v-icon>
+    <template v-else>
+      {{ characterSlots }}
+    </template>
+  </div>
+</template>
+
+<script lang="js">
+import Creatures from '/imports/api/creature/creatures/Creatures.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+
+export default {
+  meteor: {
+    creatureCount(){
+      return Creatures.find({owner: Meteor.userId()}).count();
+    },
+    characterSlots(){
+      return getUserTier(Meteor.userId()).characterSlots;
+    }
+  },
+}
+</script>
+
+<style>
+
+</style>

app/imports/ui/dialogStack/DeleteConfirmationDialog.vue

@@ -5,7 +5,7 @@
     </v-toolbar-title>
     <div>
       <v-alert type="warning" outlined>
-        This cannot be undone
+        This can't be undone
       </v-alert>
       <p v-if="name">
         Type "{{ name }}" to permanenetly delete.

app/imports/ui/files/FileStorageStats.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-col
+    cols="12"
+    md="4"
+    lg="3"
+    class="layout column justify-center align-center"
+  >
+    <v-progress-circular
+      :rotate="-90"
+      :size="100"
+      :width="15"
+      :value="percentFileStorageUsed"
+      :buffer-value="50"
+      color="accent"
+    >
+      {{ percentFileStorageUsed }}%
+    </v-progress-circular>
+    <div class="ma-2 mt-4">
+      {{ prettyBytes(storageUsed) }} / {{ prettyBytes(storageAllowed) }}
+      <v-btn
+        icon
+        @click="updateStorageUsed"
+      >
+        <v-icon>mdi-refresh</v-icon>
+      </v-btn>
+    </div>
+  </v-col>
+</template>
+
+<script lang="js">
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
+import updateFileStorageUsed from '/imports/api/users/methods/updateFileStorageUsed.js';
+import prettyBytes from 'pretty-bytes';
+
+export default {
+   meteor: {
+    storageUsed(){
+      return Meteor.user().fileStorageUsed || 0;
+    },
+    storageAllowed(){
+      return getUserTier(Meteor.userId()).fileStorage * 1000000;
+    },
+    percentFileStorageUsed(){
+      return Math.round((this.storageUsed / this.storageAllowed) * 100);
+    },
+  },
+    methods: {
+    prettyBytes(input){
+      return prettyBytes(input)
+    },
+    updateStorageUsed(){
+      this.updateStorageUsedLoading = true;
+      updateFileStorageUsed.call(error => {
+        this.updateStorageUsedLoading = false;
+        if (!error) return;
+        snackbar({text: error.reason});
+      });
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>

app/imports/ui/pages/Account.vue

@@ -8,6 +8,18 @@
       style="flex-basis: 900px"
     >
       <v-list>
+        <v-subheader>
+          File storage used
+        </v-subheader>
+        <file-storage-stats />
+        <v-subheader>
+          Character storage used
+        </v-subheader>
+        <v-list-item>
+          <v-list-item-title>
+            <creature-storage-stats />
+          </v-list-item-title>
+        </v-list-item>
         <v-subheader>
           Preferences
         </v-subheader>
@@ -221,8 +233,14 @@
   import { getUserTier } from '/imports/api/users/patreon/tiers.js';
   import addEmail from '/imports/api/users/methods/addEmail.js';
   import removeEmail from '/imports/api/users/methods/removeEmail.js';
+  import CreatureStorageStats from '/imports/ui/creature/creatureList/CreatureStorageStats.vue';
+  import FileStorageStats from '/imports/ui/files/FileStorageStats.vue';
 
   export default {
+    components: {
+      CreatureStorageStats,
+      FileStorageStats,
+    },
     meteor: {
       $subscribe: {
         'userPublicProfiles'(){

app/imports/ui/pages/Files.vue

@@ -1,32 +1,7 @@
 <template>
   <v-container>
     <v-row justify="center">
-      <v-col
-        cols="12"
-        md="4"
-        lg="3"
-        class="layout column justify-center align-center"
-      >
-        <v-progress-circular
-          :rotate="-90"
-          :size="100"
-          :width="15"
-          :value="percentFileStorageUsed"
-          :buffer-value="50"
-          color="accent"
-        >
-          {{ percentFileStorageUsed }}%
-        </v-progress-circular>
-        <div class="ma-2 mt-4">
-          {{ prettyBytes(storageUsed) }} / {{ prettyBytes(storageAllowed) }}
-          <v-btn
-            icon
-            @click="updateStorageUsed"
-          >
-            <v-icon>mdi-refresh</v-icon>
-          </v-btn>
-        </div>
-      </v-col>
+      <file-storage-stats />
     </v-row>
     <v-row dense>
       <template v-if="archiveFiles && archiveFiles.length">
@@ -51,13 +26,12 @@
 import ArchiveCreatureFiles from '/imports/api/creature/archive/ArchiveCreatureFiles.js';
 import prettyBytes from 'pretty-bytes';
 import ArchiveFileCard from '/imports/ui/files/ArchiveFileCard.vue';
-import { getUserTier } from '/imports/api/users/patreon/tiers.js';
-import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
-import updateFileStorageUsed from '/imports/api/users/methods/updateFileStorageUsed.js';
+import FileStorageStats from '/imports/ui/files/FileStorageStats.vue';
 
 export default {
   components: {
     ArchiveFileCard,
+    FileStorageStats,
   },
   data(){ return {
     updateStorageUsedLoading: false,
@@ -67,15 +41,6 @@ export default {
       'archiveCreatureFiles': [],
       'characterList': [],
     },
-    storageUsed(){
-      return Meteor.user().fileStorageUsed || 0;
-    },
-    storageAllowed(){
-      return getUserTier(Meteor.userId()).fileStorage * 1000000;
-    },
-    percentFileStorageUsed(){
-      return Math.round((this.storageUsed / this.storageAllowed) * 100);
-    },
     archiveFiles() {
       var userId = Meteor.userId();
       return ArchiveCreatureFiles.find(
@@ -91,18 +56,5 @@ export default {
       });
     },
   },
-  methods: {
-    prettyBytes(input){
-      return prettyBytes(input)
-    },
-    updateStorageUsed(){
-      this.updateStorageUsedLoading = true;
-      updateFileStorageUsed.call(error => {
-        this.updateStorageUsedLoading = false;
-        if (!error) return;
-        snackbar({text: error.reason});
-      });
-    },
-  },
 }
 </script>