Add more translations

frontend/src/app/_components/modal-availability-schedule/modal-availability-schedule.component.html

@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h4 class="modal-title pull-left">Modifica orari disponibilità</h4>
+    <h4 class="modal-title pull-left">{{ 'update_availability_schedule'|translate }}</h4>
     <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
         <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
@@ -11,7 +11,7 @@
                 <td style="background-color: white;"></td>
                 <ng-container *ngIf="orientation === 'portrait'">
                     <ng-container *ngFor="let day of days; let i = index">
-                        <td class="day" (click)="selectDay(i)">{{ day.short }}</td>
+                        <td class="day" (click)="selectDay(i)">{{ day.short|translate }}</td>
                     </ng-container>
                 </ng-container>
                 <ng-container *ngIf="orientation === 'landscape'">
@@ -34,7 +34,7 @@
         <tbody id="scheduler_body" *ngIf="orientation === 'landscape'">
             <ng-container *ngFor="let day of days; let i = index">
                 <tr>
-                    <td class="day" (click)="selectDay(i)">{{ day.short }}</td>
+                    <td class="day" (click)="selectDay(i)">{{ day.short|translate }}</td>
                     <ng-container *ngFor="let hour of hours">
                         <td class="hour-cell" [class.highlighted] = "isCellSelected(i, hour)" (mousedown)="mouseDownCell(i, hour)" (mouseup)="mouseUpCell()" (mouseover)="mouseOverCell(i, hour)"></td>
                     </ng-container>
@@ -44,6 +44,6 @@
     </table>
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn btn-primary" (click)="saveChanges()">Salva le modifiche</button>
-    <button type="button" class="btn btn-secondary" (click)="bsModalRef.hide()">Chiudi</button>
+    <button type="button" class="btn btn-primary" (click)="saveChanges()">{{ 'save_changes'|translate }}</button>
+    <button type="button" class="btn btn-secondary" (click)="bsModalRef.hide()">{{ 'close'|translate }}</button>
 </div>

frontend/src/app/_components/modal-availability-schedule/modal-availability-schedule.component.ts

