diff --git a/_i18n/messages.properties b/_i18n/messages.properties index 37ffeec..6189db0 100644 --- a/_i18n/messages.properties +++ b/_i18n/messages.properties @@ -7,7 +7,9 @@ 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 +Upload=Enhance Picture placeholder=Choose File for Upload... gui.loading=Processing Picture -gui.loadingLong=Please wait ...Processing Picture \ No newline at end of file +gui.loadingLong=Please wait ...Processing Picture +change.language=Language +save=Save As \ No newline at end of file diff --git a/_i18n/messages_en.properties b/_i18n/messages_en.properties new file mode 100644 index 0000000..6189db0 --- /dev/null +++ b/_i18n/messages_en.properties @@ -0,0 +1,15 @@ +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 Picture +placeholder=Choose File for Upload... +gui.loading=Processing Picture +gui.loadingLong=Please wait ...Processing Picture +change.language=Language +save=Save As \ No newline at end of file diff --git a/_i18n/messages_fr.properties b/_i18n/messages_fr.properties new file mode 100644 index 0000000..f024b65 --- /dev/null +++ b/_i18n/messages_fr.properties @@ -0,0 +1,15 @@ +errPort=n'est pas une valeur de port HTTP valide +lagError=Event Loop Lag Exceeded: {0} milliseconds +errFileType=Iype de fichier invalide. Seuls les fichiers image jpg, png et gif sont autorisés. +errFileTooLarge=Le fichier téléchargé est trop volumineux. Veuillez choisir un fichier de moins de 20 Mo +appTitle=SAP Community Éditeur d'images de profil +appDescription=SAP Community Éditeur d'images de profil/ Enhancer +Toolbar1=Choisissez le modèle de selfie +Toolbar2=Choisissez votre image et téléchargez +Toolbar3=Modifier et télécharger l'image finale +Upload=Améliorer l'image +placeholder=Choisissez le fichier à télécharger... +gui.loading=Traitement de l'image +gui.loadingLong=Veuillez patienter...Traitement de l'image +change.language=Langue +save=Enregis. sous \ No newline at end of file diff --git a/_i18n/messages_iw.properties b/_i18n/messages_iw.properties new file mode 100644 index 0000000..068e6ad --- /dev/null +++ b/_i18n/messages_iw.properties @@ -0,0 +1,15 @@ +errPort=חוקי HTTP אינו ערך יציאת +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 +appDescription=עורך תמונת פרופיל SAP Community +Toolbar1=Choose Selfie Template +Toolbar2=Choose Your Picture and Upload +Toolbar3=Edit and Download Final Image +Upload=שפר את תמונתך +placeholder=בחר קובץ להעלאה... +gui.loading=Processing Picture +gui.loadingLong=Please wait ...Processing Picture +change.language=שפה +save=שמר \ No newline at end of file diff --git a/app/profilePic/profilePic/controller/App.controller.js b/app/profilePic/profilePic/controller/App.controller.js index cb03e21..cb3227c 100644 --- a/app/profilePic/profilePic/controller/App.controller.js +++ b/app/profilePic/profilePic/controller/App.controller.js @@ -2,31 +2,74 @@ /*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 - }) + "profilePic/controller/BaseController", + "sap/m/MessageToast", + "sap/m/MessageBox", + "sap/ui/core/Core", + "sap/ui/model/json/JSONModel", + "sap/ui/Device", + "sap/suite/ui/commons/library", + "sap/m/Dialog", + "sap/m/DialogType", + "sap/m/Button", + "sap/m/ButtonType", + "sap/m/TextArea", + "./webclient" + + + ], + function (BaseController, MessageToast, MessageBox, oCore, JSONModel, Device, SuiteLibrary,Dialog, DialogType,Button,ButtonType, TextArea,webclient) { + + 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") } - }, + var langModel = new JSONModel( + sap.ui.require.toUrl("profilePic/languages.json")) + this.getView().setModel(langModel, "languages") + //sap.ui.getCore().getConfiguration().setLanguage("he") + //sap.ui.getCore().getConfiguration().setRTL(true) + + + }, + + onAfterRendering: function () { + // Set up chatbot + this.renderCAIChatBot() + window.sapcai.webclientBridge.imageeditor = this.getView().byId("image") + }, + + // Show chatbot + renderCAIChatBot: function () { + // if (!document.getElementById("recast-webchat")) { + // var s = document.createElement("script"); + // s.setAttribute("src", "webclient.js"); + // document.body.appendChild(s); - uploadPressed: async function (oEvent) { - let view = this.getView() + var s = document.createElement("script"); + s.setAttribute("src", "https://cdn.cai.tools.sap/webclient/bootstrap.js"); + s.setAttribute("id", "cai-webclient-custom"); + s.setAttribute("data-expander-preferences",data_expander_preferences); + s.setAttribute("data-channel-id",data_channel_id); + s.setAttribute("data-token",data_token); + s.setAttribute("data-expander-type","CAI"); + document.body.appendChild(s); + // } + }, + + + + uploadPressed: async function (oEvent) { + let view = this.getView() let controller = view.getController() let oFileUploader = view.byId("fileToUpload") if (!oFileUploader.getValue()) { @@ -40,59 +83,128 @@ sap.ui.define([ oImageEditor.applyVisibleCrop() console.log(oImageEditor.getMode()) oFileUploader.getProcessedBlobsFromArray = async function (oBlobs) { - return new Promise(async (resolve, reject) => { - let newBlob = await oImageEditor.getImageAsBlob() + return new Promise(async(resolve, reject) => { + let newBlob = await oImageEditor.getImageAsBlob() resolve([newBlob]) - }) - } - controller.startBusy() - oFileUploader.upload(true) - }, + }) + } + controller.startBusy() + oFileUploader.upload(true) + }, - uploadStart: async function (oEvent) { - let view = this.getView() + uploadStart: async function (oEvent) { + let view = this.getView() let controller = view.getController() controller.startBusy() - }, + }, - uploadComplete: async function (oEvent) { - let view = this.getView() + 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) + onSaveAsPress: async function () { + let view = this.getView() + let controller = view.getController() + let oImageEditor = view.byId("image") + if (!oImageEditor.getLoaded()) { + MessageToast.show("Load a file first") + } else { + oImageEditor.openSaveDialog() + controller.openUrl('https://people.sap.com/', true) + } + + }, + onGetMyAvatar: async function () { + if (!this.oDefaultDialog) { + this.oDefaultDialog = new Dialog({ + title: "My SAP Community ID (e.g., john.smith)", + content : [ + new TextArea("communityID", { + width: "100%", + }) + + + ], + beginButton: new Button({ + type: ButtonType.Emphasized, + text: "OK", + press: function () { + this.oDefaultDialog.close(); + this.onGetAvatar(this.oDefaultDialog); + }.bind(this) + }), + endButton: new Button({ + text: "Close", + press: function () { + this.oDefaultDialog.close() + }.bind(this) + }) + }); + + // to get access to the controller's model + this.getView().addDependent(this.oDefaultDialog); + } - }, - onImageLoaded: async function (oEvent) { - let view = this.getView() + this.oDefaultDialog.open(); + + + + + }, + + onGetAvatar: async function(oDefaultDialog) { + let view = this.getView() + let oImageEditor = view.byId("image") + oImageEditor.setSrc("https://avatars.services.sap.com/images/" + oDefaultDialog.getContent()[0].getValue().trim() + ".png") + + }, + + 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") + }, + 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) + }, + + redirectFiori: function (url, newLang) { + if (url.includes("sap-language")) { + + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const lang = urlParams.get('sap-language') + return url.replace("sap-language=" + lang, "sap-language=" + newLang) + } else { + return url.replace("profilepic/", "profilepic/?sap-language=" + newLang) } - }) - } -) \ No newline at end of file + }, + + onLanguageChange: async function (oEvent) { + var selText = oEvent.getParameter("selectedItem").getText() + var selKey = oEvent.getParameter("selectedItem").getKey() + if (selKey != sap.ui.getCore().getConfiguration().getLanguage()) { + window.location.href = this.redirectFiori(window.location.href, selKey) + } + } + + }) +}) + + diff --git a/app/profilePic/profilePic/controller/webclient.js b/app/profilePic/profilePic/controller/webclient.js new file mode 100644 index 0000000..4026739 --- /dev/null +++ b/app/profilePic/profilePic/controller/webclient.js @@ -0,0 +1,20 @@ +const webclientBridge = { + onMessage: (payload) => { + payload.messages.forEach(element => { + if (element.participant.isBot && element.attachment.content.text.startsWith("SENDING AVATAR")) { + profile = element.attachment.content.text.substring(19) + window.sapcai.webclientBridge.imageeditor.setSrc("https://avatars.services.sap.com/images/" + profile + ".png") + } + }) + } + } + + window.sapcai = { + webclientBridge, + } + + // # Fill these in for your chatbot + // + // const data_expander_preferences = ""; + // const data_channel_id = ""; + // const data_token = ""; diff --git a/app/profilePic/profilePic/languages.json b/app/profilePic/profilePic/languages.json new file mode 100644 index 0000000..9fc4184 --- /dev/null +++ b/app/profilePic/profilePic/languages.json @@ -0,0 +1,8 @@ +{ +"title" : "TESTTEST", +"languages" : [ + { "code" : "en", "name" : "English" }, + {"code" : "fr" , "name" : "French" }, + {"code" : "he" , "name" : "Hebrew" } +] +} diff --git a/app/profilePic/profilePic/view/App.view.xml b/app/profilePic/profilePic/view/App.view.xml index abb2e60..0d48545 100644 --- a/app/profilePic/profilePic/view/App.view.xml +++ b/app/profilePic/profilePic/view/App.view.xml @@ -1,28 +1,29 @@ - - - - - - - - - - -