Alex/GoMembership
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

new setup, added missed configs

Browse Source
This commit is contained in:
Alex
2025-01-28 21:25:52 +01:00
parent 183e4da7f4
commit f68ca9abc5
20 changed files with 4601 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.env.template Normal file
View File

@@ -0,0 +1,2 @@
VITE_BASE_API_URI_DEV=http://127.0.0.1:8080
VITE_BASE_API_URI_PROD=

37
frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,37 @@
test-results
node_modules
# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build
# OS
.DS_Store
Thumbs.db
# Env
.env
.env.*
!.env.example
!.env.template
!.env.test
!.npmrc # NPM configuration
!.prettierrc # Prettier configuration
!.prettierignore # Prettier ignore rules
!eslint.config.js # ESLint configuration
!jsconfig.json # JavaScript configuration
!package.json # Project dependencies and scripts
!package-lock.json # Lock file for exact dependency versions
!playwright.config.js # Playwright test configuration
!README.md # Project documentation
!svelte.config.js # Svelte configuration
# Vite
!vite.config.js # Vite configuration
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

1
frontend/.npmrc Normal file
View File

@@ -0,0 +1 @@
engine-strict=true

4
frontend/.prettierignore Normal file
View File

@@ -0,0 +1,4 @@
# Package Managers
package-lock.json
pnpm-lock.yaml
yarn.lock

15
frontend/.prettierrc Normal file
View File

@@ -0,0 +1,15 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}

30
frontend/README.md
View File

@@ -1,6 +1,20 @@
# Frontend
# sv
## Run locally
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npx sv create
# create a new project in my-app
npx sv create my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
@@ -10,3 +24,15 @@ npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

24
frontend/eslint.config.js Normal file
View File

@@ -0,0 +1,24 @@
import prettier from 'eslint-config-prettier';
import js from '@eslint/js';
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
/** @type {import('eslint').Linter.Config[]} */
export default [
includeIgnoreFile(gitignorePath),
js.configs.recommended,
...svelte.configs['flat/recommended'],
prettier,
...svelte.configs['flat/prettier'],
{
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
}
];

19
frontend/jsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
}
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

4016
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

41
frontend/package.json Normal file
View File

@@ -0,0 +1,41 @@
{
"name": "frontend.new",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"format": "prettier --write .",
"lint": "prettier --check . && eslint .",
"test:unit": "vitest",
"test": "npm run test:unit -- --run && npm run test:e2e",
"test:e2e": "playwright test"
},
"devDependencies": {
"@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0",
"@playwright/test": "^1.49.1",
"@sveltejs/adapter-auto": "^4.0.0",
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-svelte": "^2.46.1",
"globals": "^15.14.0",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.3",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^6.0.0",
"vitest": "^3.0.0"
},
"dependencies": {
"svelte-i18n": "^4.0.1"
}
}

10
frontend/playwright.config.js Normal file
View File

@@ -0,0 +1,10 @@
import { defineConfig } from '@playwright/test';
export default defineConfig({
webServer: {
command: 'npm run build && npm run preview',
port: 4173
},
testDir: 'e2e'
});

42
frontend/src/app.html
View File

@@ -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>

574
frontend/src/routes/auth/admin/users/+page.svelte
View File

@@ -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>

18
frontend/svelte.config.js
View File

@@ -1,17 +1,13 @@
import { sveltePreprocess } from "svelte-preprocess";
// import adapter from '@sveltejs/adapter-auto';
import adapter from "@sveltejs/adapter-vercel";
import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
runtime: "edge",
}),
},
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;

3
frontend/vite.config.js
View File

@@ -1,8 +1,9 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite';
export default defineConfig({
plugins: [sveltekit()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}