From 413fbb3d0c6040fe88730f5d4f65d1add3b1e59e Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Tue, 12 Jun 2018 19:03:57 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB=E3=81=A7?= =?UTF-8?q?=E3=82=82=E3=83=8F=E3=83=83=E3=82=B7=E3=83=A5=E3=82=BF=E3=82=B0?= =?UTF-8?q?=E3=82=92=E6=A4=9C=E7=B4=A2=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/app/mobile/script.ts | 2 + src/client/app/mobile/views/pages/tag.vue | 81 +++++++++++++++++++++++ 2 files changed, 83 insertions(+) create mode 100644 src/client/app/mobile/views/pages/tag.vue diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 300615ec58..d505b38dcc 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -42,6 +42,7 @@ import MkUserLists from './views/pages/user-lists.vue'; import MkUserList from './views/pages/user-list.vue'; import MkSettings from './views/pages/settings.vue'; import MkOthello from './views/pages/othello.vue'; +import MkTag from './views/pages/tag.vue'; Vue.use(MdCard); Vue.use(MdButton); @@ -88,6 +89,7 @@ init((launch) => { { path: '/i/drive/file/:file', component: MkDrive }, { path: '/selectdrive', component: MkSelectDrive }, { path: '/search', component: MkSearch }, + { path: '/tags/:tag', component: MkTag }, { path: '/othello', name: 'othello', component: MkOthello }, { path: '/othello/:game', component: MkOthello }, { path: '/@:user', component: MkUser }, diff --git a/src/client/app/mobile/views/pages/tag.vue b/src/client/app/mobile/views/pages/tag.vue new file mode 100644 index 0000000000..b4c993e667 --- /dev/null +++ b/src/client/app/mobile/views/pages/tag.vue @@ -0,0 +1,81 @@ +<template> +<mk-ui> + <span slot="header">%fa:hashtag%{{ $route.params.tag }}</span> + + <main> + <p v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p> + <mk-notes ref="timeline" :more="existMore ? more : null"/> + </main> +</mk-ui> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import Progress from '../../../common/scripts/loading'; + +const limit = 20; + +export default Vue.extend({ + data() { + return { + fetching: true, + moreFetching: false, + existMore: false, + offset: 0, + empty: false + }; + }, + watch: { + $route: 'fetch' + }, + mounted() { + this.$nextTick(() => { + this.fetch(); + }); + }, + methods: { + fetch() { + this.fetching = true; + Progress.start(); + + (this.$refs.timeline as any).init(() => new Promise((res, rej) => { + (this as any).api('notes/search_by_tag', { + limit: limit + 1, + offset: this.offset, + tag: this.$route.params.tag + }).then(notes => { + if (notes.length == 0) this.empty = true; + if (notes.length == limit + 1) { + notes.pop(); + this.existMore = true; + } + res(notes); + this.fetching = false; + Progress.done(); + }, rej); + })); + }, + more() { + this.offset += limit; + + const promise = (this as any).api('notes/search_by_tag', { + limit: limit + 1, + offset: this.offset, + tag: this.$route.params.tag + }); + + promise.then(notes => { + if (notes.length == limit + 1) { + notes.pop(); + } else { + this.existMore = false; + } + notes.forEach(n => (this.$refs.timeline as any).append(n)); + this.moreFetching = false; + }); + + return promise; + } + } +}); +</script>