diff --git a/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget.js b/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget.js new file mode 100644 index 0000000..c093f30 --- /dev/null +++ b/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget.js @@ -0,0 +1,74 @@ +(function () { + let template = document.createElement("template"); + template.innerHTML = ` + +
+

Current Conversion Rate:

+
+ `; + + class CurrencyWidget extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({ + mode: "open" + }); + shadowRoot.appendChild(template.content.cloneNode(true)); + this._props = {}; + } + + async connectedCallback() { + this.updateConversionRate(); + this.interval = setInterval(() => { + this.updateConversionRate(); + }, 4000); + } + + disconnectedCallback() { + clearInterval(this.interval); + } + + async updateConversionRate() { + const from = this._props.from || "USD"; + const to = this._props.to || "INR"; + const amount = this._props.amount || 1; + const decimalPlaces = this._props.decimalPlaces || 2; + //const price= this._props.amountprice|| 0; + + const url = `https://api.exchangerate.host/convert?from=${from}&to=${to}&amount=${amount}`; + const response = await fetch(url); + const data = await response.json(); + + const conversionRate = data.result.toFixed(decimalPlaces); + const conversionRateElement = this.shadowRoot.getElementById("conversionRate"); + conversionRateElement.innerText = `${conversionRate} ${to}/${from}`; + const getprice = conversionRate.toString(); + this.setValues(getprice); + } + + onCustomWidgetBeforeUpdate(changedProperties) { + this._props = { + ...this._props, + ...changedProperties + }; + } + + setValues(_price) { + const calculatedRate = _price; + this.dispatchEvent(new CustomEvent("propertiesChanged", { + detail: { + properties: { + calculatedRate: calculatedRate + } + } + })); + } + + onCustomWidgetAfterUpdate(changedProperties) { + } + } + + customElements.define("com-rohitchouhan-sap-currencywidget", CurrencyWidget); +})(); diff --git a/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget.json b/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget.json new file mode 100644 index 0000000..8a7c4f0 --- /dev/null +++ b/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget.json @@ -0,0 +1,130 @@ +{ + "id": "com.rohitchouhan.sap.currencywidget", + "version": "1.0.4", + "name": "Currency Widget", + "description": "This is a custom widget that displays the real-time currency conversion rate between two currencies. It can be used in SAP applications to enhance user experience by providing quick access to currency conversion information.", + "newInstancePrefix": "CurrencyWidget", + "vendor": "Rohit Chouhan", + "eula": "", + "license": "MIT", + "icon": "/icon.png", + "webcomponents": [ + { + "kind": "main", + "tag": "com-rohitchouhan-sap-currencywidget", + "url": "/CurrencyWidget.js", + "integrity": "", + "ignoreIntegrity": true + }, + { + "kind": "builder", + "tag": "com-rohitchouhan-sap-currencywidget-builder", + "url": "/CurrencyWidget_Builder.js", + "integrity": "", + "ignoreIntegrity": true + } + ], + "properties": { + "from": { + "description": "Source Currency Code", + "type": "string", + "default": "USD" + }, + "to": { + "description": "Target Currency Code", + "type": "string", + "default": "INR" + }, + "amount": { + "description": "Amount to Calculate", + "type": "integer", + "default": 10 + }, + "decimalPlaces": { + "description": "Decimal Values", + "type": "integer", + "default": 2 + }, + "calculatedRate": { + "description": "Calculated Currency Rate", + "type": "string", + "default": "" + } + }, + "methods": { + "setFrom": { + "description": "Set Source Currency Code", + "parameters": [ + { + "name": "from", + "type": "string", + "description": "Source Currency Code" + } + ], + "body": "this.from = from;" + }, + "getFrom": { + "returnType": "string", + "description": "Return Source Currency Code", + "body": "return this.from;" + }, + "setTo": { + "description": "Set Target Currency Code", + "parameters": [ + { + "name": "to", + "type": "string", + "description": "Target Currency Code" + } + ], + "body": "this.to = to;" + }, + "getTo": { + "returnType": "string", + "description": "Return Target Currency Code", + "body": "return this.to;" + }, + "setAmount": { + "description": "Set Amount to Calculate", + "parameters": [ + { + "name": "amount", + "type": "integer", + "description": "Amount to Calculate" + } + ], + "body": "this.amount = amount;" + }, + "getAmount": { + "returnType": "integer", + "description": "Return Amount to Calculate", + "body": "return this.amount;" + }, + "setDecimalPlaces": { + "description": "Set Decimal Values", + "parameters": [ + { + "name": "decimalPlaces", + "type": "integer", + "description": "Decimal Values" + } + ], + "body": "this.decimalPlaces = decimalPlaces;" + }, + "getDecimalPlaces": { + "returnType": "integer", + "description": "Return Decimal Values", + "body": "return this.decimalPlaces;" + }, + "getCalculatedRate": { + "returnType": "string", + "description": "Return Calculated Currency Rate", + "body": "return this.calculatedRate;" + } + }, + "events": { + "onClick": { + "description": "User Clicked." + } + } +} diff --git a/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget_Builder.js b/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget_Builder.js new file mode 100644 index 0000000..d673e2c --- /dev/null +++ b/Custom-Widget-Samples/Currency Conversion Widget/CurrencyWidget_Builder.js @@ -0,0 +1,168 @@ + +(function () { + let template = document.createElement("template"); + template.innerHTML = ` +
+ +
+ + + + + + + + + + + + + + +
+

Source Currency Code

+ +
+

Target Currency Code

+ +
+

Amount to Calculate

+ +
+

Decimal Values

+ +
+ +
+

Developed by Rohit Chouhan

+
+`; + class CurrencyWidgetBuilderPanel extends HTMLElement { + constructor() { + super(); + this._shadowRoot = this.attachShadow({ + mode: "open" + }); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + this._shadowRoot + .getElementById("form") + .addEventListener("submit", this._submit.bind(this)); + } + _submit(e) { + e.preventDefault(); + this.dispatchEvent( + new CustomEvent("propertiesChanged", { + detail: { + properties: { + from: this.from,to: this.to,amount: this.amount,decimalPlaces: this.decimalPlaces + }, + }, + }) + ); + } + + set from(_from) { + this._shadowRoot.getElementById("builder_from").value = _from; + } + get from() { + return this._shadowRoot.getElementById("builder_from").value; + } + + set to(_to) { + this._shadowRoot.getElementById("builder_to").value = _to; + } + get to() { + return this._shadowRoot.getElementById("builder_to").value; + } + + set amount(_amount) { + this._shadowRoot.getElementById("builder_amount").value = _amount; + } + get amount() { + return this._shadowRoot.getElementById("builder_amount").value; + } + + set decimalPlaces(_decimalPlaces) { + this._shadowRoot.getElementById("builder_decimalPlaces").value = _decimalPlaces; + } + get decimalPlaces() { + return this._shadowRoot.getElementById("builder_decimalPlaces").value; + } + + } + customElements.define("com-rohitchouhan-sap-currencywidget-builder", + CurrencyWidgetBuilderPanel + ); +})(); \ No newline at end of file diff --git a/Custom-Widget-Samples/Currency Conversion Widget/icon.png b/Custom-Widget-Samples/Currency Conversion Widget/icon.png new file mode 100644 index 0000000..6d3af8e Binary files /dev/null and b/Custom-Widget-Samples/Currency Conversion Widget/icon.png differ diff --git a/Custom-Widget-Samples/Currency Conversion Widget/screenshot.png b/Custom-Widget-Samples/Currency Conversion Widget/screenshot.png new file mode 100644 index 0000000..968faa8 Binary files /dev/null and b/Custom-Widget-Samples/Currency Conversion Widget/screenshot.png differ