more buttons

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

View File

@ -18,13 +18,14 @@
}; };
row.onclick = createClickHandler(row); row.onclick = createClickHandler(row);
} }
for (let column of document.getElementById("content_table").rows[0].cells) {
column.innerHTML = column.innerHTML + "";
}
}); });
function add_column() { function add_column() {
ncol += 1; 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>" 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> </script>
</head> </head>
@ -58,7 +59,7 @@
</nav> </nav>
<div class="row justify-content-between"> <div class="row justify-content-between">
<div class="col-auto"> <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>
<div class="col-auto"> <div class="col-auto">
<div class="btn-toolbar mt-2" role="toolbar"> <div class="btn-toolbar mt-2" role="toolbar">
@ -81,13 +82,62 @@
</div> </div>
</div> </div>
</div> </div>
<br>
<table id="content_table" class="table table-striped table-hover table-responsive table-bordered mt-2"> <table id="content_table" class="table table-striped table-hover table-responsive table-bordered mt-2">
<thead> <thead>
<tr class="align-bottom"> <tr>
<th style="width:7%">#</th> <th style="width:7%">
<th>name</th> <div class="row justify-content-between">
<th>fsid</th> <div class="col-auto">
<th>drf</th> #
</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> </tr>
</thead> </thead>
<tbody> <tbody>
@ -135,6 +185,9 @@
</select> </select>
</div> </div>
</div> </div>
<div id="dynamic_columns">
<!-- Columns added using plus button -->
</div>
<div class="row justify-content-center mb-3 mt-3"> <div class="row justify-content-center mb-3 mt-3">
<div class="col-auto"> <div class="col-auto">
<button class="btn btn-primary" type="button" onclick="add_column()"><i class="bi bi-plus-lg"></i></button> <button class="btn btn-primary" type="button" onclick="add_column()"><i class="bi bi-plus-lg"></i></button>
@ -144,7 +197,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button> <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> </form>
</div> </div>
</div> </div>