consegna tutto il form

pavalean_alexandru/TPSI/SvelteForm/src/routes/+page.server.js

@@ -1,28 +1,43 @@
+export const csr = true; // csr attivo
+export const ssr = true; //ssr attivo
+
 let utenti = [
-    {nome: 'Mario', cognome: 'Rossi', eta: 25},
-    {nome: 'Luca', cognome: 'Bianchi', eta: 15},
-    {nome: 'Gianni', cognome: 'Verdi', eta: 19},
-    {nome: 'Pino', cognome: 'Silvestre', eta: 27},
+    {nome: "Mario", cognome: "Rossi",eta:25},
+    {nome: "Luca", cognome: "Bianchi",eta:15},
+    {nome: "Gianni", cognome: "Verdi", eta:19},
+    {nome: "Pino", cognome: "RossSilvedtrei",eta:27},
+
 ];
 
-export function load({ params }) {
-    console.log("ESECUIONE FUNZIONE LOAD:", Date.now());
+export function load({params}) {
+    console.log("ESECUZIONE FUNZIONE LOAD:", Date.now());
 
-    // restituiamo la lista degli utenti
-    return { utenti }
+    return {
+        utenti
+    }
 }
 
+
 export const actions = {
-    default: async ({cookies, request}) => {
+    default: async ({cookies,request}) => {
         const data = await request.formData();
-        console.log("I VALORI DEL FORM SONO:", data)
+        console.log("I VALORI DEL FORM SONO:", data );
 
-        utenti.push(
-            {
-                nome: data.get('nome'),
-                cognome: data.get('cognome'),
-                eta: data.get('eta')
+        const user = {
+                nome:data.get("nome"),
+                cognome: data.get("cognome"),
+                eta: data.get("eta")
             }
-        )
+    if (user.nome && user.cognome && user.eta) {
+
+        utenti.push(user);
+    }
+    else {
+        return{
+            form_error:true,
+            form_vals:user
+
+        }
     }
+},
 };

pavalean_alexandru/TPSI/SvelteForm/src/routes/+page.svelte

@@ -1,16 +1,34 @@
 <script>
-    export let data; // riceve i dati forniti dal backend durante il load della pagina
+    export let data;
+    export let form;
+    let nome, cognome, eta;
+    let error = false;
+
+    if(form?.form_error) {
+        error = true;
+        nome = form.form_vals.nome;
+        cognome = form.form_vals.cognome;
+        eta = form.form_vals.eta;
+    }
 </script>
 
-<h1>Welcome to SvelteKit FORM Example</h1>
 
 <form method="POST">
     <div><label for="nome">Nome</label></div>
-    <div><input type="text" id="nome" name="nome" size="40"/></div>
+    <div>
+        <input type="text" id="nome" name="nome" size="40" bind:value={nome}/>
+        <p class={error && nome?.length == 0? '': 'hidden'}>Nome invalido</p>
+    </div>
     <div><label for="cognome">Cognome</label></div>
-    <div><input type="text" id="cognome" name="cognome" size="40"/></div>
+    <div>
+        <input type="text" id="cognome" name="cognome" size="40" bind:value={cognome}/>
+        <p class={error && cognome?.length == 0? '': 'hidden'}>Cognome invalido</p>
+    </div>
     <div><label for="eta">Eta</label></div>
-    <div><input type="number" id="eta" name="eta" min="15"/></div>
+    <div>
+        <input type="number" id="eta" name="eta" min="15" bind:value={eta}/>
+        <p class={error && eta?.length == 0? '': 'hidden'}>Nome invalido</p>
+    </div>
     <div><input type="submit"></div>
 </form>
 
@@ -27,11 +45,22 @@
         grid-template-columns: 1fr 4fr;
         row-gap: 15px;
     }
+
     input, label {
         height: 25px;
         border-radius: 6px;
     }
+
     label {
         line-height: 25px;
     }
+
+    p {
+        color: red;
+        font-weight: bold;
+    }
+
+    .hidden {
+        display: none;
+    }
 </style>

pavalean_alexandru/TPSI/SvelteFormDB/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

pavalean_alexandru/TPSI/SvelteFormDB/.npmrc

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

pavalean_alexandru/TPSI/SvelteFormDB/README.md

@@ -0,0 +1,38 @@
+# sv
+
+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!
+
+```sh
+# 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:
+
+```sh
+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:
+
+```sh
+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.

pavalean_alexandru/TPSI/SvelteFormDB/jsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": false,
+		"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
+}