mirror of
https://github.com/alexandrev/xslt-lab.git
synced 2026-09-20 04:23:16 +00:00
fix frontend App.jsx syntax
This commit is contained in:
+81
-40
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import Editor from '@monaco-editor/react';
|
||||
import { useState, useEffect } from "react";
|
||||
import Editor from "@monaco-editor/react";
|
||||
|
||||
function debounce(fn, delay) {
|
||||
let t;
|
||||
@@ -10,11 +10,15 @@ function debounce(fn, delay) {
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [params, setParams] = useState([{ name: 'input1', value: '<root/>', open: true }]);
|
||||
const [xslt, setXslt] = useState('<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n<xsl:template match="/">\n<root/>\n</xsl:template>\n</xsl:stylesheet>');
|
||||
const [result, setResult] = useState('');
|
||||
const [version, setVersion] = useState('1.0');
|
||||
const [error, setError] = useState('');
|
||||
const [params, setParams] = useState([
|
||||
{ name: "input1", value: "<root/>", open: true },
|
||||
]);
|
||||
const [xslt, setXslt] = useState(
|
||||
`<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n<xsl:template match="/">\n<root/>\n</xsl:template>\n</xsl:stylesheet>`,
|
||||
);
|
||||
const [result, setResult] = useState("");
|
||||
const [version, setVersion] = useState("1.0");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const runTransform = debounce(async (xsltText, ver, p) => {
|
||||
const paramObj = {};
|
||||
@@ -22,23 +26,27 @@ export default function App() {
|
||||
if (pr.name) paramObj[pr.name] = pr.value;
|
||||
});
|
||||
try {
|
||||
const res = await fetch('/transform', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ xslt: xsltText, version: ver, parameters: paramObj }),
|
||||
const res = await fetch("/transform", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
xslt: xsltText,
|
||||
version: ver,
|
||||
parameters: paramObj,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const txt = await res.text();
|
||||
setError(txt || res.statusText);
|
||||
setResult('');
|
||||
setResult("");
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
setResult(data.result);
|
||||
setError('');
|
||||
setError("");
|
||||
} catch (e) {
|
||||
setError(String(e));
|
||||
setResult('');
|
||||
setResult("");
|
||||
}
|
||||
}, 500);
|
||||
|
||||
@@ -55,7 +63,7 @@ export default function App() {
|
||||
};
|
||||
|
||||
const addParam = () => {
|
||||
setParams((p) => [...p, { name: '', value: '', open: false }]);
|
||||
setParams((p) => [...p, { name: "", value: "", open: false }]);
|
||||
};
|
||||
|
||||
const removeParam = (index) => {
|
||||
@@ -71,9 +79,9 @@ export default function App() {
|
||||
};
|
||||
|
||||
const download = (data, filename) => {
|
||||
const blob = new Blob([data], { type: 'text/xml' });
|
||||
const blob = new Blob([data], { type: "text/xml" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
@@ -84,65 +92,99 @@ export default function App() {
|
||||
<div className="app-container">
|
||||
<div className="main">
|
||||
<div className="params">
|
||||
<div style={{ marginBottom: '0.5rem' }}>
|
||||
<div style={{ marginBottom: "0.5rem" }}>
|
||||
<button onClick={addParam}>Add Parameter</button>
|
||||
</div>
|
||||
{params.map((p, i) => (
|
||||
<div key={i} style={{ border: '1px solid #ccc', marginBottom: '0.5rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', padding: '0.25rem' }}>
|
||||
<div
|
||||
key={i}
|
||||
style={{ border: "1px solid #ccc", marginBottom: "0.5rem" }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0.25rem",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
style={{ flex: 1 }}
|
||||
placeholder="name"
|
||||
value={p.name}
|
||||
onChange={(e) => updateParam(i, 'name', e.target.value)}
|
||||
onChange={(e) => updateParam(i, "name", e.target.value)}
|
||||
/>
|
||||
<button onClick={() => updateParam(i, 'open', !p.open)}>{p.open ? '-' : '+'}</button>
|
||||
<button onClick={() => updateParam(i, "open", !p.open)}>
|
||||
{p.open ? "-" : "+"}
|
||||
</button>
|
||||
<button onClick={() => removeParam(i)}>x</button>
|
||||
</div>
|
||||
{p.open && (
|
||||
<div style={{ height: '150px' }}>
|
||||
<div style={{ height: "150px" }}>
|
||||
<Editor
|
||||
height="150px"
|
||||
language="xml"
|
||||
value={p.value}
|
||||
onChange={(v) => updateParam(i, 'value', v || '')}
|
||||
onChange={(v) => updateParam(i, "value", v || "")}
|
||||
options={{ minimap: { enabled: false } }}
|
||||
/>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div
|
||||
style={{ display: "flex", justifyContent: "space-between" }}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept=".xml"
|
||||
onChange={(e) => loadFile(e, (text) => updateParam(i, 'value', text))}
|
||||
onChange={(e) =>
|
||||
loadFile(e, (t) => updateParam(i, "value", t))
|
||||
}
|
||||
/>
|
||||
<button onClick={() => download(p.value, `${p.name || 'param'}.xml`)}>
|
||||
<button
|
||||
onClick={() =>
|
||||
download(p.value, `${p.name || "param"}.xml`)
|
||||
}
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="editor">
|
||||
<div style={{ marginBottom: '0.5rem' }}>
|
||||
<select value={version} onChange={(e) => setVersion(e.target.value)}>
|
||||
<div style={{ marginBottom: "0.5rem" }}>
|
||||
<select
|
||||
value={version}
|
||||
onChange={(e) => setVersion(e.target.value)}
|
||||
>
|
||||
<option value="1.0">XSLT 1.0</option>
|
||||
<option value="2.0">XSLT 2.0</option>
|
||||
</select>
|
||||
<input type="file" accept=".xsl,.xslt" onChange={(e) => loadFile(e, setXslt)} style={{ marginLeft: '0.5rem' }} />
|
||||
<button onClick={() => download(xslt, 'transform.xsl')} style={{ marginLeft: '0.5rem' }}>Download</button>
|
||||
<input
|
||||
type="file"
|
||||
accept=".xsl,.xslt"
|
||||
onChange={(e) => loadFile(e, setXslt)}
|
||||
style={{ marginLeft: "0.5rem" }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => download(xslt, "transform.xsl")}
|
||||
style={{ marginLeft: "0.5rem" }}
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
<Editor
|
||||
height="calc(100% - 40px)"
|
||||
language="xml"
|
||||
value={xslt}
|
||||
onChange={(v) => setXslt(v || '')}
|
||||
onChange={(v) => setXslt(v || "")}
|
||||
options={{ minimap: { enabled: false } }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="result" style={{ position: 'relative' }}>
|
||||
{error && <div style={{ color: 'red', padding: '0.5rem' }}>{error}</div>}
|
||||
<div className="result" style={{ position: "relative" }}>
|
||||
{error && (
|
||||
<div style={{ color: "red", padding: "0.5rem" }}>{error}</div>
|
||||
)}
|
||||
<Editor
|
||||
height="100%"
|
||||
language="xml"
|
||||
@@ -155,11 +197,10 @@ export default function App() {
|
||||
);
|
||||
}
|
||||
|
||||
// Firebase Auth (optional)
|
||||
/*
|
||||
// import { initializeApp } from "firebase/app";
|
||||
// import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
|
||||
// const firebaseConfig = { /* your config */ };
|
||||
/* Optional Firebase Auth example
|
||||
import { initializeApp } from 'firebase/app';
|
||||
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
|
||||
// const firebaseConfig = { ... };
|
||||
// const app = initializeApp(firebaseConfig);
|
||||
// const auth = getAuth(app);
|
||||
// const provider = new GoogleAuthProvider();
|
||||
|
||||
Reference in New Issue
Block a user