Initial commit
This commit is contained in:
184
frontend/src/lib/components/pagebuilder/profile/Orders.svelte
Normal file
184
frontend/src/lib/components/pagebuilder/profile/Orders.svelte
Normal file
@@ -0,0 +1,184 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user