From 444bfbb60a0ad7b5bc731d1bc55e9364e62fde4a Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Mon, 26 Sep 2022 11:22:50 +0200
Subject: [PATCH] =?UTF-8?q?a=C3=B1ado=20cosas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile                     |  24 +++
 captain-definition             |   4 +
 src/lib/preview/Preview.svelte | 262 +++++++++++++++++----------------
 3 files changed, 165 insertions(+), 125 deletions(-)
 create mode 100644 Dockerfile
 create mode 100644 captain-definition

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..267ee0f
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,24 @@
+FROM node:18
+
+WORKDIR /app
+
+# COPY package.json and package-lock.json files
+COPY package*.json ./
+
+COPY vite.config.js ./
+
+# COPY tsconfig.json file
+COPY jsconfig.json ./
+
+# COPY
+COPY . .
+
+RUN npm install
+
+RUN npm run build
+
+RUN [ "chmod", "+x", "/app/start.sh"]
+
+EXPOSE 3000
+
+CMD [ "/app/start.sh" ]
diff --git a/captain-definition b/captain-definition
new file mode 100644
index 0000000..ff979d2
--- /dev/null
+++ b/captain-definition
@@ -0,0 +1,4 @@
+{
+	"schemaVersion": 2,
+	"dockerfilePath": "./Dockerfile"
+}
diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
index 08c9d44..f2252ac 100644
--- a/src/lib/preview/Preview.svelte
+++ b/src/lib/preview/Preview.svelte
@@ -1,145 +1,157 @@
 <script>
+	import html2canvas from 'html2canvas';
+	import { title, subtitle, date, address, content, heading } from '$lib/stores/store';
 
-    import {title, subtitle, date, address, content, heading} from '$lib/stores/store'
+	let newdate = '';
+	let inner;
 
