concept-collection / stan-web-ide
stan-web-ide / src / stan / serverDialog.ts
79 lines · 2.4 KBBlameHistoryRaw
1import { DEFAULT_SERVER_URL, getServerUrl, LOCAL_SERVER_DOCKER_COMMAND, setServerUrl } from './settings';
2import './serverDialog.css';
4/** Small modal to view/change the compile-server URL. */
5export function showServerDialog(container: HTMLElement): void {
6 const overlay = document.createElement('div');
7 overlay.className = 'server-dialog-overlay';
8 const close = () => overlay.remove();
9 overlay.addEventListener('click', (event) => {
10 if (event.target === overlay) {
11 close();
12 }
13 });
15 const box = document.createElement('div');
16 box.className = 'server-dialog';
17 overlay.appendChild(box);
19 const title = document.createElement('h3');
20 title.textContent = 'Stan compilation server';
21 box.appendChild(title);
23 const description = document.createElement('p');
24 description.append(
25 'Compiling Stan programs to WebAssembly needs a compilation server (stan-wasm-wasi); sampling then runs locally in your browser. The default is a hosted instance — the first compile after an idle period may take ~30 s while it wakes. To run one on your machine instead:',
26 );
27 box.appendChild(description);
29 const command = document.createElement('p');
30 const code = document.createElement('code');
31 code.textContent = LOCAL_SERVER_DOCKER_COMMAND;
32 command.appendChild(code);
33 box.appendChild(command);
35 const note = document.createElement('p');
36 note.textContent = 'then set the URL to http://localhost:8083.';
37 box.appendChild(note);
39 const input = document.createElement('input');
40 input.type = 'text';
41 input.value = getServerUrl();
42 input.placeholder = DEFAULT_SERVER_URL;
43 input.spellcheck = false;
44 box.appendChild(input);
46 const buttons = document.createElement('div');
47 buttons.className = 'server-dialog-buttons';
48 const makeButton = (label: string, className: string, handler: () => void) => {
49 const button = document.createElement('button');
50 button.textContent = label;
51 if (className) {
52 button.className = className;
53 }
54 button.addEventListener('click', handler);
55 buttons.appendChild(button);
56 };
57 makeButton('Use default', '', () => {
58 input.value = DEFAULT_SERVER_URL;
59 });
60 makeButton('Cancel', '', close);
61 makeButton('Save', 'primary', () => {
62 setServerUrl(input.value);
63 close();
64 });
65 box.appendChild(buttons);
67 input.addEventListener('keydown', (event) => {
68 if (event.key === 'Enter') {
69 setServerUrl(input.value);
70 close();
71 } else if (event.key === 'Escape') {
72 close();
73 }
74 });
76 container.appendChild(overlay);
77 input.focus();
78 input.select();