cambios intermedios de cosas

README.md

@@ -1,38 +1,18 @@
-# create-svelte
+# Carteles de DMD
+Aplicación para que los grupos creen sus propios carteles.
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+## TODO
 
-## Creating a project
+- [ ] Separar fecha y hora en campos distintos.
+- [ ] Quitar el "de" de la fecha
+- [ ] Generar texto de boletín junto al cartel.
 
-If you're seeing this, you've probably already done this step. Congrats!
+### Verde
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+- [ ] Cambiar color de 'direccion' de rojo a verde
+- [ ] Cambiar la plantilla por modelo nuevo
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+### Azul
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-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:
-
-```bash
-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://kit.svelte.dev/docs/adapters) for your target environment.
+- [ ] Fecha y hora todo junto en 3 líneas a la derecha
+- [ ] Intentar incluir "contenido" en la esquina superior izquierda

src/lib/form/Form.svelte

@@ -9,6 +9,7 @@
 		subtitle,
 		content,
 		date,
+		time,
 		weekday,
 		address,
 		canvas
@@ -96,9 +97,13 @@
 	</div>
 
 	<div class="form-group when">
-		<div class="daymonthhour">
-			<label for="date">Fecha y hora</label>
-			<input bind:value={$date} type="datetime-local" name="date" />
+		<div class="daymonth">
+			<label for="date">Fecha</label>
+			<input bind:value={$date} type="date" name="date" />
+		</div>
+		<div class="time">
+			<label for="time">Hora</label>
+			<input bind:value={$time} type="time" name="time" />
 		</div>
 		<div class="dayname">
 			<label for="weekday">Día de la semana</label>
@@ -180,7 +185,7 @@ Albacete"
 
 	.form-group.when {
 		display: grid;
-		grid-template-columns: 1fr 1fr;
+		grid-template-columns: 1fr 1fr 1fr;
 		grid-gap: 0.25rem;
 	}
 </style>

src/lib/stores/store.js

@@ -5,6 +5,7 @@ export const heading = writable("");
 export const subtitle = writable("");
 export const content = writable("");
 export const date = writable("");
+export const time = writable("");
 export const weekday = writable("");
 export const address = writable("");
 export const organizedBy = writable([]);

src/lib/templates/Date.svelte

@@ -8,31 +8,31 @@
 	/** @typedef
 	 * {{
 	 * date: string;
-	 * time: string;
 	 * }} Newdate
 	 */
 
-	/** @type {Newdate} */ let newdate = { date: '', time: '' };
+	/** @type {Newdate} */ let newdate = { date: '' };
 
-	const convertDateTime = (/** @type {(string | undefined)} */ datetime) => {
+	const convertDate = (/** @type {(string | undefined)} */ datetime) => {
 		if (datetime == undefined) {
 			return {
-				date: '',
-				time: ''
+				date: ''
 			};
 		}
-		const monthNumber = datetime.split('-')[1];
-		const day = datetime.split('-')[2].split('T')[0];
-		const time = datetime.split('T')[1];
-		const month = getMonthName(monthNumber);
+		/** @type {string} */ const monthNumber = datetime.split('-')[1];
+		/** @type {string} */ let day = datetime.split('-')[2].split('T')[0];
+		/** @type {number} */ const dayNumber = Number(day);
+		/** @type {string} */ const month = getMonthName(monthNumber);
+		if (dayNumber < 10) {
+			day = day.charAt(1);
+		}
 		return {
-			date: `${day} de ${month}`,
-			time: time
+			date: `${day} de ${month}`
 		};
 	};
 
 	$: if ($date !== '') {
-		newdate = convertDateTime($date);
+		newdate = convertDate($date);
 	}
 </script>