This commit is contained in:
CodexAdrian
2023-05-10 01:18:36 -04:00
parent 49a6b2c83a
commit 157e48f2e7
6 changed files with 203 additions and 235 deletions

View File

@@ -144,7 +144,7 @@ watch(
)
"
@click="handleReset"
><ClearIcon />Clear Filters</Button
><ClearIcon />Clear Filters</Button
>
<div
v-for="categoryList in Array.from(sortedCategories)"
@@ -454,5 +454,4 @@ watch(
}
}
}
</style>

View File

@@ -1,6 +1,6 @@
<script setup>
import { list } from '@/helpers/profile.js'
import {ref, onUnmounted, shallowRef} from 'vue'
import { ref, onUnmounted, shallowRef } from 'vue'
import { ofetch } from 'ofetch'
import { useRoute } from 'vue-router'
import RowDisplay from '@/components/RowDisplay.vue'

View File

@@ -23,12 +23,8 @@ loading_listener(async (profile) => {
console.log(profile)
if (profile.event === 'loaded') {
const profiles = await list()
instances.value = Object.values(profiles).filter(
(prof) => !prof.metadata.linked_project_id
)
modpacks.value = Object.values(profiles).filter(
(prof) => prof.metadata.linked_project_id
)
instances.value = Object.values(profiles).filter((prof) => !prof.metadata.linked_project_id)
modpacks.value = Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
}
})
</script>

View File

