Mostrar procedencia en rutas interurbanascopilot/update-coruna-realtime-processor

Closes #154

2 files changed, 15 insertions, 2 deletions

diff --git a/src/frontend/app/api/schema.ts b/src/frontend/app/api/schema.ts
index 864ea57..d900055 100644
--- a/src/frontend/app/api/schema.ts
+++ b/src/frontend/app/api/schema.ts
@@ -11,6 +11,7 @@ export const HeadsignInfoSchema = z.object({
   badge: z.string().optional().nullable(),
   destination: z.string().nullable(),
   marquee: z.string().optional().nullable(),
+  origin: z.string().optional().nullable(),
 });
 
 export const ArrivalPrecisionSchema = z.enum([
diff --git a/src/frontend/app/components/arrivals/ArrivalCard.tsx b/src/frontend/app/components/arrivals/ArrivalCard.tsx
index 51e0803..3aae65e 100644
--- a/src/frontend/app/components/arrivals/ArrivalCard.tsx
+++ b/src/frontend/app/components/arrivals/ArrivalCard.tsx
@@ -34,7 +34,7 @@ const AutoMarquee = ({ text }: { text: string }) => {
     if (!el) return;
 
     const checkScroll = () => {
-      const charWidth = 8;
+      const charWidth = 12;
       const availableWidth = el.offsetWidth;
       const textWidth = text.length * charWidth;
       setShouldScroll(textWidth > availableWidth);
@@ -252,10 +252,22 @@ export const ArrivalCard: React.FC<ArrivalCardProps> = ({
               {operator && (
                 <span className="text-xs font-mono text-slate-700 dark:text-slate-200 font-medium shrink-0">
                   {operator}
+                  {headsign.destination || headsign.origin ? (
+                    <>&nbsp;·&nbsp;</>
+                  ) : (
+                    ""
+                  )}
+                </span>
+              )}
+              {headsign.origin && (
+                <span className="text-xs font-mono text-slate-500 dark:text-slate-400 shrink-0">
+                  Proc: {headsign.origin}{" "}
                   {headsign.marquee && <>&nbsp;·&nbsp;</>}
                 </span>
               )}
-              {headsign.marquee && <AutoMarquee text={headsign.marquee} />}
+              {headsign.marquee && (
+                <AutoMarquee text={"Via: " + headsign.marquee} />
+              )}
             </div>
           </div>
         </div>