translated logs page

web/angular/src/app/TranslatedPaginatorConfiguration.ts

@@ -0,0 +1,28 @@
+import {MatPaginatorIntl} from "@angular/material";
+import {TranslateService} from "@ngx-translate/core";
+
+export function TranslatedPaginator(translate: TranslateService) {
+
+    const paginatorIntl = new MatPaginatorIntl();
+
+    getTranslations(translate, paginatorIntl);
+
+    translate.onLangChange.subscribe(() => {
+        getTranslations(translate, paginatorIntl)
+    });
+
+    return paginatorIntl;
+}
+
+function getTranslations(tr: TranslateService, p: MatPaginatorIntl) {
+
+    tr.get("logs.first_page_label").subscribe((t) => p.firstPageLabel = t);
+    tr.get("logs.last_page_label").subscribe((t) => p.lastPageLabel = t);
+    tr.get("logs.items_per_page").subscribe((t) => p.itemsPerPageLabel = t);
+    tr.get("logs.next_page").subscribe((t) => p.nextPageLabel = t);
+    tr.get("logs.prev_page").subscribe((t) => p.previousPageLabel = t);
+    tr.get("logs.of").subscribe((of) =>
+        p.getRangeLabel = (page, pageSize, length) => `${page * pageSize + 1}-${Math.min(pageSize * (page + 1), length)} ${of} ${length}`
+    );
+
+}

web/angular/src/app/api.service.ts

