-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (72 loc) · 2.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JSON Editor</title>
<link rel="stylesheet" href="./src/index.css" />
<script type="module">
import { patchValue } from "/src/index.ts";
window.addEventListener("load", async () => {
const jsonUIElement = document.querySelector("json-ui-element");
const el = document.createElement("json-ui-element");
const presetBtn = document.createElement("button-element");
presetBtn.innerHTML = "Apply Preset";
Object.assign(el, {
// schema: {
// type: "array",
// items: { enum: ["EN", "DE", "FR", "PL"] },
// minItems: 1,
// maxItems: 2,
// default: ["EN"],
// uniqueItems: true,
// },
schema: await (await fetch("./fixtures/coa-schema.json")).json(),
// schema: await (await fetch("./fixtures/coa-schema.json")).json(),
path: location.hash.replace(/#/i, "").replaceAll("/", "."),
value: JSON.parse(localStorage.getItem("JSON_UI_VALUE")),
});
el.addEventListener("change", (e) => {
localStorage.setItem("JSON_UI_VALUE", JSON.stringify(e.detail));
});
el.addEventListener("navigate", (e) => {
location.hash = e.detail.replaceAll(".", "/");
});
presetBtn.addEventListener("click", () => {
el.value = {
Certificate: {
CertificateLanguages: ["EN"],
Parties: {
Manufacturer: {
City: "Berlin",
Name: "Green Plastics AG",
Email: "[email protected]",
Street: "Kunststoffgasse 1",
Country: "DE",
ZipCode: "10003",
Identifiers: {
VAT: "AT123456789",
DUNS: "",
CageCode: "",
},
},
},
Standard: {
Norm: "asdasdasd",
},
},
};
});
document.querySelector("#actions").appendChild(presetBtn);
document.querySelector("#host").appendChild(el);
});
</script>
</head>
<body class="bg-slate-100">
<div id="actions" class="mx-auto mt-4 mb-2 max-w-4xl p-8"></div>
<div
id="host"
class="mx-auto mb-16 max-w-4xl px-8 py-16 shadow-2xl rounded-2xl bg-white"
></div>
</body>
</html>