feat: moved configurations to environment variables

frontend/.env.sample

@@ -1,3 +1,46 @@
 VITE_BASE_API_URL = 'http://localhost:8000/api/v1/' # backend api url
-VITE_MATOMO_ID= 0 
-VITE_MATOMO_APP_DOMAIN = "subdomain.hotosm.org"
+VITE_MATOMO_ID = 0 
+VITE_MATOMO_APP_DOMAIN = "subdomain.hotosm.org"
+
+# The maximum allowed area size (in square meters) for training areas.
+# Data type: Positive Integer e.g 500000
+MAX_TRAINING_AREA_SIZE = 
+
+# The minimum allowed area size (in square meters) for training areas.
+# Data type: Positive Integer e.g 500000
+MIN_TRAINING_AREA_SIZE =
+
+# The maximum file size (in bytes) allowed for training area upload.
+# Data type: Positive Integer e.g 500000
+MAX_TRAINING_AREA_UPLOAD_FILE_SIZE =
+
+# The current version of the application.
+# This is used in the OSM redirect callback when a training area is opened in OSM.
+# Data type: String e.g 'v1.1'
+FAIR_VERSION = 
+
+# Comma separated hashtags to add to the OSM ID Editor redirection
+# Data type: String e.g '#HOT-fAIr, #AI-Assited-Mapping'
+OSM_HASHTAGS = 
+
+
+# The maximum zoom level for the map.
+# Data type: Positive Integer e.g 22. Must be between 0 - 24
+MAX_ZOOM_LEVEL = 
+
+# The minimum zoom level to show the training area labels.
+# Data type: Positive Integer e.g 18. Must be between 0 - 24
+TRAINING_LABELS_MIN_ZOOM_LEVEL =
+
+# Training area and labels styles.
+# Opacities are between 0 and 1 . E.g 0.5
+# Widths must be Positive Integers e.g 1, 2 etc.
+# Colors must be hex codes or valid colors. E.g 'red', 'green', '#fff'
+TRAINING_AREAS_AOI_FILL_COLOR =
+TRAINING_AREAS_AOI_OUTLINE_COLOR =
+TRAINING_AREAS_AOI_OUTLINE_WIDTH =
+TRAINING_AREAS_AOI_FILL_OPACITY =
+TRAINING_AREAS_AOI_LABELS_FILL_OPACITY =
+TRAINING_AREAS_AOI_LABELS_OUTLINE_WIDTH =
+TRAINING_AREAS_AOI_LABELS_FILL_COLOR =
+TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR =

frontend/src/config/env.ts

@@ -5,4 +5,61 @@ export const ENVS = {
   BASE_API_URL: import.meta.env.VITE_BASE_API_URL,
   MATOMO_ID: import.meta.env.VITE_MATOMO_ID,
   MATOMO_APP_DOMAIN: import.meta.env.VITE_MATOMO_APP_DOMAIN,
+  /**
+   * The maximum allowed area size (in square meters) for training areas.
+   */
+  MAX_TRAINING_AREA_SIZE: import.meta.env.MAX_TRAINING_AREA_SIZE,
+  /**
+   * The minimum allowed area size (in square meters) for training areas.
+   */
+  MIN_TRAINING_AREA_SIZE: import.meta.env.MIN_TRAINING_AREA_SIZE,
+
+  /**
+   * The maximum file size (in bytes) allowed for training area upload.
+   * This is set to 5 MB.
+   */
+  MAX_TRAINING_AREA_UPLOAD_FILE_SIZE: import.meta.env
+    .MAX_TRAINING_AREA_UPLOAD_FILE_SIZE,
+  /**
+   * The current version of the application.
+   * This is used in the OSM redirect callback when a training area is opened in OSM. The idea is to add it to the hashtag for future tracking.
+   */
+  FAIR_VERSION: import.meta.env.FAIR_VERSION,
+
+  /**
+   * The current version of the application.
+   * This is used in the OSM redirect callback when a training area is opened in OSM.
+   */
+
+  OSM_HASHTAGS: import.meta.env.OSM_HASHTAGS,
+
+  /**
+   * The maximum zoom level for the map.
+   */
+  MAX_ZOOM_LEVEL: import.meta.env.MAX_ZOOM_LEVEL,
+
+  /**
+   * The minimum zoom level to show the training area labels.
+   */
+  TRAINING_LABELS_MIN_ZOOM_LEVEL: import.meta.env
+    .TRAINING_LABELS_MIN_ZOOM_LEVEL,
+
+  /**
+   * Training area and labels styles.
+   */
+  TRAINING_AREAS_AOI_FILL_COLOR: import.meta.env.TRAINING_AREAS_AOI_FILL_COLOR,
+  TRAINING_AREAS_AOI_OUTLINE_COLOR: import.meta.env
+    .TRAINING_AREAS_AOI_OUTLINE_COLOR,
+  TRAINING_AREAS_AOI_OUTLINE_WIDTH: import.meta.env
+    .TRAINING_AREAS_AOI_OUTLINE_WIDTH,
+  TRAINING_AREAS_AOI_FILL_OPACITY: import.meta.env
+    .TRAINING_AREAS_AOI_FILL_OPACITY,
+  TRAINING_AREAS_AOI_LABELS_FILL_OPACITY: import.meta.env
+    .TRAINING_AREAS_AOI_LABELS_FILL_OPACITY,
+  TRAINING_AREAS_AOI_LABELS_OUTLINE_WIDTH: import.meta.env
+    .TRAINING_AREAS_AOI_LABELS_OUTLINE_WIDTH,
+  TRAINING_AREAS_AOI_LABELS_FILL_COLOR: import.meta.env
+    .TRAINING_AREAS_AOI_LABELS_FILL_COLOR,
+  TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR: import.meta.env
+    .TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR,
 };

frontend/src/features/models/api/factory.ts

@@ -101,7 +101,7 @@ export const getTrainingHistoryQueryOptions = (
   modelId: string,
   offset: number,
   limit: number,
-  ordering: string
+  ordering: string,
 ) => {
   return queryOptions({
     queryKey: ["training-history", modelId, offset, limit, ordering],

frontend/src/features/models/api/get-trainings.ts

@@ -26,15 +26,15 @@ export const getModelTrainingHistory = async (
   id: string,
   offset: number,
   limit: number,
-  ordering: string
+  ordering: string,
 ): Promise<PaginatedTrainings> => {
   const res = await apiClient.get(
     API_ENDPOINTS.GET_MODEL_TRAINING_HISTORY(id),
     {
       params: {
         limit,
         offset,
-        ordering
+        ordering,
       },
     },
   );

frontend/src/features/models/components/dialogs/training-settings-dialog.tsx

@@ -46,7 +46,7 @@ const ModelTrainingSettingsDialog: React.FC<ModelEnhancementDialogProps> = ({
     modelId as string,
     0,
     PAGE_LIMIT,
-    "-id"
+    "-id",
   );
 
   const handleClick = () => {