set up basic frontend and separate frontend and backend

.gitignore

@@ -25,6 +25,8 @@ share/python-wheels/
 .installed.cfg
 *.egg
 MANIFEST
+src/app/frontend/node_modules/
+src/app/frontend/.svelte-kit/
 
 # PyInstaller
 #  Usually these files are written by a python script from a template
@@ -160,3 +162,8 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
+
+# pnpm
+pnpm-lock.yaml
+
+!/src/app/frontend/src/lib/

src/app/website/__init__.py → src/app/backend/__init__.py

@@ -20,19 +20,9 @@ def create_app():
     # app.config['SQLALCHEMY_DATABASE_URI'] = f'mysql://donor:{PASSWD}@localhost/{DB_NAME}'
     app.config['SQLALCHEMY_DATABASE_URI'] = f'mysql://donor:{PASSWD}@127.0.0.1/{DB_NAME}'
     db.init_app(app)
-
-    from .views import views
-    from .donate import donate
-    from .about import about
-
-    app.register_blueprint(views, url_prefix="/")
-    app.register_blueprint(donate, url_prefix="/")
-    app.register_blueprint(about, url_prefix="/")
-
-    from .models import RawData  # noqa
-
+
     with app.app_context():
         db.create_all()
 
-    return app
 
+    return app

src/app/website/donate.py → src/app/backend/donate.py

@@ -1,20 +1,17 @@
-from flask import Blueprint, render_template, request, flash, redirect, url_for
+from flask import request, flash, redirect, url_for
 from werkzeug.security import generate_password_hash
 from sqlalchemy import func, cast, VARBINARY
 from .models import RawData
 from . import db
 
-donate = Blueprint("donate", __name__)
-
-@donate.route("/donation", methods=["GET", "POST"])
-def donation():
-    if request.method == "GET":
-        return render_template("donate.html")
-    elif request.method == "POST":
+def init_views(app):
+    @app.route("/donation", methods=["POST"])
+    def donation():
         text = request.form.get("text")
         # make sure this is not empty
         if not text:
-            flash("Please provide text input", category="error")
+            return "Error: No text provided"
+            # we should also use logging
         else:
             # at the moment we are generating the hash checksum for the raw text
             new_submission = RawData(
@@ -25,12 +22,8 @@ def donation():
             db.session.add(new_submission)
             # make commit to db
             db.session.commit()
-            flash("Text input received", category="success")
             # results = db.session.query(RawData).filter_by(
             #     donation='text').all()
             # for result in results:
             #     print(f"ID: {result.donor_id}, Donation: {result.donation}")
-            # redirect to homepage
-            return redirect(url_for("views.home"))
-
-    return render_template("donate.html")
+            return "Success: data transferred to database"

src/app/frontend/package.json

@@ -0,0 +1,53 @@
+{
+	"name": "donation-webserver",
+	"version": "0.0.1",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"gh-pages": "npm run build && npx gh-pages -d build"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.48.2",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/adapter-static": "^3.0.6",
+		"@sveltejs/kit": "^2.8.0",
+		"@typescript-eslint/eslint-plugin": "^8.13.0",
+		"@typescript-eslint/parser": "^8.13.0",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.14.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"gh-pages": "^6.2.0",
+		"postcss": "^8.4.47",
+		"postcss-load-config": "^6.0.1",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"svelte": "^5.1.10",
+		"svelte-check": "^4.0.5",
+		"svelte-preprocess": "^6.0.3",
+		"tailwindcss": "^3.4.14",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.10",
+		"vitest": "^2.1.4"
+	},
+	"dependencies": {
+		"@popperjs/core": "^2.11.8",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"classnames": "^2.5.1",
+		"flowbite": "^2.5.2",
+		"flowbite-svelte": "^0.47.3",
+		"flowbite-svelte-icons": "^2.0.2",
+		"globrex": "^0.1.2",
+		"pnpm": "^9.12.3"
+	}
+}

src/app/frontend/playwright.config.ts

@@ -0,0 +1,11 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests'
+};
+
+export default config;

src/app/frontend/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer
+  ]
+};
+
+module.exports = config;

src/app/frontend/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app/frontend/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/app/frontend/src/app.postcss

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities

src/app/frontend/src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});

src/app/frontend/src/lib/server/contact.ts

@@ -0,0 +1,53 @@
+type Message = {    
+    id: number
+    text: string
+    email: string
+}
+
+type Todo = {
+    id: number
+    text: string
+    completed: boolean
+  }
+
+  let todos: Todo[] = [
+    {
+      id: Date.now(),
+      text: 'Learn how forms work',
+      completed: false
+    }
+  ]
+
+export function sendMessage(text: string, email: string) {
+
+    const message: Message = {
+        id: Date.now(),
+        text,
+        email
+        }
+    // Add logic here to process the message.
+    console.log('message:', message)
+  }
+
+
+  export function getTodos() {
+    return todos
+  }
+
+  export function addTodo(text: string) {
+    const todo: Todo = {
+      id: Date.now(),
+      text,
+      completed: false
+    }
+    todos.push(todo)
+  }
+
+  export function removeTodo(id: number) {
+    todos = todos.filter((todo) => todo.id !== id)
+  }
+
+  export function clearTodos() {
+    todos = []
+  }
+

