1<template> 2 <div class="box"> 3 <h1 class="title">Passes <a :disabled="disabled" v-on:click="fetch" class="button is-info">Refresh</a></h1> 4 <hr/> 5 <div v-for="(pass, pass_index) in passes"> 6 <p class="has-text-black-bis">Pass {{pass_index}}</p> 7 <div v-for="(target, target_index) in pass.targets"> 8 <p style="text-indent: 2em;" class="has-text-grey-dark">Target {{target_index}} ({{target.kind}})</p> 9 <div v-for="(batch, batch_index) in target.batches"> 10 <p style="text-indent: 4em;" class="has-text-grey">Batch {{batch_index}} ({{batch.description}}, {{batch.kind}}, {{batch.count}} instances)</p> 11 </div> 12 </div> 13 <hr/> 14 </div> 15 </div> 16</template> 17 18<script> 19export default { 20 methods: { 21 fetch: function() { 22 this.$store.dispatch('sendMessage', "fetch_passes"); 23 } 24 }, 25 computed: { 26 disabled() { 27 return !this.$store.state.connected 28 }, 29 passes() { 30 return this.$store.state.passes 31 } 32 }, 33} 34</script> 35 36<style> 37</style> 38