Edit File: preview.vue
<script type="text/ecmascript-6"> export default { data(){ return { entry: null, batch: [], currentTab: 'data' }; } } </script> <template> <preview-screen title="Event Details" resource="events" :id="$route.params.id"> <template slot="table-parameters" slot-scope="slotProps"> <tr> <td class="table-fit text-muted">Event</td> <td> {{slotProps.entry.content.name}} <span class="badge badge-secondary ml-2" v-if="slotProps.entry.content.broadcast"> Broadcast </span> </td> </tr> </template> <div slot="after-attributes-card" slot-scope="slotProps"> <div class="card mt-5 overflow-hidden"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" :class="{active: currentTab=='data'}" href="#" v-on:click.prevent="currentTab='data'">Event Data</a> </li> <li class="nav-item"> <a class="nav-link" :class="{active: currentTab=='listeners'}" href="#" v-on:click.prevent="currentTab='listeners'">Listeners</a> </li> </ul> <div> <!-- Event Payload --> <div class="code-bg p-4 mb-0 text-white" v-show="currentTab=='data'"> <copy-clipboard :data="slotProps.entry.content.payload"> <vue-json-pretty :data="slotProps.entry.content.payload"></vue-json-pretty> </copy-clipboard> </div> <!-- Event Listeners --> <div v-show="currentTab=='listeners'"> <p v-if="slotProps.entry.content.listeners.length === 0" class="text-muted m-0 p-4"> No listeners </p> <table class="table mb-0" v-else> <tbody> <tr v-for="listener in slotProps.entry.content.listeners"> <td class="card-bg-secondary"> {{ listener.name }} <span class="badge badge-secondary ml-2" v-if="listener.queued"> Queued </span> </td> </tr> </tbody> </table> </div> </div> </div> </div> </preview-screen> </template>
Back to File Manager