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 12, 2024
1 parent 34451ac commit f165830
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 1 deletion.
212 changes: 212 additions & 0 deletions src/components/ShortTable.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@

---
import type { ApiRatingResponse } from '../interfaces/table';

const userId = Astro.locals.user.id;

const response = await fetch('https://em2024-api.vcec.cloud/rating');
const data: ApiRatingResponse = await response.json();

let topThree = data.table.global.slice(0, 3);
const userPosition = data.table.global.slice(3).findIndex(user => user.user_id === userId);

let userAndNeighbors = [];
if (userPosition > 0) {
const start = Math.max(0, userPosition - 1);
const end = userPosition + 2;
userAndNeighbors = data.table.global.slice(3).slice(start, end);
} else {
topThree = data.table.global.slice(0, 6);
}
---

<table class="min-w-full text-left mt-11">
<thead class="text-xs text-zinc-400 font-bold">
<tr>
<th class="w-1/6 py-2 px-4 ">Position</th>
<th class="w-3/6 py-2 px-4 ">Username</th>
<th class="w-1/6 py-2 px-4">Punkte</th>
</tr>
</thead>
<tbody>
{topThree.map((user, index) => (
<tr class={`bg-neutral-${index % 2 === 0 ? '700' : '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/6 p-4 font-semibold ">{user.position}</td>
<td class={`w-3/6 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.name}</td>
<td class={`w-1/6 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.score_sum}</td>
</tr>
))}

{userAndNeighbors.length > 0 && (
<tr>
<td class="text-center p-4" colspan="3">...</td>
</tr>
)}

{userAndNeighbors.map((user, index) => (
<tr class={`bg-neutral-${index % 2 === 0 ? '700' : '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/6 p-4 font-semibold ">{user.position}</td>
<td class={`w-3/6 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.name}</td>
<td class={`w-1/6 p-4 ${user.user_id === userId && 'text-yellow-100 font-black'}`}>{user.score_sum}</td>
</tr>
))}
</tbody>
</table>

<!--<div>-->
<!-- <pre>{JSON.stringify(data, null, 2)}</pre>-->
<!--</div>-->

<!--<p>Tabelle</p>-->
<!--<div class=" w-full max-w-md [&_label]:cursor-pointer">-->

<!-- &lt;!&ndash; main tab radio buttons &ndash;&gt;-->
<!-- <input type="radio" name="sub-tab-toggñe" id="radio-tab-1" class="sr-only peer/tab-1" checked>-->
<!-- <input type="radio" name="sub-tab-toggñe" id="radio-tab-2" class="sr-only peer/tab-2">-->
<!-- <input type="radio" name="sub-tab-toggñe" id="radio-tab-3" class="sr-only peer/tab-3">-->

<!-- &lt;!&ndash; main tabs &ndash;&gt;-->
<!-- <div class=" px-4 flex gap-[1px]-->
<!-- peer-checked/tab-1:[&>label:nth-child(1)]:bg-blue-800-->
<!-- peer-checked/tab-2:[&>label:nth-child(2)]:bg-green-800-->
<!-- peer-checked/tab-3:[&>label:nth-child(3)]:bg-rose-800-->
<!-- *:rounded-t-xl-->
<!-- *:py-1-->
<!-- *:px-4-->
<!-- *:transition-->
<!-- *:duration-300-->
<!-- hover:*:bg-zinc-800-->
<!-- ">-->
<!-- <label for="radio-tab-1">Tab 1</label>-->
<!-- <label for="radio-tab-2">Tab 2</label>-->
<!-- <label for="radio-tab-3">Tab 3</label>-->
<!-- </div>-->

<!-- &lt;!&ndash; sub tabs and contents &ndash;&gt;-->
<!-- <div class="rounded-xl bg-zinc-800 p-6-->
<!-- [&_label]:rounded-md-->
<!-- [&_label]:text-white-->
<!-- [&_label]:py-1-->
<!-- [&_label]:px-4-->
<!-- [&_label]:w-full-->
<!-- [&_label]:transition-->
<!-- [&_label]:duration-300-->
<!-- [&_label]:border-b-->
<!-- [&_label]:border-zinc-500-->

<!-- peer-checked/tab-1:[&_#sub-tab-1]:opacity-100-->
<!-- peer-checked/tab-1:[&_#sub-tab-1]:pointer-events-auto-->
<!-- peer-checked/tab-1:[&_#panels-contents-1]:opacity-100-->

<!-- peer-checked/tab-2:[&_#sub-tab-2]:opacity-100-->
<!-- peer-checked/tab-2:[&_#sub-tab-2]:pointer-events-auto-->
<!-- peer-checked/tab-2:[&_#panels-contents-2]:opacity-100-->

<!-- peer-checked/tab-3:[&_#sub-tab-3]:opacity-100-->
<!-- peer-checked/tab-3:[&_#sub-tab-3]:pointer-events-auto-->
<!-- peer-checked/tab-3:[&_#panels-contents-3]:opacity-100-->

<!-- ">-->
<!-- &lt;!&ndash; sub tab radio buttons &ndash;&gt;-->
<!-- <input type="radio" name="panel-toggle-1" id="radio-panel-1.1" class="sr-only peer/panel-1.1" checked>-->
<!-- <input type="radio" name="panel-toggle-1" id="radio-panel-1.2" class="sr-only peer/panel-1.2">-->
<!-- <input type="radio" name="panel-toggle-1" id="radio-panel-1.3" class="sr-only peer/panel-1.3">-->
<!-- <input type="radio" name="panel-toggle-2" id="radio-panel-2.1" class="sr-only peer/panel-2.1" checked>-->
<!-- <input type="radio" name="panel-toggle-2" id="radio-panel-2.2" class="sr-only peer/panel-2.2">-->
<!-- <input type="radio" name="panel-toggle-2" id="radio-panel-2.3" class="sr-only peer/panel-2.3">-->
<!-- <input type="radio" name="panel-toggle-3" id="radio-panel-3.1" class="sr-only peer/panel-3.1" checked>-->
<!-- <input type="radio" name="panel-toggle-3" id="radio-panel-3.2" class="sr-only peer/panel-3.2">-->
<!-- <input type="radio" name="panel-toggle-3" id="radio-panel-3.3" class="sr-only peer/panel-3.3">-->

<!-- &lt;!&ndash; sub tabs &ndash;&gt;-->
<!-- <div class="grid [template-grid-areas:'stack']-->
<!-- *:[grid-area:stack]-->
<!-- *:transition-opacity-->
<!-- *:duration-300-->
<!-- *:opacity-0-->
<!-- *:pointer-events-none-->
<!-- *:flex-->
<!-- *:gap-[1px]-->

<!-- peer-checked/panel-1.1:[&_#sub-tab-1>label:nth-child(1)]:bg-blue-800-->
<!-- peer-checked/panel-1.2:[&_#sub-tab-1>label:nth-child(2)]:bg-blue-800-->
<!-- peer-checked/panel-1.3:[&_#sub-tab-1>label:nth-child(3)]:bg-blue-800-->

<!-- peer-checked/panel-2.1:[&_#sub-tab-2>label:nth-child(1)]:bg-green-800-->
<!-- peer-checked/panel-2.2:[&_#sub-tab-2>label:nth-child(2)]:bg-green-800-->
<!-- peer-checked/panel-2.3:[&_#sub-tab-2>label:nth-child(3)]:bg-green-800-->

<!-- peer-checked/panel-3.1:[&_#sub-tab-3>label:nth-child(1)]:bg-rose-800-->
<!-- peer-checked/panel-3.2:[&_#sub-tab-3>label:nth-child(2)]:bg-rose-800-->
<!-- peer-checked/panel-3.3:[&_#sub-tab-3>label:nth-child(3)]:bg-rose-800-->
<!-- ">-->

<!-- <div id="sub-tab-1">-->
<!-- <label for="radio-panel-1.1">SubTab 1.1</label>-->
<!-- <label for="radio-panel-1.2">SubTab 1.2</label>-->
<!-- <label for="radio-panel-1.3">SubTab 1.3</label>-->
<!-- </div>-->

<!-- <div id="sub-tab-2">-->
<!-- <label for="radio-panel-2.1">SubTab 2.1</label>-->
<!-- <label for="radio-panel-2.2">SubTab 2.2</label>-->
<!-- <label for="radio-panel-2.3">SubTab 2.3</label>-->
<!-- </div>-->

<!-- <div id="sub-tab-3">-->
<!-- <label for="radio-panel-3.1">SubTab 3.1</label>-->
<!-- <label for="radio-panel-3.2">SubTab 3.2</label>-->
<!-- <label for="radio-panel-3.3">SubTab 3.3</label>-->
<!-- </div>-->
<!-- </div>-->

<!-- &lt;!&ndash; content panels &ndash;&gt;-->
<!-- <div class="mt-2 grid [grid-template-areas:'contents']-->
<!-- *:[grid-area:contents]-->
<!-- *:transition-opacity-->
<!-- *:duration-300-->
<!-- *:rounded-md-->
<!-- *:grid-->
<!-- *:[grid-template-areas:'panels']-->
<!-- *:opacity-0-->

<!-- [&>div>div]:[grid-area:panels]-->
<!-- [&>div>div]:transition-opacity-->
<!-- [&>div>div]:duration-300-->
<!-- [&>div>div]:opacity-0-->
<!-- [&>div>div]:p-8-->
<!-- [&>div>div]:grid-->
<!-- [&>div>div]:place-content-center-->

<!-- peer-checked/panel-1.1:[&_#panel-11]:opacity-100-->
<!-- peer-checked/panel-1.2:[&_#panel-12]:opacity-100-->
<!-- peer-checked/panel-1.3:[&_#panel-13]:opacity-100-->

<!-- peer-checked/panel-2.1:[&_#panel-21]:opacity-100-->
<!-- peer-checked/panel-2.2:[&_#panel-22]:opacity-100-->
<!-- peer-checked/panel-2.3:[&_#panel-23]:opacity-100-->

<!-- peer-checked/panel-3.1:[&_#panel-31]:opacity-100-->
<!-- peer-checked/panel-3.2:[&_#panel-32]:opacity-100-->
<!-- peer-checked/panel-3.3:[&_#panel-33]:opacity-100-->
<!-- ">-->
<!-- <div id="panels-contents-1" class="bg-blue-800">-->
<!-- <div id="panel-11">panel 1.1</div>-->
<!-- <div id="panel-12">panel 1.2</div>-->
<!-- <div id="panel-13">panel 1.3</div>-->
<!-- </div>-->

<!-- <div id="panels-contents-2" class="bg-green-800">-->
<!-- <div id="panel-21">panel 2.1</div>-->
<!-- <div id="panel-22">panel 2.2</div>-->
<!-- <div id="panel-23">panel 2.3</div>-->
<!-- </div>-->

<!-- <div id="panels-contents-3" class="bg-rose-800">-->
<!-- <div id="panel-31">panel 3.1</div>-->
<!-- <div id="panel-32">panel 3.2</div>-->
<!-- <div id="panel-33">panel 3.3</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
26 changes: 26 additions & 0 deletions src/interfaces/table.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
class Tip {
name: string;
user_id: number;
department: string;
position: number;
score_sum: number;
sum_win_exact: number;
sum_score_diff: number;
sum_team: number;
extra_point: number;
tips: any[];
}

class Department {
[key: string]: Tip[];
}

class Table {
global: Tip[];
departments: Department;
}

export class ApiRatingResponse {
table: Table;
daily_winner: any;
}
6 changes: 5 additions & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {getTipByUserAndMatchIds} from "../lib/tip";
import Flag from '../components/Flag.astro';
import Input from '../components/Input.astro';
import Button from '../components/Button.astro';
import ShortTable from '../components/ShortTable.astro';
import "./../styles/index.css";
const user = Astro.locals.user;
if (!user) {
Expand Down Expand Up @@ -74,7 +75,10 @@ const groupedGames = validGames.reduce((acc, game) => {
<LogginLayout title="Dashboard">

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 pt-5 px-5">
<div></div>
<div>
<h1>Tabelle</h1>
<ShortTable />
</div>

<div>
<h1>Spielplan</h1>
Expand Down

0 comments on commit f165830

Please sign in to comment.