106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
(function (blocks, element, blockEditor, components) {
|
|
var el = element.createElement;
|
|
var useBlockProps = blockEditor.useBlockProps;
|
|
var BlockControls = blockEditor.BlockControls;
|
|
var AlignmentToolbar = blockEditor.AlignmentToolbar;
|
|
var TextControl = components.TextControl;
|
|
|
|
blocks.registerBlockType("maple/roi-calculator", {
|
|
title: "ROI Calculator",
|
|
icon: "calculator",
|
|
category: "common",
|
|
attributes: {
|
|
align: {
|
|
type: "string",
|
|
},
|
|
},
|
|
supports: {
|
|
align: true,
|
|
},
|
|
edit: function (props) {
|
|
const blockProps = useBlockProps({
|
|
className: props.attributes.align
|
|
? "align" + props.attributes.align
|
|
: "",
|
|
});
|
|
|
|
return [
|
|
el(
|
|
BlockControls,
|
|
{ key: "controls" },
|
|
el(AlignmentToolbar, {
|
|
value: props.attributes.align,
|
|
onChange: (newAlign) => {
|
|
props.setAttributes({ align: newAlign });
|
|
},
|
|
}),
|
|
),
|
|
el(
|
|
"div",
|
|
blockProps,
|
|
el("h2", {}, "ROI Calculator"),
|
|
el(
|
|
"form",
|
|
{ className: "maple-calc-form" },
|
|
el(
|
|
"div",
|
|
{ className: "form-group" },
|
|
el(TextControl, {
|
|
label: "Initial Investment ($)",
|
|
type: "number",
|
|
value: "",
|
|
onChange: () => {},
|
|
}),
|
|
),
|
|
el(
|
|
"div",
|
|
{ className: "form-group" },
|
|
el(TextControl, {
|
|
label: "Annual Return Rate (%)",
|
|
type: "number",
|
|
value: "",
|
|
onChange: () => {},
|
|
}),
|
|
),
|
|
el(
|
|
"div",
|
|
{ className: "form-group" },
|
|
el(TextControl, {
|
|
label: "Time (Years)",
|
|
type: "number",
|
|
value: "",
|
|
onChange: () => {},
|
|
}),
|
|
),
|
|
el(
|
|
"button",
|
|
{ type: "button", className: "calculate-button" },
|
|
"Calculate",
|
|
),
|
|
),
|
|
el(
|
|
"div",
|
|
{ className: "results" },
|
|
el("h3", {}, "Results"),
|
|
el("p", {}, el("strong", {}, "Final Value: "), "$---"),
|
|
el("p", {}, el("strong", {}, "Net Profit: "), "$---"),
|
|
el("p", {}, el("strong", {}, "ROI (%): "), "---%"),
|
|
el(
|
|
"div",
|
|
{ className: "chart-container" },
|
|
el("canvas", { className: "roi-chart" }),
|
|
),
|
|
),
|
|
),
|
|
];
|
|
},
|
|
save: function () {
|
|
return null;
|
|
},
|
|
});
|
|
})(
|
|
window.wp.blocks,
|
|
window.wp.element,
|
|
window.wp.blockEditor,
|
|
window.wp.components,
|
|
);
|