diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 537a4e1720..e4dd08b623 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1145,6 +1145,11 @@ admin/views/emoji.vue: admin/views/announcements.vue: announcements: "お知らせ" + save: "保存" + remove: "削除" + add: "追加" + title: "タイトル" + text: "内容" admin/views/hashtags.vue: hided-tags: "Hidden Tags" diff --git a/src/client/app/admin/views/announcements.vue b/src/client/app/admin/views/announcements.vue index 049a8d5721..347c94c6ea 100644 --- a/src/client/app/admin/views/announcements.vue +++ b/src/client/app/admin/views/announcements.vue @@ -1,10 +1,21 @@ <template> <div> <ui-card> - <div slot="title">%i18n:@announcements%</div> + <div slot="title">%fa: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-button-group> + <ui-button inline @click="save">%fa:save R% %i18n:@save%</ui-button> + <ui-button inline @click="remove(i)">%fa:trash-alt R% %i18n:@remove%</ui-button> + </ui-button-group> + </section> <section> - <textarea class="qldxjjsrseehkusjuoooapmsprvfrxyl" v-model="broadcasts" placeholder='[ { "title": "Title1", "text": "Text1" }, { "title": "Title2", "text": "Text2" } ]'></textarea> - <ui-button @click="save">%i18n:@save%</ui-button> + <ui-button @click="add">%fa:plus% %i18n:@add%</ui-button> </section> </ui-card> </div> @@ -16,40 +27,38 @@ import Vue from "vue"; export default Vue.extend({ data() { return { - broadcasts: '', + announcements: [], }; }, + created() { (this as any).os.getMeta().then(meta => { - this.broadcasts = JSON.stringify(meta.broadcasts, null, ' '); + this.announcements = meta.broadcasts; }); }, + methods: { + add() { + this.announcements.push({ + title: '', + text: '' + }); + }, + + remove(i) { + this.announcements = this.announcements.filter((_, j) => j !== i); + this.save(); + }, + save() { - let json; - - try { - json = JSON.parse(this.broadcasts); - } catch (e) { - (this as any).os.apis.dialog({ text: `Failed: ${e}` }); - return; - } - (this as any).api('admin/update-meta', { - broadcasts: json + broadcasts: this.announcements }).then(() => { (this as any).os.apis.dialog({ text: `Saved` }); - }.catch(e => { + }).catch(e => { (this as any).os.apis.dialog({ text: `Failed ${e}` }); }); } } }); </script> - -<style lang="stylus" scoped> -.qldxjjsrseehkusjuoooapmsprvfrxyl - width 100% - min-height 300px - -</style> diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 9eed2efc91..98f781fa91 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -42,6 +42,7 @@ import Reversi from './games/reversi/reversi.vue'; import welcomeTimeline from './welcome-timeline.vue'; import uiInput from './ui/input.vue'; import uiButton from './ui/button.vue'; +import uiButtonGroup from './ui/button-group.vue'; import uiCard from './ui/card.vue'; import uiForm from './ui/form.vue'; import uiTextarea from './ui/textarea.vue'; @@ -94,6 +95,7 @@ Vue.component('mk-reversi', Reversi); Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('ui-input', uiInput); Vue.component('ui-button', uiButton); +Vue.component('ui-button-group', uiButtonGroup); Vue.component('ui-card', uiCard); Vue.component('ui-form', uiForm); Vue.component('ui-textarea', uiTextarea); diff --git a/src/client/app/common/views/components/ui/button-group.vue b/src/client/app/common/views/components/ui/button-group.vue new file mode 100644 index 0000000000..0db3b5ee70 --- /dev/null +++ b/src/client/app/common/views/components/ui/button-group.vue @@ -0,0 +1,21 @@ +<template> +<div class="pfzekjfwkwvadvlujpdnnxfggqgqjoze"> + <slot></slot> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({}); +</script> + +<style lang="stylus" scoped> +.pfzekjfwkwvadvlujpdnnxfggqgqjoze + display flex + + > * + flex 1 + + &:not(:last-child) + margin-right 16px +</style>