@@ -13,32 +13,32 @@ export class ModalAvailabilityScheduleComponent implements OnInit {
 
   public days = [
     {
-      name: 'Lunedì',
-      short: 'Lun'
+      name: 'monday',
+      short: 'monday_short'
     },
     {
-      name: 'Martedì',
-      short: 'Mar'
+      name: 'tuesday',
+      short: 'tuesday_short'
     },
     {
-      name: 'Mercoledì',
-      short: 'Mer'
+      name: 'wednesday',
+      short: 'wednesday_short'
     },
     {
-      name: 'Giovedì',
-      short: 'Gio'
+      name: 'thursday',
+      short: 'thursday_short'
     },
     {
-      name: 'Venerdì',
-      short: 'Ven'
+      name: 'friday',
+      short: 'friday_short'
     },
     {
-      name: 'Sabato',
-      short: 'Sab'
+      name: 'saturday',
+      short: 'saturday_short'
     },
     {
-      name: 'Domenica',
-      short: 'Dom'
+      name: 'sunday',
+      short: 'sunday_short'
     }
   ];
   public hours = [

frontend/src/app/_components/table/table.component.html

@@ -39,10 +39,10 @@
     <table *ngIf="sourceType === 'logs'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
         <thead>
             <tr>
-                <th>Azione</th>
-                <th>Interessato</th>
-                <th>Fatto da</th>
-                <th>Data e ora</th>
+                <th>{{ 'action'|translate|titlecase }}</th>
+                <th>{{ 'changed'|translate|titlecase }}</th>
+                <th>{{ 'editor'|translate|titlecase }}</th>
+                <th>{{ 'datetime'|translate|titlecase }}</th>
             </tr>
         </thead>
         <tbody id="table_body">
@@ -58,17 +58,17 @@
         <thead>
             <tr>
                 <th>#</th>
-                <th>Inizio</th>
-                <th>Fine</th>
-                <th>Codice</th>
-                <th>Caposquadra</th>
-                <th>Autisti</th>
-                <th>Altre persone</th>
-                <th>Luogo</th>
-                <th>Note</th>
-                <th>Tipo</th>
-                <th>Modifica</th>
-                <th>Rimuovi</th>
+                <th>{{ 'start'|translate|titlecase }}</th>
+                <th>{{ 'end'|translate|titlecase }}</th>
+                <th>{{ 'code'|translate|titlecase }}</th>
+                <th>{{ 'chief'|translate|titlecase }}</th>
+                <th>{{ 'drivers'|translate|titlecase }}</th>
+                <th>{{ 'crew'|translate|titlecase }}</th>
+                <th>{{ 'place'|translate|titlecase }}</th>
+                <th>{{ 'notes'|translate|titlecase }}</th>
+                <th>{{ 'type'|translate|titlecase }}</th>
+                <th>{{ 'update'|translate|titlecase }}</th>
+                <th>{{ 'remove'|translate|titlecase }}</th>
             </tr>
         </thead>
         <tbody id="table_body">
@@ -82,7 +82,7 @@
                 <td>{{ row.crew }}</td>
                 <td>
                     {{ row.place_name }}<br>
-                    <a class="place_details_link cursor-pointer" (click)="openPlaceDetails(row.lat, row.lng)">Altre informazioni</a>
+                    <a class="place_details_link cursor-pointer" (click)="openPlaceDetails(row.lat, row.lng)">{{ 'more details'|translate|titlecase }}</a>
                 </td>
                 <td>{{ row.notes }}</td>
                 <td>{{ row.type }}</td>
@@ -95,22 +95,20 @@
         <thead>
             <tr>
                 <td>#</td>
-                <th>Data</th>
-                <th>Nome</th>
-                <th>Tempo inizio</th>
-                <th>Tempo fine</th>
-                <th>Caposquadra</th>
-                <th>Altre persone</th>
-                <th>Luogo</th>
-                <th>Note</th>
-                <th hidden>Modifica</th>
-                <th hidden>Rimuovi</th>
+                <th>{{ 'name'|translate|titlecase }}</th>
+                <th>{{ 'start'|translate|titlecase }}</th>
+                <th>{{ 'end'|translate|titlecase }}</th>
+                <th>{{ 'chief'|translate|titlecase }}</th>
+                <th>{{ 'crew'|translate|titlecase }}</th>
+                <th>{{ 'place'|translate|titlecase }}</th>
+                <th>{{ 'notes'|translate|titlecase }}</th>
+                <th>{{ 'update'|translate|titlecase }}</th>
+                <th>{{ 'remove'|translate|titlecase }}</th>
             </tr>
         </thead>
         <tbody id="table_body">
             <tr *ngFor="let row of data; index as i">
                 <td>{{ data.length - i }}</td>
-                <td>{{ row.date | date: 'MM/dd/yyyy HH:mm' }}</td>
                 <td>{{ row.name }}</td>
                 <td>{{ row.beginning }}</td>
                 <td>{{ row.end }}</td>
@@ -118,8 +116,8 @@
                 <td>{{ row.crew }}</td>
                 <td>{{ row.place }}</td>
                 <td>{{ row.notes }}</td>
-                <td hidden><i class="fa fa-edit"></i></td>
-                <td hidden><i class="fa fa-trash"></i></td>
+                <td><i class="fa fa-edit"></i></td>
+                <td><i class="fa fa-trash"></i></td>
             </tr>
         </tbody>
     </table>

frontend/src/app/_routes/login/login.component.html

@@ -3,15 +3,15 @@
         <owner-image></owner-image>
         <div class="my-2 text-danger" *ngIf="!loginResponse.loginOk">{{ loginResponse.message }}</div>
         <div class="form-floating">
-            <input type="text" class="form-control" (keydown.enter)="inputPassword.focus()" [(ngModel)]="username" id="username" placeholder="Username">
-            <label for="username">Username</label>
+            <input type="text" class="form-control" (keydown.enter)="inputPassword.focus()" [(ngModel)]="username" id="username" [placeholder]="'username'|translate">
+            <label for="username" translate>login.username</label>
         </div>
         <div class="form-floating">
-            <input type="password" class="form-control" (keydown.enter)="login()" [(ngModel)]="password" id="password" placeholder="Password" #inputPassword>
-            <label for="password">Password</label>
+            <input type="password" class="form-control" (keydown.enter)="login()" [(ngModel)]="password" id="password" [placeholder]="'password'|translate" #inputPassword>
+            <label for="password" translate>login.password</label>
         </div>
         <button class="w-100 btn btn-lg btn-primary" (click)="login()" [disabled]="loading">
-            <span *ngIf="!loading">Login</span>
+            <span *ngIf="!loading" translate>login.submit_btn</span>
             <div class="spinner-border spinner-border-sm text-white" *ngIf="loading"></div>
         </button>
     </main>

frontend/src/app/_routes/place-details/place-details.component.html

@@ -8,28 +8,28 @@
 </div>
 <div class="place_info" *ngIf="place_loaded">
   <h3>
-    <a href="https://www.google.com/maps/@?api=1&map_action=map&center={{ lat }},{{ lng }}&zoom=19&basemap=satellite" target="_blank">Apri il luogo in Google Maps</a>
+    <a href="https://www.google.com/maps/@?api=1&map_action=map&center={{ lat }},{{ lng }}&zoom=19&basemap=satellite" target="_blank">{{ 'place_details.open_in_google_maps'|translate }}</a>
   </h3>
   <br>
   <h4 *ngIf="place_info.place_name">
-    Nome: <b>{{ place_info.place_name }}</b>
+    {{ 'name'|translate|titlecase }}: <b>{{ place_info.place_name }}</b>
   </h4>
   <h4 *ngIf="place_info.building_service_name">
-    Nome del luogo: <b>{{ place_info.building_service_name }}</b>
+    {{ 'place_details.place_name'|translate|titlecase }}: <b>{{ place_info.building_service_name }}</b>
   </h4>
   <h4 *ngIf="place_info.house_number">
-    Numero civico: <b>{{ place_info.house_number }}</b>
+    {{ 'place_details.house_number'|translate|titlecase }}: <b>{{ place_info.house_number }}</b>
   </h4>
   <h4 *ngIf="place_info.road">
-    Strada: <b>{{ place_info.road }}</b>
+    {{ 'place_details.road'|translate|titlecase }}: <b>{{ place_info.road }}</b>
   </h4>
   <h4 *ngIf="place_info.village">
-    Comune: <b>{{ place_info.village }}</b> (CAP <b>{{ place_info.postcode }}</b>)
+    {{ 'place_details.village'|translate|titlecase }}: <b>{{ place_info.village }}</b> ({{ 'place_details.postcode'|translate }} <b>{{ place_info.postcode }}</b>)
   </h4>
   <h4 *ngIf="place_info.hamlet">
-    Frazione: <b>{{ place_info.hamlet }}</b>
+    {{ 'place_details.hamlet'|translate|titlecase }}: <b>{{ place_info.hamlet }}</b>
   </h4>
   <h4 *ngIf="place_info.municipality">
-    Raggruppamento del Comune: <b>{{ place_info.municipality }}</b>
+    {{ 'place_details.municipality'|translate|titlecase }}: <b>{{ place_info.municipality }}</b>
   </h4>
 </div>

frontend/src/app/_routes/place-details/place-details.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TranslationModule } from '../../translation.module';
 
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { BackBtnModule } from '../../_components/back-btn/back-btn.module';
@@ -15,7 +16,8 @@ import { PlaceDetailsComponent } from './place-details.component';
     CommonModule,
     PlaceDetailsRoutingModule,
     LeafletModule,
-    BackBtnModule
+    BackBtnModule,
+    TranslationModule
   ]
 })
 export class PlaceDetailsModule { }

