consegno form

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

@@ -1,26 +1,43 @@
-    let utenti = [
-        {nome: "Matteo",cognome: "Gritella",eta: "18"},
-        {nome: "Alex",cognome: "Pava",eta: "18"},
-        {nome: "Vasile",cognome: "Timis",eta: "18"},
-        {nome: "Matteo",cognome: "Rossi",eta: "17"},
-    ];
-    export function load({params}){
-        console.log("ESECUZIONE FUNZIONE LOAD", Date.now());
-
-        return {
-            utenti
-        }  }
-
-    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"),
+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: "RossSilvedtrei",eta:27},
+
+];
+
+export function load({params}) {
+    console.log("ESECUZIONE FUNZIONE LOAD:", Date.now());
+
+    return {
+        utenti
+    }
+}
+
+
+export const actions = {
+    default: async ({cookies,request}) => {
+        const data = await request.formData();
+        console.log("I VALORI DEL FORM SONO:", data );
+
+        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
+
+        }
+    }
+},
+};

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

@@ -1,36 +1,58 @@
 <script>
-    export let data; 
+    export let data; // riceve i dati forniti dal backend durante il load della pagina
+    export let form;
+    let nome,cognome,eta;
+    let error = false;
+
+if(form?.form_error) {
+    error = true;
+    nome = form.form_vals.cognome;
+    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> <label for="cognome"> Cognome</label></div>
-    <div> <input type="text" id="cognome" name="cognome" size="40"> </div>
-    <div> <label for="eta"> Eta</label></div>
-    <div> <input type="number" id="eta" name="eta" size="40"> </div>
-    <div> <input type="submit"></div>
+    <div><label for="nome">Nome</label></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" bind:value={cognome}/>
+        <p class={error && cognome?.length == 0? '': 'hidden'}>Cognome Invalido</p></div>
+
+    <div><label for="eta">Età</label></div>
+    <div><input type="number" id="eta" name="eta" min="15" bind:value={eta}/>
+    <p class={error && eta?.length == 0? '': 'hidden'}>Eta Invalido</p></div>
+    <div><input type="submit" value="Invia"></div>
 </form>
-<ul> 
-{#each data.utenti as utente} 
-    <li>{utente.nome} {utente.cognome} ha {utente.eta} anni</li>
-{/each}
+
+<ul>
+    {#each data.utenti as utente}
+        <li>{utente.nome} {utente.cognome} ha {utente.eta} anni</li>
+    {/each}
 </ul>
 
 <style>
-    form{
-        width: 30%;
+    form {
+        width: 50%;
         display: grid;
         grid-template-columns: 1fr 4fr;
         row-gap: 15px;
-
     }
-    input,label {
+    input, label {
         height: 25px;
         border-radius: 6px;
     }
     label {
         line-height: 25px;
     }
+     p{
+        color:red;
+        font-weight: bold;
+     }
+     .hidden {
+        display: none;
+     }
 </style>

gritella_matteo/TPSI/api/todo-api/README.md

@@ -0,0 +1,42 @@
+# 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
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.12.4 create --template minimal --no-types --install npm todo-api
+```
+
+## 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.

gritella_matteo/TPSI/api/todo-api/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
+}