node-red · dceejay · Dec 5, 2018
diff --git a/index.js b/index.js
@@ -2,7 +2,7 @@ const express = require('express');
 const serveStatic = require('serve-static');
 const bodyParser = require('body-parser');
 const path = require("path");
-const fs = require("fs");
+const fs = require("fs-extra");
 const app = express();
 
 const CATALOG_DIR = path.join(__dirname,'catalogs');
@@ -12,6 +12,14 @@ app.use(bodyParser.urlencoded({extended: true}));
 
 app.use("/",serveStatic(path.join(__dirname,'public')));
 
+app.get("/projects", function(req,res) {
+    fs.readdir(CATALOG_DIR).then(result => {
+        res.json(result);
+    }).catch(err => {
+        res.status(400).json({error:"unexpected_error", message:err.toString()});
+    })
+})
+
 app.get("/catalogs", function(req,res) {
     getFiles(CATALOG_DIR).then(result => {
         res.json(result);
@@ -36,7 +44,7 @@ function getCatalog(catalog) {
     var dirname = path.dirname(catalog);
     return getFiles(path.join(CATALOG_DIR,dirname), dirname).then(result => {
         var catalog = {};
-        for (locale in result.dirs) {
+        for (var locale in result.dirs) {
             if (result.dirs.hasOwnProperty(locale)) {
                 if (result.dirs[locale].files.indexOf(basename) > -1) {
                     catalog[locale] = JSON.parse(fs.readFileSync(path.join(CATALOG_DIR,dirname,locale,basename)));
@@ -45,7 +53,6 @@ function getCatalog(catalog) {
         }
         return catalog
     })
-
 }
 
 function getFiles(dir,trimmedDir) {

diff --git a/package.json b/package.json
@@ -1,15 +1,18 @@
 {
   "name": "i18n-viewer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
-  "scripts": {},
+  "scripts": {
+    "start": "node index.js"
+  },
   "keywords": [],
   "author": "Nick O'Leary",
   "license": "Apache-2.0",
   "dependencies": {
     "body-parser": "^1.18.3",
     "express": "^4.16.4",
+    "fs-extra": "7.0.1",
     "serve-static": "^1.13.2"
   }
 }
diff --git a/public/css/i18n.css b/public/css/i18n.css
@@ -3,31 +3,26 @@
     min-height: 600px;
 }
 
-
 table {
   border-radius: 3px;
   background-color: #fff;
   font-size: 11px;
   border: 1px solid #ccc;
-
   border-collapse: collapse;
 }
-
 th {
   background: #B68181;
   color: rgba(255,255,255,0.66);
   cursor: pointer;
   user-select: none;
 }
-
 td {
   border: 1px solid #ccc;
   background-color: #f9f9f9;
 }
 td.missing {
     background: #B68181;
 }
-
 th, td {
   min-width: 120px;
   padding: 2px 5px;
@@ -38,7 +33,6 @@ td:first-child {
 th.active {
   color: #fff;
 }
-
 th.active .arrow {
   opacity: 1;
 }
@@ -71,6 +65,9 @@ th.active .arrow {
     overflow-x:scroll;
     min-height: 400px;
 }
+#project-list {
+    margin: 20px 0;
+}
 #catalog-list {
     margin: 20px 0;
 }

diff --git a/public/css/style.css b/public/css/style.css
@@ -61,7 +61,6 @@ h4 {
 }
 .header-content .brand {
     display: inline-block;
-    width: 160px;
     color: #f6f6f6;
     float: left;
     margin-top: 5px;
@@ -112,7 +111,7 @@ h4 {
     color: #999;
     text-align: center;
 }
-    
+
 
 /**** END HEADER ****/
 
@@ -144,7 +143,7 @@ h4 {
 
 .ets-link {
     margin: 10px 0px;
-    
+
 }
 .ets-globe {
     width: 60px;
@@ -154,15 +153,15 @@ h4 {
     display: none;
 }
 @media handheld, only screen and (max-width: 755px) {
-    
+
     .header .menu {
         display: inline-block;
     }
-    
+
     .header-content {
         min-width: 0;
     }
-    
+
     .header-content .brand {
         float: none;
     }
@@ -183,5 +182,3 @@ h4 {
         border: none;
     }
 }
-
-
diff --git a/public/index.html b/public/index.html
@@ -23,7 +23,7 @@
 <body>
     <div class="header">
         <div class="header-content">
-            <div class="brand"><a href="/">Node-RED</a></div>
+            <div class="brand"><a href="/">Node-RED i18n Viewer</a></div>
             <ul class="navigation">
                 <li class="current"><a href="https://nodered.org">home</a></li>
             </ul>
@@ -34,16 +34,23 @@
     <div class="grid i18n-viewer">
         <div class="col-1-1">
 
-            <div id="catalog-list">
-                <label for="catalog-list-select">Catalog:</label>
-                <select id="catalog-list-select" v-model="selected" @change="selectCatalog()">
-                    <option disabled value="">select catalog</option>
-                    <option v-for="catalog in catalogs">
-                        {{ catalog }}
-                    </option>
-                </select>
-            </div>
+            <div id="projects">
+                <div id="project-list">
+                    <label for="project-list-select">Project:</label>
+                    <select id="project-list-select" v-model="selectedp" @change="selectProject()">
+                        <option disabled value="">select project</option>
+                        <option v-for="project in projects" v-text="project"></option>
+                    </select>
+                </div>
 
+                <div id="catalog-list">
+                    <label for="catalog-list-select">Catalog:</label>
+                    <select id="catalog-list-select" v-model="selectedc" @change="selectCatalog()">
+                        <option disabled value="">select catalog</option>
+                        <option v-for="catalog in catalogs" v-text="catalog" v-if="catalog.indexOf(selectedp)>=0"></option>
+                    </select>
+                </div>
+            </div>
 
             <div id="catalogTable">
                 <catalog-table :data="gridData" :columns="gridColumns"></catalog-table>

diff --git a/public/scripts/app.js b/public/scripts/app.js
@@ -1,17 +1,17 @@
 $(function() {
 
     Vue.filter('escapeHTML', function(value) {
-        if (!value) return ''
+        if (!value) { return ''; }
         value = value.toString()
         return value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
     })
+
     Vue.filter('highlightMessage', function (value) {
-        if (!value) return ''
+        if (!value) { return ''; }
         value = value.toString()
         return value.replace(/(__.*?__)/g,'<span class="message-insert">$1</span>')
     })
 
-
     function flattenObject(obj) {
         var results = {};
         for (var k in obj) {
@@ -32,15 +32,21 @@ $(function() {
     }
 
     var catalogList = new Vue({
-        el: '#catalog-list',
+        el: '#projects',
         data: {
+            projects: [],
+            selectedp: '',
             catalogs: [],
-            selected: ''
+            selectedc: ''
         },
         methods: {
-            selectCatalog: function() {
-                var context = this;
-                $.getJSON('/catalog/'+context.selected, function(catalogs) {
+            selectProject() {
+                this.selectedc = '';
+                catalogTable.gridColumns = [];
+                catalogTable.gridData = [];
+            },
+            selectCatalog() {
+                $.getJSON('/catalog/'+this.selectedc, function(catalogs) {
 
                     var langs = Object.keys(catalogs);
                     var catalog = {};
@@ -66,10 +72,10 @@ $(function() {
                         }
                     }
                     var messages = [];
-                    for (var k in catalog) {
-                        if (catalog.hasOwnProperty(k)) {
-                            catalog[k].key = k;
-                            messages.push(catalog[k]);
+                    for (var c in catalog) {
+                        if (catalog.hasOwnProperty(c)) {
+                            catalog[c].key = c;
+                            messages.push(catalog[c]);
                         }
                     }
 
@@ -84,8 +90,12 @@ $(function() {
         }
     })
 
+    $.getJSON('/projects', function(data) {
+        catalogList.projects = data;
+    });
+
     $.getJSON('/catalogs', function(data) {
-        for (catalog in data) {
+        for (var catalog in data) {
             if (data.hasOwnProperty(catalog)) {
                 catalogList.catalogs.push(catalog);
             }