rudeshark.net/src/client/app/mobile/views/pages/widgets.vue

190 lines
4.3 KiB
Vue
Raw Normal View History

2018-04-26 07:01:41 +02:00
<template>
<mk-ui>
2019-02-18 03:13:56 +01:00
<template #header><span style="margin-right:4px;"><fa icon="home"/></span>{{ $t('dashboard') }}</template>
<template #func>
<button @click="customizing = !customizing"><fa icon="cog"/></button>
2018-04-26 07:01:41 +02:00
</template>
<main>
<template v-if="customizing">
<header>
<select v-model="widgetAdderSelected">
<option value="profile">{{ $t('@.widgets.profile') }}</option>
<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>
<option value="calendar">{{ $t('@.widgets.calendar') }}</option>
<option value="activity">{{ $t('@.widgets.activity') }}</option>
<option value="rss">{{ $t('@.widgets.rss') }}</option>
<option value="photo-stream">{{ $t('@.widgets.photo-stream') }}</option>
<option value="slideshow">{{ $t('@.widgets.slideshow') }}</option>
<option value="hashtags">{{ $t('@.widgets.hashtags') }}</option>
<option value="posts-monitor">{{ $t('@.widgets.posts-monitor') }}</option>
<option value="version">{{ $t('@.widgets.version') }}</option>
<option value="server">{{ $t('@.widgets.server') }}</option>
<option value="memo">{{ $t('@.widgets.memo') }}</option>
<option value="nav">{{ $t('@.widgets.nav') }}</option>
<option value="tips">{{ $t('@.widgets.tips') }}</option>
2018-04-26 07:01:41 +02:00
</select>
<button @click="addWidget">{{ $t('add-widget') }}</button>
<p><a @click="hint">{{ $t('customization-tips') }}</a></p>
2018-04-26 07:01:41 +02:00
</header>
<x-draggable
:list="widgets"
:options="{ handle: '.handle', animation: 150 }"
@sort="onWidgetSort"
>
<div v-for="widget in widgets" class="customize-container" :key="widget.id">
<header>
<span class="handle"><fa icon="bars"/></span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
2018-04-26 07:01:41 +02:00
</header>
<div @click="widgetFunc(widget.id)">
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="mobile"/>
2018-04-26 07:01:41 +02:00
</div>
</div>
</x-draggable>
</template>
<template v-else>
<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="mobile"/>
2018-04-26 07:01:41 +02:00
</template>
</main>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2018-04-26 07:01:41 +02:00
import * as XDraggable from 'vuedraggable';
import * as uuid from 'uuid';
export default Vue.extend({
i18n: i18n('mobile/views/pages/widgets.vue'),
2018-04-26 07:01:41 +02:00
components: {
XDraggable
},
2018-04-26 07:01:41 +02:00
data() {
return {
showNav: false,
customizing: false,
widgetAdderSelected: null
};
},
computed: {
widgets(): any[] {
2018-05-20 19:13:39 +02:00
return this.$store.state.settings.mobileHome;
}
},
2018-04-26 07:01:41 +02:00
created() {
if (this.widgets.length == 0) {
this.widgets = [{
2018-04-26 07:01:41 +02:00
name: 'calendar',
id: 'a', data: {}
}, {
name: 'activity',
id: 'b', data: {}
}, {
name: 'rss',
id: 'c', data: {}
}, {
name: 'photo-stream',
id: 'd', data: {}
}, {
name: 'nav',
id: 'f', data: {}
}, {
name: 'version',
id: 'g', data: {}
}];
2018-04-26 07:01:41 +02:00
this.saveHome();
}
},
mounted() {
2018-11-09 00:26:32 +01:00
document.title = this.$root.instanceName;
2018-04-26 07:01:41 +02:00
},
methods: {
hint() {
alert(this.$t('widgets-hints'));
2018-04-26 07:01:41 +02:00
},
2018-04-26 07:01:41 +02:00
widgetFunc(id) {
const w = this.$refs[id][0];
if (w.func) w.func();
},
2018-04-26 07:01:41 +02:00
onWidgetSort() {
this.saveHome();
},
2018-04-26 07:01:41 +02:00
addWidget() {
this.$store.dispatch('settings/addMobileHomeWidget', {
2018-04-26 07:01:41 +02:00
name: this.widgetAdderSelected,
id: uuid(),
data: {}
});
2018-04-26 07:01:41 +02:00
},
2018-04-26 07:01:41 +02:00
removeWidget(widget) {
this.$store.dispatch('settings/removeMobileHomeWidget', widget);
2018-04-26 07:01:41 +02:00
},
2018-04-26 07:01:41 +02:00
saveHome() {
this.$store.commit('settings/setMobileHome', this.widgets);
2018-11-09 00:13:34 +01:00
this.$root.api('i/update_mobile_home', {
2018-04-26 07:01:41 +02:00
home: this.widgets
});
}
}
});
</script>
<style lang="stylus" scoped>
main
margin 0 auto
2018-05-17 16:10:53 +02:00
padding 8px
2018-04-26 07:01:41 +02:00
max-width 500px
2018-05-18 02:40:57 +02:00
width 100%
2018-04-26 07:01:41 +02:00
@media (min-width 500px)
2018-05-17 16:10:53 +02:00
padding 16px 8px
@media (min-width 600px)
padding 32px 8px
2018-04-26 07:01:41 +02:00
> header
padding 8px
background #fff
.widget
2018-05-17 16:10:53 +02:00
margin-bottom 8px
@media (min-width 600px)
margin-bottom 16px
2018-04-26 07:01:41 +02:00
.customize-container
margin 8px
background #fff
> header
line-height 32px
background #eee
> .handle
padding 0 8px
> .remove
position absolute
top 0
right 0
padding 0 8px
line-height 32px
> div
padding 8px
> *
pointer-events none
</style>