Created Player View - WIP

package.json

@@ -40,6 +40,7 @@
     "@coreui/vue-chartjs": "^1.0.6",
     "axios": "^0.21.1",
     "lodash": "^4.17.21",
+    "moment": "^2.29.1",
     "prettier": "^2.2.1",
     "vue": "~2.6.12",
     "vue-axios": "^3.2.4",

src/views/player/ViewPlayer.vue

@@ -1,13 +1,134 @@
 <template>
-  <div>
-    <h4>
-      You're viewing details for player
-      <strong>{{ player.characterFullName }}</strong>
-    </h4>
+  <div v-if="player">
+    <CRow>
+      <CCol>
+        <CCard>
+          <CCardHeader>
+            <h4>
+              Player Details: <strong>{{ player.characterFullName }}</strong>
+            </h4>
+          </CCardHeader>
+          <CCardBody>
+            <CForm>
+              <CRow>
+                <CCol class="col-xl-4">
+                  <CInput
+                    label="Player Name:"
+                    :value="player.characterFullName"
+                    plaintext
+                    horizontal
+                  />
+                  <CInput
+                    label="Station ID:"
+                    :value="player.stationId"
+                    plaintext
+                    horizontal
+                  />
+                  <CInput
+                    label="Create Date:"
+                    :value="player.createTime"
+                    plaintext
+                    horizontal
+                  />
+                  <CInput
+                    label="Last Login:"
+                    :value="player.lastLoginTime"
+                    plaintext
+                    horizontal
+                  />
+                </CCol>
+                <CCol>
+                  <CInput
+                    label="Inventory Balance:"
+                    :value="inventory.cashBalance"
+                    plaintext
+                    horizontal
+                  />
+                  <CInput
+                    label="Bank Balance:"
+                    :value="bank.bankBalance"
+                    plaintext
+                    horizontal
+                  />
+                </CCol>
+              </CRow>
+            </CForm>
+            <CTabs>
+              <CTab title="Inventory">
+                <CDataTable :items="player.inventoryContents" :fields="fields">
+                  <template #objectid="{ item }">
+                    <td>
+                      {{ item.objectId }}
+                    </td>
+                  </template>
+                  <template #objecttemplateid="{ item }">
+                    <td>
+                      {{ item.objecttemplateid }}
+                    </td>
+                  </template>
+                  <template #deleted="{ item }">
+                    <td>
+                      <CBadge color="danger" v-if="item.deleted !== 0"
+                        >DELETED</CBadge
+                      >
+                    </td>
+                  </template>
+                  <template #deletedDate="{ item }">
+                    <td>
+                      {{
+                        item.deletedDate !== 'null'
+                          ? formatDate(item.deletedDate)
+                          : ''
+                      }}
+                    </td>
+                  </template>
+                </CDataTable>
+              </CTab>
+              <CTab title="Bank">
+                <CDataTable :items="player.bankContents" :fields="fields" />
+              </CTab>
+              <CTab title="Datapad">
+                <CDataTable :items="player.datapadContents" :fields="fields" />
+              </CTab>
+              <CTab title="Quests">
+                <CDataTable
+                  :items="player.missionBagContents"
+                  :fields="fields"
+                />
+              </CTab>
+            </CTabs>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
   </div>
 </template>
 <script>
 import SwgApi from '@/api';
+import moment from 'moment';
+
+const FIELDS = [
+  {
+    label: 'Object ID',
+    key: 'objectId',
+  },
+  {
+    label: 'Template ID',
+    key: 'objectTemplateId',
+  },
+  {
+    label: 'Static Item Name',
+    key: 'staticItemName',
+  },
+  {
+    label: 'Deleted',
+    key: 'deleted',
+  },
+  {
+    label: 'Deleted Date',
+    key: 'deletedDate',
+  },
+];
 
 export default {
   name: 'ViewPlayer',
@@ -17,6 +138,26 @@ export default {
       required: true,
     },
   },
+  computed: {
+    bank() {
+      return this.player.containers.filter(
+        (c) => c.nameStringText === 'bank'
+      )[0];
+    },
+    inventory() {
+      return this.player.containers.filter(
+        (c) => c.nameStringText === 'inventory'
+      )[0];
+    },
+    dataPad() {
+      return this.player.containers.filter(
+        (c) => c.nameStringText === 'datapad'
+      )[0];
+    },
+    fields() {
+      return FIELDS;
+    },
+  },
   methods: {
     fetchData(objectId) {
       SwgApi.player
@@ -31,6 +172,10 @@ export default {
     spread(player) {
       this.player = player;
     },
+    formatDate(d) {
+      if (!d) return '';
+      return moment(d).format('MMMM d, yyyy hh:mm a');
+    },
   },
   data() {
     return {

yarn.lock

@@ -7934,7 +7934,7 @@ mocha@6.2.3:
     yargs-parser "13.1.2"
     yargs-unparser "1.6.0"
 
-moment@^2.10.2:
+moment@^2.10.2, moment@^2.29.1:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==