Skip to content

Commit

Permalink
add table
Browse files Browse the repository at this point in the history
  • Loading branch information
@wesolowski
wesolowski committed Jun 13, 2024
1 parent a4fe172 commit 6e5f134
Show file tree
Hide file tree
Showing 3 changed files with 251 additions and 4 deletions.
7 changes: 5 additions & 2 deletions src/layouts/LogginLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ interface Props {
const { title } = Astro.props;
const user = Astro.locals.user;
const currentPath = Astro.url.pathname;
---

<!doctype html>
Expand All @@ -33,8 +35,9 @@ const user = Astro.locals.user;
<!--</div>-->
<!--<div class="hidden lg:flex lg:gap-x-12">-->
<div class="flex gap-x-12">
<a href="/" class="text-sm">Dashboard</a>
<a href="/api/auth/logout" class="text-sm">Abmelden</a>
<a href="/" class={`text-sm ${currentPath === '/' ? 'pb-1 px-4 border-b-2 border-b-red-500' : 'text-zinc-400'}`}>Dashboard</a>
<a href="/table" class={`text-sm ${currentPath === '/table' ? 'px-4 pb-1 border-b-2 border-b-red-500' : 'text-zinc-400'}`}>Tabelle</a>
<a href="/api/auth/logout" class="text-sm text-zinc-400">Abmelden</a>
</div>
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
Expand Down
2 changes: 0 additions & 2 deletions src/lib/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ export async function getRating(userId: number) {
const mannheim = data.table.departments.Mannheim;
const mainz = data.table.departments.Maintz;


console.log(langenfeld);
return {
topThree,
userAndNeighbors,
Expand Down
246 changes: 246 additions & 0 deletions src/pages/table.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,246 @@
---
import type {ApiRatingResponse} from "../interfaces/table";
import LogginLayout from "../layouts/LogginLayout.astro";
import fetchApi from '../core/api';
const user = Astro.locals.user;
if (!user) {
return Astro.redirect("/login");
}
const userId = user.id;
const data = await fetchApi<ApiRatingResponse>('rating');
const langenfeld = data.table.departments.Langenfeld;
const mannheim = data.table.departments.Mannheim;
const mainz = data.table.departments.Maintz;
const global = data.table.global;
function abbreviateUsername(username: string) {
if (username.length > 17) {
return username.slice(0, 14) + '...';
}
return username;
}
---
<LogginLayout title="Tabelle">
<div class="">
<h1 class="mt-10 text-center">Tabelle</h1>


<section class="flex flex-row flex-wrap px-10 mb-16">

<input id="tab-one" type="radio" name="tabs" class="peer/tab-one opacity-0 absolute" checked />
<label for="tab-one" class="text-zinc-400 md:px-8 hover:font-black peer-checked/tab-one:border-b-red-500 peer-checked/tab-one:text-white peer-checked/tab-one:font-extrabold peer-checked/tab-one:border-b-2 cursor-pointer p-4 block ">
Global
</label>

<input id="tab-two" type="radio" name="tabs" class="peer/tab-two opacity-0 absolute" />
<label for="tab-two" class="text-zinc-400 md:px-8 hover:font-black peer-checked/tab-two:border-b-red-500 peer-checked/tab-two:text-white peer-checked/tab-two:font-extrabold peer-checked/tab-two:border-b-2 cursor-pointer p-4 block ">
Langenfeld
</label>

<input id="tab-three" type="radio" name="tabs" class="peer/tab-three opacity-0 absolute" />
<label for="tab-three" class="text-zinc-400 md:px-8 hover:font-black peer-checked/tab-three:border-b-red-500 peer-checked/tab-three:text-white peer-checked/tab-three:font-extrabold peer-checked/tab-three:border-b-2 cursor-pointer p-4 block ">
Mannheim
</label>

<input id="tab-four" type="radio" name="tabs" class="peer/tab-four opacity-0 absolute" />
<label for="tab-four" class="text-zinc-400 md:px-8 hover:font-black peer-checked/tab-four:border-b-red-500 peer-checked/tab-four:text-white peer-checked/tab-four:font-extrabold peer-checked/tab-four:border-b-2 cursor-pointer p-4 block ">
Mainz
</label>

<div class="basis-full h-0 border-b w-full border-neutral-700"></div>

<div class="hidden peer-checked/tab-one:block w-full">

<table class="min-w-full text-left mt-11">
<thead class="text-sm text-zinc-400 font-bold">
<tr>
<th class="w-1/12 py-2 px-4 ">Position</th>
<th class="w-4/12 py-2 px-4 ">Username</th>
<th class="w-2/12 py-2 px-4 ">
<span class="hidden lg:block">Richtige Ergebnisse</span>
<span class="block lg:hidden">RE</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Tordifferenz</span>
<span class="block lg:hidden">T</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Siege</span>
<span class="block lg:hidden">S</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Extra-Punkte</span>
<span class="block lg:hidden">EP</span>
</th>
<th class="w-2/12 py-2 px-4">
<span class="hidden lg:block">Punkte</span>
<span class="block lg:hidden">P</span>
</th>
</tr>
</thead>
<tbody>
{global.map((user, index) => (
<tr class={`${index % 2 === 0 ? 'bg-neutral-700' : 'bg-neutral-800'} border-b-2 border-l-2 border-b-black ${user.user_id === userId ? 'border-l-slate-300' : 'border-l-zinc-400'}`}>
<td class="w-1/12 p-4 font-semibold ">{user.position}</td>
<td class={`w-4/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{abbreviateUsername(user.name)}</td>
<td class={`w-2/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_win_exact}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_score_diff}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_team}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.extra_point}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.score_sum}</td>
</tr>
))}
</tbody>
</table>
</div>
<div class="hidden peer-checked/tab-two:block w-full">

