You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.4 KiB
Svelte
91 lines
2.4 KiB
Svelte
<script>
|
|
import { getMonthName } from '$lib/monthName';
|
|
import { templates } from '$lib/templates/templates';
|
|
|
|
/** @type number */ export let templateIndex;
|
|
import { date } from '$lib/stores/store';
|
|
|
|
/** @typedef
|
|
* {{
|
|
* date: string;
|
|
* }} Newdate
|
|
*/
|
|
|
|
/** @type {Newdate} */ let newdate = { date: '' };
|
|
|
|
const convertDate = (/** @type {(string | undefined)} */ datetime) => {
|
|
if (datetime == undefined) {
|
|
return {
|
|
date: ''
|
|
};
|
|
}
|
|
/** @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}`
|
|
};
|
|
};
|
|
|
|
$: if ($date !== '') {
|
|
newdate = convertDate($date);
|
|
}
|
|
</script>
|
|
|
|
{#if templates[templateIndex] && newdate.date}
|
|
<div
|
|
class="date"
|
|
style="
|
|
top: {templates[templateIndex].date.top}px;
|
|
height: {templates[templateIndex].date.height}rem;
|
|
left: {templates[templateIndex].date.left}rem;
|
|
right: {templates[templateIndex].date.right}rem;
|
|
color: {templates[templateIndex].date.color};
|
|
font-size: {templates[templateIndex].date.fontSize}rem;
|
|
font-family: {templates[templateIndex].date.fontFamily};
|
|
text-align: {templates[templateIndex].date.textAlign};
|
|
font-weight: {templates[templateIndex].date.fontWeight};
|
|
line-height: {templates[templateIndex].date.lineHeight}rem;
|
|
"
|
|
>
|
|
{newdate.date}
|
|
</div>
|
|
{/if}
|
|
{#if templates[templateIndex] && newdate.time}
|
|
<div
|
|
class="time"
|
|
style="
|
|
top: {templates[templateIndex].time.top}px;
|
|
height: {templates[templateIndex].time.height}rem;
|
|
left: {templates[templateIndex].time.left}rem;
|
|
right: {templates[templateIndex].time.right}rem;
|
|
color: {templates[templateIndex].time.color};
|
|
font-size: {templates[templateIndex].time.fontSize}rem;
|
|
font-family: {templates[templateIndex].time.fontFamily};
|
|
text-align: {templates[templateIndex].time.textAlign};
|
|
font-weight: {templates[templateIndex].time.fontWeight};
|
|
line-height: {templates[templateIndex].time.lineHeight}rem;
|
|
"
|
|
>
|
|
{newdate.time}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.date {
|
|
position: absolute;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
|
|
.time {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|