more buttons

This commit is contained in:
Johannes Randerath 2024-08-01 09:43:02 +02:00
parent 41945236ce
commit 6750c65bd0

View File

@ -18,14 +18,15 @@
};
row.onclick = createClickHandler(row);
}
for (let column of document.getElementById("content_table").rows[0].cells) {
column.innerHTML = column.innerHTML + "";
}
});
function add_column() {
ncol += 1;
document.getElementById('columns').innerHTML += "<div class='row mt-3' id='columns'><div class='col-auto align-bottom'><div class='form-text me-1' id='field_index'><strong>" + ncol + "</strong></div></div><div class='col-auto'><input type='text' class='form-control' id='field_name' aria-describedby='field_name_label'></div><div class='col-auto'><select class='form-select' aria-label='data type'><option value='text' selected>Text</option><option value='number'>Number</option><option value='date'>Date</option></select></div></div>"
}
function add_column() {
ncol += 1;
document.getElementById('dynamic_columns').innerHTML += "<div class='row mt-3' id='columns'><div class='col-auto align-bottom'><div class='form-text me-1' id='field_index'><strong>" + ncol + "</strong></div></div><div class='col-auto'><input type='text' class='form-control' id='field_name' aria-describedby='field_name_label'></div><div class='col-auto'><select class='form-select' aria-label='data type'><option value='text' selected>Text</option><option value='number'>Number</option><option value='date'>Date</option></select></div></div>"
}
function create_table() {
document.getElementById('dynamic_columns').innerHTML = "";
ncol = 1;
}
</script>
</head>
<body>
@ -58,7 +59,7 @@
</nav>
<div class="row justify-content-between">
<div class="col-auto">
<h1>Inventory table</h1>
<h1>Inventory table <button class="btn" type="button"><i class="bi bi-pencil"></i></button></h1>
</div>
<div class="col-auto">
<div class="btn-toolbar mt-2" role="toolbar">
@ -81,13 +82,62 @@
</div>
</div>
</div>
<br>
<table id="content_table" class="table table-striped table-hover table-responsive table-bordered mt-2">
<thead>
<tr class="align-bottom">
<th style="width:7%">#</th>
<th>name</th>
<th>fsid</th>
<th>drf</th>
<tr>
<th style="width:7%">
<div class="row justify-content-between">
<div class="col-auto">
#
</div>
<div class="col-auto">
<div class="btn-toolbar">
<button class="btn p-0 me-2" type="button" data-bs-toggle="modal" data-bs-target="#filter"><i class="bi bi-filter"></i></button>
<button class="btn p-0" type="button" onclick="console.log('click');"><i class="bi bi-sort-down"></i></button>
</div>
</div>
</div>
</th>
<th>
<div class="row justify-content-between">
<div class="col-auto">
name
</div>
<div class="col-auto">
<div class="btn-toolbar">
<button class="btn p-0 me-2" type="button" data-bs-toggle="modal" data-bs-target="#filter"><i class="bi bi-filter"></i></button>
<button class="btn p-0" type="button" onclick="console.log('click');"><i class="bi bi-sort-down"></i></button>
</div>
</div>
</div>
</th>
<th>
<div class="row justify-content-between">
<div class="col-auto">
sdakjhf
</div>
<div class="col-auto">
<div class="btn-toolbar">
<button class="btn p-0 me-2" type="button" data-bs-toggle="modal" data-bs-target="#filter"><i class="bi bi-filter"></i></button>
<button class="btn p-0" type="button" onclick="console.log('click');"><i class="bi bi-sort-down"></i></button>
</div>
</div>
</div>
</th>
<th>
<div class="row justify-content-between">
<div class="col-auto">
drtr
</div>
<div class="col-auto">
<div class="btn-toolbar">
<button class="btn p-0 me-2" type="button" data-bs-toggle="modal" data-bs-target="#filter"><i class="bi bi-filter"></i></button>
<button class="btn p-0" type="button" onclick="console.log('click');"><i class="bi bi-sort-down"></i></button>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
@ -135,6 +185,9 @@
</select>
</div>
</div>
<div id="dynamic_columns">
<!-- Columns added using plus button -->
</div>
<div class="row justify-content-center mb-3 mt-3">
<div class="col-auto">
<button class="btn btn-primary" type="button" onclick="add_column()"><i class="bi bi-plus-lg"></i></button>
@ -144,7 +197,7 @@
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="submit">Create</button>
<button class="btn btn-primary" type="button" onclick="create_table()">Create</button>
</form>
</div>
</div>