✨ Pull to refresh
This commit is contained in:
parent
4a2ff8fce6
commit
4e4bc3345d
@ -39,6 +39,7 @@
|
|||||||
"@types/dompurify": "^3.0.5",
|
"@types/dompurify": "^3.0.5",
|
||||||
"@types/node": "^20.11.28",
|
"@types/node": "^20.11.28",
|
||||||
"@types/nprogress": "^0.2.3",
|
"@types/nprogress": "^0.2.3",
|
||||||
|
"@types/pulltorefreshjs": "^0.1.7",
|
||||||
"@unocss/reset": "^0.58.7",
|
"@unocss/reset": "^0.58.7",
|
||||||
"@vitejs/plugin-vue": "^5.0.4",
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||||
@ -49,6 +50,7 @@
|
|||||||
"eslint-plugin-vue": "^9.17.0",
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
"npm-run-all2": "^6.1.2",
|
"npm-run-all2": "^6.1.2",
|
||||||
"prettier": "^3.0.3",
|
"prettier": "^3.0.3",
|
||||||
|
"pulltorefreshjs": "^0.1.22",
|
||||||
"typescript": "~5.4.0",
|
"typescript": "~5.4.0",
|
||||||
"unocss": "^0.58.7",
|
"unocss": "^0.58.7",
|
||||||
"vite": "^5.1.6",
|
"vite": "^5.1.6",
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-list-group value="channels">
|
<v-list-group class="channels-list" value="channels">
|
||||||
<template #activator="{ props }">
|
<template #activator="{ props }">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
@ -28,7 +28,6 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useUserinfo } from "@/stores/userinfo"
|
import { useUserinfo } from "@/stores/userinfo"
|
||||||
import { useRealms } from "@/stores/realms"
|
|
||||||
import { useChannels } from "@/stores/channels"
|
import { useChannels } from "@/stores/channels"
|
||||||
|
|
||||||
const id = useUserinfo()
|
const id = useUserinfo()
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-list-group value="realms">
|
<v-list-group class="realms-list" value="realms">
|
||||||
<template #activator="{ props }">
|
<template #activator="{ props }">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
|
@ -35,8 +35,12 @@
|
|||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
<div class="flex-grow-1">
|
<div class="flex-grow-1">
|
||||||
<v-list density="compact" :opened="drawerMini ? [] : expanded"
|
<v-list
|
||||||
@update:opened="(val) => expanded = val">
|
class="resources-list"
|
||||||
|
density="compact"
|
||||||
|
:opened="drawerMini ? [] : expanded"
|
||||||
|
@update:opened="(val) => expanded = val"
|
||||||
|
>
|
||||||
<channel-list />
|
<channel-list />
|
||||||
<v-divider class="border-opacity-75 my-2" />
|
<v-divider class="border-opacity-75 my-2" />
|
||||||
<realm-list />
|
<realm-list />
|
||||||
@ -83,14 +87,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from "vue"
|
import { computed, onMounted, ref } from "vue"
|
||||||
import { useUserinfo, signout as signoutAccount } from "@/stores/userinfo"
|
import { useUserinfo } from "@/stores/userinfo"
|
||||||
import { useWellKnown } from "@/stores/wellKnown"
|
import { useWellKnown } from "@/stores/wellKnown"
|
||||||
import { useUI } from "@/stores/ui"
|
import { useUI } from "@/stores/ui"
|
||||||
|
import { useRealms } from "@/stores/realms"
|
||||||
|
import { useChannels } from "@/stores/channels"
|
||||||
import RealmList from "@/components/realms/RealmList.vue"
|
import RealmList from "@/components/realms/RealmList.vue"
|
||||||
import NotificationList from "@/components/users/NotificationList.vue"
|
import NotificationList from "@/components/users/NotificationList.vue"
|
||||||
import ChannelList from "@/components/chat/channels/ChannelList.vue"
|
import ChannelList from "@/components/chat/channels/ChannelList.vue"
|
||||||
import UserMenu from "@/components/users/UserMenu.vue"
|
import UserMenu from "@/components/users/UserMenu.vue"
|
||||||
|
import PullToRefresh from "pulltorefreshjs"
|
||||||
|
|
||||||
const ui = useUI()
|
const ui = useUI()
|
||||||
const expanded = ref<string[]>(["channels"])
|
const expanded = ref<string[]>(["channels"])
|
||||||
@ -126,5 +133,18 @@ useWellKnown().readWellKnown()
|
|||||||
|
|
||||||
const drawerOpen = ref(true)
|
const drawerOpen = ref(true)
|
||||||
const drawerMini = ref(false)
|
const drawerMini = ref(false)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
PullToRefresh.init({
|
||||||
|
mainElement: ".resources-list",
|
||||||
|
triggerElement: ".resources-list",
|
||||||
|
onRefresh() {
|
||||||
|
return Promise.all([
|
||||||
|
useRealms().list(),
|
||||||
|
useChannels().list()
|
||||||
|
])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -53,7 +53,7 @@ export const useNotifications = defineStore("notifications", () => {
|
|||||||
})
|
})
|
||||||
socket.addEventListener("close", (event) => {
|
socket.addEventListener("close", (event) => {
|
||||||
console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code)
|
console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code)
|
||||||
if(reconnectCount <= 3) {
|
if (reconnectCount <= 3) {
|
||||||
connect().then(() => {
|
connect().then(() => {
|
||||||
console.warn("[NOTIFICATIONS] Now reconnecting!")
|
console.warn("[NOTIFICATIONS] Now reconnecting!")
|
||||||
reconnectCount++
|
reconnectCount++
|
||||||
@ -62,8 +62,10 @@ export const useNotifications = defineStore("notifications", () => {
|
|||||||
})
|
})
|
||||||
socket.addEventListener("message", (event) => {
|
socket.addEventListener("message", (event) => {
|
||||||
const data = JSON.parse(event.data)
|
const data = JSON.parse(event.data)
|
||||||
notifications.value.push(data)
|
if (!data.is_realtime) {
|
||||||
total.value++
|
notifications.value.push(data)
|
||||||
|
total.value++
|
||||||
|
}
|
||||||
|
|
||||||
if (Capacitor.getPlatform() === "web") {
|
if (Capacitor.getPlatform() === "web") {
|
||||||
new Notification(data["subject"], {
|
new Notification(data["subject"], {
|
||||||
|
@ -16,9 +16,10 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import PostList from "@/components/posts/PostList.vue"
|
import PostList from "@/components/posts/PostList.vue"
|
||||||
|
import { onMounted, onUnmounted, reactive, ref } from "vue"
|
||||||
import { request } from "@/scripts/request"
|
import { request } from "@/scripts/request"
|
||||||
import { reactive, ref } from "vue"
|
|
||||||
import { useUI } from "@/stores/ui"
|
import { useUI } from "@/stores/ui"
|
||||||
|
import PullToRefresh, { type PullToRefreshInstance } from "pulltorefreshjs"
|
||||||
|
|
||||||
const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
|
const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
|
||||||
|
|
||||||
@ -63,6 +64,21 @@ async function readMore({ done }: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
readPosts()
|
readPosts()
|
||||||
|
|
||||||
|
let refresher: PullToRefreshInstance
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
refresher = PullToRefresh.init({
|
||||||
|
mainElement: ".wrapper",
|
||||||
|
triggerElement: ".wrapper",
|
||||||
|
onRefresh() {
|
||||||
|
posts.value = []
|
||||||
|
pagination.page = 0
|
||||||
|
return readPosts()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onUnmounted(() => refresher.destory())
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@ -32,7 +32,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, watch } from "vue"
|
import { onMounted, onUnmounted, reactive, ref, watch } from "vue"
|
||||||
import { request } from "@/scripts/request"
|
import { request } from "@/scripts/request"
|
||||||
import { useRealms } from "@/stores/realms"
|
import { useRealms } from "@/stores/realms"
|
||||||
import { useRoute } from "vue-router"
|
import { useRoute } from "vue-router"
|
||||||
@ -41,6 +41,7 @@ import dompurify from "dompurify"
|
|||||||
import PostList from "@/components/posts/PostList.vue"
|
import PostList from "@/components/posts/PostList.vue"
|
||||||
import RealmAction from "@/components/realms/RealmAction.vue"
|
import RealmAction from "@/components/realms/RealmAction.vue"
|
||||||
import RealmMembers from "@/components/realms/RealmMembers.vue"
|
import RealmMembers from "@/components/realms/RealmMembers.vue"
|
||||||
|
import PullToRefresh, { type PullToRefreshInstance } from "pulltorefreshjs"
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const realms = useRealms()
|
const realms = useRealms()
|
||||||
@ -68,11 +69,11 @@ async function readPosts() {
|
|||||||
const res = await request(
|
const res = await request(
|
||||||
"interactive",
|
"interactive",
|
||||||
`/api/feed?` +
|
`/api/feed?` +
|
||||||
new URLSearchParams({
|
new URLSearchParams({
|
||||||
take: pagination.pageSize.toString(),
|
take: pagination.pageSize.toString(),
|
||||||
offset: ((pagination.page - 1) * pagination.pageSize).toString(),
|
offset: ((pagination.page - 1) * pagination.pageSize).toString(),
|
||||||
realmId: route.params.realmId as string
|
realmId: route.params.realmId as string
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
if (res.status !== 200) {
|
if (res.status !== 200) {
|
||||||
error.value = await res.text()
|
error.value = await res.text()
|
||||||
@ -122,6 +123,21 @@ watch(realms, (val) => {
|
|||||||
function parseContent(src: string): string {
|
function parseContent(src: string): string {
|
||||||
return dompurify().sanitize(parse(src) as string)
|
return dompurify().sanitize(parse(src) as string)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let refresher: PullToRefreshInstance
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
refresher = PullToRefresh.init({
|
||||||
|
mainElement: ".wrapper",
|
||||||
|
triggerElement: ".wrapper",
|
||||||
|
onRefresh() {
|
||||||
|
posts.value = []
|
||||||
|
pagination.page = 0
|
||||||
|
return readPosts()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onUnmounted(() => refresher.destory())
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
Reference in New Issue
Block a user