feat: show org names for teams_distance slide
This commit is contained in:
@@ -1,416 +1,420 @@
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import bg from "/beamershow_background.png?import";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { slide } from "svelte/transition";
|
||||
import { apikey, api_endpoint, laptime_track } from "./store.js";
|
||||
function init(el) {
|
||||
el.focus();
|
||||
}
|
||||
$: pages = [
|
||||
"general",
|
||||
"runners_distance",
|
||||
// "runners_laptime",
|
||||
"orgs_distance",
|
||||
// "teams_distance",
|
||||
];
|
||||
$: current_page = "general";
|
||||
$: general = {};
|
||||
$: runners = [];
|
||||
$: runners_by_laptime = [];
|
||||
$: orgs = [];
|
||||
$: teams = [];
|
||||
import axios from "axios";
|
||||
import bg from "/beamershow_background.png?inline";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { slide } from "svelte/transition";
|
||||
import { apikey, api_endpoint, laptime_track } from "./store.js";
|
||||
$: pages = [
|
||||
"general",
|
||||
"runners_distance",
|
||||
// "runners_laptime",
|
||||
"orgs_distance",
|
||||
// "teams_distance",
|
||||
];
|
||||
$: current_page = "general";
|
||||
$: general = {};
|
||||
$: runners = [];
|
||||
$: runners_by_laptime = [];
|
||||
$: orgs = [];
|
||||
$: teams = [];
|
||||
|
||||
let time = new Date();
|
||||
$: hours = (time.getHours() + "").padStart(2, "0");
|
||||
$: minutes = (time.getMinutes() + "").padStart(2, "0");
|
||||
$: seconds = (time.getSeconds() + "").padStart(2, "0");
|
||||
function format_laptime(laptime) {
|
||||
if (laptime < 60) {
|
||||
return `${laptime}s`;
|
||||
}
|
||||
if (laptime < 3600) {
|
||||
return `${Math.floor(laptime / 60)}min ${
|
||||
laptime - Math.floor(laptime / 60) * 60
|
||||
}s`;
|
||||
}
|
||||
return `${Math.floor(laptime / 3600)}h ${
|
||||
laptime - Math.floor(laptime / 3600) * 3600
|
||||
}min ${
|
||||
laptime -
|
||||
Math.floor(laptime / 3600) * 3600 -
|
||||
Math.floor(laptime / 60) * 60
|
||||
}`;
|
||||
}
|
||||
function stats_general() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url: $api_endpoint + "api/stats/",
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
general = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function stats_runners() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url: $api_endpoint + "api/stats/runners/distance",
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
runners = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function stats_runners_by_laptime() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url:
|
||||
$api_endpoint + "api/stats/runners/laptime?track=" + $laptime_track,
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
runners_by_laptime = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function stats_orgs() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url: $api_endpoint + "api/stats/organizations/distance",
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
orgs = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function stats_teams() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url: $api_endpoint + "api/stats/teams/distance",
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
teams = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
Array.prototype.cycle = function (str) {
|
||||
const i = this.indexOf(str);
|
||||
if (i === -1) return undefined;
|
||||
return this[(i + 1) % this.length];
|
||||
};
|
||||
function fetch_all() {
|
||||
stats_general();
|
||||
stats_runners();
|
||||
// stats_runners_by_laptime();
|
||||
stats_orgs();
|
||||
stats_teams();
|
||||
}
|
||||
fetch_all();
|
||||
setInterval(() => {
|
||||
time = new Date();
|
||||
}, 1000);
|
||||
setInterval(() => {
|
||||
fetch_all();
|
||||
}, 50000);
|
||||
setInterval(() => {
|
||||
current_page = pages.cycle(current_page);
|
||||
}, 20000);
|
||||
let time = new Date();
|
||||
$: hours = (time.getHours() + "").padStart(2, "0");
|
||||
$: minutes = (time.getMinutes() + "").padStart(2, "0");
|
||||
$: seconds = (time.getSeconds() + "").padStart(2, "0");
|
||||
function format_laptime(laptime) {
|
||||
if (laptime < 60) {
|
||||
return `${laptime}s`;
|
||||
}
|
||||
if (laptime < 3600) {
|
||||
return `${Math.floor(laptime / 60)}min ${
|
||||
laptime - Math.floor(laptime / 60) * 60
|
||||
}s`;
|
||||
}
|
||||
return `${Math.floor(laptime / 3600)}h ${
|
||||
laptime - Math.floor(laptime / 3600) * 3600
|
||||
}min ${
|
||||
laptime -
|
||||
Math.floor(laptime / 3600) * 3600 -
|
||||
Math.floor(laptime / 60) * 60
|
||||
}`;
|
||||
}
|
||||
function stats_general() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url: $api_endpoint + "api/stats/",
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
general = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function stats_runners() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url: $api_endpoint + "api/stats/runners/distance",
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
runners = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function stats_runners_by_laptime() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url:
|
||||
$api_endpoint + "api/stats/runners/laptime?track=" + $laptime_track,
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
runners_by_laptime = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function stats_orgs() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url: $api_endpoint + "api/stats/organizations/distance",
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
orgs = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
function stats_teams() {
|
||||
axios
|
||||
.request({
|
||||
method: "GET",
|
||||
url: $api_endpoint + "api/stats/teams/distance",
|
||||
headers: { Authorization: "Bearer " + $apikey },
|
||||
})
|
||||
.then(function ({ data }) {
|
||||
teams = data;
|
||||
})
|
||||
.catch(function (e) {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
Array.prototype.cycle = function (str) {
|
||||
const i = this.indexOf(str);
|
||||
if (i === -1) return undefined;
|
||||
return this[(i + 1) % this.length];
|
||||
};
|
||||
function fetch_all() {
|
||||
stats_general();
|
||||
stats_runners();
|
||||
// stats_runners_by_laptime();
|
||||
stats_orgs();
|
||||
stats_teams();
|
||||
}
|
||||
fetch_all();
|
||||
setInterval(() => {
|
||||
time = new Date();
|
||||
}, 1000);
|
||||
setInterval(() => {
|
||||
fetch_all();
|
||||
}, 50000);
|
||||
setInterval(() => {
|
||||
current_page = pages.cycle(current_page);
|
||||
}, 20000);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="min-h-screen flex items-center justify-center bg-gray-100"
|
||||
style="background-image: url({bg});background-position: center;background-size: contain;background-repeat:no-repeat;"
|
||||
class="min-h-screen flex items-center justify-center bg-gray-100"
|
||||
style="background-image: url({bg});background-position: center;background-size: contain;background-repeat:no-repeat;"
|
||||
>
|
||||
<div class="w-full">
|
||||
<div class="w-3/4 xl:w-1/2 mx-auto">
|
||||
<!-- -->
|
||||
{#if current_page === "general"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900"
|
||||
>
|
||||
Statistiken
|
||||
</h1>
|
||||
<!-- -->
|
||||
<div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
|
||||
<h1 class="text-5xl font-bold text-center text-gray-900">
|
||||
{general.total_runners || "0"}
|
||||
</h1>
|
||||
<h1 class="text-2xl font-semibold text-center text-gray-900">
|
||||
{$_("laeufer")}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
|
||||
<h1 class="text-5xl font-bold text-center text-gray-900">
|
||||
{general.total_distance / 1000 || 0}
|
||||
</h1>
|
||||
<h1 class="text-2xl font-semibold text-center text-gray-900">
|
||||
{$_("kilometer-gesamt")}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
|
||||
<h1 class="text-5xl font-bold text-center text-gray-900">
|
||||
{parseFloat(
|
||||
((general.total_donation || 0) / 100).toFixed(2)
|
||||
).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}) || "0"} €
|
||||
</h1>
|
||||
<h1 class="text-2xl font-semibold text-center text-gray-900">
|
||||
{$_("spendensumme")}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if current_page === "runners_distance"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
|
||||
>
|
||||
{$_("top-laeufer")} ({$_("distanz")})
|
||||
</h1>
|
||||
{#if runners.length === 0}
|
||||
<p class="w-full text-center text-3xl font-semibold">
|
||||
Noch keine Daten...
|
||||
</p>
|
||||
{:else}
|
||||
<table
|
||||
class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("platz")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("laeufer")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("organisation")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("kilometer")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each runners as r, i}
|
||||
<tr class="text-gray-700">
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.firstname}
|
||||
{r.lastname}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.group.name}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.distance / 1000} km
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_page === "runners_laptime"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
|
||||
>
|
||||
{$_("top-laeufer")} ({$_("rundenzeit")})
|
||||
</h1>
|
||||
{#if runners_by_laptime.length === 0}
|
||||
<p class="w-full text-center text-3xl font-semibold">
|
||||
Noch keine Daten...
|
||||
</p>
|
||||
{:else}
|
||||
<table
|
||||
class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("platz")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("laeufer")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("organisation")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("schnellste-rundenzeit")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each runners_by_laptime as r, i}
|
||||
<tr class="text-gray-700">
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.firstname}
|
||||
{r.lastname}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.group.name}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{format_laptime(r.minLaptime)}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_page === "orgs_distance"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
|
||||
>
|
||||
{$_("top-organisationen")}
|
||||
</h1>
|
||||
<table
|
||||
class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("platz")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("organsiation")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("kilometer")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each orgs as o, i}
|
||||
<tr class="text-gray-700">
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{o.name}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{o.distance / 1000} km
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{:else if current_page === "teams_distance"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
|
||||
>
|
||||
{$_("top-teams")}
|
||||
</h1>
|
||||
<table
|
||||
class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("platz")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("team")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("kilometer")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each teams as t, i}
|
||||
<tr class="text-gray-700">
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{t.name}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{t.distance / 1000} km
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- content here -->
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8"
|
||||
>
|
||||
{hours}:{minutes}:{seconds}
|
||||
</h1>
|
||||
<h1
|
||||
class="text-xl xl:text-3xl font-medium text-center text-gray-900 font-mono bottom-2 xl:bottom-4 w-full fixed"
|
||||
>
|
||||
<span class="text-black font-extrabold">Lauf für Kaya!</span> - powered by ODIT.Services
|
||||
</h1>
|
||||
<div class="w-full">
|
||||
<div class="w-3/4 xl:w-1/2 mx-auto">
|
||||
<!-- -->
|
||||
{#if current_page === "general"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900"
|
||||
>
|
||||
Statistiken
|
||||
</h1>
|
||||
<!-- -->
|
||||
<div class="flex flex-wrap -mx-1 overflow-hidden mt-5">
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
|
||||
<h1 class="text-5xl font-bold text-center text-gray-900">
|
||||
{general.total_runners || "0"}
|
||||
</h1>
|
||||
<h1 class="text-2xl font-semibold text-center text-gray-900">
|
||||
{$_("laeufer")}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
|
||||
<h1 class="text-5xl font-bold text-center text-gray-900">
|
||||
{general.total_distance / 1000 || 0}
|
||||
</h1>
|
||||
<h1 class="text-2xl font-semibold text-center text-gray-900">
|
||||
{$_("kilometer-gesamt")}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2 md:w-1/3">
|
||||
<h1 class="text-5xl font-bold text-center text-gray-900">
|
||||
{parseFloat(
|
||||
((general.total_donation || 0) / 100).toFixed(2)
|
||||
).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}) || "0"} €
|
||||
</h1>
|
||||
<h1 class="text-2xl font-semibold text-center text-gray-900">
|
||||
{$_("spendensumme")}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if current_page === "runners_distance"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
|
||||
>
|
||||
{$_("top-laeufer")} ({$_("distanz")})
|
||||
</h1>
|
||||
{#if runners.length === 0}
|
||||
<p class="w-full text-center text-3xl font-semibold">
|
||||
Noch keine Daten...
|
||||
</p>
|
||||
{:else}
|
||||
<table
|
||||
class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("platz")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("laeufer")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("organisation")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("kilometer")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each runners as r, i}
|
||||
<tr class="text-gray-700">
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.firstname}
|
||||
{r.lastname}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.group.name}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.distance / 1000} km
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_page === "runners_laptime"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
|
||||
>
|
||||
{$_("top-laeufer")} ({$_("rundenzeit")})
|
||||
</h1>
|
||||
{#if runners_by_laptime.length === 0}
|
||||
<p class="w-full text-center text-3xl font-semibold">
|
||||
Noch keine Daten...
|
||||
</p>
|
||||
{:else}
|
||||
<table
|
||||
class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("platz")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("laeufer")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("organisation")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("schnellste-rundenzeit")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each runners_by_laptime as r, i}
|
||||
<tr class="text-gray-700">
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.firstname}
|
||||
{r.lastname}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{r.group.name}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{format_laptime(r.minLaptime)}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_page === "orgs_distance"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
|
||||
>
|
||||
{$_("top-organisationen")}
|
||||
</h1>
|
||||
{#if orgs.length === 0}
|
||||
<p class="w-full text-center text-3xl font-semibold">
|
||||
Noch keine Daten...
|
||||
</p>
|
||||
{:else}
|
||||
<table
|
||||
class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("platz")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("organsiation")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("kilometer")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each orgs as o, i}
|
||||
<tr class="text-gray-700">
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{o.name}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{o.distance / 1000} km
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_page === "teams_distance"}
|
||||
<div transition:slide|local>
|
||||
<h1
|
||||
class="mr-6 text-5xl xl:text-7xl font-bold text-center text-gray-900 mb-3"
|
||||
>
|
||||
{$_("top-teams")}
|
||||
</h1>
|
||||
<table
|
||||
class="table font-semibold p-4 bg-white shadow rounded-lg w-full"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("platz")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("team")}
|
||||
</th>
|
||||
<th
|
||||
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
|
||||
>
|
||||
{$_("kilometer")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each teams as t, i}
|
||||
<tr class="text-gray-700">
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{i + 1}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{t.parent.name}<br />
|
||||
{t.name}
|
||||
</td>
|
||||
<td class="border p-4 dark:border-dark-5">
|
||||
{t.distance / 1000} km
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- content here -->
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8"
|
||||
>
|
||||
{hours}:{minutes}:{seconds}
|
||||
</h1>
|
||||
<h1
|
||||
class="text-xl xl:text-3xl font-medium text-center text-gray-900 font-mono bottom-2 xl:bottom-4 w-full fixed"
|
||||
>
|
||||
<span class="text-black font-extrabold">Lauf für Kaya!</span> - powered by ODIT.Services
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user