193 lines
6.5 KiB
Handlebars
193 lines
6.5 KiB
Handlebars
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
</head>
|
|
|
|
<body>
|
|
<nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary mb-5">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/">Request Mirror</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/test">Test Page</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/history">History</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/ownership_registration">Ownership Registration</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="body" class="p-5">
|
|
<h1>Test Form</h1>
|
|
<div class="form-check form-switch">
|
|
<input onchange="onRequestMethod(event)" class="form-check-input" type="checkbox" role="switch"
|
|
id="requestMethodSwitch">
|
|
<label class="form-check-label" for="requestMethodSwitch" id="requestMethodLabel">Post Request</label>
|
|
</div>
|
|
|
|
<div id="function-header">
|
|
<button class="btn btn-secondary" type="button" onclick="addField()">Add Field</button>
|
|
<button class="btn btn-secondary" type="button" onclick="saveFields()">Save Form</button>
|
|
<button class="btn btn-secondary" type="button" onclick="loadFields()">Load Form</button>
|
|
<button class="btn btn-secondary" type="button" onclick="resetForm()">Reset Form</button>
|
|
</div>
|
|
<form id="submission-form" method="post" action="/test" onsubmit="saveForm()">
|
|
<table class="m-2" style="width: 100rem;">
|
|
<tbody id="field-groups">
|
|
<tr id="table-header">
|
|
<th>Value</th>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<input class="btn btn-primary" type="submit" value="Submit" />
|
|
</form>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
let fieldCount = 0;
|
|
|
|
let fieldInfo = {
|
|
|
|
}
|
|
|
|
function saveFields() {
|
|
localStorage.setItem('mirror-save', JSON.stringify(fieldInfo));
|
|
}
|
|
|
|
function loadFields() {
|
|
let fieldstr = localStorage.getItem('mirror-save');
|
|
if (fieldstr) {
|
|
|
|
resetForm(false);
|
|
|
|
fieldInfo = JSON.parse(fieldstr);
|
|
|
|
|
|
for (let field in fieldInfo) {
|
|
console.log(field);
|
|
addField(fieldInfo[field]);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function resetForm(resetStorage = true) {
|
|
|
|
if (resetStorage) {
|
|
localStorage.removeItem('mirror-save');
|
|
}
|
|
|
|
fieldInfo = {};
|
|
|
|
for (let i = 0; i < fieldCount; i++) {
|
|
document.getElementById(`row-${i}`).remove();;
|
|
}
|
|
|
|
fieldCount = 0;
|
|
}
|
|
|
|
function addField(field) {
|
|
console.log(field);
|
|
let newInput = document.createElement('tr');
|
|
|
|
newInput.id = `row-${fieldCount}`;
|
|
|
|
newInput.innerHTML = `
|
|
<td>
|
|
<input class="form-control" id='${fieldCount}-input' type='text' name='${fieldCount}' onchange="onValueChange('${fieldCount}', event)" value='${field ? field.value : ""}'/>
|
|
</td>
|
|
<td >
|
|
<input class="form-control" id="${fieldCount}-name" type='text' onchange="onNameChange('${fieldCount}', event);" value='${field ? field.name : fieldCount}'>
|
|
</td>
|
|
<td>
|
|
<select class="form-select col-auto" id="${fieldCount}-type" onchange='onInputTypeSelect("${fieldCount}", event)' aria-label="Field Type">
|
|
<option value='text' selected>Text</option>
|
|
<option value='email'>Email</option>
|
|
<option value='password'>Password</option>
|
|
<option value='number'>Number</option>
|
|
<option value='range'>Range</option>
|
|
<option value='url'>Url</option>
|
|
<option value='date'>Date</option>
|
|
<option value='datetime-local'>Date Time</option>
|
|
<option value='color'>Color</option>
|
|
<option value='checkbox'>Checkbox</option>
|
|
<option value='radio'>Radio</option>
|
|
<option value='file'>File</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<button type="button" class='btn btn-danger' onclick="delField(${fieldCount})">-</button>
|
|
</td>`;
|
|
|
|
for (let element in document.getElementById(`${fieldCount}-type`)) {
|
|
if (element.value === field.type) {
|
|
element.selected = true;
|
|
}
|
|
}
|
|
|
|
fieldInfo[fieldCount.toString()] = {
|
|
name: fieldCount.toString(),
|
|
value: "",
|
|
type: "text"
|
|
}
|
|
|
|
document.getElementById("field-groups").appendChild(newInput);
|
|
|
|
|
|
|
|
fieldCount++;
|
|
}
|
|
|
|
function delField(id) {
|
|
delete fieldInfo[id];
|
|
|
|
document.getElementById("field-groups").removeChild(document.getElementById(id))
|
|
}
|
|
|
|
function onValueChange(id, event) {
|
|
fieldInfo[id].value = event.target.value;
|
|
}
|
|
|
|
function onNameChange(id, event) {
|
|
fieldInfo[id].name = event.target.value;
|
|
document.getElementById(`${id}-input`).name = event.target.value;
|
|
}
|
|
function onInputTypeSelect(id, event) {
|
|
fieldInfo[id].type = event.target.value;
|
|
document.getElementById(`${id}-input`).type = event.target.value;
|
|
}
|
|
|
|
function onRequestMethod(event) {
|
|
document.getElementById('requestMethodLabel').innerText = event.target.checked ? 'Get Request' : 'Post Request';
|
|
document.getElementById('submission-form').method = event.target.checked ? 'get' : 'post';
|
|
|
|
}
|
|
</script>
|
|
<script type="text/javascript" defer>
|
|
loadFields();
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
crossorigin="anonymous"></script>
|
|
</body>
|
|
|
|
</html> |