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