@@ -1,5 +1,5 @@
<script setup>
import { onMounted, ref, watch } from 'vue'
import { ref, watch } from 'vue'
import {
Card,
Slider,
@@ -22,20 +22,15 @@ import { open } from '@tauri-apps/api/dialog'
const themeStore = useTheming()
const settings = ref(null)
const loading = ref(true)
const fetchSettings = await get()
onMounted(async () => {
const fetchSettings = await get()
if (!fetchSettings.java_globals?.JAVA_8)
fetchSettings.java_globals.JAVA_8 = { path: '', version: '' }
if (!fetchSettings.java_globals?.JAVA_17)
fetchSettings.java_globals.JAVA_17 = { path: '', version: '' }
if (!fetchSettings.java_globals?.JAVA_8)
fetchSettings.java_globals.JAVA_8 = { path: '', version: '' }
if (!fetchSettings.java_globals?.JAVA_17)
fetchSettings.java_globals.JAVA_17 = { path: '', version: '' }
const settings = ref(fetchSettings)
settings.value = fetchSettings
loading.value = false
})
const chosenInstallOptions = ref([])
const browsingInstall = ref(0)
@@ -353,7 +348,6 @@ const setJavaInstall = (javaInstall) => {
</div>
</template>
<style lang="scss">
.concurrent-downloads {
width: 80% !important;

View File

@@ -31,7 +31,7 @@
Play
</Button>
<Button v-else-if="loading === true && playing === false" disabled class="instance-button"
>Loading...</Button
>Loading...</Button
>
<Button class="instance-button" icon-only @click="open({ defaultPath: instance.path })">
<OpenFolderIcon />
@@ -68,7 +68,7 @@ import {
get_uuids_by_profile_path,
kill_by_uuid,
} from '@/helpers/process'
import {process_listener, profile_listener} from '@/helpers/events'
import { process_listener, profile_listener } from '@/helpers/events'
import { useRoute } from 'vue-router'
import { ref, onUnmounted } from 'vue'
import { convertFileSrc } from '@tauri-apps/api/tauri'

View File

@@ -1,198 +1,190 @@
<template>
<div class="root-container">
<div v-if="data" class="project-sidebar">
<Instance v-if="instance" :instance="instance" small />
<Card class="sidebar-card">
<Avatar size="lg" :src="data.icon_url" />
<div class="instance-info">
<h2 class="name">{{ data.title }}</h2>
{{ data.description }}
</div>
<Categories
class="tags"
type=""
:categories="[
...categories.filter(
(cat) => data.categories.includes(cat.name) && cat.project_type === 'mod'
),
...loaders.filter(
(loader) =>
data.categories.includes(loader.name) &&
loader.supported_project_types?.includes('modpack')
),
]"
<div class="root-container">
<div v-if="data" class="project-sidebar">
<Instance v-if="instance" :instance="instance" small />
<Card class="sidebar-card">
<Avatar size="lg" :src="data.icon_url" />
<div class="instance-info">
<h2 class="name">{{ data.title }}</h2>
{{ data.description }}
</div>
<Categories
class="tags"
type=""
:categories="[
...categories.filter(
(cat) => data.categories.includes(cat.name) && cat.project_type === 'mod'
),
...loaders.filter(
(loader) =>
data.categories.includes(loader.name) &&
loader.supported_project_types?.includes('modpack')
),
]"
>
<EnvironmentIndicator
:client-side="data.client_side"
:server-side="data.server_side"
:type="data.project_type"
/>
</Categories>
<hr class="card-divider" />
<div class="button-group">
<Button
color="primary"
class="instance-button"
:disabled="installed === true || installing === true"
@click="install(null)"
>
<EnvironmentIndicator
:client-side="data.client_side"
:server-side="data.server_side"
:type="data.project_type"
/>
</Categories>
<hr class="card-divider" />
<div class="button-group">
<Button
color="primary"
class="instance-button"
:disabled="installed === true || installing === true"
@click="install(null)"
>
<DownloadIcon v-if="!installed && !installing" />
<CheckIcon v-else-if="installed" />
{{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
</Button>
<a
:href="`https://modrinth.com/${data.project_type}/${data.slug}`"
rel="external"
target="_blank"
class="btn"
>
<ExternalIcon />
Site
</a>
<DownloadIcon v-if="!installed && !installing" />
<CheckIcon v-else-if="installed" />
{{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
</Button>
<a
:href="`https://modrinth.com/${data.project_type}/${data.slug}`"
rel="external"
target="_blank"
class="btn"
>
<ExternalIcon />
Site
</a>
</div>
<hr class="card-divider" />
<div class="stats">
<div class="stat">
<DownloadIcon aria-hidden="true" />
<p>
<strong>{{ formatNumber(data.downloads) }}</strong>
<span class="stat-label"> download<span v-if="data.downloads !== '1'">s</span></span>
</p>
</div>
<hr class="card-divider" />
<div class="stats">
<div class="stat">
<DownloadIcon aria-hidden="true" />
<p>
<strong>{{ formatNumber(data.downloads) }}</strong>
<span class="stat-label">
download<span v-if="data.downloads !== '1'">s</span></span
>
</p>
</div>
<div class="stat">
<HeartIcon aria-hidden="true" />
<p>
<strong>{{ formatNumber(data.followers) }}</strong>
<span class="stat-label">
follower<span v-if="data.followers !== '1'">s</span></span
>
</p>
</div>
<div class="stat date">
<CalendarIcon aria-hidden="true" />
<span
><span class="date-label">Created </span>
{{ dayjs(data.published).fromNow() }}</span
>
</div>
<div class="stat date">
<UpdatedIcon aria-hidden="true" />
<span
><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
>
</div>
<div class="stat">
<HeartIcon aria-hidden="true" />
<p>
<strong>{{ formatNumber(data.followers) }}</strong>
<span class="stat-label"> follower<span v-if="data.followers !== '1'">s</span></span>
</p>
</div>
<hr class="card-divider" />
<div class="button-group">
<Button class="instance-button">
<ReportIcon />
Report
</Button>
<Button class="instance-button">
<HeartIcon />
Follow
</Button>
<div class="stat date">
<CalendarIcon aria-hidden="true" />
<span
><span class="date-label">Created </span> {{ dayjs(data.published).fromNow() }}</span
>
</div>
<hr class="card-divider" />
<div class="links">
<a
v-if="data.issues_url"
:href="data.issues_url"
class="title"
rel="noopener nofollow ugc"
<div class="stat date">
<UpdatedIcon aria-hidden="true" />
<span
><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
>
<IssuesIcon aria-hidden="true" />
<span>Issues</span>
</a>
<a
v-if="data.source_url"
:href="data.source_url"
class="title"
rel="noopener nofollow ugc"
>
<CodeIcon aria-hidden="true" />
<span>Source</span>
</a>
<a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
<WikiIcon aria-hidden="true" />
<span>Wiki</span>
</a>
<a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
<DiscordIcon aria-hidden="true" />
<span>Discord</span>
</a>
<a
v-for="(donation, index) in data.donation_urls"
:key="index"
:href="donation.url"
rel="noopener nofollow ugc"
>
<BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
<PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />
<KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true" />
<PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true" />
<OpenCollectiveIcon
v-else-if="donation.id === 'open-collective'"
aria-hidden="true"
/>
<HeartIcon v-else-if="donation.id === 'github'" />
<CoinsIcon v-else />
<span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
<span v-else-if="donation.id === 'patreon'">Patreon</span>
<span v-else-if="donation.id === 'paypal'">PayPal</span>
<span v-else-if="donation.id === 'ko-fi'">Ko-fi</span>
<span v-else-if="donation.id === 'github'">GitHub Sponsors</span>
<span v-else>Donate</span>
</a>
</div>
</Card>
</div>
<div v-if="data" class="content-container">
<Promotion />
<Card class="tabs">
<NavRow
v-if="data.gallery.length > 0"
:links="[
{
label: 'Description',
href: `/project/${$route.params.id}/`,
},
{
label: 'Versions',
href: `/project/${$route.params.id}/versions`,
},
{
label: 'Gallery',
href: `/project/${$route.params.id}/gallery`,
},
]"
/>
<NavRow
v-else
:links="[
{
label: 'Description',
href: `/project/${$route.params.id}/`,
},
{
label: 'Versions',
href: `/project/${$route.params.id}/versions`,
},
]"
/>
</Card>
<RouterView
:project="data"
:versions="versions"
:members="members"
:dependencies="dependencies"
:install="install"
:installed="installed"
/>
</div>
</div>
<hr class="card-divider" />
<div class="button-group">
<Button class="instance-button">
<ReportIcon />
Report
</Button>
<Button class="instance-button">
<HeartIcon />
Follow
</Button>
</div>
<hr class="card-divider" />
<div class="links">
<a
v-if="data.issues_url"
:href="data.issues_url"
class="title"
rel="noopener nofollow ugc"
>
<IssuesIcon aria-hidden="true" />
<span>Issues</span>
</a>
<a
v-if="data.source_url"
:href="data.source_url"
class="title"
rel="noopener nofollow ugc"
>
<CodeIcon aria-hidden="true" />
<span>Source</span>
</a>
<a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
<WikiIcon aria-hidden="true" />
<span>Wiki</span>
</a>
<a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
<DiscordIcon aria-hidden="true" />
<span>Discord</span>
</a>
<a
v-for="(donation, index) in data.donation_urls"
:key="index"
:href="donation.url"
rel="noopener nofollow ugc"
>
<BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
<PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />
<KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true" />
<PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true" />
<OpenCollectiveIcon v-else-if="donation.id === 'open-collective'" aria-hidden="true" />
<HeartIcon v-else-if="donation.id === 'github'" />
<CoinsIcon v-else />
<span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
<span v-else-if="donation.id === 'patreon'">Patreon</span>
<span v-else-if="donation.id === 'paypal'">PayPal</span>
<span v-else-if="donation.id === 'ko-fi'">Ko-fi</span>
<span v-else-if="donation.id === 'github'">GitHub Sponsors</span>
<span v-else>Donate</span>
</a>
</div>
</Card>
</div>
<div v-if="data" class="content-container">
<Promotion />
<Card class="tabs">
<NavRow
v-if="data.gallery.length > 0"
:links="[
{
label: 'Description',
href: `/project/${$route.params.id}/`,
},
{
label: 'Versions',
href: `/project/${$route.params.id}/versions`,
},
{
label: 'Gallery',
href: `/project/${$route.params.id}/gallery`,
},
]"
/>
<NavRow
v-else
:links="[
{
label: 'Description',
href: `/project/${$route.params.id}/`,
},
{
label: 'Versions',
href: `/project/${$route.params.id}/versions`,
},
]"
/>
</Card>
<RouterView
:project="data"
:versions="versions"
:members="members"
:dependencies="dependencies"
:install="install"
:installed="installed"
/>
</div>
</div>
<InstallConfirmModal ref="confirmModal" />
<InstanceInstallModal ref="modInstallModal" />
</template>
@@ -234,7 +226,7 @@ import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { ofetch } from 'ofetch'
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import { ref, shallowRef, watch } from 'vue'
import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
@@ -247,37 +239,24 @@ const searchStore = useSearch()
const route = useRoute()
const router = useRouter()
const breadcrumbs = useBreadcrumbs()
const loading = ref(true)
const confirmModal = ref(null)
const modInstallModal = ref(null)
const loaders = ref(null)
const categories = ref(null)
const loaders = ref(await get_loaders())
const categories = ref(await get_categories())
const instance = ref(searchStore.instanceContext)
const installing = ref(false)
const data = ref(null)
const versions = ref(null)
const members = ref(null)
const dependencies = ref(null)
const installed = ref(false)
const [data, versions, members, dependencies] = await Promise.all([
ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`).then(shallowRef),
ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`).then(shallowRef),
ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`).then(shallowRef),
])
onMounted(async () => {
;[data.value, versions.value, members.value, dependencies.value] = await Promise.all([
ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`),
ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`),
ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`),
ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`),
])
const installed = ref(instance.value && checkInstalled(instance.value, data.value.id))
loaders.value = await get_loaders()
categories.value = await get_categories()
loading.value = false
installed.value = instance.value && checkInstalled(instance.value, data.value.id)
breadcrumbs.setName('Project', data.value.title)
})
breadcrumbs.setName('Project', data.value.title)
watch(
() => route.params.id,