Support for CSV in GUI

app.js

@@ -1,9 +1,13 @@
+/* eslint-disable no-console */
+'use-strict';
+
 const express = require('express'),
 	path = require('path'),
 	logger = require('morgan'),
 	bodyParser = require('body-parser'),
 	bearerToken = require('express-bearer-token'),
-	cookieParser= require('cookie-parser');
+	cookieParser = require('cookie-parser'),
+	response = require('./helpers/general/response');
 
 const rootRoute = require('./routes/root');
 
@@ -14,15 +18,19 @@ app.use(logger('dev'));
 app.use(cookieParser());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bearerToken());
-app.use(express.static(path.join(__dirname, './ui/assets'), {
+app.use(express.static(path.join(__dirname, './gui/assets'), {
 	maxAge: 86400000
 }));
 
 // View engine setup
-app.set('views', path.join(__dirname, './ui/views'));
+app.set('views', path.join(__dirname, './gui/views'));
 app.set('view engine', 'pug');
 
 // Routes
 app.use('/', rootRoute);
 
+app.use((error, res) => {
+	response.send(res, 400, error.message);
+});
+
 module.exports = app;

ui/assets/css/app.css → gui/assets/css/app.css

@@ -318,6 +318,7 @@ textarea {
   font-size: 20px;
   font-weight: 400;
   border-bottom: 1px solid #e0e0e0;
+  position: relative;
 }
 .editor__main {
   height: calc(100% - 43px);
@@ -839,3 +840,40 @@ span.CodeMirror-selectedtext {
   color: #4caf50;
   padding: 0 0 16px;
 }
+.switch {
+  position: absolute;
+  top: 6px;
+  right: 10px;
+}
+.switch__link {
+  display: block;
+  border: 1px solid #e0e0e0;
+  border-right: none;
+  padding: 2px 12px;
+  text-decoration: none;
+  font-size: 14px;
+  color: #757575;
+}
+.switch__link:hover,
+.switch__link:active {
+  background-color: #fafafa;
+}
+.switch__link--active {
+  background-color: #eee;
+  box-shadow: inset 0 1px 3px 1px rgba(0, 0, 0, 0.08);
+  cursor: default;
+}
+.switch__link--active:hover,
+.switch__link--active:active {
+  background-color: #eee;
+}
+.switch__item {
+  display: inline-block;
+}
+.switch__item:first-child .switch__link {
+  border-radius: 2px 0 0 2px;
+}
+.switch__item:last-child .switch__link {
+  border-radius: 0 2px 2px 0;
+  border-right: 1px solid #e0e0e0;
+}

ui/assets/css/src/app.less → gui/assets/css/src/app.less

@@ -7,4 +7,5 @@
 @import "./components/editor.less";
 @import "./components/codemirror.less";
 @import "./components/codemirror-theme.less";
-@import "./components/log.less";
+@import "./components/log.less";
+@import "./components/switch.less";

ui/assets/css/src/components/editor.less → gui/assets/css/src/components/editor.less

@@ -9,6 +9,7 @@
         font-size: 20px;
         font-weight: 400;
         border-bottom: 1px solid #e0e0e0;
+        position: relative;
     }
 
     &__main {

gui/assets/css/src/components/switch.less

@@ -0,0 +1,49 @@
+.switch {
+    position: absolute;
+    top: 6px;
+    right: 10px;
+
+    &__link {
+        display: block;
+        border: 1px solid #e0e0e0;
+        border-right: none;
+        padding: 2px 12px;
+        text-decoration: none;
+        font-size: 14px;
+        color: #757575;
+
+        &:hover,
+        &:active {
+            background-color: #fafafa;
+        }
+
+        &--active {
+            background-color: #eee;
+            box-shadow: inset 0 1px 3px 1px rgba(0,0,0,.08);
+            cursor: default;
+
+            &:hover,
+            &:active {
+                background-color: #eee;
+            }
+        }
+
+    }
+
+    &__item {
+        display: inline-block;
+
+        &:first-child {
+            .switch__link {
+                border-radius: 2px 0 0 2px;
+            }
+        }
+
+        &:last-child {
+            .switch__link {
+                border-radius: 0 2px 2px 0;
+                border-right: 1px solid #e0e0e0;
+            }
+        }
+    }
+}

gui/assets/js/src/custom/blueprint.js

@@ -0,0 +1,159 @@
+/* eslint-disable no-console */
+'use-strict';
+
+(function() {
+	var projectIdElem = document.getElementById('project'),
+		projectId = projectIdElem.value,
+		blueprintForm = document.getElementById('blueprintForm');
+
+	// Takes passed content models object and transforms it into select options 
+	var fillBlueprintSelector = function (data) {
+		var selector = document.getElementById('contentmodel'),
+			option = '';
+
+		// It there are not any data
+		if (data.length === 0) {
+			// Set the selector to the disabled state
+			selector.innerHTML = '<option value="">Fill in a valid Project ID</option>';
+			selector.setAttribute('disabled', 'disabled');
+		} else {
+			// Fill the selector with content model names and codenames
+			selector.innerHTML = '';
+			selector.removeAttribute('disabled');
+
+			for (var i = 0; i < data.length; i++) {
+				option = '<option value="' + data[i].system.codename + '">' + data[i].system.name + '</option>';
+				selector.appendChild(helper.createNodeFromString(option)[0]);         
+			}  
+		}
+
+	};
+
+	// Request the Delivery API to get all content models
+	var initBlueprintSelector = function (projectId) {
+		var request = new XMLHttpRequest(),
+			response;
+
+		// Assemble endpoint url
+		request.open('GET', 'https://deliver.kenticocloud.com/' + projectId + '/types', true);
+		request.setRequestHeader('Content-Type', 'application/json');
+
+		// When a response is obtained
+		request.onload = function() {
+			response = request.responseText;
+
+			// If the response is successful
+			if (request.status >= 200 && request.status < 400) {
+				// Initialize the blueprint selector with data
+				fillBlueprintSelector(JSON.parse(response).types);
+			}
+		};
+
+		request.onerror = function() {
+			// There was a connection error
+			console.error('Connection error');
+			helper.addLog('Connection error', false);
+		};
+
+		// Make the request
+		request.send();
+	};
+
+	// Request the Blueprint endpoint to get a blueprint of the selected content model
+	var generateBlueprint = function (projectId, format, model) {
+		var request = new XMLHttpRequest(),
+			response,
+			mimeType;
+
+		// Assemble endpoint url
+		request.open('GET', '/' + projectId + '/blueprint/' + format + '/' + model, true);
+		request.setRequestHeader('Content-Type', helper.getMimeType(format));
+
+		// When a response is obtained
+		request.onload = function() {
+			helper.removeLoading();
+			response = request.responseText;
+
+			// If the response is successful
+			if (request.status >= 200 && request.status < 400) {
+				// Set the response body to the code editor
+				if (format === 'json') {
+					editorWrapper.setValue(js_beautify(response, {indent_size: 4}));
+					helper.addLog('JSON blueprint for the "' + model + '" content model successfully generated.', true);
+				} else if (format === 'csv') {
+					editorWrapper.setValue(response);
+					helper.addLog('CSV header blueprint for the "' + model + '" content model successfully generated.', true);
+				}   
+			} else {
+				// If the response is failed
+				//Log errors 
+				helper.addLog(helper.encodedStr(JSON.parse(response).message), false);
+			}
+		};
+
+		request.onerror = function() {
+			// There was a connection error
+			console.error('Connection error');
+			helper.addLog('Connection error', false);
+		};
+
+		// Make the request
+		request.send();
+	};
+
+	// Get mode set in the code editor as a string to be passed in the blueprint endpoint 
+	function getFormat () {
+		// editorWrapper is a global variable set in the ./code-editor.js file
+		var format = editorWrapper.getOption('mode');
+
+		switch (format) {
+		case 'application/json':
+			format = 'json';
+			break;
+		case 'text/csv':
+			format = 'csv';
+			break;
+		}
+
+		return format;
+	}
+
+	// On page load
+
+	if (projectId !== '') {
+		// Fill content models selector with data
+		initBlueprintSelector(projectId); 
+	}
+
+	// When Project ID input loses focus
+	projectIdElem.addEventListener('blur', function () {
+		projectId = projectIdElem.value;
+
+		if (projectId !== '') {
+			// Fill content models selector with data
+			initBlueprintSelector(projectId); 
+		}             
+	});
+
+	// On the blueprint form submit
+	blueprintForm.addEventListener('submit', function (event) {
+		var format = getFormat();
+		selector = document.getElementById('contentmodel');
+		model = selector.options[selector.selectedIndex].value;
+
+		projectId = projectIdElem.value;
+		helper.addLog('=== New blueprint at ' + helper.getNow() + '===');
+		helper.addLoading('blueprint');
+
+		if (model !== '' && format !== '' && selector !== null) {
+			// Generate blueprint and show it in the code editor
+			generateBlueprint(projectId, format, model);
+		} else {
+			helper.addLog('A content model must be selected to be able to generate a blueprint.' , false);
+		}
+
+		event.preventDefault(); 
+
+	}, true);
+
+})();