1 files changed, 107 insertions, 0 deletions
diff --git a/src/Location.vue b/src/Location.vue
new file mode 100644
index 0000000..aa0a97d
--- /dev/null
+++ b/src/Location.vue
@@ -0,0 +1,107 @@
+<template>
+	<div class="where-is-my-data">
+		<span v-show="isLoading" class="icon icon-loading" />
+		<Map v-show="!isLoading" />
+		<p v-show="!isEditingLocation && !isLoading">
+			{{ label }}<strong>{{ country }}.</strong>
+			<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>
+	</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'
+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: ')
+		},
+		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 = '#e6605c'
+			}
+		}
+	},
+	mounted() {
+		this.isAdmin = OC.isUserAdmin()
+		const url = generateUrl('/apps/privacy/api/location')
+
+		HttpClient.get(url).then(resp => {
+			this.selectedCountry = resp.data.code
+
+			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>