es03

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

@@ -1,21 +1,6 @@
 export const csr = true; // csr attivo
 export const ssr = true; //ssr attivo
-
-// export function load({ params }) {
-//     console.log("ESECUIONE FUNZIONE LOAD:", Date.now());
-
-//     // creo la lista degli utenti. Qui potrei accedere al DB
-//     let utenti = [
-//         'Mario',
-//         'Luca',
-//         'Gianni',
-//         'Pino'
-//     ];
-
-//     // restituiamo la lista degli utenti
-//     return { utenti }
-// }
-
+
 let utenti = [];
 
 export function load({ params }) {
@@ -29,12 +14,19 @@ export const actions = {
     default: async ({cookies, request}) => {
         const data = await request.formData();
         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
             }
-        )
-    }
+        }
+    },
 };

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

@@ -1,17 +1,35 @@
 
 <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" name="nome" id="nome" siz="48"></div>
+    <div>
+    <input type="text" name="nome" id="nome" size="48" 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" name="cognome" id="cognome" siz="48"></div>
+    <div>
+    <input type="text" name="cognome" id="cognome" size="48" 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" name="eta" id="eta" min="15"></div>
+    <div>
+    <input type="number" name="eta" id="eta" min="15" bind:value={eta}>
+    <p class={error && eta?.length == 0? "" : "hidden" }>Età invalida</p>
+    </div>
     <div><input type="submit"></div>
 </form>
 
@@ -32,7 +50,16 @@
         height: 25px;
         border-radius: 6px;
     }
+
     label{
         line-height: 25px;
     }
+    p{
+        color:red;
+        font-weight: bold;
+    }
+
+    .hidden{
+        display: none;
+    }
 </style>

tonanzi_samuele/TPSI/SvelteFormDB/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+venv
+# 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-*

tonanzi_samuele/TPSI/SvelteFormDB/.npmrc

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

tonanzi_samuele/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.

tonanzi_samuele/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
+}