frontend/src/app/_routes/services/services.component.html

@@ -1,5 +1,5 @@
 <owner-image></owner-image>
 <div class="text-center mb-4">
-    <button type="button" class="btn btn-primary" (click)="addService()">Aggiungi intervento</button>
+    <button type="button" class="btn btn-primary" (click)="addService()">{{ 'add'|translate|titlecase }} {{ 'service'|translate }}</button>
 </div>
 <app-table [sourceType]="'services'" [refreshInterval]="1200000"></app-table>

frontend/src/app/_routes/trainings/trainings.component.html

@@ -1,5 +1,5 @@
 <owner-image></owner-image>
 <div class="text-center mb-4">
-    <button type="button" class="btn btn-primary" disabled>Aggiungi esercitazione</button>
+    <button type="button" class="btn btn-primary" disabled>{{ 'add'|translate|titlecase }} {{ 'training'|translate }}</button>
 </div>
 <app-table [sourceType]="'trainings'" [refreshInterval]="1200000"></app-table>

frontend/src/app/app.component.html

@@ -3,7 +3,7 @@
   <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/services" translate>menu.services</a>
   <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/trainings" translate>menu.trainings</a>
   <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/logs" translate>menu.logs</a>
-  <a style="float: right;" id="logout">Ciao, {{ auth.profile.name }}. <b id="logout-text" (click)="auth.logout()" translate>menu.logout</b></a>
+  <a style="float: right;" id="logout">{{ 'menu.hi'|translate|titlecase }}, {{ auth.profile.name }}. <b id="logout-text" (click)="auth.logout()" translate>menu.logout</b></a>
   <a class="icon" id="menuButton" (click)="menuButtonClicked = !menuButtonClicked">☰</a>
 </div>
 