src/app/frontend/src/routes/+layout.js

@@ -0,0 +1 @@
+export const prerender = true;

src/app/frontend/src/routes/+layout.svelte

@@ -0,0 +1,54 @@
+<script lang='ts'>
+  import "../app.postcss"
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger,  Footer, FooterBrand, FooterCopyright, FooterLinkGroup, FooterLink, Hr, Button } from 'flowbite-svelte'
+
+  import { goto } from '$app/navigation';
+  import './global.css';
+  function gotoDonate() {
+    goto('/donation');
+  }
+</script>
+
+<Navbar fluid>
+  <NavBrand href="/">
+    <img
+      src="/images/Logo_oben_links.svg"
+      class="max-w-md h-14"
+      alt="Mailcom Logo"
+    />
+
+  </NavBrand>
+  <div class="flex md:order-2">
+    <Button size="sm" on:click={gotoDonate} >Datenspende</Button>
+    <NavHamburger />
+  </div>
+  <NavUl>
+    <NavLi href="/">Home</NavLi>
+    <NavLi href="/tutorial">Tutoriel</NavLi>
+    <NavLi href="/about">Informations</NavLi>
+    <NavLi href="/blog">Blog</NavLi>
+  </NavUl>
+</Navbar>
+
+<main class='p-8 h-auto'>
+  <slot />
+</main>
+
+<Footer footerType="logo" class='p-8'>
+  <div class="sm:flex sm:items-center sm:justify-between">
+    <FooterBrand
+      href="https://www.uni-heidelberg.de/en"
+      src="/images/Logoleiste_SSC_4c.png"
+      alt="Romanisches Seminar Logo"
+      name="Romanisches Seminar"
+    />
+    <FooterLinkGroup ulClass="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
+      <FooterLink href="/">About</FooterLink>
+      <FooterLink href="/">Privacy Policy</FooterLink>
+      <FooterLink href="/contact">Contact</FooterLink>
+      <FooterLink href="/impressum">Impressum</FooterLink>
+    </FooterLinkGroup>
+  </div>
+  <Hr class="my-6" />
+  <FooterCopyright href="/" by="UHEI™" />
+</Footer>

src/app/frontend/src/routes/+page.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { Button, Modal, Card } from 'flowbite-svelte'
+  let defaultModal = false;
+  import { Img } from 'flowbite-svelte';
+  import { ArrowRightOutline } from 'flowbite-svelte-icons';
+  import './global.css';
+  import { goto } from '$app/navigation';
+
+  function gotoDonate() {
+    goto('/donation');
+  }
+</script>
+
+<main class='p-8 h-auto'>
+
+  <h1 class="mb-4 text-4xl font-extrabold center leading-none tracking-tight text-gray-100 md:text-5xl lg:text-6xl dark:text-white">Mailcom project</h1>
+
+  <div class="grid grid-cols-3 gap-4">
+    <div>
+      <Card href="/cards">
+      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400 leading-tight">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+    </Card>
+  </div>
+    <div>
+      <Card>
+      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+      <Button class="w-fit" on:click={gotoDonate}>
+        Donate<ArrowRightOutline class="w-6 h-6 ms-2 text-white" />
+      </Button>
+    </Card>
+  </div>
+    <div>
+      <Card href="/cards" color="primary">
+        <Img src="/images/background.png" 
+          alt="sample 1" class="rounded-lg" 
+          captionClass="absolute bottom-6 px-4 text-lg text-white" 
+          caption="About" />
+      </Card>
+    </div>
+  </div>
+
+</main>
+
+
+<Button color="primary" on:click={() => defaultModal = true} class='mb-4'>Default modal</Button>
+
+<Modal title="Terms of Service" bind:open={defaultModal} autoclose>
+  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum ipsa aperiam impedit beatae voluptate mollitia quos qui ducimus omnis similique, atque praesentium optio corporis, alias id quibusdam! Veritatis, reprehenderit.
+  </p>
+  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In illum ipsa aperiam impedit beatae voluptate mollitia quos qui ducimus omnis similique, atque praesentium optio corporis, alias id quibusdam! Veritatis, reprehenderit.
+  </p>
+  <svelte:fragment slot='footer'>
+    <Button on:click={() => alert('Handle "success"')}>I accept</Button>
+    <Button color="alternative">Decline</Button>
+  </svelte:fragment>
+</Modal>
+
+

src/app/frontend/src/routes/about/+page.svelte

@@ -0,0 +1,5 @@
+<main class='p-8 h-auto'>
+
+    <h1 class="mb-4 text-4xl font-extrabold center leading-none tracking-tight text-gray-100 md:text-5xl lg:text-6xl dark:text-white">About the project</h1>
+
+</main>

src/app/frontend/src/routes/blog/+page.svelte

@@ -0,0 +1,5 @@
+<main class='p-8 h-auto'>
+
+  <h1 class="mb-4 text-4xl font-extrabold center leading-none tracking-tight text-gray-100 md:text-5xl lg:text-6xl dark:text-white">Blog</h1>
+
+</main>