From 3f30e3d74f33be19e5bd95d005ad7823df7230d0 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 24 May 2019 15:58:13 +0300 Subject: [PATCH] Add lib stepper and integration --- ui/package.json | 1 + ui/src/app/api/device.service.js | 14 +- ui/src/app/app.js | 3 + .../import-dialog-csv.controller.js | 166 ++++++------ .../import-export/import-dialog-csv.tpl.html | 239 ++++++++++++------ 5 files changed, 246 insertions(+), 177 deletions(-) diff --git a/ui/package.json b/ui/package.json index b6701e4e61..24b38545ec 100644 --- a/ui/package.json +++ b/ui/package.json @@ -64,6 +64,7 @@ "jstree-bootstrap-theme": "^1.0.1", "leaflet": "^1.0.3", "leaflet-providers": "^1.1.17", + "material-steppers": "^2.0.0", "material-ui": "^0.16.1", "material-ui-number-input": "^5.0.16", "md-color-picker": "0.2.6", diff --git a/ui/src/app/api/device.service.js b/ui/src/app/api/device.service.js index e3f9630193..d9eb326144 100644 --- a/ui/src/app/api/device.service.js +++ b/ui/src/app/api/device.service.js @@ -179,15 +179,15 @@ function DeviceService($http, $q, $window, userService, attributeService, custom let promise = ""; let statisticalInfo = {}; for (let i = 0; i < attributesType.length; i++) { - let attrribute = attributesType[i]; - if (deviceRelation.attributes[attrribute] && deviceRelation.attributes[attrribute].length !== 0) { - promise = attributeService.saveEntityAttributes(types.entityType.device, deviceId, types.attributesScope[attrribute].value, deviceRelation.attributes[attrribute], config).then(function () { + let attribute = attributesType[i]; + if (deviceRelation.attributes[attribute] && deviceRelation.attributes[attribute].length !== 0) { + promise = attributeService.saveEntityAttributes(types.entityType.device, deviceId, types.attributesScope[attribute].value, deviceRelation.attributes[attribute], config).then(function () { statisticalInfo.create = { - [attrribute]: deviceRelation.attributes[attributesType[i]].length + [attribute]: deviceRelation.attributes[attribute].length }; }, function () { statisticalInfo.error = { - [attrribute]: deviceRelation.attributes[attributesType[i]].length + [attribute]: deviceRelation.attributes[attribute].length }; }); allPromise.push(promise); @@ -234,7 +234,9 @@ function DeviceService($http, $q, $window, userService, attributeService, custom device: 1 }; saveDeviceRelarion(response.id.id, deviceParameters, config).then(function success(response) { - delete Object.assign(response, {update: response.create}).create; + if(response.create) { + delete Object.assign(response, {update: response.create}).create; + } angular.merge(statisticalInfo, response); deferred.resolve(statisticalInfo); }); diff --git a/ui/src/app/app.js b/ui/src/app/app.js index 3fd4115a2b..27bf94a19f 100644 --- a/ui/src/app/app.js +++ b/ui/src/app/app.js @@ -54,6 +54,8 @@ import react from 'ngreact'; import '@flowjs/ng-flow/dist/ng-flow-standalone.min'; import 'ngFlowchart/dist/ngFlowchart'; import 'jstree/dist/jstree.min'; +import 'material-steppers/dist/material-steppers'; +import 'material-steppers/dist/material-steppers.css' import 'jstree-bootstrap-theme/dist/themes/proton/style.min.css'; import 'typeface-roboto'; import 'font-awesome/css/font-awesome.min.css'; @@ -127,6 +129,7 @@ angular.module('thingsboard', [ react.name, 'flow', 'flowchart', + 'mdSteppers', thingsboardThirdpartyFix, thingsboardTranslateHandler, thingsboardLogin, diff --git a/ui/src/app/import-export/import-dialog-csv.controller.js b/ui/src/app/import-export/import-dialog-csv.controller.js index 18b42910be..0155c86ec1 100644 --- a/ui/src/app/import-export/import-dialog-csv.controller.js +++ b/ui/src/app/import-export/import-dialog-csv.controller.js @@ -16,14 +16,16 @@ import './import-dialog.scss'; /*@ngInject*/ -export default function ImportDialogCsvController($scope, $mdDialog, toast, importTitle, importFileLabel, entityType, importExport, types, $timeout, $q) { +export default function ImportDialogCsvController($scope, $mdDialog, toast, importTitle, importFileLabel, entityType, importExport, types, $mdStepper) { var vm = this; vm.cancel = cancel; - vm.importFromJson = importFromJson; + vm.finishExport = finishExport; vm.fileAdded = fileAdded; vm.clearFile = clearFile; + vm.nextStep = nextStep; + vm.previousStep = previousStep; vm.addDevices = addDevices; vm.importParams = { @@ -32,69 +34,28 @@ export default function ImportDialogCsvController($scope, $mdDialog, toast, impo isHeader: true }; - vm.selectedStep = 0; - vm.stepProgress = 1; - vm.maxStep = 3; - vm.showBusyText = false; - vm.stepData = [ - { step: 1, completed: false, optional: false, data: {} }, - { step: 2, completed: false, optional: false, data: {} }, - { step: 3, completed: false, optional: false, data: {} }, - ]; - - vm.enableNextStep = function nextStep() { - //do not exceed into max step - if (vm.selectedStep >= vm.maxStep) { - return; - } - //do not increment vm.stepProgress when submitting from previously completed step - if (vm.selectedStep === vm.stepProgress - 1) { - vm.stepProgress = vm.stepProgress + 1; - } - vm.selectedStep = vm.selectedStep + 1; - }; - - vm.moveToPreviousStep = function moveToPreviousStep() { - if (vm.selectedStep > 0) { - vm.selectedStep = vm.selectedStep - 1; - } - }; - - vm.submitCurrentStep = function submitCurrentStep(stepData, isSkip) { - var deferred = $q.defer(); - vm.showBusyText = true; - if (!stepData.completed && !isSkip) { - //simulate $http - $timeout(function () { - vm.showBusyText = false; - deferred.resolve({ status: 200, statusText: 'success', data: {} }); - //move to next step when success - stepData.completed = true; - vm.enableNextStep(); - }, 1000) - } else { - vm.showBusyText = false; - vm.enableNextStep(); - } - }; - vm.importTitle = importTitle; vm.importFileLabel = importFileLabel; vm.entityType = entityType; + vm.isVertical = true; + vm.isLinear = true; + vm.isAlternative = false; + vm.isMobileStepText = true; + vm.columnsParam = []; vm.parseData = []; vm.delimiters = [{ key: ',', value: ',' - },{ + }, { key: ';', value: ';' - },{ + }, { key: '|', value: '|' - },{ + }, { key: '\t', value: 'Tab' }]; @@ -107,11 +68,11 @@ export default function ImportDialogCsvController($scope, $mdDialog, toast, impo reader.onload = function (event) { $scope.$apply(function () { if (event.target.result) { - $scope.theForm.$setDirty(); + vm.theFormStep1.$setDirty(); var importCSV = event.target.result; if (importCSV && importCSV.length > 0) { try { - parseCSV(importCSV); + vm.importData = importCSV; vm.fileName = $file.name; } catch (err) { vm.fileName = null; @@ -126,12 +87,15 @@ export default function ImportDialogCsvController($scope, $mdDialog, toast, impo } function parseCSV(importData) { - var columnParam = {}; var config = { delim: vm.importParams.delim, header: vm.importParams.isHeader }; - parseData = importExport.convertCSVToJson(importData, config); + return importExport.convertCSVToJson(importData, config); + } + + function createColumnsData(parseData) { + var columnParam = {}; for (var i = 0; i < parseData.headers.length; i++) { if (vm.importParams.isHeader && parseData.headers[i].search(/^(name|type)$/im) === 0) { columnParam = { @@ -150,24 +114,14 @@ export default function ImportDialogCsvController($scope, $mdDialog, toast, impo } } - function addDevices () { - var arrayParam = [{type: "ENTITY_FIELD", key: "name", sampleData: "Device 1"}, {type: "ENTITY_FIELD", key: "type", sampleData: "test"}, {type: "SERVER_ATTRIBUTE", key: "test", sampleData: "test"}, {type: "TIMESERIES", key: "testBoolean", sampleData: false}, {type: "SHARED_ATTRIBUTE", key: "testNumber", sampleData: 123}]; // eslint-disable-line - var data = {headers: ["Device 1", "test", "test", "FALSE", "123"], - rows:[["Device 1", "test", "test", false, 123.5]]}; - // rows:[["Device 1", "test", "test", false, 123], - // ["Device 2", "test", "test", false, 124], - // ["Device 3", "test", "test", false, 125], - // ["Device 4", "test", "test", false, 126], - // ["Device 5", "test", "test", false, 127]]}; - arrayParam = vm.columnsParam; - data = parseData; - var arrayData = []; + function addDevices(importData, parameterColumns) { + var entitysData = []; var config = { ignoreErrors: true, resendRequest: true }; - for (var i = 0; i < data.rows.length; i ++) { - var obj = { + for (var i = 0; i < importData.rows.length; i++) { + var entityData = { name: "", type: "", attributes: { @@ -176,58 +130,86 @@ export default function ImportDialogCsvController($scope, $mdDialog, toast, impo }, timeseries: [] }; - for(var j = 0; j < arrayParam.length; j++){ - switch (arrayParam[j].type) { + for (var j = 0; j < parameterColumns.length; j++) { + switch (parameterColumns[j].type) { case types.entityGroup.columnType.serverAttribute.value: - obj.attributes.server.push({ - key: arrayParam[j].key, - value: data.rows[i][j] + entityData.attributes.server.push({ + key: parameterColumns[j].key, + value: importData.rows[i][j] }); break; case types.entityGroup.columnType.sharedAttribute.value: - obj.attributes.shared.push({ - key: arrayParam[j].key, - value: data.rows[i][j] + entityData.attributes.shared.push({ + key: parameterColumns[j].key, + value: importData.rows[i][j] }); break; case types.entityGroup.columnType.timeseries.value: - obj.timeseries.push({ - key: arrayParam[j].key, - value: data.rows[i][j] + entityData.timeseries.push({ + key: parameterColumns[j].key, + value: importData.rows[i][j] }); break; case types.entityGroup.columnType.entityField.value: - switch (arrayParam[j].key) { + switch (parameterColumns[j].key) { case types.entityGroup.entityField.name.value: - obj.name = data.rows[i][j]; + entityData.name = importData.rows[i][j]; break; case types.entityGroup.entityField.type.value: - obj.type = data.rows[i][j]; + entityData.type = importData.rows[i][j]; break; } break; } } - arrayData.push(obj); + entitysData.push(entityData); } - importExport.createMultiEntity(arrayData, vm.entityType, vm.importParams.isUpdate, config).then(function () { - $mdDialog.hide(); + importExport.createMultiEntity(entitysData, vm.entityType, vm.importParams.isUpdate, config).then(function (response) { + vm.statistical = response; + $mdStepper('import-stepper').next(); }); } function clearFile() { - $scope.theForm.$setDirty(); + vm.theFormStep1.$setDirty(); vm.fileName = null; - parseData = null; - vm.columnsParam = []; + vm.importData = null; + } + + function previousStep() { + let steppers = $mdStepper('import-stepper'); + steppers.back(); + } + + function nextStep(step) { + let steppers = $mdStepper('import-stepper'); + switch (step) { + case 2: + steppers.next(); + break; + case 3: + parseData = parseCSV(vm.importData); + if (parseData === -1) { + clearFile(); + steppers.back(); + } else { + createColumnsData(parseData); + steppers.next(); + } + break; + case 4: + steppers.next(); + addDevices(parseData, vm.columnsParam) + break; + } + } function cancel() { $mdDialog.cancel(); } - function importFromJson() { - $scope.theForm.$setPristine(); - $mdDialog.hide(vm.importData); + function finishExport() { + $mdDialog.hide(); } } diff --git a/ui/src/app/import-export/import-dialog-csv.tpl.html b/ui/src/app/import-export/import-dialog-csv.tpl.html index 5f6cbbfcb4..b847c753bd 100644 --- a/ui/src/app/import-export/import-dialog-csv.tpl.html +++ b/ui/src/app/import-export/import-dialog-csv.tpl.html @@ -16,87 +16,168 @@ --> -
- -
-

{{ vm.importTitle }}

- - - - -
- - - - -
-
-
-
- -
-
- - - {{ 'action.remove' | translate }} - - - close - - + +
+

{{ vm.importTitle }}

+ + + + +
+ + + + + + + + +
+
+
+ +
+
+ + + {{ 'action.remove' | translate }} + + + close + + +
+
+ + +
+
-
- - +
+
import.no-file
+
{{ vm.fileName }}
-
-
-
import.no-file
-
{{ vm.fileName }}
-
+
+ + + + + + + {{ 'action.cancel' | translate }} + + + Continue + + + + + + +
+ + + + + {{delimiter.value}} + + + + + + First line is header + + + + + Update parameters + +
-
-
- - - - - {{delimiter.value}} - - - - - - First line is header - - - - - Update parameters - - -
- -
-
- - - - Add Device - - - {{ 'action.import' | translate }} - - {{ 'action.cancel' - | translate }} - - - + + + + Back + + + + {{ 'action.cancel' | translate }} + + + Continue + + + + + + + + + + + Back + + + + {{ 'action.cancel' | translate }} + + + Continue + + + + + + + + + + + +
+ + {{key}} + +
+

{{ info }}: {{ infoValue }}

+
+ + +
+ + + + + {{ 'action.cancel' | translate }} + + + Ok + + + + + + + + + + + + + + + +