Sharkey/src/client/app/admin/views/emoji.vue

119 lines
2.9 KiB
Vue
Raw Normal View History

2018-11-02 16:05:53 +02:00
<template>
<div class="tumhkfkmgtvzljezfvmgkeurkfncshbe">
2018-11-02 16:05:53 +02:00
<ui-card>
<div slot="title">%fa:plus% %i18n:@add-emoji.title%</div>
<section class="fit-top">
2018-11-04 07:23:28 +02:00
<ui-horizon-group inputs>
<ui-input v-model="name">
<span>%i18n:@add-emoji.name%</span>
<span slot="text">%i18n:@add-emoji.name-desc%</span>
</ui-input>
<ui-input v-model="aliases">
<span>%i18n:@add-emoji.aliases%</span>
<span slot="text">%i18n:@add-emoji.aliases-desc%</span>
</ui-input>
</ui-horizon-group>
2018-11-02 16:05:53 +02:00
<ui-input v-model="url">
<span>%i18n:@add-emoji.url%</span>
</ui-input>
<ui-info>%i18n:@add-emoji.info%</ui-info>
2018-11-02 16:05:53 +02:00
<ui-button @click="add">%i18n:@add-emoji.add%</ui-button>
</section>
</ui-card>
<ui-card>
<div slot="title">%fa:grin R% %i18n:@emojis.title%</div>
<section v-for="emoji in emojis">
<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
2018-11-04 07:23:28 +02:00
<ui-horizon-group inputs>
<ui-input v-model="emoji.name">
<span>%i18n:@add-emoji.name%</span>
</ui-input>
<ui-input v-model="emoji.aliases">
<span>%i18n:@add-emoji.aliases%</span>
</ui-input>
</ui-horizon-group>
<ui-input v-model="emoji.url">
<span>%i18n:@add-emoji.url%</span>
</ui-input>
2018-11-04 07:23:28 +02:00
<ui-horizon-group>
<ui-button @click="updateEmoji(emoji)">%fa:save R% %i18n:@emojis.update%</ui-button>
<ui-button @click="removeEmoji(emoji)">%fa:trash-alt R% %i18n:@emojis.remove%</ui-button>
</ui-horizon-group>
</section>
</ui-card>
2018-11-02 16:05:53 +02:00
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
data() {
return {
name: '',
url: '',
aliases: '',
emojis: []
2018-11-02 16:05:53 +02:00
};
},
mounted() {
this.fetchEmojis();
},
2018-11-02 16:05:53 +02:00
methods: {
add() {
(this as any).api('admin/emoji/add', {
2018-11-02 16:05:53 +02:00
name: this.name,
url: this.url,
aliases: this.aliases.split(' ')
}).then(() => {
2018-11-04 11:36:19 +02:00
//(this as any).os.apis.dialog({ text: `Added` });
this.fetchEmojis();
}).catch(e => {
2018-11-04 11:36:19 +02:00
//(this as any).os.apis.dialog({ text: `Failed ${e}` });
});
},
fetchEmojis() {
(this as any).api('admin/emoji/list').then(emojis => {
emojis.forEach(e => e.aliases = (e.aliases || []).join(' '));
this.emojis = emojis;
});
},
updateEmoji(emoji) {
(this as any).api('admin/emoji/update', {
id: emoji.id,
name: emoji.name,
url: emoji.url,
aliases: emoji.aliases.split(' ')
}).then(() => {
2018-11-04 11:36:19 +02:00
//(this as any).os.apis.dialog({ text: `Updated` });
}).catch(e => {
2018-11-04 11:36:19 +02:00
//(this as any).os.apis.dialog({ text: `Failed ${e}` });
});
},
removeEmoji(emoji) {
(this as any).api('admin/emoji/remove', {
id: emoji.id
}).then(() => {
2018-11-04 11:36:19 +02:00
//(this as any).os.apis.dialog({ text: `Removed` });
this.fetchEmojis();
2018-11-02 16:05:53 +02:00
}).catch(e => {
2018-11-04 11:36:19 +02:00
//(this as any).os.apis.dialog({ text: `Failed ${e}` });
2018-11-02 16:05:53 +02:00
});
}
}
});
</script>
<style lang="stylus" scoped>
.tumhkfkmgtvzljezfvmgkeurkfncshbe
@media (min-width 500px)
padding 16px
</style>