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"> <script lang="ts">
import { Supermercado, hosts } from "db-datos/supermercado"; import { Supermercado, hosts } from "db-datos/supermercado";
import * as schema from "db-datos/schema";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import Chart from "./Chart.svelte"; import Chart from "./Chart.svelte";
export let data: PageData; export let data: PageData;
let urls: Map<Supermercado, string>; let urls: Map<Supermercado, schema.Precio>;
$: urls = data.precios.toReversed().reduce((prev, curr) => { $: urls = data.precios.reduce((prev, curr) => {
const url = new URL(curr.url); const url = new URL(curr.url);
const supermercado = hosts[url.hostname]; const supermercado = hosts[url.hostname];
prev.set(supermercado, curr.url); prev.set(supermercado, curr);
return prev; return prev;
}, new Map<Supermercado, string>()); }, new Map<Supermercado, schema.Precio>());
const classBySupermercado: { [supermercado in Supermercado]: string } = { const classBySupermercado: { [supermercado in Supermercado]: string } = {
[Supermercado.Dia]: "bg-[#d52b1e] focus:ring-[#d52b1e]", [Supermercado.Dia]: "bg-[#d52b1e] focus:ring-[#d52b1e]",
@ -19,20 +20,30 @@
[Supermercado.Coto]: "bg-[#e20025] focus:ring-[#e20025]", [Supermercado.Coto]: "bg-[#e20025] focus:ring-[#e20025]",
[Supermercado.Jumbo]: "bg-[#2dc850] focus:ring-[#2dc850]", [Supermercado.Jumbo]: "bg-[#2dc850] focus:ring-[#2dc850]",
}; };
const formatter = new Intl.NumberFormat("es-AR", {
style: "currency",
currency: "ARS",
});
</script> </script>
{#if data.meta} {#if data.meta}
<h1 class="text-3xl font-bold">{data.meta.name}</h1> <h1 class="text-3xl font-bold">{data.meta.name}</h1>
<img src={data.meta.imageUrl} alt={data.meta.name} class="max-h-48" /> <img src={data.meta.imageUrl} alt={data.meta.name} class="max-h-48" />
<div class="flex gap-2"> <div class="flex gap-2">
{#each urls as [supermercado, url]} {#each urls as [supermercado, { url, precioCentavos }]}
<a <a
href={url} href={url}
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" 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> </a>
{/each} {/each}
</div> </div>