Added functionality for building multiple editors via separate build commands

Author: MatinF

.gitattributes

@@ -1,23 +1,37 @@
-# Config Editor - Load & Modify CANedge Config Files
+# Config Editor - Load & Modify Configuration Files
 
-This simple config editor lets you load JSON configuration files from the [CANedge](https://www.csselectronics.com/) CAN bus data logger and related modules. The tool lets you simply load your `config-XX.YY.json` via the Configuration File dropdown to initialize the editor. Alternatively, you can also manually load a 'Rule Schema' and 'UIschema' in the editor.
+This simple config editor lets you load JSON configuration files from the [CANedge](https://www.csselectronics.com/) CAN bus data logger and related modules. The tool lets you load your `config-XX.YY.json` via the Configuration File dropdown to initialize the editor. Alternatively, you can manually load a 'Rule Schema' and 'UIschema' in the editor.
 
-The editor can be used offline, or you can upload it to a web server to use it online. You can of course also simply use our [hosted CANedge config editor](https://canlogger.csselectronics.com/simple-editor/#/), which always features the latest version.
+The editor can be used offline, or you can upload it to a web server to use it online. You can also simply use our [hosted CANedge config editor](https://canlogger.csselectronics.com/simple-editor/#/), which always features the latest version.
+
+See also our [documentation](https://www.csselectronics.com/screen/page/can-logger-resources) for further details on configuration. 
 
 ----
 
 ## How to install
 Clone this repository and run `npm install`. 
 
-To build the editor, run `npm run simple`. 
+----
+
+## How to build
+The config editor supports building various editor variants:
+```
+npm run canedge 
+npm run gps 
+...
+```
+
+For a list of available builds, see the `package.json` scripts list. 
+
+For each build, the `TYPE` variable can be used within the `Editor.js` file to change settings - e.g. modifying the title, which schema files to use and which editor tools to include.
 
 ----
 
 ## Regarding sub modules
 The CANedge config editor is very light and is based on two imported modules: 
 
-1. [config-editor-base](https://github.com/CSS-Electronics/config-editor-base): This module serves as the "core" editor and includes the JSON Schema loader tool, as well as the 'partial config loader' tool. 
-2. [config-editor-tools](https://github.com/CSS-Electronics/config-editor-tools): This module contains various "extra" editor tools, which can be imported and parsed to the base editor. The extra tools will be available from the editor submenu
+1. [config-editor-base](https://github.com/CSS-Electronics/config-editor-base): This module serves as the "core" editor and includes the JSON Schema loader tool
+2. [config-editor-tools](https://github.com/CSS-Electronics/config-editor-tools): This module contains various "extra" editor tools, which can be imported and parsed to the editor
 
 These sub modules are also used in other projects by CSS Electronics, for example [CANcloud](https://github.com/CSS-Electronics/cancloud).
 

README.md

@@ -0,0 +1,15 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+const bundlePath = path.join(__dirname, "/canedge-editor/bundle.js");
+const htmlPath = path.join(__dirname, "/canedge-editor/index.html");
+try {
+  const html = fs.openSync(htmlPath, "a");
+  const bundle = fs.readFileSync(bundlePath, "utf8");
+  fs.appendFileSync(html, `<script>${bundle}</script>`, "utf8");
+  fs.unlinkSync(bundlePath);
+  console.log("CANedge editor build successfully");
+} catch (error) {
+  console.log(error);
+  process.exit(0);
+}

analyse.js

@@ -1,14 +1,14 @@
 const fs = require("fs-extra");
 const path = require("path");
 
-const bundlePath = path.join(__dirname, "/simple/bundle.js");
-const htmlPath = path.join(__dirname, "/simple/index.html");
+const bundlePath = path.join(__dirname, "/gps-editor/bundle.js");
+const htmlPath = path.join(__dirname, "/gps-editor/index.html");
 try {
   const html = fs.openSync(htmlPath, "a");
   const bundle = fs.readFileSync(bundlePath, "utf8");
   fs.appendFileSync(html, `<script>${bundle}</script>`, "utf8");
   fs.unlinkSync(bundlePath);
-  console.log("Simple editor build successfully");
+  console.log("CANmod.gps editor build successfully");
 } catch (error) {
   console.log(error);
   process.exit(0);

canedge-editor.js

@@ -1,6 +1,6 @@
 {
   "name": "config-editor",
-  "version": "1.0.0",
+  "version": "01.01.00",
   "description": "A React based JSON Schema editor",
   "author": "CSS Electronics",
   "license": "MIT",
@@ -9,12 +9,11 @@
   "scripts": {
     "start": "webpack-dev-server --config webpack.simple.js --mode production --open --progress --colors --hot",
     "build": "webpack --mode production",
-    "simple": "webpack --config webpack.simple.js --mode production",
+    "canedge": "webpack --config webpack.canedge.js --mode production",
+	"gps": "webpack --config webpack.gps.js --mode production",
     "test": "jest"
   },
   "keywords": [],
-  "author": "CSS Electronics",
-  "license": "ISC",
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",

canedge-editor/index.html

@@ -12,23 +12,27 @@ import {EditorSection} from "config-editor-base";
 import * as actionsAlert from "../alert/actions";
 import AlertContainer from "../alert/AlertContainer";
 
+// define editor title and version
+const title = TYPE + " config editor"
+const version = "v01.01.00"
+
 // define UIschema and Rule Schema names for auto-loading purposes
-export const uiSchemaAry = [
+export const uiSchemaAry = {"CANedge": [
   "uischema-01.02.json | Simple",
   "uischema-01.02.json | Advanced",
-];
+], "CANmod.gps": []}
 
-export const schemaAry = [
+export const schemaAry = {"CANedge": [
   "schema-01.02.json | CANedge2",
   "schema-01.02.json | CANedge1",
   "schema-00.07.json | CANedge2",
   "schema-00.07.json | CANedge1",
-];
+], "CANmod.gps":[]}
 
 
 class Editor extends React.Component {
   render() {
-    let editorTools = [
+    let editorTools = {"CANedge": [
       {
         name: "encryption-modal",
         comment: "Encryption tool",
@@ -47,17 +51,24 @@ class Editor extends React.Component {
         class: "fa fa-calculator",
         modal: <BitRateModal showAlert={this.props.showAlert} />,
       },
-    ];
+    ], "CANmod.gps": []};
 
     return (
        <div className="file-explorer">
+         
+         <header className="fe-header top-header">
+           <div className="header-text">
+           <span className="editor-title">{title}</span><br/>
+           <span className="editor-version">{version}</span>
+           </div>
+           </header>
 	   <div className="fe-body fe-body-offline" >
         <AlertContainer />
         <EditorSection
-          editorTools={editorTools}
+          editorTools={editorTools[TYPE]}
           showAlert={this.props.showAlert}
-		  uiSchemaAry={uiSchemaAry}
-          schemaAry={schemaAry}
+		      uiSchemaAry={uiSchemaAry[TYPE]}
+          schemaAry={schemaAry[TYPE]}
         />
 		</div>
       </div>

simple-editor.js gps-editor.js

@@ -1,3 +1,19 @@
+.header-text{
+  left:20px;
+  top:10px;
+  position:absolute;
+  line-height:15px;
+}
+.editor-title{
+  font-size:20px;
+  color:rgb(237, 237, 237);
+}
+
+.editor-version{
+  font-size: 10px;
+  color:rgb(237, 237, 237);
+  font-family: Consolas;
+}
 
 /*--------------------------
     Hidden

gps-editor/index.html

@@ -0,0 +1,128 @@
+/*
+ * CSS Cloud Storage browser.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const webpack = require("webpack");
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+const WebpackShellPlugin = require("webpack-shell-plugin");
+const path = require("path");
+const nodeExternals = require("webpack-node-externals");
+
+const definePlugin = new webpack.DefinePlugin({
+  TYPE: JSON.stringify("CANedge")
+});
+
+const progressPlugin = new webpack.ProgressPlugin();
+
+const shellPlugin = new WebpackShellPlugin({
+  onBuildStart: ['echo "CANedge editor build starts"'],
+  onBuildEnd: ['echo "CANedge editor build complete"'],
+  onBuildExit: ["node canedge-editor.js"]
+});
+
+const htmlPlugin = new HtmlWebPackPlugin({
+  template: "./src/browser/index.html",
+  filename: "./index.html",
+  title: "CANedge Config Editor",
+  inject: false,
+  minify: true
+});
+
+module.exports = {
+  context: __dirname,
+  entry: [path.resolve(__dirname, "src/browser/simple.js")],
+  output: {
+    path: __dirname + "/canedge-editor",
+    filename: "bundle.js"
+  },
+  resolve: {
+    extensions: [".js", ".jsx", ".less"]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader"
+          },
+          {
+            loader: "less-loader"
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader"
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif|svg|ico)$/,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 800192
+            }
+          }
+        ]
+      },
+      {
+        test: /\.svg/,
+        use: {
+          loader: "svg-url-loader",
+          options: {}
+        }
+      },
+      {
+        test: /\.(eot|woff|woff2|ttf|svg)/,
+        use: [
+          {
+            loader: "url-loader?limit=445000"
+          }
+        ]
+      }
+    ]
+  },
+  node: {
+    fs: "empty"
+  },
+  externals: [
+    nodeExternals({
+      whitelist: [/^((?!aws-sdk|react-chartjs-2).)*$/]
+    })
+  ],
+  plugins: [progressPlugin, htmlPlugin, definePlugin, shellPlugin],
+  devServer: {
+    historyApiFallback: true,
+    contentBase: "./"
+  }
+};

package-lock.json

@@ -21,21 +21,21 @@ const path = require("path");
 const nodeExternals = require("webpack-node-externals");
 
 const definePlugin = new webpack.DefinePlugin({
-  EDITOR: JSON.stringify({ offline: true })
+  TYPE: JSON.stringify("CANmod.gps")
 });
 
 const progressPlugin = new webpack.ProgressPlugin();
 
 const shellPlugin = new WebpackShellPlugin({
-  onBuildStart: ['echo "Simple editor build starts"'],
-  onBuildEnd: ['echo "Simple editor build complete"'],
-  onBuildExit: ["node simple-editor.js"]
+  onBuildStart: ['echo "GPS editor build starts"'],
+  onBuildEnd: ['echo "GPS editor build complete"'],
+  onBuildExit: ["node gps-editor.js"]
 });
 
 const htmlPlugin = new HtmlWebPackPlugin({
   template: "./src/browser/index.html",
   filename: "./index.html",
-  title: "Configuration Editor",
+  title: "CANmod.gps Config Editor",
   inject: false,
   minify: true
 });
@@ -44,7 +44,7 @@ module.exports = {
   context: __dirname,
   entry: [path.resolve(__dirname, "src/browser/simple.js")],
   output: {
-    path: __dirname + "/simple",
+    path: __dirname + "/gps-editor",
     filename: "bundle.js"
   },
   resolve: {