-    let newdate = "";
-
-    const convertDateTime = (datetime) => {
-	if (datetime == undefined) {
-	    return {
-		date: "",
-		time: ""
-	    };
+	const convertDateTime = (datetime) => {
+		if (datetime == undefined) {
+			return {
+				date: '',
+				time: ''
+			};
+		}
+		const year = datetime.split('-')[0];
+		const month = datetime.split('-')[1];
+		const day = datetime.split('-')[2].split('T')[0];
+		const time = datetime.split('T')[1];
+		return {
+			date: `${day}/${month}`,
+			time: time
+		};
 	};
-	const year = datetime.split("-")[0];
-	const month = datetime.split("-")[1];
-	const day = datetime.split("-")[2].split("T")[0];
-	const time = datetime.split("T")[1];
-	return {
-	    date: `${day}/${month}`,
-	    time: time,
-	}
-    }
 
-    $: if ($date !== "") {newdate = convertDateTime($date)};
+	$: if ($date !== '') {
+		newdate = convertDateTime($date);
+	}
 
+	const takeScreenshot = async () => {
+		const res = await html2canvas(inner);
+		const image = await res.toDataURL('image/png');
+		const link = document.createElement('a');
+		link.download = 'cartel.png';
+		link.href = image;
+		link.click();
+	};
 </script>
 
 <div class="preview">
-    <div class="result">
-	<div class="heading">{$heading}</div>
-	<div class="title">{$title}</div>
-	<div class="subtitle">{$subtitle}</div>
-	<div class="content">{@html $content}</div>
-	{#if newdate}<div class="date">{newdate.date}</div>{/if}
-	{#if newdate}<div class="time">{newdate.time}</div>{/if}
-	<div class="address">{$address}</div>
-    </div>
+	<div class="result" bind:this={inner}>
+		<div class="heading">{$heading}</div>
+		<div class="title">{$title}</div>
+		<div class="subtitle">{$subtitle}</div>
+		<div class="content">{@html $content}</div>
+		{#if newdate}<div class="date">{newdate.date}</div>{/if}
+		{#if newdate}<div class="time">{newdate.time}</div>{/if}
+		<div class="address">{$address}</div>
+	</div>
+	<button on:click|preventDefault={takeScreenshot}>Descargar</button>
 </div>
 
 <style>
-    .preview {
-	padding: 1rem;
-	display: grid;
-	justify-content: center;
-	grid-template-columns: 1fr;
-    }
+	.preview {
+		padding: 1rem;
+		display: grid;
+		justify-content: center;
+		grid-template-columns: 1fr;
+	}
 
-    .result {
-	display: block;
-	aspect-ratio: 1/1.4142;
-	min-height: 842px;
-	align-self: center;
-	background-color: lightblue;
-	width: auto;
-	background-image: url('imagen01.png');
-	background-size: contain;
-	position: relative;
-	padding: 1rem;
-	box-shadow: 0 0 16px 0 rgba(0,0,0,0.3);
-	border-radius: 0.5rem;
-    }
+	.result {
+		display: block;
+		aspect-ratio: 1/1.4142;
+		min-height: 842px;
+		align-self: center;
+		background-color: lightblue;
+		width: auto;
+		background-image: url('imagen01.png');
+		background-size: contain;
+		position: relative;
+		padding: 1rem;
+		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
+		border-radius: 0.5rem;
+	}
 
-    .heading {
-	position: absolute;
-	top: 300px;
-	left: 1rem;
-	right: 1rem;
-	font-size: 1rem;
-	color: grey;
-	font-variant: small-caps;
-    }
+	.heading {
+		position: absolute;
+		top: 300px;
+		left: 1rem;
+		right: 1rem;
+		font-size: 1rem;
+		color: grey;
+		font-variant: small-caps;
+	}
 
-    .title {
-	position: absolute;
-	top: 320px;
-	left: 1rem;
-	right: 1rem;
-	align-self: center;
-	font-family: 'Gill Sans', sans-serif;
-	font-size: 2.5rem;
-	font-variant: small-caps;
-	line-height: 2.5rem;
-	color: firebrick;
-	font-weight: 600;
-	height: 5rem;
-	overflow: hidden;
-    }
-    .subtitle {
-	position: absolute;
-	top: 415px;
-	left: 1rem;
-	right: 2rem;
-	font-size: 1.1rem;
-	color: #575;
-	height: 2.6rem;
-	overflow: hidden;
-    }
+	.title {
+		position: absolute;
+		top: 320px;
+		left: 1rem;
+		right: 1rem;
+		align-self: center;
+		font-family: 'Gill Sans', sans-serif;
+		font-size: 2.5rem;
+		font-variant: small-caps;
+		line-height: 2.5rem;
+		color: firebrick;
+		font-weight: 600;
+		height: 5rem;
+		overflow: hidden;
+	}
+	.subtitle {
+		position: absolute;
+		top: 415px;
+		left: 1rem;
+		right: 2rem;
+		font-size: 1.1rem;
+		color: #575;
+		height: 2.6rem;
+		overflow: hidden;
+	}
 
-    .content {
-	position: absolute;
-	top: 500px;
-	left: 1rem;
-	right: 16rem;
-	font-size: 1rem;
-	color: #222;
-	line-height: 1.5rem;
-	height: 9rem;
-	overflow: hidden;
-    }
+	.content {
+		position: absolute;
+		top: 500px;
+		left: 1rem;
+		right: 16rem;
+		font-size: 1rem;
+		color: #222;
+		line-height: 1.5rem;
+		height: 9rem;
+		overflow: hidden;
+	}
 
-    .date {
-	position: absolute;
-	top: 600px;
-	left: 23rem;
-	right: 6rem;
-	font-size: 2rem;
-	color: white;
-	max-height: 2rem;
-	overflow: hidden;
-    }
+	.date {
+		position: absolute;
+		top: 600px;
+		left: 23rem;
+		right: 6rem;
+		font-size: 2rem;
+		color: white;
+		max-height: 2rem;
+		overflow: hidden;
+	}
 
-    .time {
-	position: absolute;
-	top: 640px;
-	left: 23rem;
-	right: 6rem;
-	font-size: 1.8rem;
-	color: white;
-	text-shadow: 0 0 16px rgba(0,0,0,0.4);
-	max-height: 2rem;
-	overflow: hidden;
-    }
+	.time {
+		position: absolute;
+		top: 640px;
+		left: 23rem;
+		right: 6rem;
+		font-size: 1.8rem;
+		color: white;
+		text-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
+		max-height: 2rem;
+		overflow: hidden;
+	}
 
-    .address {
-	position: absolute;
-	top: 650px;
-	left: 2rem;
-	right: 15rem;
-	font-size: 1.15rem;
-	font-family: serif;
-	color: firebrick;
-	max-height: 4rem;
-	overflow: hidden;
-    }
+	.address {
+		position: absolute;
+		top: 650px;
+		left: 2rem;
+		right: 15rem;
+		font-size: 1.15rem;
+		font-family: serif;
+		color: firebrick;
+		max-height: 4rem;
+		overflow: hidden;
+	}
 </style>