Compare commits

...

2 Commits

Author SHA1 Message Date
866436fa82 formatting... 2021-03-30 20:21:48 +02:00
1f95b8ba53 added svelte transitions
ref #1
2021-03-30 20:21:29 +02:00

View File

@ -1,6 +1,7 @@
<script>
import axios from "axios";
import { _ } from "svelte-i18n";
import { fade, slide } from "svelte/transition";
import { apikey, api_endpoint, page, stationinfo } from "./store.js";
function init(el) {
el.focus();
@ -31,8 +32,7 @@
general = data;
})
.catch(function (e) {
error = true;
errormessage = e.response.data.short;
console.log(e);
});
}
function stats_runners() {
@ -46,8 +46,7 @@
runners = data;
})
.catch(function (e) {
error = true;
errormessage = e.response.data.short;
console.log(e);
});
}
function stats_orgs() {
@ -61,8 +60,7 @@
orgs = data;
})
.catch(function (e) {
error = true;
errormessage = e.response.data.short;
console.log(e);
});
}
Array.prototype.cycle = function (str) {
@ -93,125 +91,131 @@
>
<div class="max-w-xl w-full">
{#if current_page === "general"}
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900">
{hours}:{minutes}:{seconds}
</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-semibold text-center text-gray-900">
{general.total_runners}
</h1>
<h1 class="text-2xl font-semibold text-center text-gray-900">
Läufer
</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-semibold text-center text-gray-900">
{general.total_distance}
</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-semibold text-center text-gray-900">
{general.total_donation}
</h1>
<h1 class="text-2xl font-semibold text-center text-gray-900">
Spendensumme
</h1>
<div transition:slide|local>
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900">
{hours}:{minutes}:{seconds}
</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-semibold text-center text-gray-900">
{general.total_runners}
</h1>
<h1 class="text-2xl font-semibold text-center text-gray-900">
Läufer
</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-semibold text-center text-gray-900">
{general.total_distance}
</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-semibold text-center text-gray-900">
{general.total_donation}
</h1>
<h1 class="text-2xl font-semibold text-center text-gray-900">
Spendensumme
</h1>
</div>
</div>
</div>
{:else if current_page === "runners_distance"}
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
Top-Läufer
</h1>
<table class="table 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"
>
Läufer
</th>
<th
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
>
Firma
</th>
<th
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
>
Kilometer
</th>
</tr>
</thead>
<tbody>
{#each runners_filtered 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>
<div transition:slide|local>
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
Top-Läufer
</h1>
<table class="table 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"
>
Läufer
</th>
<th
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
>
Firma
</th>
<th
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
>
Kilometer
</th>
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody>
{#each runners_filtered 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>
</div>
{:else if current_page === "orgs_distance"}
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
Top-Firmen
</h1>
<table class="table 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"
>
Firma
</th>
<th
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
>
Kilometer
</th>
</tr>
</thead>
<tbody>
{#each orgs_filtered 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>
<div transition:slide|local>
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
Top-Firmen
</h1>
<table class="table 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"
>
Firma
</th>
<th
class="border p-4 dark:border-dark-5 whitespace-nowrap font-normal text-gray-900"
>
Kilometer
</th>
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody>
{#each orgs_filtered 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}
<!-- content here -->
{/if}