Added a keys_to_names dictionary for pretty column name display

public/index.html

@@ -56,11 +56,11 @@
             </div>
             <div id="query_bar" class="row">
                 <div class="row">
-                    <input id="query_text" class="left" type="text" v-model="item_filters[query_key]" v-bind:placeholder="query_key"/>
+                    <input id="query_text" class="left" type="text" v-model="item_filters[query_key]" v-bind:placeholder="data_keys_to_names[query_key]"/>
                     <div id="query_button" class="left button" v-on:click="query_click">Search</div>
                 </div>
                 <div class="row">
-                    <div class="button left" v-on:click="item_filters[query_key]=null; query_key=key.key" v-bind:class="{ selected: key.key==query_key }" v-for="key in query_keys">{{ key.name }}</div>
+                    <div class="button left" v-on:click="item_filters[query_key]=null; query_key=key" v-bind:class="{ selected: key==query_key }" v-for="key in query_keys">{{ data_keys_to_names[key] }}</div>
                 </div>
             </div>
             <div id="stage" class="row">
@@ -76,7 +76,7 @@
                     <thead id="list_header">
                         <tr>
                             <td>Type(#ID)</td>
-                            <td v-for="key in display_columns">{{ key }}</td>
+                            <td v-for="key in display_columns">{{ data_keys_to_names[key] || key }}</td>
                         </tr>
                     </thead>
                     <tbody id="list_body">

public/js/app.js

@@ -54,11 +54,14 @@ var app = new Vue({
         display_columns: ['externalId'],
         query_key: 'id',
         query_text: '',
-        query_keys: [
-            {key: 'id', name: 'ID'},
-            {key: 'type', name: 'Type'},
-            {key: 'externalId', name: 'External ID'}
-        ]
+        query_keys: ['id', 'type', 'externalId'],
+        data_keys_to_names: {
+            id: 'ID',
+            type: 'Type',
+            externalId: 'External ID',
+            dateCreated: 'Created',
+            dateModified: 'Modified'
+        }
     },
     created: function () {
         fetch('/local_keys.json').then( d => d.json()).then( d => {