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>