robby/lbfstats-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

intermediate save

Browse Source
This commit is contained in:
Roberto Pauletto 2024-04-07 17:03:20 +02:00
parent 29cfcc57d4
commit a7ba79a984
16 changed files with 1233 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1003
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -18,16 +18,23 @@
"@types/eslint": "^8.56.0", "@types/eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0", "@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.19",
"daisyui": "^4.9.0",
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1", "eslint-plugin-svelte": "^2.35.1",
"postcss": "^8.4.38",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7", "svelte": "^4.2.7",
"svelte-check": "^3.6.0", "svelte-check": "^3.6.0",
"tailwindcss": "^3.4.3",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^5.0.3" "vite": "^5.0.3"
}, },
"type": "module" "type": "module",
"dependencies": {
"@tailwindcss/typography": "github:tailwindcss/typography"
}
} }

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};

4
src/app.css Normal file
View File

@ -0,0 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwindcss typography;

4
src/app.html
View File

@ -1,8 +1,8 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-theme="valentine">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>

10
src/lib/components/Home.svelte Normal file
View File

@ -0,0 +1,10 @@
<script lang="ts">
import { common } from '../../stores/commonStore';
</script>
<div class="flex flex-col min-h-full items-center mt-6 ml-6">
<h3 class="text-3xl font-semibold">Statistiche Lega Basket Femminile - Serie A1</h3>
<p class="mt-4">
Dati aggiornati al: <span class="font-bold">{$common.lastUpdate?.toLocaleString('it-IT')}</span>
</p>
</div>

18
src/lib/components/Table.svelte Normal file
View File

@ -0,0 +1,18 @@
<script lang="ts">
import type { PlayerStats } from '$lib/types';
export let stats;
export let legend: Array<PlayerStats>;
</script>
<div class="overflow-x-auto">
<table class="table table-zebra">
<thead>
<tr>
{#each legend as item}
<th>Object.keys(item)[0]</th>
{/each}
</tr>
</thead>
<tbody></tbody>
</table>
</div>

15
src/lib/types.d.ts vendored Normal file
View File

@ -0,0 +1,15 @@
export interface PlayerStats {
[key: string]: string;
}
export interface PlayerTotals {
name: string;
team: string;
totals: Array<PlayerStats>;
}
export interface TotalPlayers {
players: Array<PlayerTotals>;
legend: PlayerStats;
total_players: number;
}

23
src/routes/+layout.server.ts Normal file
View File

@ -0,0 +1,23 @@
import type { LayoutServerLoad } from './$types';
export const load = (async () => {
async function loadData() {
try {
const response = await fetch('http://127.0.0.1:7501/api/v1.0/info');
if (response.ok) {
const data = await response.json();
return {
updatedAt: data?.stats_updated_at,
version: data?.version
};
}
return {
error: `${response.status} - ${response.statusText}`
};
} catch (err) {
console.log(err);
return { error: `${err}` };
}
}
return await loadData();
}) satisfies LayoutServerLoad;

107
src/routes/+layout.svelte Normal file
View File

@ -0,0 +1,107 @@
<script lang="ts">
import '../app.css';
import { common } from '../stores/commonStore';
import type { CS } from '../stores/commonStore';
import type { LayoutData } from './$types';
export let data: LayoutData;
console.log(data);
// $: lastUpdate = new Date(data.updatedAt).toLocaleDateString('it-IT');
common.update((oldValue: CS) => ({
...oldValue,
lastUpdate: new Date(data.updatedAt)
}));
</script>
<div class="navbar bg-base-100">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/></svg
>
</div>
<ul
role="menu"
tabindex="0"
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
>
<li><a href="/players">Individuali</a></li>
<li><a href="/">Squadra</a></li>
</ul>
</div>
<a href="/" class="btn btn-ghost text-xl">Statistiche LBF</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1 font-semibold">
<li><a href="/players">Individuali</a></li>
<li><a href="/">Squadra</a></li>
</ul>
</div>
<div class="navbar-end">
<div class="form-control mx-4 w-72">
<input
type="text"
placeholder="Cerca giocatore/squadra"
class="input input-bordered w-24 md:w-auto"
/>
</div>
<label class="swap swap-rotate">
<!-- this hidden checkbox controls the state -->
<input type="checkbox" class="theme-controller" value="dark" />
<!-- sun icon -->
<svg
class="swap-off fill-current w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 36 36"
><path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
/></svg
>
<!-- moon icon -->
<svg
class="swap-on fill-current w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 36 36"
><path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
/></svg
>
</label>
<a href="/" class="btn">Button</a>
</div>
</div>
{#if data?.error}
<div class="flex px-3 w-full">
<div role="alert" class="alert alert-error">
<svg
xmlns="http://www.w3.org/2000/svg"
class="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/></svg
>
<span>Errore contattando il server ({data.error}).</span>
</div>
</div>
{:else}
<slot /> <!-- else content here -->
{/if}

7
src/routes/+page.svelte
View File

@ -1,2 +1,5 @@
<h1>Welcome to SvelteKit</h1> <script>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> import Home from '$lib/components/Home.svelte';
</script>
<Home />

27
src/routes/players/+page.server.ts Normal file
View File

@ -0,0 +1,27 @@
import type { TotalPlayers } from '$lib/types';
import type { PageServerLoad } from './$types';
export const load = (async () => {
async function loadData() {
const headers = {
'X-API-Key': 'cd32db47-d09b-4313-b8f1-f13076ac977f'
};
try {
const response = await fetch('http://127.0.0.1:7501/api/v1.0/players/totals', {
headers
});
if (response.ok) {
const data = (await response.json()) as TotalPlayers;
return data;
}
console.log(`${response.status} - ${response.statusText}`);
return {
error: `${response.status} - ${response.statusText}`
};
} catch (err) {
console.log(err);
return { error: `${err}` };
}
}
return await loadData();
}) satisfies PageServerLoad;

41
src/routes/players/+page.svelte Normal file
View File

@ -0,0 +1,41 @@
<script lang="ts">
import type { PageData } from './$types';
import Table from '$lib/components/Table.svelte';
export let data: PageData;
let loading = true;
console.log(data.players ? data.players[0] : '');
console.log(data.legend ? data.legend : '');
</script>
{#if data?.error}
<div class="flex px-3 w-full">
<div role="alert" class="alert alert-error">
<svg
xmlns="http://www.w3.org/2000/svg"
class="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/></svg
>
<span>Errore contattando il server ({data.error}).</span>
</div>
</div>
{/if}
<div class="flex flex-col min-h-full items-center mt-6 ml-6">
<h3 class="text-3xl font-semibold mb-4">
Statistiche Lega Basket Femminile - Serie A1 - Statistiche individuali
</h3>
{#if !data.players}
<div class="mt-4">
<span class="loading loading-spinner text-info"></span>
</div>
{:else}
<Table stats={data.players} legend={data.legend} />
{/if}
</div>

14
src/stores/commonStore.ts Normal file
View File

@ -0,0 +1,14 @@
interface CommonState {
lastUpdate: Date | undefined;
}
const initialState: CommonState = {
lastUpdate: undefined
};
import { writable } from 'svelte/store';
const common = writable(initialState);
export { common };
export type CS = CommonState;

BIN
static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

11
tailwind.config.js Normal file
View File

@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,svelte,js,ts}'],
theme: {
extend: {}
},
plugins: [require('@tailwindcss/typography'), require('daisyui'), require('daisyui')],
daisyui: {
themes: ['dark', 'valentine']
}
};