Public
Script
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource npm:hono/jsx */
import { Invoice, schema } from "https://esm.town/v/pomdtr/invoice_schema";
const example_invoice: Invoice = {
"id": "20240401",
"issued": "2024-01-01",
"due": "2024-01-15",
"currencies": [{ "code": "USD" }, { "code": "EUR", rate: 0.94 }],
"tax": 10,
"from": {
"name": "pomdtr",
},
"to": {
"name": "Val Town",
},
"items": [
{
"title": {
"en-US": "Creation of JSON Invoice Website",
"fr-FR": "Création du site JSON Invoice",
},
"quantity": 7,
"price": 70,
},
],
};
export function Editor() {
return (
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>JSON Invoice - Editor</title>
<link rel="icon" href="https://fav.farm/📃" />
<script
type="module"
src="https://raw.esm.sh/code-mirror-web-component@0.1.0/dist/json-editor.js"
>
</script>
<script type="module" src="https://esm.town/v/pomdtr/jsoninvoice_editor_script"></script>
</head>
<body class="h-screen">
<main class="flex flex-col p-2 h-full">
<nav class="flex justify-between items-center p-2">
<a href="/">
<h1 class="text-xl font-bold">JSON Invoice</h1>
</a>
</nav>
<section class="flex flex-grow gap-x-2 mt-2 overflow-hidden">
<div class="flex flex-col flex-1 border rounded divide-y divide-gray-300 border-gray-300">
<div class="flex justify-end p-2">
<div class="flex gap-x-1 items-center">
<button id="format-btn" class="px-2 py-1 text-gray-500 hover:bg-gray-100 rounded-sm border">
Format
</button>
<button id="copy-btn" class="px-2 py-1 text-gray-500 hover:bg-gray-100 rounded border">Copy</button>
</div>
</div>
<json-editor
id="editor"
class="flex-grow overflow-hidden"
schema={JSON.stringify(schema)}
code={JSON.stringify(example_invoice, null, 2)}
>
</json-editor>
</div>
<div class="flex flex-col flex-1 border rounded divide-y divide-gray-300 border-gray-300">
<div class="flex justify-between p-2 items-center">
<div class="flex gap-x-5 items-center">
<div class="flex gap-x-2 items-center">
<label for="languages">Language:</label>
<select
id="languages"
class="px-2 py-1 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg"
>
<option selected>en-US</option>
<option>fr-FR</option>
</select>
</div>
<div class="flex gap-x-2 items-center">
<label for="currencies">Currency:</label>
<select
id="currencies"
class="px-2 py-1 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg"
>
<option selected>USD</option>
<option>EUR</option>
</select>
</div>
</div>
<div class="flex gap-x-1 items-center">
<button id="print-btn" class="px-2 py-1 bg-amber-500 hover:bg-amber-400 rounded text-white border">
Print
</button>
</div>
</div>
<iframe src="about:blank" class="flex-grow" id="preview"></iframe>
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
April 24, 2024