frontend/src/app/translation.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+
+@NgModule({
+  exports: [
+    CommonModule,
+    TranslateModule
+  ]
+})
+export class TranslationModule {
+    constructor(private translate: TranslateService) {
+        this.translate.setDefaultLang('en');
+        this.translate.use("it");
+    }
+}

frontend/src/assets/i18n/en.json

@@ -4,7 +4,8 @@
         "services": "Services",
         "trainings": "Trainings",
         "logs": "Logs",
-        "logout": "Logout"
+        "logout": "Logout",
+        "hi": "hi"
     },
     "list": {
         "your_availability_is": "You are:",
@@ -13,6 +14,38 @@
         "update_schedules": "Update availability schedules",
         "connect_telegram_bot": "Connect your account to the Telegram bot"
     },
+    "login": {
+        "username": "username",
+        "password": "password",
+        "submit_btn": "Login"
+    },
+    "place_details": {
+        "open_in_google_maps": "Apri il luogo in Google Maps",
+        "place_name": "Nome del luogo",
+        "house_number": "numero civico",
+        "road": "strada",
+        "village": "comune",
+        "postcode": "CAP",
+        "hamlet": "frazione",
+        "municipality": "raggruppamento del comune"
+    },
+    "update_availability_schedule": "Update availability schedule",
+    "save_changes": "Save changes",
+    "close": "Close",
+    "monday": "Monday",
+    "monday_short": "Mon",
+    "tuesday": "Tuesday",
+    "tuesday_short": "Tue",
+    "wednesday": "Wednesday",
+    "wednesday_short": "Wed",
+    "thursday": "Thursday",
+    "thursday_short": "Thu",
+    "friday": "Friday",
+    "friday_short": "Fri",
+    "saturday": "Saturday",
+    "saturday_short": "Sat",
+    "sunday": "Sunday",
+    "sunday_short": "Sun",
     "programmed": "programmed",
     "available": "available",
     "unavailable": "unavailable",
