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