summaryrefslogtreecommitdiff
path: root/src/client/app/admin/views/announcements.vue
blob: 14177a62110942f44cee5c3225560b9d1574cc1d (plain)
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
<template>
<div class="cdeuzmsthagexbkpofbmatmugjuvogfb">
	<ui-card>
		<div slot="title"><fa icon="broadcast-tower"/> %i18n:@announcements%</div>
		<section v-for="(announcement, i) in announcements" class="fit-top">
			<ui-input v-model="announcement.title" @change="save">
				<span>%i18n:@title%</span>
			</ui-input>
			<ui-textarea v-model="announcement.text">
				<span>%i18n:@text%</span>
			</ui-textarea>
			<ui-horizon-group>
				<ui-button @click="save()"><fa :icon="['far', 'save']"/> %i18n:@save%</ui-button>
				<ui-button @click="remove(i)"><fa :icon="['far', 'trash-alt']"/> %i18n:@remove%</ui-button>
			</ui-horizon-group>
		</section>
		<section>
			<ui-button @click="add"><fa icon="plus"/> %i18n:@add%</ui-button>
		</section>
	</ui-card>
</div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
	data() {
		return {
			announcements: [],
		};
	},

	created() {
		(this as any).os.getMeta().then(meta => {
			this.announcements = meta.broadcasts;
		});
	},

	methods: {
		add() {
			this.announcements.push({
				title: '',
				text: ''
			});
		},

		remove(i) {
			this.$swal({
				type: 'warning',
				text: '%i18n:@_remove.are-you-sure%'.replace('$1', this.announcements.find((_, j) => j == i).title),
				showCancelButton: true
			}).then(res => {
				if (!res.value) return;
				this.announcements = this.announcements.filter((_, j) => j !== i);
				this.save(true);
				this.$swal({
					type: 'success',
					text: '%i18n:@_remove.removed%'
				});
			});
		},

		save(silent) {
			(this as any).api('admin/update-meta', {
				broadcasts: this.announcements
			}).then(() => {
				if (!silent) {
					this.$swal({
						type: 'success',
						text: '%i18n:@saved%'
					});
				}
			}).catch(e => {
				this.$swal({
					type: 'error',
					text: e
				});
			});
		}
	}
});
</script>

<style lang="stylus" scoped>
.cdeuzmsthagexbkpofbmatmugjuvogfb
	@media (min-width 500px)
		padding 16px

</style>