From 143f37decfe863cf65ed8f31fe66225d9091b974 Mon Sep 17 00:00:00 2001
From: akdave2003 <anshdave@umich.edu>
Date: Sun, 8 Dec 2024 10:59:57 -0500
Subject: [PATCH] All refactored except issue with hosted_by

---
 frontend/components/media/MediaMap.vue | 15 ++++++++-------
 frontend/i18n/en-US.json               |  6 ++++++
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
index 771bb5bdf..513b5a679 100644
--- a/frontend/components/media/MediaMap.vue
+++ b/frontend/components/media/MediaMap.vue
@@ -12,6 +12,7 @@ import MapLibreGlDirections, {
 import maplibregl, { type Map } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
+
 const props = defineProps<{
   markerColors: string[];
   eventNames: string[];
@@ -60,10 +61,10 @@ interface RouteProfileOption {
 }
 
 const routeProfileOptions: RouteProfileOption = {
-  FOOT: "foot",
-  BIKE: "bike",
-  DRIVING: "driving",
-  CAR: "car",
+  FOOT: "components.media_map_foot",
+  BIKE: "components.media_map_bike",
+  DRIVING: "components.media_map_driving",
+  CAR: "components.media_map_car",
 };
 
 interface RouteProfile {
@@ -91,7 +92,7 @@ const routeProfileMap: RouteProfile[] = [
 
 const walkingRouteProfileControl = `
   <div
-    title="Change profile [p]"
+    title="$t('components.media_Change_profile')"
     id=${routeProfileOptions.FOOT}
     style="
     background-image: url(${walkDirectionsIcon});
@@ -107,7 +108,7 @@ const walkingRouteProfileControl = `
 
 const bikeRouteProfileControl = `
   <div
-    title="Change profile [p]"
+    title="$t('components.media_Change_profile')"
     id=${routeProfileOptions.BIKE}
     style="
     background-image: url(${bikeDirectionsIcon});
@@ -189,7 +190,7 @@ onMounted(() => {
                 ],
                 tileSize: 256,
                 attribution:
-                  '<a href="https://www.cyclosm.org" target="_blank">CyclOSM</a> hosted by <a href="https://openstreetmap.fr" target="_blank">OSM France</a>',
+                  '<a href="https://www.cyclosm.org" target="_blank">CyclOSM</a> {{ $t('components.media_map_hosted_by')}} <a href="https://openstreetmap.fr" target="_blank">OSM France</a>',
               },
             },
             layers: [
diff --git a/frontend/i18n/en-US.json b/frontend/i18n/en-US.json
index 7563ade85..62234e5f4 100644
--- a/frontend/i18n/en-US.json
+++ b/frontend/i18n/en-US.json
@@ -252,6 +252,12 @@
   "components.landing_tech_banner.open_source_text": "We're dedicated to working in the open to build trust with our partner organizations and fellow activists. All who want to help us build are welcome!",
   "components.logo_activist.aria_label": "The activist logo that links to the home page",
   "components.media_image_carousel.img_alt_text": "Image of the organization or their work.",
+  "components.media_map_foot": "foot",
+  "components.media_map_bike": "bike",
+  "components.media_map_driving": "driving",
+  "components.media_map_car": "car",
+  "components.media_map_hosted_by": "hosted by",
+  "components.media_map_Change_profile": "Change profile [p]",
   "components.media_map.maplibre_gl_alert": "Your browser does not support our mapping service MapLibre GL, so we won't be able to display maps.",
   "components.modal.edit._global.join_organization_link": "Join organization link",
   "components.modal.edit._global.remember_https": "This is the URL that the join button will link to. Please include the full URL with https so the link works properly.",