@@ -20,9 +53,31 @@
     "set_unavailable": "unavailable",
     "name": "name",
     "driver": "driver",
+    "drivers": "drivers",
     "call": "call",
+    "service": "service",
     "services": "services",
+    "training": "training",
+    "trainings": "trainings",
+    "user": "user",
+    "users": "users",
     "availability_minutes": "availability_minutes",
+    "action": "action",
+    "changed": "changed",
+    "editor": "editor",
+    "datetime": "datetime",
+    "start": "start",
+    "end": "end",
+    "code": "code",
+    "chief": "chief",
+    "crew": "crew",
+    "place": "place",
+    "notes": "notes",
+    "type": "type",
+    "add": "add",
+    "update": "update",
+    "remove": "remove",
+    "more details": "more details",
     "footer_text": "Allerta-VVF, free software developed for volunteer firefighters brigades.",
     "revision": "revision"
 }

frontend/src/assets/i18n/it.json

@@ -4,7 +4,8 @@
         "services": "Interventi",
         "trainings": "Esercitazioni",
         "logs": "Logs",
-        "logout": "Logout"
+        "logout": "Logout",
+        "hi": "Ciao"
     },
     "list": {
         "your_availability_is": "Attualmente sei:",
@@ -13,16 +14,70 @@
         "update_schedules": "Modifica orari disponibilità",
         "connect_telegram_bot": "Collega l'account al bot Telegram"
     },
-    "programmed": "programmed",
+    "login": {
+        "username": "username",
+        "password": "password",
+        "submit_btn": "Login"
+    },
+    "place_details": {
+        "open_in_google_maps": "Apri il luogo in Google Maps",
+        "place_name": "Nome del luogo",
+        "house_number": "numero civico",
+        "road": "strada",
+        "village": "comune",
+        "postcode": "CAP",
+        "hamlet": "frazione",
+        "municipality": "raggruppamento del comune"
+    },
+    "update_availability_schedule": "Aggiorna programmazione disponibilità",
+    "save_changes": "Salva modifiche",
+    "close": "Chiudi",
+    "monday": "Lunedì",
+    "monday_short": "Lun",
+    "tuesday": "Martedì",
+    "tuesday_short": "Mar",
+    "wednesday": "Mercoledì",
+    "wednesday_short": "Mer",
+    "thursday": "Giovedì",
+    "thursday_short": "Gio",
+    "friday": "Venerdì",
+    "friday_short": "Ven",
+    "saturday": "Sabato",
+    "saturday_short": "Sab",
+    "sunday": "Domenica",
+    "sunday_short": "Dom",
+    "programmed": "programmata",
     "available": "disponibile",
     "unavailable": "non disponibile",
     "set_available": "attiva",
     "set_unavailable": "disattiva",
     "name": "nome",
     "driver": "autista",
+    "drivers": "autisti",
     "call": "chiama",
+    "service": "intervento",
     "services": "interventi",
+    "training": "esercitazione",
+    "trainings": "esercitazioni",
+    "user": "utente",
+    "users": "utenti",
     "availability_minutes": "minuti di disponibilità",
+    "action": "azione",
+    "changed": "interessato",
+    "editor": "fatto da",
+    "datetime": "data e ora",
+    "start": "inizio",
+    "end": "fine",
+    "code": "codice",
+    "chief": "caposquadra",
+    "crew": "squadra",
+    "place": "luogo",
+    "notes": "note",
+    "type": "tipologia",
+    "add": "aggiungi",
+    "update": "modifica",
+    "remove": "rimuovi",
+    "more details": "altri dettagli",
     "footer_text": "Allerta-VVF, software libero realizzato per i Vigili del Fuoco volontari.",
     "revision": "revisione"
 }