web: start implementing translation in JS

web/src/django.d.ts

@@ -0,0 +1,10 @@
+declare module 'django' {
+    export = django;
+}
+declare namespace django {
+    function gettext(name: string): string;
+    function ngettext(singular: string, plural: string, count: number): string;
+    function gettext_noop(msgid: string): string;
+    function pgettext(context: string, msgid: string): string;
+    function interpolate(fmt: string, obj: any, named: boolean): string;
+}

web/src/elements/table/Table.ts

@@ -1,3 +1,4 @@
+import { gettext } from "django";
 import { html, LitElement, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until.js";
 import { PBResponse } from "../../api/client";
@@ -70,12 +71,10 @@ export abstract class Table<T> extends LitElement {
                     <div class="pf-c-toolbar__bulk-select">
                         <slot name="create-button"></slot>
                         <button
-                            @click=${() => {
-        this.fetch();
-    }}
+                            @click=${() => {this.fetch();}}
                             class="pf-c-button pf-m-primary"
                         >
-                            Refresh
+                            ${gettext("Refresh")}
                         </button>
                     </div>
                     <pb-table-pagination
@@ -88,8 +87,8 @@ export abstract class Table<T> extends LitElement {
                 <thead>
                     <tr role="row">
                         ${this.columns().map(
-        (col) => html`<th role="columnheader" scope="col">${col}</th>`
-    )}
+                            (col) => html`<th role="columnheader" scope="col">${gettext(col)}</th>`
+                        )}
                     </tr>
                 </thead>
                 <tbody role="rowgroup">

web/src/pages/RouterOutlet.ts

@@ -141,7 +141,8 @@ export class RouterOutlet extends LitElement {
         this.current = matchedRoute;
     }
 
-    render(): TemplateResult {
+    render(): TemplateResult | undefined {
+        // TODO: Render 404 when current Route is empty
         return this.current?.render();
     }
 }

web/src/pages/applications/ApplicationListPage.ts

@@ -1,3 +1,4 @@
+import { gettext } from "django";
 import { customElement } from "lit-element";
 import { Application } from "../../api/application";
 import { PBResponse } from "../../api/client";
@@ -6,13 +7,13 @@ import { TablePage } from "../../elements/table/TablePage";
 @customElement("pb-application-list")
 export class ApplicationList extends TablePage<Application> {
     pageTitle(): string {
-        return "Applications";
+        return gettext("Applications");
     }
     pageDescription(): string {
-        return "External Applications which use passbook as Identity-Provider, utilizing protocols like OAuth2 and SAML.";
+        return gettext("External Applications which use passbook as Identity-Provider, utilizing protocols like OAuth2 and SAML.");
     }
     pageIcon(): string {
-        return "pf-icon pf-icon-applications";
+        return gettext("pf-icon pf-icon-applications");
     }
 
     apiEndpoint(page: number): Promise<PBResponse<Application>> {