Added translations to entire app

app/javascript/controllers/main_calendar_controller.js

@@ -9,6 +9,15 @@ export default class extends Controller {
     document.getElementById('main-calendar').style.height = '100vh';
     document.getElementById('main-calendar').style.width = '100vw';
     
+    // Get current locale from html lang attribute
+    const currentLocale = document.documentElement.lang || 'bs';
+    
+    // Get translations from data attribute
+    const translations = JSON.parse(document.getElementById('main-calendar').dataset.translations || '{}');
+    
+    // Translation helper
+    const t = (key) => translations[key] || key;
+    
     const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
       defaultView: 'week',
       usageStatistics: false,
@@ -27,9 +36,6 @@ export default class extends Controller {
             displayLabel: 'UTC' // Optional: Label for the timezone
           }
         ]
-        // You might need `primaryTimezone: 'UTC'` here as well, 
-        // depending on the exact library version and desired behavior.
-        // Let's start with just zones.
       },
       // This is important - set the height to 100%
       height: '100%',
@@ -37,7 +43,7 @@ export default class extends Controller {
       width: '100%',
       template: {
         timegridDisplayPrimaryTime({time}) {
-          return `${time.getHours()} sati`;
+          return `${time.getHours()} ${t('hours')}`;
         },
         popupDetailLocation(eventObj) {
           return ''; // Empty location as requested
@@ -50,6 +56,12 @@ export default class extends Controller {
         },
         popupDetailBody(eventObj) {
           return '';
+        },
+        popupEdit() {
+          return t('edit');
+        },
+        popupDelete() {
+          return t('delete');
         }
       },
       calendars: [
@@ -105,7 +117,7 @@ export default class extends Controller {
       const csrfToken = this.getCsrfToken();
       if (!csrfToken) {
         console.error("CSRF token not found.");
-        alert("Error: Could not verify request security token.");
+        alert(t('delete_error'));
         return false;
       }
 
@@ -120,10 +132,10 @@ export default class extends Controller {
 
         if (response.ok) {
           calendar.deleteEvent(reservationId, calendarId);
-          alert('Reservation deleted.');
+          alert(t('delete_success'));
         } else {
           console.error(`Failed to delete reservation ${reservationId}. Status: ${response.status}`);
-          let errorMessage = 'Error deleting reservation.';
+          let errorMessage = t('delete_error');
           try {
             const errorData = await response.json();
             errorMessage += ` Server says: ${errorData.error || JSON.stringify(errorData)}`;
@@ -132,7 +144,7 @@ export default class extends Controller {
         }
       } catch (error) {
         console.error("Network error or exception during delete:", error);
-        alert("Error deleting reservation due to a network or script issue.");
+        alert(t('network_error'));
       }
 
       return false; // Prevent TUI default delete handling