SAP-archive · nimble-123 · Feb 14, 2022 · Feb 14, 2022 · Feb 14, 2022 · Feb 14, 2022
diff --git a/.prettierrc 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
@@ -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
+# 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
diff --git a/_i18n/messages_de.properties 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
diff --git 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"
         }
     }
-}
+}
diff --git a/app/profilePic/.babelrc.json b/app/profilePic/.babelrc.json
@@ -0,0 +1,10 @@
+
+{
+    "ignore": [
+        "**/*.d.ts"
+    ],
+    "presets": [
+        "transform-ui5",
+        "@babel/preset-typescript"
+    ]
+}
diff --git a/app/profilePic/.eslintrc.json 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
@@ -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
diff --git a/app/profilePic/.prettierrc 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
@@ -1,38 +1,56 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
+        <meta http-equiv="Pragma" content="no-cache" />
+        <meta http-equiv="expires" content="0" />
 
-<head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<script src="https://sapui5.hana.ondemand.com/1.98.0/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>SAP Community Profile Picture Editor</title>
+        <script src="https://sapui5.hana.ondemand.com/1.98.0/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
 
-	<script src="https://sapui5.hana.ondemand.com/1.98.0/resources/sap-ui-core.js"
-		data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout, sap.ui.rta, sap.uxap"
-		data-sap-ui-compatVersion="edge" data-sap-ui-theme="sap_fiori_3"
-		data-sap-ui-async="true"
-		data-sap-ui-frameOptions="trusted"
-		data-sap-ui-bindingSyntax="complex"
-		data-sap-ui-xx-bindingSyntax="complex"
-		data-sap-ui-resourceroots='{"profilePic": "./profilePic", 
-										"root": "./"}'
-		data-sap-ui-frameOptions="allow"></script>
+        <script
+            id="sap-ui-bootstrap"
+            src="https://sapui5.hana.ondemand.com/1.98.0/resources/sap-ui-core.js"
+            data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout, sap.ui.rta, sap.uxap, sap.ui.unified, sap.suite.ui.commons"
+            data-sap-ui-resourceroots='{
+              "ui5.ts.profile.picture.editor": "/profilePic/webapp",
+              "root": "./"
+            }'
+            data-sap-ui-compatVersion="edge"
+            data-sap-ui-async="true"
+            data-sap-ui-frameOptions="trusted"
+            data-sap-ui-bindingSyntax="complex"
+            data-sap-ui-xx-bindingSyntax="complex"
+            data-sap-ui-xx-waitForTheme="true"
+            data-sap-ui-xx-supportedLanguages="en,de"
+            data-sap-ui-theme="sap_horizon"
+        ></script>
 
-	<style>
-		html, body {height: 100%;}
-	</style>
-	<script>
-		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-			sap.ui.getCore().applyTheme( "sap_fiori_3_dark" )//"sap_horizon")
-		}
-		sap.ui.getCore().attachInit(() => {
-			sap.ushell.Container.createRenderer().placeAt("content")
-		})
-	</script>
+        <style>
+            html,
+            body {
+                height: 100%;
+            }
+        </style>
 
-</head>
+        <script>
+            // enforce the "sap_horizon" theme because it is beautiful
+            sap.ui.getCore().applyTheme('sap_horizon');
 
-<body class="sapUiBody" id="content"></body>
+            sap.ui.getCore().attachInit(() => {
+                sap.ushell.Container.createRenderer().placeAt('content');
+            });
+        </script>
+    </head>
 
-</html>
+    <body class="sapUiBody" id="content"></body>
+    <!-- <body class="sapUiBody">
+        <div data-sap-ui-component data-name="ui5.ts.profile.picture.editor"></div>
+    </body> -->
+</html>
diff --git a/app/profilePic/package.json 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
diff --git a/app/profilePic/profilePic/controller/App.controller.js b/app/profilePic/profilePic/controller/App.controller.js