I tried a few days ago to create html files from RC files using the rc.prgr. However, I couldn't find a quick solution for how to solve the positioning.
In html, I have a row/column-based positioning and with the RC files, it's absolute.
It then requires a bit of logic to implement this, and I eventually gave up on the attempt. It's interesting that I can't find any RC2HTML converters on the web.
I tried with JavaScript. First, I made a JSON but now I have the elements but not the positioning.
Code: Select all | Expand
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Formular aus JSON</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h1>Formular</h1>
<form action="#">
<div class="input-fields">
</div>
<div class="static-fields">
</div>
<div class="edit-fields">
</div>
<div class="buttons">
</div>
</form>
<script>
const data = {
"Steuerelemente": [
{
"Typ": "Static",
"Beschriftung": "Name",
"ID": 200,
"Position": [44, 8, 20, 8]
},
{
"Typ": "Static",
"Beschriftung": "Name2",
"ID": 201,
"Position": [32, 24, 34, 8]
},
{
"Typ": "Static",
"Beschriftung": "Straße",
"ID": 202,
"Position": [40, 40, 27, 8]
},
{
"Typ": "Static",
"Beschriftung": "Ort",
"ID": 203,
"Position": [48, 56, 16, 8]
},
{
"Typ": "Static",
"Beschriftung": "KontoNR/Bank",
"ID": 205,
"Position": [8, 72, 59, 8]
},
{
"Typ": "Static",
"Beschriftung": "Währung",
"ID": 204,
"Position": [288, 52, 33, 8]
},
{
"Typ": "Static",
"Beschriftung": "Kurtaxe €",
"ID": 211,
"Position": [288, 80, 33, 8]
},
{
"Typ": "Button",
"Beschriftung": "Terminvormerk",
"ID": 250,
"Position": [300, 20, 83, 12]
},
{
"Typ": "Button",
"Beschriftung": "Kellnercodes",
"ID": 5999,
"Position": [368, 44, 120, 11]
},
{
"Typ": "Static",
"Beschriftung": "Anzahl der Betten",
"ID": -1,
"Position": [308, 180, 116, 8]
},
{
"Typ": "Static",
"Beschriftung": "Betriebsstammdaten",
"ID": 231,
"Position": [308, 152, 116, 8]
},
{
"Typ": "Static",
"Beschriftung": "ATU-NR",
"ID": -1,
"Position": [36, 88, 28, 8]
},
{
"Typ": "Static",
"Beschriftung": "Anzahl der Zimmer",
"ID": -1,
"Position": [308, 164, 116, 8]
},
{
"Typ": "Static",
"Beschriftung": "Betriebsname für Reports",
"ID": -1,
"Position": [8, 176, 96, 8]
},
{
"Typ": "Static",
"Beschriftung": "Konto Kurtaxe",
"ID": -1,
"Position": [268, 96, 52, 8]
},
{
"Typ": "Static",
"Beschriftung": "Email",
"ID": 4001,
"Position": [24, 136, 40, 8]
},
{
"Typ": "Static",
"Beschriftung": "Telefon",
"ID": 4002,
"Position": [24, 104, 40, 8]
},
{
"Typ": "Static",
"Beschriftung": "Homepage",
"ID": 4003,
"Position": [8, 152, 56, 8]
},
{
"Typ": "Static",
"Beschriftung": "Fax",
"ID": 4004,
"Position": [24, 120, 40, 8]
},
{
"Typ": "Static",
"Beschriftung": "ArtikelNr Kurtaxe",
"ID": 4005,
"Position": [260, 112, 60, 8]
},
{
"Typ": "Static",
"Beschriftung": "GPS-Koordinaten",
"IDs": ["Breitengrad", "Längengrad"],
"Position": ["Breitengrad: 116, 244, 40, 8", "Längengrad: 264, 244, 40, 8"]
},
{
"ID": 101,
"Koordinaten": [72, 8, 152, 12]
},
{
"ID": 102,
"Koordinaten": [72, 24, 152, 12]
},
{
"ID": 103,
"Koordinaten": [72, 40, 152, 12]
},
{
"ID": 104,
"Koordinaten": [72, 56, 152, 12]
},
{
"ID": 107,
"Koordinaten": [72, 72, 152, 12]
},
{
"ID": 105,
"Koordinaten": [328, 48, 17, 12]
},
{
"ID": 5001,
"Koordinaten": [328, 76, 26, 12]
},
{
"ID": 555,
"Koordinaten": [72, 88, 110, 12]
},
{
"ID": 1300,
"Koordinaten": [444, 160, 21, 12]
},
{
"ID": 1400,
"Koordinaten": [444, 176, 21, 12]
},
{
"ID": 1019,
"Koordinaten": [108, 176, 150, 12]
},
{
"ID": 5002,
"Koordinaten": [328, 92, 34, 12]
},
{
"ID": 5003,
"Koordinaten": [328, 108, 40, 12]
},
{
"ID": 4007,
"Koordinaten": [72, 104, 108, 12]
},
{
"ID": 4008,
"Koordinaten": [72, 120, 108, 12]
},
{
"ID": 4009,
"Koordinaten": [72, 136, 108, 12]
},
{
"ID": 4010,
"Koordinaten": [72, 152, 108, 12]
},
{
"ID": 4006,
"Koordinaten": [196, 136, 80, 12]
},
{
"ID": 4013,
"Koordinaten": [72, 192, 412, 12]
},
{
"ID": 4016,
"Koordinaten": [96, 208, 192, 12]
},
{
"ID": 4017,
"Koordinaten": [96, 224, 284, 12]
},
{
"ID": 4021,
"Koordinaten": [176, 240, 64, 12]
},
{
"ID": 4022,
"Koordinaten": [328, 240, 64, 12]
},
{
"Beschriftung": "Breitengrad",
"ID": 4019,
"Koordinaten": [116, 244, 40, 8]
},
{
"Beschriftung": "Längengrad",
"ID": 4020,
"Koordinaten": [264, 244, 40, 8]
}
]
}
;
console.log(data);
const inputFields = document.querySelector('.input-fields');
// Angenommen, `data.Steuerelemente` enthält Ihr Beispielobjekt
for (const element of data.Steuerelemente) {
// Prüfen, ob `element.Typ` `undefined` oder `null` ist
if (element.Typ === undefined || element.Typ === null) {
inputFields.innerHTML += `
<p>
<label for="element-${element.ID}">ID: ${element.ID}</label>
<input type="text" id="element-${element.ID}" name="element-${element.ID}" value="${element.Wert || ''}">
</p>
`;
}
}
// Einfügen der statischen Felder
const staticFields = document.querySelector('.static-fields');
for (const element of data.Steuerelemente) {
if (element.Typ === 'Static') {
staticFields.innerHTML += `
<p>
<label for="${element.ID}">${element.Beschriftung}</label>
<span id="${element.ID}">${element.ID}</span>
</p>
`;
}
}
// Einfügen der Eingabefelder
const editFields = document.querySelector('.edit-fields');
for (const element of data.Steuerelemente) {
if (element.Typ === 'Edit') {
editFields.innerHTML += `
<p>
<label for="${element.ID}">${element.Beschriftung}</label>
<input type="text" id="${element.ID}" name="${element.ID}" value="${element.Wert}">
</p>
`;
}
}
// Einfügen der Buttons
const buttons = document.querySelector('.buttons');
for (const element of data.Steuerelemente) {
if (element.Typ === 'Button') {
buttons.innerHTML += `
<button type="button" id="${element.ID}">${element.Beschriftung}</button>
`;
}
}
// JavaScript-Code zum Bearbeiten des Formulars
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
// ...
});
</script>
</body>
</html>
