mostrar ultimos precios en pagina producto

This commit is contained in:
Cat /dev/Nulo 2024-02-06 23:28:36 -03:00
parent 18771cb944
commit 00fa20f625

View file

@ -1,17 +1,18 @@
<script lang="ts">
import { Supermercado, hosts } from "db-datos/supermercado";
import * as schema from "db-datos/schema";
import type { PageData } from "./$types";
import Chart from "./Chart.svelte";
export let data: PageData;
let urls: Map<Supermercado, string>;
$: urls = data.precios.toReversed().reduce((prev, curr) => {
let urls: Map<Supermercado, schema.Precio>;
$: urls = data.precios.reduce((prev, curr) => {
const url = new URL(curr.url);
const supermercado = hosts[url.hostname];
prev.set(supermercado, curr.url);
prev.set(supermercado, curr);
return prev;
}, new Map<Supermercado, string>());
}, new Map<Supermercado, schema.Precio>());
const classBySupermercado: { [supermercado in Supermercado]: string } = {
[Supermercado.Dia]: "bg-[#d52b1e] focus:ring-[#d52b1e]",
@ -19,20 +20,30 @@
[Supermercado.Coto]: "bg-[#e20025] focus:ring-[#e20025]",
[Supermercado.Jumbo]: "bg-[#2dc850] focus:ring-[#2dc850]",
};
const formatter = new Intl.NumberFormat("es-AR", {
style: "currency",
currency: "ARS",
});
</script>
{#if data.meta}
<h1 class="text-3xl font-bold">{data.meta.name}</h1>
<img src={data.meta.imageUrl} alt={data.meta.name} class="max-h-48" />
<div class="flex gap-2">
{#each urls as [supermercado, url]}
{#each urls as [supermercado, { url, precioCentavos }]}
<a
href={url}
rel="noreferrer noopener"
target="_blank"
class={`focus:shadow-outline inline-flex items-center justify-center rounded-md ${classBySupermercado[supermercado]} px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2`}
class={`focus:shadow-outline inline-flex flex-col items-center justify-center rounded-md ${classBySupermercado[supermercado]} px-4 py-2 font-medium tracking-wide text-white transition-colors duration-200 hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2`}
>
Ver en {supermercado}
{#if precioCentavos}
<span class="text-lg font-bold"
>{formatter.format(precioCentavos / 100)}</span
>
{/if}
<span class="text-sm">{supermercado}</span>
</a>
{/each}
</div>