Archive/clean-cuts
1
0
Fork 0
mirror of https://github.com/BlossomiShymae/clean-cuts.git synced 2025-12-07 02:30:48 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add champions feat

Browse Source
This commit is contained in:
Blossomi Shymae
2024-05-01 21:56:30 -05:00
parent cab1684b7c
commit 32b961dd32
9 changed files with 217 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
pages/summoner-icons/index.vue
View File

@@ -2,10 +2,8 @@
<div class="d-flex flex-column gap-2">
<h1>Summoner Icons</h1>
<vc:search></vc:search>
<vc:pagination path="/SummonerIcon" list="@Model.Icons.Pages"></vc:pagination>
<Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
:on-first="first" :on-last="last"/>
<div class="overflow-hidden rounded border border-light border-opacity-25 p-4">
<table class="sortable table table-borderless">
@@ -17,7 +15,7 @@
</tr>
</thead>
<tbody>
<tr v-for="icon in icons" :key="icon.id">
<tr v-for="icon in pages[index]" :key="icon.id">
<th scope="row">
<NuxtLink class="text-decoration-none text-light" :to="`/summoner-icons/overview/${icon.id}`">
{{ icon.id }}
@@ -30,7 +28,7 @@
</td>
<td>
<NuxtLink class="text-decoration-none text-light" :to="`/summoner-icons/overview/${icon.id}`">
@icon.Title
{{ icon.title }}
</NuxtLink>
</td>
</tr>
@@ -38,15 +36,19 @@
</table>
</div>
<vc:pagination path="/SummonerIcon" list="@Model.Icons.Pages"></vc:pagination>
<Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
:on-first="first" :on-last="last"/>
</div>
</template>
<script setup lang="ts">
import Pagination from '~/components/Pagination.vue';
import useClient from '../../composables/useClient';
import { SummonerIcon } from '../../core/models';
import usePagination from '../../composables/usePagination';
const { client } = useClient();
const icons = await client.summonerIcons.listAsync({locale: "default", version: "latest"});
const { count, pages, index, prev, next, first, last } = usePagination(icons, 100);
</script>

32
pages/summoner-icons/overview/[id].vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="row">
<div class="col-md-6 col-sm-12">
<h1 class="display-4 mb-0">{{ icon.title }}</h1>
<h4 class="ms-4 border-bottom border-light border-opacity-25 border-4 pb-2">{{ icon.yearReleased }}</h4>
<div class="d-flex flex-wrap gap-2 mt-3 mb-3">
<Badge name="identifier">{{ icon.id }}</Badge>
<Badge name="star" v-if="icon.isLegacy"></Badge>
</div>
<p class="text-muted">{{ icon.descriptions[0].description }}</p>
</div>
<div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
<img class="border rounded border-dark" :src="icon.getImage('latest')"/>
</div>
</div>
</template>
<script setup lang="ts">
import Badge from '~/components/Badge.vue';
import { useRoute } from 'vue-router';
import useClient from '../../../composables/useClient';
import { SummonerIcon } from '~/core/models';
const route = useRoute();
const id = route.params.id as unknown;
const { client } = useClient();
const icons = await client.summonerIcons.listAsync({locale: "default", version: "latest"});
const icon = icons.find((x) => x.id == id) || new SummonerIcon({});
</script>