From 00fa20f625b2c900016018dab85a47aad5739a84 Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Tue, 6 Feb 2024 23:28:36 -0300
Subject: [PATCH] mostrar ultimos precios en pagina producto

---
 sitio/src/routes/ean/[ean]/+page.svelte | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/sitio/src/routes/ean/[ean]/+page.svelte b/sitio/src/routes/ean/[ean]/+page.svelte
index d3ce771..12abfa7 100644
--- a/sitio/src/routes/ean/[ean]/+page.svelte
+++ b/sitio/src/routes/ean/[ean]/+page.svelte
@@ -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>