mirror of
https://codeberg.org/dragongoose/safetwitch.git
synced 2024-09-06 08:42:31 +00:00
Add a search page
This commit is contained in:
parent
03dab22bb9
commit
9dd2b89fee
2 changed files with 99 additions and 0 deletions
|
@ -4,6 +4,7 @@ const PageNotFound = () => import('../views/PageNotFound.vue')
|
|||
const PrivacyPageView = () => import('../views/PrivacyPageView.vue')
|
||||
const HomepageView = () => import('../views/HomepageView.vue')
|
||||
const CategoryView = () => import('../views/CategoryView.vue')
|
||||
const SearchPageView = () => import('../views/SearchPageView.vue')
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
@ -12,6 +13,10 @@ const router = createRouter({
|
|||
path: '/',
|
||||
component: HomepageView
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
component: SearchPageView
|
||||
},
|
||||
{
|
||||
path: '/game/:game',
|
||||
component: CategoryView
|
||||
|
|
94
src/views/SearchPageView.vue
Normal file
94
src/views/SearchPageView.vue
Normal file
|
@ -0,0 +1,94 @@
|
|||
<script lang="ts">
|
||||
import { type Ref, ref } from 'vue'
|
||||
import CategoryPreview from '@/components/CategoryPreview.vue'
|
||||
import ErrorMessage from '@/components/ErrorMessage.vue'
|
||||
import LoadingScreen from '@/components/LoadingScreen.vue'
|
||||
import StreamPreviewVue from '@/components/StreamPreview.vue'
|
||||
import ChannelPreview from '@/components/ChannelPreview.vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
let data: Ref<any> = ref(null)
|
||||
return {
|
||||
data,
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
|
||||
const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/search?query=${this.$route.query.query}`)
|
||||
const rawData = await res.json()
|
||||
|
||||
this.data = rawData.data
|
||||
this.data.query = this.$route.query.query
|
||||
} catch (e) {
|
||||
this.data = { status: 'error' }
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
getStream(channel: any) {
|
||||
return {
|
||||
...channel.stream,
|
||||
streamer: {
|
||||
name: channel.username,
|
||||
pfp: channel.pfp
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CategoryPreview,
|
||||
ErrorMessage,
|
||||
LoadingScreen,
|
||||
StreamPreviewVue,
|
||||
ChannelPreview
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<loading-screen v-if="!data"></loading-screen>
|
||||
<error-message v-else-if="data.status === 'error' || !data"></error-message>
|
||||
|
||||
|
||||
<div v-else class="p-3 space-y-5">
|
||||
<div v-if="data.channels.length > 0">
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Channels related to "{{ data.query }}"</h1>
|
||||
<ul class="flex overflow-x-scroll overflow-y-hidden">
|
||||
<li v-for="channel in data.channels" :key="channel" class="m-2 hover:scale-105 transition-transform">
|
||||
<channel-preview :channel="channel"></channel-preview>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="data.categories.length > 0">
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Categories related to "{{ data.query }}"</h1>
|
||||
<ul class="flex max-w-[100vw] max-h-[27rem] overflow-x-scroll overflow-y-hidden">
|
||||
<li v-for="category in data.categories" :key="category" class="m-2 hover:scale-105 transition-transform">
|
||||
<category-preview :category-data="category"></category-preview>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="data.relatedChannels.length > 0">
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Live channels with the tag "{{ data.query }}"</h1>
|
||||
<ul class="flex overflow-x-scroll space-x-5 ">
|
||||
<li v-for="channel in data.relatedChannels" :key="channel">
|
||||
<stream-preview-vue :stream="getStream(channel)"></stream-preview-vue>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="data.channelsWithTag.length > 0">
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Channels with the tag "{{ data.query }}"</h1>
|
||||
<ul class="inline-flex overflow-y-hidden overflow-x-scroll max-w-[100vw] space-x-5">
|
||||
<li v-for="channel in data.channelsWithTag" :key="channel">
|
||||
<channel-preview :channel="channel"></channel-preview>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
Loading…
Reference in a new issue