185 lines
7.2 KiB
Svelte
185 lines
7.2 KiB
Svelte
<script lang="ts">
|
|
import { mdiLandRowsHorizontal, mdiTableLarge } from "@mdi/js"
|
|
import { getTibiRestOrders } from "../../../functions/CommerceAPIs/tibiEndpoints/orders"
|
|
import Icon from "../../widgets/Icon.svelte"
|
|
import OrderTable from "./order/list/OrderTableRow.svelte"
|
|
import OrderCard from "./order/list/OrderCard.svelte"
|
|
import OrderDetailedView from "./order/OrderDetailedView.svelte"
|
|
import { location, newNotification } from "../../../store"
|
|
import { spaNavigate } from "../../../actions"
|
|
import Loader from "../Loader.svelte"
|
|
let viewType: "card" | "table" = "table"
|
|
let id = ""
|
|
if ($location && !$location.path.endsWith("/orders") && !$location.path.endsWith("/orders/")) {
|
|
if ($location.path.includes("return")) {
|
|
id = $location.path.split("/return")[0].split("/").filter(Boolean).pop()
|
|
} else if ($location.path.includes("rate")) {
|
|
id = $location.path.split("/rate")[0].split("/").filter(Boolean).pop()
|
|
} else id = $location.path.split("/").filter(Boolean).pop()
|
|
}
|
|
const minTableWidth = 1000
|
|
let innerWidth = typeof "window" !== "undefined" ? window.innerWidth : 360
|
|
$: if (innerWidth < minTableWidth) viewType = "card"
|
|
</script>
|
|
|
|
<svelte:window bind:innerWidth="{innerWidth}" />
|
|
|
|
{#if id}
|
|
<OrderDetailedView orderId="{id}" />
|
|
{:else}
|
|
<section class="wrapper order-table">
|
|
<div class="inner-wrapper">
|
|
<div class="headline">
|
|
<div>
|
|
<h2>Deine Bestellungen</h2>
|
|
<p>Hier findest du alle Bestellungen, die du bei uns getätigt hast.</p>
|
|
</div>
|
|
{#if innerWidth >= minTableWidth}
|
|
<ul>
|
|
<li>
|
|
<button
|
|
on:click="{() => (viewType = 'table')}"
|
|
class:active="{viewType == 'table'}"
|
|
aria-label="Tabellenansicht"
|
|
>
|
|
<Icon
|
|
path="{mdiLandRowsHorizontal}"
|
|
size="1.2rem"
|
|
/>
|
|
</button>
|
|
</li>
|
|
|
|
<li>
|
|
<button
|
|
aria-label="Kartenansicht"
|
|
on:click="{() => (viewType = 'card')}"
|
|
class:active="{viewType == 'card'}"
|
|
>
|
|
<Icon
|
|
path="{mdiTableLarge}"
|
|
size="1.2rem"
|
|
/>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
{/if}
|
|
</div>
|
|
{#await getTibiRestOrders()}
|
|
<Loader
|
|
size="4"
|
|
type="bar"
|
|
/>
|
|
{:then orders}
|
|
<ul class="{viewType}">
|
|
{#each orders as order}
|
|
{#if viewType === "card"}
|
|
<OrderCard
|
|
order="{order}"
|
|
on:click="{() => {
|
|
if (order.status_id == 0) {
|
|
newNotification({
|
|
html: 'Deine Bestellung wurde nicht abgeschlossen. Bitte schließe die Bestellung ab, um sie hier zu öffnen. Sollte etwas abgebucht worden sein, kontaktieren Sie bitte unseren Support.',
|
|
class: 'error',
|
|
})
|
|
} else spaNavigate('/profile/orders/' + order.tibiId)
|
|
}}"
|
|
/>
|
|
{:else}
|
|
<OrderTable
|
|
order="{order}"
|
|
on:click="{() => {
|
|
if (order.status_id == 0) {
|
|
newNotification({
|
|
html: 'Deine Bestellung wurde nicht abgeschlossen. Bitte schließe die Bestellung ab, um sie hier zu öffnen. Sollte etwas abgebucht worden sein, kontaktieren Sie bitte unseren Support.',
|
|
class: 'error',
|
|
})
|
|
} else spaNavigate('/profile/orders/' + order.tibiId)
|
|
}}"
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
</ul>
|
|
{/await}
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
<style lang="less">
|
|
@import "../../../assets/css/variables.less";
|
|
.order-table:global {
|
|
.inner-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
gap: 2.4rem;
|
|
|
|
.headline {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
& > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.4rem;
|
|
h2 {
|
|
color: var(--text-invers-100);
|
|
text-align: left;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
ul {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-direction: row;
|
|
width: fit-content;
|
|
color: var(--text-invers-100);
|
|
gap: 12px;
|
|
button {
|
|
color: var(--text-invers-100);
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
&.active {
|
|
background-color: var(--text-invers-100);
|
|
color: var(--neutral-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
& > ul {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.2rem;
|
|
& > li {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
}
|
|
&.card {
|
|
display: grid;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
gap: 2.4rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
@media (max-width: 600px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
@media (min-width: 1500px) {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
@media (min-width: 1920px) {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
& > li {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|