-
Notifications
You must be signed in to change notification settings - Fork 0
/
uuid.html
114 lines (109 loc) · 3.87 KB
/
uuid.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en" class="d-flex h-100">
<head>
<meta charset="UTF-8">
<title>UUID Generator</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚙️</text></svg>">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="theme.css" rel="stylesheet" />
<script type="module" src="darkModeSupport.js" defer></script><!DOCTYPE html>
</head>
<body class="flex-fill d-flex">
<div class="flex-fill container d-flex flex-column p-3">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item"><a href="index.html">Web shorts</a></li>
<li class="breadcrumb-item active" aria-current="page">
UUID generator
</li>
</ol>
</nav>
<p class="mb-3">
Create a random UUID V4 from your navigator
</p>
<form id="config" class="mb-3 row">
<div class="col">
<label id="uuidCountLabel" for="uuidCount">Count</label>
<input id="uuidCount"
name="uuidCount"
class="form-control"
aria-labelledby="uuidCountLabel"
type="number"
value="10"
min="1"
step="1"
max="100"
/>
</div>
</form>
<form id="uuidForm">
<div class="mb-3">
<label id="uuidLabel" for="password">Generated UUIDs</label>
<textarea id="uuid"
name="uuid"
class="form-control"
aria-labelledby="uuidLabel"
readonly
style="font-family: 'Source Code Pro', 'Lucida Console', 'Courier New', monospace"
rows="20"
>
</textarea>
</div>
<div>
<button id="copyClipboard" class="btn btn-primary btn-icon-text">
Copy to clipboard
</button>
<button id="regenerate" class="btn btn-outline-primary btn-icon-text">
Regenerate
</button>
</div>
</form>
</div>
<script type="module">
import { fromEvent, concat, of, merge, switchMap, map, tap, startWith, distinctUntilChanged } from "https://esm.sh/[email protected]";
import { randomUUID } from "./uuid.js";
const configForm = document.forms.config;
const configuration = merge(
fromEvent(configForm, 'input'),
fromEvent(configForm, 'change')
)
.pipe(
startWith(undefined),
map(() => Array
.from(new FormData(configForm).entries())
.reduce(
(col, [key, val]) => ({...col, [key]: val}),
{}
)
),
map(({uuidCount, ...rest}) => ({uuidCount: Math.min(Math.max(Math.floor(Number(uuidCount) || 0), 1), 100), ...rest})),
distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
);
const result = document.getElementById("uuid");
const regenerate = fromEvent(document.getElementById("regenerate"), 'click')
.pipe(
tap(event => event.preventDefault())
);
configuration
.pipe(
switchMap(conf => concat(of(undefined), regenerate).pipe(
map(() => conf),
)),
map(({uuidCount}) => Array.from({length: uuidCount}, randomUUID).join("\n")),
)
.subscribe(r => result.value = r);
fromEvent(document.forms.uuidForm, 'submit')
.pipe(
tap(event => event.preventDefault())
)
.subscribe(() => {
if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(result.value);
} else {
result.select();
document.execCommand("copy");
}
});
</script>
</body>
</html>