Create pages_gen
Browse files
pages_gen
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Form Viewer</title>
|
| 7 |
+
</head>
|
| 8 |
+
<body>
|
| 9 |
+
<div id="form-container"></div>
|
| 10 |
+
|
| 11 |
+
<script>
|
| 12 |
+
// Пример JSON-файла
|
| 13 |
+
const formJson = {
|
| 14 |
+
"components": [
|
| 15 |
+
{
|
| 16 |
+
"text": "# File an Invoice\n\nAdd your invoice details below.",
|
| 17 |
+
"type": "text",
|
| 18 |
+
"id": "Field_1na090z",
|
| 19 |
+
"layout": {
|
| 20 |
+
"row": "Row_0lmsy15"
|
| 21 |
+
}
|
| 22 |
+
},
|
| 23 |
+
{
|
| 24 |
+
"label": "Image view",
|
| 25 |
+
"type": "image",
|
| 26 |
+
"layout": {
|
| 27 |
+
"row": "Row_1ju954r",
|
| 28 |
+
"columns": null
|
| 29 |
+
},
|
| 30 |
+
"id": "Field_0kfhe9d",
|
| 31 |
+
"source": "https://i.ibb.co/NrZMfsR/105.png"
|
| 32 |
+
},
|
| 33 |
+
{
|
| 34 |
+
"key": "creditor",
|
| 35 |
+
"label": "Creditor",
|
| 36 |
+
"type": "textfield",
|
| 37 |
+
"validate": {
|
| 38 |
+
"required": true
|
| 39 |
+
},
|
| 40 |
+
"id": "Field_12chft0",
|
| 41 |
+
"layout": {
|
| 42 |
+
"row": "Row_1rvpcsw"
|
| 43 |
+
}
|
| 44 |
+
},
|
| 45 |
+
{
|
| 46 |
+
"description": "An invoice number in the format: C-123.",
|
| 47 |
+
"key": "invoiceNumber",
|
| 48 |
+
"label": "Invoice Number",
|
| 49 |
+
"type": "textfield",
|
| 50 |
+
"validate": {
|
| 51 |
+
"pattern": "^C-[0-9]+$"
|
| 52 |
+
},
|
| 53 |
+
"id": "Field_0jcge34",
|
| 54 |
+
"layout": {
|
| 55 |
+
"row": "Row_0960rdj"
|
| 56 |
+
}
|
| 57 |
+
},
|
| 58 |
+
{
|
| 59 |
+
"values": [
|
| 60 |
+
{
|
| 61 |
+
"label": "Value",
|
| 62 |
+
"value": "value"
|
| 63 |
+
}
|
| 64 |
+
],
|
| 65 |
+
"label": "Tag list",
|
| 66 |
+
"type": "taglist",
|
| 67 |
+
"layout": {
|
| 68 |
+
"row": "Row_1szoxy7",
|
| 69 |
+
"columns": null
|
| 70 |
+
},
|
| 71 |
+
"id": "Field_0mea1nt",
|
| 72 |
+
"key": "taglist_30y47"
|
| 73 |
+
},
|
| 74 |
+
{
|
| 75 |
+
"values": [
|
| 76 |
+
{
|
| 77 |
+
"label": "Value",
|
| 78 |
+
"value": "value"
|
| 79 |
+
}
|
| 80 |
+
],
|
| 81 |
+
"label": "Checkbox group",
|
| 82 |
+
"type": "checklist",
|
| 83 |
+
"layout": {
|
| 84 |
+
"row": "Row_1szoxy7",
|
| 85 |
+
"columns": null
|
| 86 |
+
},
|
| 87 |
+
"id": "Field_0u7r33p",
|
| 88 |
+
"key": "checklist_vyc3y"
|
| 89 |
+
},
|
| 90 |
+
{
|
| 91 |
+
"action": "submit",
|
| 92 |
+
"key": "submit",
|
| 93 |
+
"label": "Submit",
|
| 94 |
+
"type": "button",
|
| 95 |
+
"id": "Field_0ie528a",
|
| 96 |
+
"layout": {
|
| 97 |
+
"row": "Row_1szoxy7"
|
| 98 |
+
}
|
| 99 |
+
}
|
| 100 |
+
],
|
| 101 |
+
"schemaVersion": 16,
|
| 102 |
+
"exporter": {
|
| 103 |
+
"name": "form-js (https://demo.bpmn.io)",
|
| 104 |
+
"version": "1.8.3"
|
| 105 |
+
},
|
| 106 |
+
"type": "default",
|
| 107 |
+
"id": "Form_020yixm"
|
| 108 |
+
};
|
| 109 |
+
|
| 110 |
+
// Функция для генерации HTML-формы
|
| 111 |
+
function generateForm(formData) {
|
| 112 |
+
const container = document.getElementById('form-container');
|
| 113 |
+
formData.components.forEach(component => {
|
| 114 |
+
const element = document.createElement('div');
|
| 115 |
+
element.id = component.id;
|
| 116 |
+
|
| 117 |
+
if (component.type === 'text') {
|
| 118 |
+
element.innerHTML = `<p>${component.text}</p>`;
|
| 119 |
+
} else if (component.type === 'textfield') {
|
| 120 |
+
element.innerHTML = `<label for="${component.key}">${component.label}</label>
|
| 121 |
+
<input type="text" id="${component.key}" name="${component.key}" ${component.validate.required ? 'required' : ''}>`;
|
| 122 |
+
} else if (component.type === 'checklist') {
|
| 123 |
+
element.innerHTML = `<label>${component.label}</label>`;
|
| 124 |
+
component.values.forEach(value => {
|
| 125 |
+
element.innerHTML += `<input type="checkbox" id="${value.value}" name="${value.value}" value="${value.value}">
|
| 126 |
+
<label for="${value.value}">${value.label}</label>`;
|
| 127 |
+
});
|
| 128 |
+
} else if (component.type === 'button') {
|
| 129 |
+
element.innerHTML = `<button type="button" id="${component.key}">${component.label}</button>`;
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
container.appendChild(element);
|
| 133 |
+
});
|
| 134 |
+
}
|
| 135 |
+
|
| 136 |
+
// Генерация формы
|
| 137 |
+
generateForm(formJson);
|
| 138 |
+
</script>
|
| 139 |
+
</body>
|
| 140 |
+
</html>
|