<table class="min-w-full text-left mt-11">
<thead class="text-sm text-zinc-400 font-bold">
<tr>
<th class="w-1/12 py-2 px-4 ">Position</th>
<th class="w-4/12 py-2 px-4 ">Username</th>
<th class="w-2/12 py-2 px-4 ">
<span class="hidden lg:block">Richtige Ergebnisse</span>
<span class="block lg:hidden">RE</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Tordifferenz</span>
<span class="block lg:hidden">T</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Siege</span>
<span class="block lg:hidden">S</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Extra-Punkte</span>
<span class="block lg:hidden">EP</span>
</th>
<th class="w-2/12 py-2 px-4">
<span class="hidden lg:block">Punkte</span>
<span class="block lg:hidden">P</span>
</th>
</tr>
</thead>
<tbody>
{langenfeld.map((user, index) => (
<tr class={`${index % 2 === 0 ? 'bg-neutral-700' : 'bg-neutral-800'} border-b-2 border-l-2 border-b-black ${user.user_id === userId ? 'border-l-slate-300' : 'border-l-zinc-400'}`}>
<td class="w-1/12 p-4 font-semibold ">{user.position}</td>
<td class={`w-4/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{abbreviateUsername(user.name)}</td>
<td class={`w-2/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_win_exact}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_score_diff}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_team}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.extra_point}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.score_sum}</td>
</tr>
))}
</tbody>
</table>

</div>
<div class="hidden peer-checked/tab-three:block w-full">

<table class="min-w-full text-left mt-11">
<thead class="text-sm text-zinc-400 font-bold">
<tr>
<th class="w-1/12 py-2 px-4 ">Position</th>
<th class="w-4/12 py-2 px-4 ">Username</th>
<th class="w-2/12 py-2 px-4 ">
<span class="hidden lg:block">Richtige Ergebnisse</span>
<span class="block lg:hidden">RE</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Tordifferenz</span>
<span class="block lg:hidden">T</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Siege</span>
<span class="block lg:hidden">S</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Extra-Punkte</span>
<span class="block lg:hidden">EP</span>
</th>
<th class="w-2/12 py-2 px-4">
<span class="hidden lg:block">Punkte</span>
<span class="block lg:hidden">P</span>
</th>
</tr>
</thead>
<tbody>
{mannheim.map((user, index) => (
<tr class={`${index % 2 === 0 ? 'bg-neutral-700' : 'bg-neutral-800'} border-b-2 border-l-2 border-b-black ${user.user_id === userId ? 'border-l-slate-300' : 'border-l-zinc-400'}`}>
<td class="w-1/12 p-4 font-semibold ">{user.position}</td>
<td class={`w-4/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{abbreviateUsername(user.name)}</td>
<td class={`w-2/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_win_exact}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_score_diff}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_team}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.extra_point}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.score_sum}</td>
</tr>
))}
</tbody>
</table>

</div>
<div class="hidden peer-checked/tab-four:block w-full">
<table class="min-w-full text-left mt-11">
<thead class="text-sm text-zinc-400 font-bold">
<tr>
<th class="w-1/12 py-2 px-4 ">Position</th>
<th class="w-4/12 py-2 px-4 ">Username</th>
<th class="w-2/12 py-2 px-4 ">
<span class="hidden lg:block">Richtige Ergebnisse</span>
<span class="block lg:hidden">RE</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Tordifferenz</span>
<span class="block lg:hidden">T</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Siege</span>
<span class="block lg:hidden">S</span>
</th>
<th class="w-1/12 py-2 px-4 ">
<span class="hidden lg:block">Extra-Punkte</span>
<span class="block lg:hidden">EP</span>
</th>
<th class="w-2/12 py-2 px-4">
<span class="hidden lg:block">Punkte</span>
<span class="block lg:hidden">P</span>
</th>
</tr>
</thead>
<tbody>
{mainz.map((user, index) => (
<tr class={`${index % 2 === 0 ? 'bg-neutral-700' : 'bg-neutral-800'} border-b-2 border-l-2 border-b-black ${user.user_id === userId ? 'border-l-slate-300' : 'border-l-zinc-400'}`}>
<td class="w-1/12 p-4 font-semibold ">{user.position}</td>
<td class={`w-4/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{abbreviateUsername(user.name)}</td>
<td class={`w-2/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_win_exact}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_score_diff}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.sum_team}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.extra_point}</td>
<td class={`w-1/12 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.score_sum}</td>
</tr>
))}
</tbody>
</table>
</div>
<p class="mt-10 text-zinc-400 lg:hidden">
P - Punkte
<br>
EP - Extra-Punkte
<br>
S - Siege
<br>
T - Tordifferenz
<br>
RE - Richtige Ergebnisse
</p>
</section>

</div>
</LogginLayout>

0 comments on commit 6e5f134

Please sign in to comment.