From 4a1711e0204d0af3b502c96e1dcbe0dfbd98f3a0 Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Tue, 11 Oct 2022 09:45:06 +0200
Subject: [PATCH] esto marcha, ahora ya es capaz de pillar la imagen donde
 corresponde

---
 src/lib/db/utils.js              |  8 +++---
 src/lib/form/Form.svelte         | 35 ++++++++++++++++++++++++++
 src/routes/+layout.svelte        |  2 +-
 src/routes/admin/+page.server.js | 43 +++++++++-----------------------
 src/routes/admin/+page.svelte    | 27 +++++++++++++++++++-
 5 files changed, 77 insertions(+), 38 deletions(-)

diff --git a/src/lib/db/utils.js b/src/lib/db/utils.js
index 47a33a5..de5ddb4 100644
--- a/src/lib/db/utils.js
+++ b/src/lib/db/utils.js
@@ -1,5 +1,4 @@
-import { db } from '$lib/db/db';
-
+import { db } from '$lib/db/db.js';
 /** 
 * Return of functions that change change DB, either 'success' or 'failure' with explanation
 * @typedef {Object} ChangeDBResult
@@ -58,10 +57,10 @@ export const delUserFromDB = (email) => {
 * @param {string} content
 * @returns {ChangeDBResult} return
 */
-export const addPosterToDB = (image, template, name = "", content) => {
-  console.log(`You passed this paramas:\n image: ${image}\n template: ${template}\n name: ${name}\n content: ${content}`);
+export const addPosterToDB = (image, template, name, content) => {
 
   const id = crypto.randomUUID(); // Create random ID for Poster
+  console.log("New id is: ", id);
 
   if (!image || !template || !content) { // Return error if mandatory info is missing
     return {
@@ -85,6 +84,5 @@ export const addPosterToDB = (image, template, name = "", content) => {
 export const getAllPostersFromDB = () => {
   const getPosters = db.prepare(`SELECT * FROM Posters;`);
   const result = getPosters.all();
-  console.log("resultado en utils", result);
   return result;
 }
diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
index 3030579..6b1906b 100644
--- a/src/lib/form/Form.svelte
+++ b/src/lib/form/Form.svelte
@@ -32,6 +32,40 @@
 			$content = editor.firstChild.innerHTML;
 		}
 	};
+	const saveCanvas = async () => {
+		if ($canvas !== undefined) {
+			const img = await html2canvas($canvas, { scale: 2 });
+			const image = img.toDataURL('image/png');
+			const data = new FormData();
+			data.set('image', image);
+			data.set('name', 'test');
+			data.set('template', 'verde');
+			data.set(
+				'content',
+				JSON.stringify({
+					title: $title,
+					heading: $heading,
+					subtitle: $subtitle,
+					content: $content,
+					date: $date,
+					time: $time,
+					weekday: $weekday,
+					address: $address,
+					city: $city
+				})
+			);
+			console.log(data.get('image'));
+
+			// const req = await fetch('/admin', {
+			// 	method: 'POST',
+			// 	headers: {
+			// 		'content-type': 'multipart/form-data',
+			// 		accept: 'application/json'
+			// 	},
+			// 	body: data
+			// });
+		}
+	};
 
 	const downloadCanvas = async () => {
 		if ($canvas !== undefined) {
@@ -131,6 +165,7 @@
 </form>
 
 <button on:click|preventDefault={downloadCanvas}>Descargar</button>
+<button on:click|preventDefault={saveCanvas}>Guardar</button>
 
 <style>
 	.form-group {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 935931f..9372791 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -25,7 +25,7 @@
 		}
 	}
 
-	console.log('Browser is: ', browserType);
+	// console.log('Browser is: ', browserType);
 </script>
 
 <Header />
diff --git a/src/routes/admin/+page.server.js b/src/routes/admin/+page.server.js
index 1d769fc..a297b03 100644
--- a/src/routes/admin/+page.server.js
+++ b/src/routes/admin/+page.server.js
@@ -1,43 +1,24 @@
 import { error } from '@sveltejs/kit';
-import { getAllPostersFromDB } from '$lib/db/utils';
+import { canvas } from '$lib/stores/store';
+import { getAllPostersFromDB, addPosterToDB } from '$lib/db/utils';
 
 /** @type {import('./$types').PageServerLoad} */
-export const load = async () => {
+export const load = () => {
   const posters = getAllPostersFromDB();
   if (posters !== undefined) {
     return {
-      posters: posters
+      posters
     }
   }
+  console.log(posters);
   throw error(404, "error");
 };
 
-// /** @type {import('./$types').Actions} */
-// export const actions = {
-//   add: async ({ request, locals }) => {
-//     const form = await request.formData();
-
-//     await api('POST', `todos/${locals.userid}`, {
-//       text: form.get('text')
-//     });
-//   },
-//   edit: async ({ request, locals }) => {
-//     const form = await request.formData();
-
-//     await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
-//       text: form.get('text')
-//     });
-//   },
-//   toggle: async ({ request, locals }) => {
-//     const form = await request.formData();
-
-//     await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
-//       done: !!form.get('done')
-//     });
-//   },
-//   delete: async ({ request, locals }) => {
-//     const form = await request.formData();
+/** @type {import('./$types').Actions} */
+export const actions = {
+  default: async ({ request }) => {
+    console.log("Estoy aquí");
+    const data = await request.formData();
+  }
 
-//     await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`);
-//   }
-// };
+}
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index 9b064ab..de890a5 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -1,6 +1,31 @@
 <script>
+	/** @type {import('./$types').PageData} */
 	export let data;
-	console.log(data);
+
+	$: posters = data.posters;
+
+	/** @type {Blob} */ let image = new Blob();
+	/** @type {string} */ let template = '';
+	/** @type {string} */ let content = '';
 </script>
 
 <h1>Test</h1>
+<ul>
+	{#each posters as poster}
+		<li>{poster.name}</li>
+	{/each}
+</ul>
+
+<form method="POST">
+	<input name="template" bind:value={template} placeholder="Plantilla" type="text" />
+	<input name="content" bind:value={content} placeholder="Contenido" type="text" />
+	<input name="image" bind:value={image} type="file" />
+	<button>Send</button>
+</form>
+
+<style>
+	input {
+		display: block;
+		margin: 1rem 0;
+	}
+</style>