new setup, added missed configs
This commit is contained in:
Alex
@@ -1,26 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Quicksand:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<!-- <link
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Quicksand:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<!-- <link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/> -->
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script>
|
||||
import Modal from "$lib/components/Modal.svelte";
|
||||
import UserEditForm from "$lib/components/UserEditForm.svelte";
|
||||
import { Styles } from "@sveltestrap/sveltestrap";
|
||||
import { t } from "svelte-i18n";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
@@ -49,318 +48,315 @@
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="layout">
|
||||
<!-- Sidebar -->
|
||||
<nav class="sidebar">
|
||||
<ul class="nav-list">
|
||||
<li>
|
||||
<button
|
||||
class="nav-link {activeSection === 'users' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection("users")}
|
||||
>
|
||||
<i class="fas fa-users" />
|
||||
<span class="nav-badge">{users.length}</span>
|
||||
{$t("users")}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="nav-link {activeSection === 'subscriptions' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection("subscriptions")}
|
||||
>
|
||||
<i class="fas fa-clipboard-list" />
|
||||
<span class="nav-badge">{subscriptions.length}</span>
|
||||
{$t("subscriptions")}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="nav-link {activeSection === 'payments' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection("payments")}
|
||||
>
|
||||
<i class="fas fa-credit-card" />
|
||||
{$t("payments")}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="layout">
|
||||
<!-- Sidebar -->
|
||||
<nav class="sidebar">
|
||||
<ul class="nav-list">
|
||||
<li>
|
||||
<button
|
||||
class="nav-link {activeSection === 'users' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection('users')}
|
||||
>
|
||||
<i class="fas fa-users" />
|
||||
<span class="nav-badge">{users.length}</span>
|
||||
{$t('users')}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="nav-link {activeSection === 'subscriptions' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection('subscriptions')}
|
||||
>
|
||||
<i class="fas fa-clipboard-list" />
|
||||
<span class="nav-badge">{subscriptions.length}</span>
|
||||
{$t('subscriptions')}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="nav-link {activeSection === 'payments' ? 'active' : ''}"
|
||||
on:click={() => setActiveSection('payments')}
|
||||
>
|
||||
<i class="fas fa-credit-card" />
|
||||
{$t('payments')}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
{#if activeSection === "users"}
|
||||
<div class="section-header">
|
||||
<h2>{$t("users")}</h2>
|
||||
<button class="btn primary" on:click={() => openEditModal(null)}>
|
||||
<i class="fas fa-plus" />
|
||||
{$t("add_new")}
|
||||
</button>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
{#each users as user}
|
||||
<details class="accordion-item">
|
||||
<summary class="accordion-header">
|
||||
{user.first_name}
|
||||
{user.last_name} - {user.email}
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{$t("user.id")}</th>
|
||||
<td>{user.id}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t("name")}</th>
|
||||
<td>{user.first_name} {user.last_name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t("email")}</th>
|
||||
<td>{user.email}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t("status")}</th>
|
||||
<td>{$t("userStatus." + user.status)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="button-group">
|
||||
<button
|
||||
class="btn primary"
|
||||
on:click={() => openEditModal(user)}
|
||||
>
|
||||
<i class="fas fa-edit" />
|
||||
{$t("edit")}
|
||||
</button>
|
||||
<button class="btn danger">
|
||||
<i class="fas fa-trash" />
|
||||
{$t("delete")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if activeSection === "subscriptions"}
|
||||
<div class="section-header">
|
||||
<h2>{$t("subscriptions")}</h2>
|
||||
<button class="btn primary" on:click={() => openEditModal(null)}>
|
||||
<i class="fas fa-plus" />
|
||||
{$t("add_new")}
|
||||
</button>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
{#each subscriptions as subscription}
|
||||
<details class="accordion-item">
|
||||
<summary class="accordion-header">
|
||||
{subscription.name}
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{$t("monthly_fee")}</th>
|
||||
<td
|
||||
>{subscription.monthly_fee !== -1
|
||||
? subscription.monthly_fee + "€"
|
||||
: "-"}</td
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t("hourly_rate")}</th>
|
||||
<td
|
||||
>{subscription.hourly_rate !== -1
|
||||
? subscription.hourly_rate + "€"
|
||||
: "-"}</td
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t("included_hours_per_year")}</th>
|
||||
<td>{subscription.included_hours_per_year || 0}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t("included_hours_per_month")}</th>
|
||||
<td>{subscription.included_hours_per_month || 0}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t("details")}</th>
|
||||
<td>{subscription.details || "-"}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t("conditions")}</th>
|
||||
<td>{subscription.conditions || "-"}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if activeSection === "payments"}
|
||||
<h2>{$t("payments")}</h2>
|
||||
<div class="accordion">
|
||||
{#each payments as payment}
|
||||
<details class="accordion-item">
|
||||
<summary class="accordion-header">
|
||||
Payment #{payment.id} - {payment.amount}€
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<td>{new Date(payment.date).toLocaleDateString()}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td>{payment.status}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
{#if activeSection === 'users'}
|
||||
<div class="section-header">
|
||||
<h2>{$t('users')}</h2>
|
||||
<button class="btn primary" on:click={() => openEditModal(null)}>
|
||||
<i class="fas fa-plus" />
|
||||
{$t('add_new')}
|
||||
</button>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
{#each users as user}
|
||||
<details class="accordion-item">
|
||||
<summary class="accordion-header">
|
||||
{user.first_name}
|
||||
{user.last_name} - {user.email}
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{$t('user.id')}</th>
|
||||
<td>{user.id}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('name')}</th>
|
||||
<td>{user.first_name} {user.last_name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('email')}</th>
|
||||
<td>{user.email}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('status')}</th>
|
||||
<td>{$t('userStatus.' + user.status)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="button-group">
|
||||
<button class="btn primary" on:click={() => openEditModal(user)}>
|
||||
<i class="fas fa-edit" />
|
||||
{$t('edit')}
|
||||
</button>
|
||||
<button class="btn danger">
|
||||
<i class="fas fa-trash" />
|
||||
{$t('delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if activeSection === 'subscriptions'}
|
||||
<div class="section-header">
|
||||
<h2>{$t('subscriptions')}</h2>
|
||||
<button class="btn primary" on:click={() => openEditModal(null)}>
|
||||
<i class="fas fa-plus" />
|
||||
{$t('add_new')}
|
||||
</button>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
{#each subscriptions as subscription}
|
||||
<details class="accordion-item">
|
||||
<summary class="accordion-header">
|
||||
{subscription.name}
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{$t('monthly_fee')}</th>
|
||||
<td
|
||||
>{subscription.monthly_fee !== -1
|
||||
? subscription.monthly_fee + '€'
|
||||
: '-'}</td
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('hourly_rate')}</th>
|
||||
<td
|
||||
>{subscription.hourly_rate !== -1
|
||||
? subscription.hourly_rate + '€'
|
||||
: '-'}</td
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('included_hours_per_year')}</th>
|
||||
<td>{subscription.included_hours_per_year || 0}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('included_hours_per_month')}</th>
|
||||
<td>{subscription.included_hours_per_month || 0}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('details')}</th>
|
||||
<td>{subscription.details || '-'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$t('conditions')}</th>
|
||||
<td>{subscription.conditions || '-'}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if activeSection === 'payments'}
|
||||
<h2>{$t('payments')}</h2>
|
||||
<div class="accordion">
|
||||
{#each payments as payment}
|
||||
<details class="accordion-item">
|
||||
<summary class="accordion-header">
|
||||
Payment #{payment.id} - {payment.amount}€
|
||||
</summary>
|
||||
<div class="accordion-content">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<td>{new Date(payment.date).toLocaleDateString()}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td>{payment.status}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showModal}
|
||||
<Modal on:close={close}>
|
||||
<UserEditForm
|
||||
{form}
|
||||
user={selectedUser}
|
||||
{subscriptions}
|
||||
{licence_categories}
|
||||
on:cancel={close}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal on:close={close}>
|
||||
<UserEditForm
|
||||
{form}
|
||||
user={selectedUser}
|
||||
{subscriptions}
|
||||
{licence_categories}
|
||||
on:cancel={close}
|
||||
/>
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
color: white;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 2rem;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
}
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 2rem;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
min-height: 600px;
|
||||
background: #2f2f2f;
|
||||
border-right: 1px solid #494848;
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
min-height: 600px;
|
||||
background: #2f2f2f;
|
||||
border-right: 1px solid #494848;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: #9b9b9b;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: #9b9b9b;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: #fdfff5;
|
||||
}
|
||||
.nav-link:hover {
|
||||
background: #fdfff5;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background: #494848;
|
||||
color: white;
|
||||
}
|
||||
.nav-link.active {
|
||||
background: #494848;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 2rem;
|
||||
min-width: 75%;
|
||||
}
|
||||
.main-content {
|
||||
padding: 2rem;
|
||||
min-width: 75%;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border: none;
|
||||
background: #2f2f2f;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.accordion-item {
|
||||
border: none;
|
||||
background: #2f2f2f;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
color: white;
|
||||
}
|
||||
.accordion-header {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
padding: 1rem;
|
||||
background: #494848;
|
||||
}
|
||||
.accordion-content {
|
||||
padding: 1rem;
|
||||
background: #494848;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid #2f2f2f;
|
||||
text-align: left;
|
||||
}
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid #2f2f2f;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table th {
|
||||
color: #9b9b9b;
|
||||
}
|
||||
.table th {
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
.table td {
|
||||
color: white;
|
||||
}
|
||||
.table td {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: static;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.sidebar {
|
||||
position: static;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user