summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModule.vue
blob: 8774db4864d9a82eb7e138a85e739d619b0085e5 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<i18n>
{
  "en": {
  },
  "de": {
  }
}
</i18n>

<template>
  <v-container>
    <v-layout>
      <v-flex md8 offset-md2 sm10 offset-sm1>
        <v-stepper v-model="step" vertical>
          <v-stepper-step :complete="stepCompleted >= 1" step="1" :editable="stepCompleted >= 1" edit-icon="check">
            Select an app
            <small>Summarize if needed</small>
          </v-stepper-step>
          <v-stepper-content step="1">
            <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
            <v-btn color="primary" @click.native="step = 2; stepCompleted = Math.max(1, stepCompleted)">Continue</v-btn>
            <v-btn flat>Cancel</v-btn>
          </v-stepper-content>
          <v-stepper-step :complete="stepCompleted >= 2" step="2" :editable="stepCompleted >= 2" edit-icon="check">Configure analytics for this app</v-stepper-step>
          <v-stepper-content step="2">
            <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
            <v-btn color="primary" @click.native="step = 3; stepCompleted = Math.max(2, stepCompleted)">Continue</v-btn>
            <v-btn flat>Cancel</v-btn>
          </v-stepper-content>
          <v-stepper-step :complete="stepCompleted >= 3" step="3" :editable="stepCompleted >= 3" edit-icon="check">Select an ad format and name ad unit</v-stepper-step>
          <v-stepper-content step="3">
            <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
            <v-btn color="primary" @click.native="step = 4; stepCompleted = Math.max(3, stepCompleted)">Continue</v-btn>
            <v-btn flat>Cancel</v-btn>
          </v-stepper-content>
          <v-stepper-step step="4" edit-icon="check">View setup instructions</v-stepper-step>
          <v-stepper-content step="4" :editable="step > 3">
            <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
            <v-btn color="primary" @click.native="step = 1">Continue</v-btn>
            <v-btn flat>Cancel</v-btn>
          </v-stepper-content>
        </v-stepper>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>

export default {
  name: 'BackendModule',
  data () {
    return {
      step: 1,
      stepCompleted: 0
    }
  },
  methods: {
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>