| 1 |
<template> |
| 2 |
<div class="witnesses"> |
| 3 |
<loading :text="translations.witnesses.loading" v-if="loading"></loading> |
| 4 |
<template v-else> |
| 5 |
<md-toolbar md-elevation="0" class="md-primary"> |
| 6 |
<h1 class="md-title">{{translations.witnesses.title}}</h1> |
| 7 |
</md-toolbar> |
| 8 |
<md-content> |
| 9 |
<p class="md-body-2">{{translations.witnesses.description}}</p> |
| 10 |
</md-content> |
| 11 |
<md-list> |
| 12 |
<md-list-item v-for="plugin in activeCase.all_suspects" :key="plugin.slug"> |
| 13 |
<md-checkbox v-model="required" :value="plugin.plugin_file"/> |
| 14 |
<plugin-avatar :slug="plugin.plugin_file"></plugin-avatar> |
| 15 |
<span class="md-list-item-text"> |
| 16 |
{{plugin.Title}} |
| 17 |
</span> |
| 18 |
</md-list-item> |
| 19 |
</md-list> |
| 20 |
<div class="corner-otto"> |
| 21 |
<bubble> |
| 22 |
<p>{{translations.witnesses.ottoQuestion}}</p> |
| 23 |
<md-button class="md-raised md-primary" @click.native="sendRequired">I'm done</md-button> |
| 24 |
</bubble> |
| 25 |
<img :src="updatedApi.static_url + '/robot-corner.svg'" alt="Otto the Robot"> |
| 26 |
</div> |
| 27 |
</template> |
| 28 |
</div> |
| 29 |
</template> |
| 30 |
|
| 31 |
<script> |
| 32 |
import store from '@/store' |
| 33 |
import Bubble from './Bubble' |
| 34 |
import PluginAvatar from './PluginAvatar' |
| 35 |
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' |
| 36 |
import Loading from './Loading' |
| 37 |
|
| 38 |
export default { |
| 39 |
name: 'witnesses', |
| 40 |
components: { Bubble, Loading, PluginAvatar }, |
| 41 |
store, |
| 42 |
data () { |
| 43 |
return { |
| 44 |
loading: false |
| 45 |
} |
| 46 |
}, |
| 47 |
computed: { |
| 48 |
required: { |
| 49 |
get () { |
| 50 |
return this.activeCase.required_plugins |
| 51 |
}, |
| 52 |
set (value) { |
| 53 |
this.defineRequired(value) |
| 54 |
} |
| 55 |
}, |
| 56 |
...mapState([ |
| 57 |
'router', |
| 58 |
'api', |
| 59 |
'activeCase', |
| 60 |
'translations' |
| 61 |
]), |
| 62 |
...mapGetters([ |
| 63 |
'updatedApi' |
| 64 |
]) |
| 65 |
}, |
| 66 |
methods: { |
| 67 |
sendRequired () { |
| 68 |
this.loading = true |
| 69 |
this.updateCase() |
| 70 |
.then(() => { |
| 71 |
this.router.push('/interrogating') |
| 72 |
}) |
| 73 |
.catch((error) => { |
| 74 |
console.log(error) |
| 75 |
}) |
| 76 |
}, |
| 77 |
...mapMutations([ |
| 78 |
'defineRequired' |
| 79 |
]), |
| 80 |
...mapActions([ |
| 81 |
'updateCase' |
| 82 |
]) |
| 83 |
} |
| 84 |
} |
| 85 |
</script> |
