From 206288856c8dd88521ec12bfd0708d1b5978cd4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=BCseyin=20Dereli?= Date: Fri, 4 Mar 2022 01:40:01 +0300 Subject: [PATCH] github profile picture import --- _i18n/messages.properties | 3 +- .../profilePic/controller/App.controller.js | 248 ++++++++++++------ app/profilePic/profilePic/view/App.view.xml | 5 +- package-lock.json | 41 +++ package.json | 1 + routes/ghProfilePicture.js | 101 +++++++ 6 files changed, 311 insertions(+), 88 deletions(-) create mode 100644 routes/ghProfilePicture.js diff --git a/_i18n/messages.properties b/_i18n/messages.properties index 37ffeec..0eb7723 100644 --- a/_i18n/messages.properties +++ b/_i18n/messages.properties @@ -10,4 +10,5 @@ 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 +gui.loadingLong=Please wait ...Processing Picture +btnGHImport=Import From Github \ 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..5570ed0 100644 --- a/app/profilePic/profilePic/controller/App.controller.js +++ b/app/profilePic/profilePic/controller/App.controller.js @@ -1,98 +1,180 @@ /* eslint-disable no-undef */ /*eslint-env es6 */ "use strict"; -sap.ui.define([ +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) { + "sap/suite/ui/commons/library", + "sap/m/Dialog", + ], + function ( + BaseController, + MessageToast, + oCore, + JSONModel, + Device, + SuiteLibrary, + Dialog + ) { + return BaseController.extend("profilePic.controller.App", { + onInit: function () { + var oImageEditor = this.getView().byId("image"), + oModel = new JSONModel({ + blocked: true, + username: "", + ghRateLimit: {}, + }); - 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" + ); + } + }, - 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() - }, + 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(); + oFileUploader.getProcessedBlobsFromArray = async function (oBlobs) { + return new Promise(async (resolve, reject) => { + let newBlob = await oImageEditor.getImageAsBlob(); + resolve([newBlob]); + }); + }; + controller.startBusy(); + oFileUploader.upload(true); + }, - 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) - }, + uploadStart: async function (oEvent) { + let view = this.getView(); + let controller = view.getController(); + controller.startBusy(); + }, - 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) + 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); + }, - }, - 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 + 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.CropRectangle); + }, + 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); + }, + onGHImportPressed: async function (oEvent) { + var oModel = this.getView().getModel(); + // Get Rate Limit + $.get( + "/gh_rate_limit", + function (resp) { + oModel.setProperty("/ghRateLimit", resp); + this.askForGHUsername(); + }.bind(this) + ); + }, + askForGHUsername: function () { + var oModel = this.getView().getModel(); + if (!this.oUsernameDialog) { + this.oUsernameDialog = new Dialog({ + title: "Enter Github Username", + content: new sap.m.VBox({ + justifyContent: "Center", + items: [ + new sap.m.Input({ + value: "{/username}", + }).addStyleClass("sapUiTinyMarginBottom"), + new sap.m.MessageStrip({ + type: "Information", + showIcon: true, + text: "Github api rate limit {/ghRateLimit/rate/remaining} / {/ghRateLimit/rate/limit}", + }), + ], + }).addStyleClass("sapUiTinyMargin"), + beginButton: new sap.m.Button({ + type: sap.m.ButtonType.Emphasized, + text: "OK", + press: function () { + // Check Username + let username = oModel.getProperty("/username"); + if (username && username.length > 0) { + this.getGHProfilePicture(username); + } else { + MessageToast.show("Please provide a username"); } - this.getView().getModel().setProperty("/blocked", true) - await oImageEditor.setSrc(oFile) + this.oUsernameDialog.close(); + }.bind(this), + }), + endButton: new sap.m.Button({ + text: "Close", + press: function () { + this.oUsernameDialog.close(); + }.bind(this), + }), + }); + // to get access to the controller's model + this.getView().addDependent(this.oUsernameDialog); + } + + this.oUsernameDialog.open(); + }, - } - }) - } -) \ No newline at end of file + getGHProfilePicture: function (username) { + let view = this.getView(); + let controller = view.getController(); + let oImageEditor = view.byId("image"); + controller.startBusy(); + // Get URL + let dataURL; + // Get processed image and set to image editor src + $.post(`/gh_profile_pic/${username}`, function (resp) { + dataURL = "data:image/png;base64," + resp; + oImageEditor.setSrc(dataURL); + controller.endBusy(controller); + }).fail(function () { + controller.endBusy(controller); + MessageToast.show("error"); + }); + }, + }); + } +); diff --git a/app/profilePic/profilePic/view/App.view.xml b/app/profilePic/profilePic/view/App.view.xml index abb2e60..9347cec 100644 --- a/app/profilePic/profilePic/view/App.view.xml +++ b/app/profilePic/profilePic/view/App.view.xml @@ -14,15 +14,12 @@ +