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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<template>
<div class="where-is-my-data">
<span v-show="isLoading" class="icon icon-loading" />
<p v-show="!isEditingLocation && !isLoading">
<span v-show="country">{{ label }}<strong>{{ country }}.</strong></span>
<span v-show="!country">{{ labelForNoCountry }}</span>
<span v-show="isAdmin" class="icon icon-rename" @click="editLocation" />
</p>
<div v-show="isEditingLocation && !isLoading" class="multiselect-container">
<multiselect
:disabled="isSavingChanges"
:options="options"
:searchable="true"
track-by="code"
label="label"
:placeholder="placeholderLabel"
@input="onChange"
/>
<span v-show="isSavingChanges" class="icon icon-loading" />
</div>
<Map v-show="!isLoading" />
</div>
</template>
<script>
import Map from './Map.vue'
import HttpClient from 'nextcloud-axios'
import { generateUrl } from 'nextcloud-server/dist/router'
import Multiselect from 'nextcloud-vue/dist/Components/Multiselect'
import {
getCountryList,
getNameForCountryCode
} from './nameProvider.js'
export default {
name: 'Location',
components: {
Map,
Multiselect
},
data: () => ({
selectedCountry: 'de',
isAdmin: false,
isEditingLocation: false,
isLoading: true,
isSavingChanges: false,
}),
computed: {
label() {
return t('privacy', 'Your data is located in: ')
},
labelForNoCountry() {
return t('privacy', 'The admin hasn\'t selected the location of the server yet.')
},
country() {
return getNameForCountryCode(this.$data.selectedCountry)
},
options() {
return getCountryList()
},
placeholderLabel() {
return t('privacy', 'Please select a country')
}
},
watch: {
selectedCountry: (newCountry, oldCountry) => {
const oldElm = document.querySelector('.where-is-my-data #' + oldCountry)
const newElm = document.querySelector('.where-is-my-data #' + newCountry)
if (oldElm) {
oldElm.style.fill = null
}
if (newElm) {
newElm.style.fill = 'var(--color-primary)'
}
}
},
mounted() {
this.isAdmin = OC.isUserAdmin()
const url = generateUrl('/apps/privacy/api/location')
HttpClient.get(url).then(resp => {
this.selectedCountry = resp.data.code
if (this.selectedCountry !== '') {
const elm = document.querySelector('.where-is-my-data #' + this.selectedCountry)
if (elm) {
elm.style.fill = '#e6605c'
}
}
this.isLoading = false
})
},
methods: {
editLocation() {
this.isEditingLocation = true
},
onChange(value) {
const url = generateUrl('/apps/privacy/api/location')
this.isSavingChanges = true
HttpClient.post(url, { code: value.code }).then(resp => {
this.selectedCountry = value.code
this.isEditingLocation = false
this.isSavingChanges = false
})
}
},
}
</script>
|
