114 lines
2.5 KiB
JavaScript
114 lines
2.5 KiB
JavaScript
import { createStyledElement } from "./utils.js";
|
|
|
|
export class DialogManager {
|
|
static showCreateDialog(onCreateCallback) {
|
|
const dialog = createStyledElement("div", {
|
|
position: "fixed",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
padding: "20px",
|
|
border: "2px solid #333",
|
|
borderRadius: "8px",
|
|
backgroundColor: "white",
|
|
zIndex: "1001",
|
|
boxShadow: "0 4px 8px rgba(0,0,0,0.3)",
|
|
});
|
|
|
|
const title = createStyledElement(
|
|
"h3",
|
|
{ margin: "0 0 15px 0" },
|
|
{ textContent: "Create New Bar" },
|
|
);
|
|
|
|
const inputStyles = {
|
|
display: "block",
|
|
margin: "5px 0",
|
|
padding: "8px",
|
|
width: "200px",
|
|
};
|
|
|
|
const barIdInput = createStyledElement("input", inputStyles, {
|
|
type: "text",
|
|
placeholder: "Bar ID",
|
|
});
|
|
|
|
const urlInput = createStyledElement("input", inputStyles, {
|
|
type: "text",
|
|
placeholder: "WebSocket URL",
|
|
value: "192.168.4.1",
|
|
});
|
|
|
|
const colorInput = createStyledElement("input", inputStyles, {
|
|
type: "color",
|
|
value: "#ff0000",
|
|
});
|
|
|
|
const xInput = createStyledElement("input", inputStyles, {
|
|
type: "number",
|
|
placeholder: "X Position",
|
|
value: "100",
|
|
});
|
|
|
|
const yInput = createStyledElement("input", inputStyles, {
|
|
type: "number",
|
|
placeholder: "Y Position",
|
|
value: "100",
|
|
});
|
|
|
|
const buttonStyles = {
|
|
padding: "8px 12px",
|
|
border: "none",
|
|
borderRadius: "4px",
|
|
cursor: "pointer",
|
|
color: "white",
|
|
};
|
|
|
|
const createBtn = createStyledElement(
|
|
"button",
|
|
{
|
|
...buttonStyles,
|
|
margin: "10px 5px 0 0",
|
|
backgroundColor: "#4CAF50",
|
|
},
|
|
{ textContent: "Create" },
|
|
);
|
|
|
|
const cancelBtn = createStyledElement(
|
|
"button",
|
|
{
|
|
...buttonStyles,
|
|
margin: "10px 0 0 0",
|
|
backgroundColor: "#f44336",
|
|
},
|
|
{ textContent: "Cancel" },
|
|
);
|
|
|
|
createBtn.onclick = () => {
|
|
const barData = {
|
|
barId: barIdInput.value,
|
|
url: `ws://${urlInput.value}/ws`,
|
|
color: colorInput.value,
|
|
x: parseInt(xInput.value),
|
|
y: parseInt(yInput.value),
|
|
};
|
|
onCreateCallback(barData);
|
|
document.body.removeChild(dialog);
|
|
};
|
|
|
|
cancelBtn.onclick = () => document.body.removeChild(dialog);
|
|
|
|
dialog.append(
|
|
title,
|
|
barIdInput,
|
|
urlInput,
|
|
colorInput,
|
|
xInput,
|
|
yInput,
|
|
createBtn,
|
|
cancelBtn,
|
|
);
|
|
document.body.appendChild(dialog);
|
|
}
|
|
}
|