chore: implement i18n

SlimIO · Jun 28, 2019 · 78b470d · 78b470d
1 parent c1ad44d
commit 78b470d
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 19 deletions.
diff --git a/config/dashboard.json b/config/dashboard.json
@@ -0,0 +1,19 @@
+[
+    {
+        "type": "addons"
+    },
+    {
+        "type": "alarms",
+        "options": {
+            "extend": true,
+            "max": 5
+        }
+    },
+    {
+        "type": "chart",
+        "options": {
+            "extend": true,
+            "mic": "?"
+        }
+    }
+]
diff --git a/i18n/english.json b/i18n/english.json
@@ -0,0 +1,13 @@
+{
+    "format": "en-GB",
+    "keys": {
+        "activity_overview": "Activity Overview",
+        "search": "Search",
+        "menu": {
+            "dashboard": "Dashboard",
+            "alarmconsole": "Alarms Console",
+            "alerting": "Alertings Views",
+            "metrics": "Metrics"
+        }
+    }
+}
diff --git a/index.d.ts b/index.d.ts
@@ -0,0 +1,18 @@
+declare namespace IHM {
+    interface i18n {
+        format: string;
+        keys: {
+            activity_overview: string;
+            search: string;
+            menu: {
+                dashboard: string;
+                alarmconsole: string;
+                alerting: string;
+                metrics: string;
+            }
+        }
+    }
+}
+
+export = IHM;
+export as namespace IHM;
diff --git a/src/httpServer.js b/src/httpServer.js
@@ -8,6 +8,10 @@ const send = require("@polka/send-type");
 const sirv = require("sirv");
 const zup = require("zup");
 
+// Require Internal Dependencies
+/** @type {IHM.i18n} */
+const i18n = require("../i18n/english.json");
+
 // CONSTANTS
 const PUBLIC_DIR = join(__dirname, "..", "public");
 const VIEWS_DIR = join(__dirname, "..", "views");
@@ -40,16 +44,40 @@ async function getActivityOverview(ihm) {
  */
 function exportServer(ihm) {
     const httpServer = polka();
+
+    // Serve static assets!
     httpServer.use(sirv(PUBLIC_DIR, { dev: true }));
 
     httpServer.get("/", async(req, res) => {
         try {
+            console.time("get_home");
             const [views, data] = await Promise.all([
                 readFile(join(VIEWS_DIR, "index.html"), "utf-8"),
                 getActivityOverview(ihm)
             ]);
 
-            send(res, 200, zup(views)(data), { "Content-Type": "text/html" });
+            const menu = {
+                dashboard: {
+                    title: i18n.keys.menu.dashboard,
+                    icon: "icon-home"
+                },
+                alarmconsole: {
+                    title: i18n.keys.menu.alarmconsole,
+                    icon: "icon-bell-alt"
+                },
+                alerting: {
+                    title: i18n.keys.menu.alerting,
+                    icon: "icon-eye"
+                },
+                metrics: {
+                    title: i18n.keys.menu.metrics,
+                    icon: "icon-chart-line"
+                }
+            };
+
+            const renderedHTML = zup(views)(Object.assign(data, { menu, i18n }));
+            send(res, 200, renderedHTML, { "Content-Type": "text/html" });
+            console.timeEnd("get_home");
         }
         catch (err) {
             send(res, 500, err.message);

diff --git a/views/index.html b/views/index.html
@@ -34,7 +34,7 @@ <h2>[[=z.serverName]]</h2>
     </header>
 
     <!-- Activity Overview (stats on alarms, mic & entities) -->
-    <p class="overview_title">Activity Overview</p>
+    <p class="overview_title">[[=z.i18n.keys.activity_overview]]</p>
     <div class="overview">
         <div>
             <div class="bull"><i class="icon-bell"></i></div>
@@ -53,22 +53,12 @@ <h2>[[=z.serverName]]</h2>
     <!-- Navigation (to update #view) -->
     <nav>
         <ul>
-            <li data-menu="dashboard">
-                <i class="icon-home"></i>
-                <p>Dashboard</p>
-            </li>
-            <li data-menu="alarmconsole">
-                <i class="icon-bell-alt"></i>
-                <p>Alarms Console</p>
-            </li>
-            <li data-menu="alerting" class="disabled">
-                <i class="icon-eye"></i>
-                <p>Alerting Views</p>
-            </li>
-            <li data-menu="metrics">
-                <i class="icon-chart-line"></i>
-                <p>Metrics</p>
-            </li>
+            [[ for (const [menu, prop] of Object.entries(z.menu)) { ]]
+                <li data-menu="[[=menu]]">
+                    <i class="[[=prop.icon]]"></i>
+                    <p>[[=prop.title]]</p>
+                </li>
+            [[ } ]]
         </ul>
     </nav>
 
@@ -94,7 +84,7 @@ <h2>[[=z.serverName]]</h2>
     <link rel="stylesheet" href="css/searchbar.css">
 
     <i class="icon-search"></i>
-    <input type="text" placeholder="Search">
+    <input type="text" placeholder="[[=z.i18n.keys.search]]">
     <div class="help-btn">
         <i class="icon-help"></i>
     </div>