@@ -13,7 +13,7 @@ export class ApiService {
     }
 
     getLogs() {
-        return this.http.post(this.url + "/logs", "{\"level\":\"info\", \"since\":10000}");
+        return this.http.post(this.url + "/logs", "{\"level\":6, \"since\":1}");
     }
 
     getProjects() {

web/angular/src/app/app.component.css

@@ -1,3 +1,10 @@
 .nav-spacer {
     flex: 1 1 auto;
 }
+
+.icon {
+    padding: 0 14px;
+}
+
+.nav-link {
+}

web/angular/src/app/app.component.html

@@ -1,8 +1,9 @@
 <mat-toolbar color="primary">
-    <span>{{ "nav.title" | translate }}</span>
+    <button mat-button class="nav-title" [routerLink]="''">{{"nav.title" | translate}}</button>
+    <button mat-button class="nav-link" [routerLink]="'log'">{{"nav.logs" | translate}}</button>
+    <button mat-button class="nav-link" [routerLink]="'projects'">{{"nav.project_list" | translate}}</button>
+    <button mat-button class="nav-link" [routerLink]="'new_project'">{{"nav.new_project" | translate}}</button>
     <span class="nav-spacer"></span>
-    <mat-icon class="example-icon">favorite</mat-icon>
-    <mat-icon class="example-icon">delete</mat-icon>
     <mat-form-field [floatLabel]="'never'">
         <mat-select [placeholder]="'nav.langSelect' | translate" (selectionChange)="langChange($event)">
             <mat-option *ngFor="let lang of langList" [value]="lang.lang">
@@ -12,12 +13,6 @@
     </mat-form-field>
 
 </mat-toolbar>
-<ul>
-    <li><a [routerLink]="''">Index</a></li>
-    <li><a [routerLink]="'log'">Logs</a></li>
-    <li><a [routerLink]="'projects'">list</a></li>
-    <li><a [routerLink]="'new_project'">new project</a></li>
-</ul>
 
 <messenger-snack-bar></messenger-snack-bar>
 

web/angular/src/app/app.module.ts

@@ -17,6 +17,7 @@ import {
     MatIconModule,
     MatInputModule,
     MatMenuModule,
+    MatPaginatorIntl,
     MatPaginatorModule,
     MatSelectModule,
     MatSliderModule,
@@ -36,8 +37,9 @@ import {CreateProjectComponent} from './create-project/create-project.component'
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {UpdateProjectComponent} from './update-project/update-project.component';
 import {SnackBarComponent} from "./messenger/snack-bar.component";
-import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
+import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
 import {TranslateHttpLoader} from "@ngx-translate/http-loader";
+import {TranslatedPaginator} from "./TranslatedPaginatorConfiguration";
 
 
 export function createTranslateLoader(http: HttpClient) {
@@ -95,6 +97,7 @@ export function createTranslateLoader(http: HttpClient) {
     providers: [
         ApiService,
         MessengerService,
+        {provide: MatPaginatorIntl, useFactory: TranslatedPaginator, deps: [TranslateService]}
     ],
     entryComponents: [
         SnackBarComponent,

web/angular/src/app/logs/logs.component.html

@@ -1,32 +1,40 @@
-<div class="table-container">
-    <mat-form-field>
-        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-    </mat-form-field>
-    <mat-table [dataSource]="data" class="mat-elevation-z8" matSort matSortActive="timestamp" matSortDirection="desc">
+<div class="container">
+    <div class="table-container">
+        <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" [placeholder]="'logs.filter' | translate">
+        </mat-form-field>
+        <div class="mat-elevation-z8">
 
-        <ng-container matColumnDef="level">
-            <mat-header-cell style="flex: 0 0 6em" mat-sort-header *matHeaderCellDef>Level</mat-header-cell>
-            <mat-cell style="flex: 0 0 6em" *matCellDef="let entry"> {{entry.level}} </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="timestamp">
-            <mat-header-cell style="flex: 0 0 21em" mat-sort-header *matHeaderCellDef>Time</mat-header-cell>
-            <mat-cell style="flex: 0 0 17em" *matCellDef="let entry"> {{entry.timestamp}} </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="message">
-            <mat-header-cell mat-sort-header *matHeaderCellDef>Message</mat-header-cell>
-            <mat-cell style="flex: 0 0 30em" *matCellDef="let entry"> {{entry.message}} </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="data">
-            <mat-header-cell mat-sort-header *matHeaderCellDef>Data</mat-header-cell>
-            <mat-cell *matCellDef="let entry">
-                <pre>{{entry.data}}</pre>
-            </mat-cell>
-        </ng-container>
+            <mat-table [dataSource]="data" matSort matSortActive="timestamp"
+                       matSortDirection="desc">
 
-        <mat-header-row *matHeaderRowDef="logsCols"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: logsCols;"></mat-row>
-    </mat-table>
+                <ng-container matColumnDef="level">
+                    <mat-header-cell style="flex: 0 0 6em" mat-sort-header
+                                     *matHeaderCellDef>{{"logs.level" | translate}}</mat-header-cell>
+                    <mat-cell style="flex: 0 0 6em" *matCellDef="let entry"> {{entry.level}} </mat-cell>
+                </ng-container>
+                <ng-container matColumnDef="timestamp">
+                    <mat-header-cell style="flex: 0 0 21em" mat-sort-header
+                                     *matHeaderCellDef>{{"logs.time" | translate}}</mat-header-cell>
+                    <mat-cell style="flex: 0 0 17em" *matCellDef="let entry"> {{entry.timestamp}} </mat-cell>
+                </ng-container>
+                <ng-container matColumnDef="message">
+                    <mat-header-cell mat-sort-header *matHeaderCellDef>{{"logs.message" | translate}}</mat-header-cell>
+                    <mat-cell style="flex: 0 0 30em" *matCellDef="let entry"> {{entry.message}} </mat-cell>
+                </ng-container>
+                <ng-container matColumnDef="data">
+                    <mat-header-cell mat-sort-header *matHeaderCellDef>{{"logs.data" | translate}}</mat-header-cell>
+                    <mat-cell *matCellDef="let entry">
+                        <pre>{{entry.data}}</pre>
+                    </mat-cell>
+                </ng-container>
 
-    <mat-paginator [length]="logs.length" [pageSizeOptions]="[5,10,25,100]" [pageSize]="5"></mat-paginator>
+                <mat-header-row *matHeaderRowDef="logsCols"></mat-header-row>
+                <mat-row *matRowDef="let row; columns: logsCols;"></mat-row>
+            </mat-table>
+
+            <mat-paginator [length]="logs.length" [pageSizeOptions]="[5,10,25,100]" [pageSize]="5"></mat-paginator>
+        </div>
+    </div>
 </div>
 

web/angular/src/app/logs/logs.component.ts

@@ -45,7 +45,7 @@ export class LogsComponent implements OnInit {
                         message: entry.message,
                         timestamp: moment.unix(entry.timestamp).toISOString(),
                         data: JSON.stringify(JSON.parse(entry.data), null, 2),
-                        level: entry.level.toUpperCase()
+                        level: entry.level
                     }
                 });
             }