diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..d1e3cda --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "semi": true, + "singleQuote": true, + "arrowParens": "always", + "tabWidth": 4, + "trailingComma": "none", + "printWidth": 120, + "useTabs": false +} diff --git a/_i18n/messages.properties b/_i18n/messages.properties index 37ffeec..d8ec0f7 100644 --- a/_i18n/messages.properties +++ b/_i18n/messages.properties @@ -1,13 +1,9 @@ -errPort=is not a valid HTTP port value -lagError=Event Loop Lag Exceeded: {0} milliseconds -errFileType=Invalid file type. Only jpg, png and gif image files are allowed. -errFileTooLarge=Uploaded file is too large. Please choose a file less than 20MB in size -appTitle=SAP Community Profile Picture Editor -appDescription=SAP Community Profile Picture Editor / Enhancer -Toolbar1=Choose Selfie Template -Toolbar2=Choose Your Picture and Upload -Toolbar3=Edit and Download Final Image -Upload=Enhance Your Picture -placeholder=Choose File for Upload... -gui.loading=Processing Picture -gui.loadingLong=Please wait ...Processing Picture \ No newline at end of file +# Express API +lag.Error = Event Loop Lag Exceeded: {0} milliseconds +error.Port = is not a valid HTTP port value +error.FileType = Invalid file type. Only jpg, png and gif image files are allowed. +error.FileTooLarge = Uploaded file is too large. Please choose a file less than 20MB in size + +# UI5 App and Fiori Launchpad Sandbox +app.Title = SAP Community Profile Picture Editor +app.Description = SAP Community Profile Picture Editor / Enhancer \ No newline at end of file diff --git a/_i18n/messages_de.properties b/_i18n/messages_de.properties new file mode 100644 index 0000000..4e0fda0 --- /dev/null +++ b/_i18n/messages_de.properties @@ -0,0 +1,9 @@ +# Express API +lag.Error = Verzögerung der Ereignisschleife überschritten: {0} Millisekunden +error.Port = ist kein gültiger HTTP-Port-Wert +error.FileType = Ungültiger Dateityp. Es sind nur jpg-, png- und gif-Bilddateien zulässig. +error.FileTooLarge = Die hochgeladene Datei ist zu groß. Bitte wählen Sie eine Datei mit einer Größe von weniger als 20 MB + +# UI5 App and Fiori Launchpad Sandbox +app.Title = SAP Community Profilbild Editor +app.Description = SAP Community Profilbild Editor / Enhancer \ No newline at end of file diff --git a/app/appconfig/fioriSandboxConfig.json b/app/appconfig/fioriSandboxConfig.json index 9b10bc6..a9e2c53 100644 --- a/app/appconfig/fioriSandboxConfig.json +++ b/app/appconfig/fioriSandboxConfig.json @@ -27,10 +27,10 @@ "profilepic-ui": { "title": "", "description": "", - "additionalInformation": "SAPUI5.Component=sap.profilePic", + "additionalInformation": "SAPUI5.Component=ui5.ts.profile.picture.editor", "applicationType": "URL", - "url": "./profilePic", + "url": "./webapp", "navigationMode": "embedded" } } -} \ No newline at end of file +} diff --git a/app/profilePic/.babelrc.json b/app/profilePic/.babelrc.json new file mode 100644 index 0000000..d63f8a4 --- /dev/null +++ b/app/profilePic/.babelrc.json @@ -0,0 +1,10 @@ + +{ + "ignore": [ + "**/*.d.ts" + ], + "presets": [ + "transform-ui5", + "@babel/preset-typescript" + ] +} \ No newline at end of file diff --git a/app/profilePic/.eslintrc.json b/app/profilePic/.eslintrc.json new file mode 100644 index 0000000..f358ffe --- /dev/null +++ b/app/profilePic/.eslintrc.json @@ -0,0 +1,19 @@ +{ + "env": { + "browser": true, + "es6": true, + "node": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@typescript-eslint/recommended-requiring-type-checking", + "prettier" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "project": ["./app/profilePic/tsconfig.json"], + "sourceType": "module" + }, + "plugins": ["@typescript-eslint"] +} diff --git a/app/profilePic/.gitignore b/app/profilePic/.gitignore new file mode 100644 index 0000000..50f7228 --- /dev/null +++ b/app/profilePic/.gitignore @@ -0,0 +1,19 @@ +# build results +webapp +dist + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Dependency directories +node_modules/ + +.DS_Store + +# do not add dependency lock files to this repo because it should remain independent from specific dependency managers +package-lock.json +yarn.lock \ No newline at end of file diff --git a/app/profilePic/.prettierrc b/app/profilePic/.prettierrc new file mode 100644 index 0000000..d1e3cda --- /dev/null +++ b/app/profilePic/.prettierrc @@ -0,0 +1,9 @@ +{ + "semi": true, + "singleQuote": true, + "arrowParens": "always", + "tabWidth": 4, + "trailingComma": "none", + "printWidth": 120, + "useTabs": false +} diff --git a/app/profilePic/index.html b/app/profilePic/index.html index 9209dc3..213bddb 100644 --- a/app/profilePic/index.html +++ b/app/profilePic/index.html @@ -1,38 +1,56 @@ + + + + - + + + - - - - + + + SAP Community Profile Picture Editor + - + - - + - + + - \ No newline at end of file + + + diff --git a/app/profilePic/package.json b/app/profilePic/package.json new file mode 100644 index 0000000..75db3a1 --- /dev/null +++ b/app/profilePic/package.json @@ -0,0 +1,53 @@ +{ + "name": "ui5.ts.profile.picture.editor", + "version": "1.0.0", + "private": "true", + "description": "UI5 Application: ui5.ts.profile.picture.editor", + "author": "Nils Lutz", + "license": "Apache-2.0", + "main": "webapp/index.html", + "scripts": { + "build": "npm-run-all build:ts build:ui5", + "build:opt": "npm-run-all build:ts build:ui5:opt", + "build:ts": "babel src --out-dir webapp --source-maps inline --extensions \".ts,.js\" --copy-files", + "build:ui5": "ui5 build --clean-dest", + "build:ui5:opt": "ui5 build self-contained --clean-dest --all", + "start": "npm-run-all --parallel watch:ts start:ui5", + "start:silent": "npm-run-all --parallel watch:ts start:ui5silent", + "watch:silent": "npm-run-all --parallel watch:ts start:ui5silent", + "watch:ts": "babel src --out-dir webapp --source-maps inline --extensions \".ts,.js\" --copy-files --watch", + "start:ui5": "ui5 serve --port 8081 -o index.html", + "start:ui5silent": "ui5 serve --port 8081", + "start:dist": "ui5 serve --port 8081 -o index.html --config ui5-dist.yaml", + "ts-typecheck": "tsc --noEmit", + "lint": "eslint src" + }, + "devDependencies": { + "@babel/cli": "^7.14.3", + "@babel/core": "^7.14.3", + "@babel/preset-env": "^7.14.2", + "@babel/preset-typescript": "^7.13.0", + "@sapui5/ts-types-esm": "^1.98.x", + "@types/jquery": "3.5.1", + "@typescript-eslint/eslint-plugin": "^4.25.0", + "@typescript-eslint/parser": "^4.25.0", + "@ui5/cli": "^2.14.x", + "babel-preset-transform-ui5": "^7.0.3", + "eslint": "^7.27.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-prettier": "^4.0.0", + "npm-run-all": "^4.1.5", + "prettier": "2.5.1", + "typescript": "^4.3.2", + "ui5-middleware-livereload": "^0.5.8" + }, + "ui5": { + "dependencies": [ + "ui5-middleware-livereload", + "ui5-tooling-modules" + ] + }, + "dependencies": { + "ui5-tooling-modules": "^0.1.1" + } +} diff --git a/app/profilePic/profilePic/Component.js b/app/profilePic/profilePic/Component.js deleted file mode 100644 index 6a4dea9..0000000 --- a/app/profilePic/profilePic/Component.js +++ /dev/null @@ -1,28 +0,0 @@ -/* eslint-disable no-undef */ -/*eslint-env es6 */ -sap.ui.define([ - "sap/ui/core/UIComponent", - "sap/profilePic/model/models" -], function (UIComponent, models) { - "use strict" - - return UIComponent.extend("profilePic.Component", { - - metadata: { - manifest: "json" - }, - - init: function () { - // call the base component's init function - UIComponent.prototype.init.apply(this, arguments) - - // enable routing - this.getRouter().initialize() - - // set the device model - this.setModel(models.createDeviceModel(), "device") - } - - - }) -}) \ No newline at end of file diff --git a/app/profilePic/profilePic/controller/App.controller.js b/app/profilePic/profilePic/controller/App.controller.js deleted file mode 100644 index cb03e21..0000000 --- a/app/profilePic/profilePic/controller/App.controller.js +++ /dev/null @@ -1,98 +0,0 @@ -/* eslint-disable no-undef */ -/*eslint-env es6 */ -"use strict"; -sap.ui.define([ - "profilePic/controller/BaseController", - "sap/m/MessageToast", - "sap/ui/core/Core", - "sap/ui/model/json/JSONModel", - "sap/ui/Device", - "sap/suite/ui/commons/library" -], - function (BaseController, MessageToast, oCore, JSONModel, Device, SuiteLibrary) { - - return BaseController.extend("profilePic.controller.App", { - onInit: function () { - var oImageEditor = this.getView().byId("image"), - oModel = new JSONModel({ - blocked: true - }) - - this.getView().setModel(oModel) - if (!Device.browser.msie) { - // svg files are not supported in Internet Explorer - oImageEditor.setCustomShapeSrc(sap.ui.require.toUrl("sap/suite/ui/commons/statusindicator") + "/shapes/bulb.svg") - } - }, - - uploadPressed: async function (oEvent) { - let view = this.getView() - let controller = view.getController() - let oFileUploader = view.byId("fileToUpload") - if (!oFileUploader.getValue()) { - MessageToast.show("Choose a file first") - return - } - let param = view.byId("uploadParam") - //param.setValue(oInput.getActivePage()) - oFileUploader.getParameters() - var oImageEditor = this.getView().byId("image") - oImageEditor.applyVisibleCrop() - console.log(oImageEditor.getMode()) - oFileUploader.getProcessedBlobsFromArray = async function (oBlobs) { - return new Promise(async (resolve, reject) => { - let newBlob = await oImageEditor.getImageAsBlob() - resolve([newBlob]) - }) - } - controller.startBusy() - oFileUploader.upload(true) - }, - - uploadStart: async function (oEvent) { - let view = this.getView() - let controller = view.getController() - controller.startBusy() - }, - - uploadComplete: async function (oEvent) { - let view = this.getView() - let controller = view.getController() - let dataURL = "data:image/png;base64," + oEvent.getParameters().responseRaw - let oImageEditor = view.byId("image") - await oImageEditor.setSrc(dataURL) - controller.endBusy(controller) - }, - - onSaveAsPress: async function () { - let view = this.getView() - let controller = view.getController() - let oImageEditor = view.byId("image") - oImageEditor.openSaveDialog() - controller.openUrl('https://people.sap.com/', true) - - }, - onImageLoaded: async function (oEvent) { - let view = this.getView() - let oImageEditor = view.byId("image") - oImageEditor.zoomToFit() - oImageEditor.setCropAreaByRatio(1, 1) - oImageEditor.setMode(SuiteLibrary.ImageEditorMode.CropEllipse) - console.log(oImageEditor.getMode()) - - - - }, - onFileChange: async function (oEvent) { - var oFile = oEvent.getParameter("files")[0], - oImageEditor = this.getView().byId("image") - if (!oFile) { - return - } - this.getView().getModel().setProperty("/blocked", true) - await oImageEditor.setSrc(oFile) - - } - }) - } -) \ No newline at end of file diff --git a/app/profilePic/profilePic/controller/BaseController.js b/app/profilePic/profilePic/controller/BaseController.js deleted file mode 100644 index 0ad47bc..0000000 --- a/app/profilePic/profilePic/controller/BaseController.js +++ /dev/null @@ -1,118 +0,0 @@ -/*global history */ -/* eslint-disable no-undef */ -sap.ui.define([ - "sap/ui/core/mvc/Controller", - "sap/ui/core/routing/History", - "sap/ui/core/Fragment", - "sap/ui/core/syncStyleClass", -], function (Controller, History, Fragment, syncStyleClass) { - "use strict"; - - return Controller.extend("profilePic.controller.BaseController", { - /** - * Convenience method for accessing the router in every controller of the application. - * @public - * @returns {sap.ui.core.routing.Router} the router for this component - */ - getRouter: function () { - return this.getOwnerComponent().getRouter(); - }, - - /** - * Convenience method for getting the view model by name in every controller of the application. - * @public - * @param {string} sName the model name - * @returns {sap.ui.model.Model} the model instance - */ - getModel: function (sName) { - return this.getView().getModel(sName); - }, - - /** - * Convenience method for setting the view model in every controller of the application. - * @public - * @param {sap.ui.model.Model} oModel the model instance - * @param {string} sName the model name - * @returns {sap.ui.mvc.View} the view instance - */ - setModel: function (oModel, sName) { - return this.getView().setModel(oModel, sName); - }, - - /** - * Convenience method for getting the resource bundle. - * @public - * @returns {sap.ui.model.resource.ResourceModel} the resourceModel of the component - */ - getResourceBundle: function () { - return this.getOwnerComponent().getModel("i18n").getResourceBundle(); - }, - - /** - * Event handler for navigating back. - * It there is a history entry we go one step back in the browser history - * If not, it will replace the current entry of the browser history with the master route. - * @public - */ - onNavBack: function () { - var sPreviousHash = History.getInstance().getPreviousHash(); - - if (sPreviousHash !== undefined) { - history.go(-1); - } else { - this.getRouter().navTo("master", {}, true) - } - }, - - - openUrl: function (url, newTab) { - // Require the URLHelper and open the URL in a new window or tab (same as _blank): - sap.ui.require(["sap/m/library"], ({ URLHelper }) => URLHelper.redirect(url, newTab)); - }, - - - startBusy: function () { - if (!this._pBusyDialog) { - this._pBusyDialog = Fragment.load({ - name: "profilePic.view.BusyDialog", - controller: this - }).then(function (oBusyDialog) { - this.getView().addDependent(oBusyDialog) - syncStyleClass("sapUiSizeCompact", this.getView(), oBusyDialog) - return oBusyDialog - }.bind(this)) - } - - this._pBusyDialog.then(function (oBusyDialog) { - oBusyDialog.open() - }.bind(this)) - }, - endBusy: function (oController) { - if (oController._pBusyDialog) { - oController._pBusyDialog.then(function (oBusyDialog) { - oBusyDialog.close() - }) - } - }, - - onErrorCall: function (oError, oController) { - if (oController) { - oController.endBusy(oController) - } - sap.ui.require(["sap/m/MessageBox"], (MessageBox) => { - console.log(oError) - if (oError.statusCode === 500 || oError.statusCode === 400 || oError.statusCode === "500" || oError.statusCode === "400" || oError.status === 500) { - var errorRes = oError.responseText - MessageBox.alert(errorRes) - return - } else { - MessageBox.alert(oError.statusText) - return - } - }) - } - - }) - -} -) \ No newline at end of file diff --git a/app/profilePic/profilePic/manifest.json b/app/profilePic/profilePic/manifest.json deleted file mode 100644 index d7f7265..0000000 --- a/app/profilePic/profilePic/manifest.json +++ /dev/null @@ -1,97 +0,0 @@ -{ - "_version": "1.33.0", - "sap.app": { - "id": "profilePic", - "type": "application", - "i18n": "/i18n/messages.properties", - "applicationVersion": { - "version": "1.0.0" - }, - "title": "{{appTitle}}", - "description": "{{appDescription}}", - "sourceTemplate": { - "id": "html5moduletemplates.basicSAPUI5ApplicationProjectModule", - "version": "1.40.12" - } - }, - - "sap.ui": { - "technology": "UI5", - "icons": { - "icon": "/favicon.ico", - "favIcon": "/favicon.ico", - "phone": "", - "phone@2": "", - "tablet": "", - "tablet@2": "" - }, - "deviceTypes": { - "desktop": true, - "tablet": true, - "phone": true - } - }, - - "sap.ui5": { - "flexEnabled": false, - "rootView": { - "viewName": "profilePic.view.App", - "type": "XML", - "async": true, - "id": "App" - }, - "dependencies": { - "minUI5Version": "1.98.0", - "libs": { - "sap.ui.core": {}, - "sap.m": {}, - "sap.ui.layout": {} - } - }, - "contentDensities": { - "compact": true, - "cozy": true - }, - "models": { - "config": { - "type": "sap.ui.model.json.JSONModel" - }, - "i18n": { - "type": "sap.ui.model.resource.ResourceModel", - "settings": { - "bundleUrl": "/i18n/messages.properties" - } - } - }, - "resources": { - "css": [{ - "uri": "../css/style.css" - }] - }, - "routing": { - "config": { - "routerClass": "sap.m.routing.Router", - "viewType": "XML", - "async": true, - "viewPath": "profilePic.view", - "controlAggregation": "pages", - "controlId": "app", - "clearControlAggregation": false - }, - "routes": [{ - "name": "RouteApp", - "pattern": "RouteApp", - "target": ["TargetApp"] - }], - "targets": { - "TargetApp": { - "viewType": "XML", - "transition": "slide", - "clearControlAggregation": false, - "viewId": "App", - "viewName": "App" - } - } - } - } -} \ No newline at end of file diff --git a/app/profilePic/profilePic/model/models.js b/app/profilePic/profilePic/model/models.js deleted file mode 100644 index c8071cc..0000000 --- a/app/profilePic/profilePic/model/models.js +++ /dev/null @@ -1,18 +0,0 @@ -/* eslint-disable no-undef */ -/*eslint-env es6 */ -sap.ui.define([ - "sap/ui/model/json/JSONModel", - "sap/ui/Device" -], (JSONModel, Device) => { - "use strict" - - return { - - createDeviceModel: () => { - var oModel = new JSONModel(Device) - oModel.setDefaultBindingMode("OneWay") - return oModel - } - - } -}) \ No newline at end of file diff --git a/app/profilePic/profilePic/view/App.view.xml b/app/profilePic/profilePic/view/App.view.xml deleted file mode 100644 index abb2e60..0000000 --- a/app/profilePic/profilePic/view/App.view.xml +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - -