aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBonfaceKilz2022-05-10 16:55:11 +0300
committerBonfaceKilz2022-05-27 15:17:52 +0300
commit64f28e18097ca5aaee4446f02d036b375fecab6b (patch)
tree956bdcbb84e5341131a10737ae7d8b3e0f6ab32e
parentf614e655abf7b3fd25a1611e0bda85c6ef9fc13f (diff)
downloadgenenetwork2-64f28e18097ca5aaee4446f02d036b375fecab6b.tar.gz
Update case-attributes page to make it editable
-rw-r--r--wqflask/wqflask/templates/case_attributes.html155
1 files changed, 145 insertions, 10 deletions
diff --git a/wqflask/wqflask/templates/case_attributes.html b/wqflask/wqflask/templates/case_attributes.html
index 9297b703..333b9cc4 100644
--- a/wqflask/wqflask/templates/case_attributes.html
+++ b/wqflask/wqflask/templates/case_attributes.html
@@ -3,40 +3,175 @@
{% block css %}
<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
+<style>
+ .table-title {
+ padding-bottom: 10px;
+ margin: 0 0 10px;
+ }
+
+ .table-title h2 {
+ margin: 6px 0 0;
+ font-size: 22px;
+ }
+ .table-title .add-new {
+ float: right;
+ height: 30px;
+ font-weight: bold;
+ font-size: 12px;
+ text-shadow: none;
+ min-width: 100px;
+ border-radius: 50px;
+ line-height: 13px;
+ }
+ .table-title .add-new i {
+ margin-right: 4px;
+ }
+ table.table {
+ table-layout: fixed;
+ width: 70%;
+ }
+ table.table tr th, table.table tr td {
+ border-color: #e9e9e9;
+ }
+ table.table th i {
+ font-size: 13px;
+ margin: 0 5px;
+ cursor: pointer;
+ }
+ table.table th:last-child {
+ width: 100px;
+ }
+ table.table td a {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0 5px;
+ min-width: 24px;
+ }
+ table.table td a.add {
+ color: #27C46B;
+ }
+ table.table td a.edit {
+ color: #FFC107;
+ }
+ table.table td a.delete {
+ color: #E34724;
+ }
+ table.table td i {
+ font-size: 19px;
+ }
+ table.table td a.add i {
+ font-size: 24px;
+ margin-right: -1px;
+ position: relative;
+ top: 3px;
+ }
+ table.table .form-control {
+ height: 32px;
+ line-height: 32px;
+ box-shadow: none;
+ border-radius: 2px;
+ }
+ table.table .form-control.error {
+ border-color: #f50000;
+ }
+ table.table td .add {
+ display: none;
+ }
+</style>
{% endblock %}
{% block content %}
<!-- Start of body -->
<div class="container">
- <h2>Case Attributes Reference Table</h2>
- <div class="row">
- <div class="col-md-8">
- <table class="table-responsive table-hover table-striped cell-border">
+ <div class="table-wrapper">
+ <div class="table-title">
+ <div class="row">
+ <div class="col-sm-8">
+ <h2>Case Attributes Reference Table</h2>
+ </div>
+ <div class="col-sm-4">
+ <button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>
+ </div>
+ </div>
+ </div>
+ <table class="table table-bordered table-responsive">
<thead>
<th scope="col">Header</th>
<th scope="col">Description</th>
+ <th scope="col">Actions</th>
</thead>
<tbody>
{% for key, value in case_attributes.items() %}
<tr>
- <td>{{ key }}</td><td>{{ value }}</td>
+ <td>{{ key }}</td>
+ <td>{{ value }}</td>
+ <td>
+ <a class="add" title="Add" data-toggle="tooltip"><i><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></i></a>
+ <a class="edit" title="Edit" data-toggle="tooltip"><i><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></i></a>
+ <a class="delete" title="Delete" data-toggle="tooltip"><i><span class="glyphicon glyphicon-trash" aria-hidden="trueh"></span></i></a>
+ </td>
</tr>
{% endfor %}
</tbody>
- </table>
- </div>
- </div>
+ </table>
+
</div>
{%endblock%}
{% block js %}
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.js') }}"></script>
-<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
<script language="javascript" type="text/javascript">
gn_server_url = "{{ gn_server_url }}";
$(document).ready( function() {
- $('.table-responsive').dataTable();
+ let actions = $("table td:last-child").html();
+ // Append table with add row form on add new button click
+ $(".add-new").click(function(){
+ $(this).attr("disabled", "disabled");
+ let index = $("table tbody tr:last-child").index();
+ let row = '<tr>' +
+ '<td><input type="text" class="form-control" name="case-attribute"></td>' +
+ '<td><input type="text" class="form-control" name="description"></td>' +
+ '<td>' + actions + '</td>' +
+ '</tr>';
+ $("table").append(row);
+ $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
+ $('[data-toggle="tooltip"]').tooltip();
+ });
+ // Add row on add button click
+ $(document).on("click", ".add", function(){
+ let empty = false;
+ let input = $(this).parents("tr").find('input[type="text"]');
+ input.each(function(){
+ if(!$(this).val()){
+ $(this).addClass("error");
+ empty = true;
+ } else{
+ $(this).removeClass("error");
+ }
+ });
+ $(this).parents("tr").find(".error").first().focus();
+ if(!empty){
+ input.each(function(){
+ $(this).parent("td").html($(this).val());
+ });
+ $(this).parents("tr").find(".add, .edit").toggle();
+ $(".add-new").removeAttr("disabled");
+ }
+ });
+ // Edit row on edit button click
+ $(document).on("click", ".edit", function(){
+ $(this).parents("tr").find("td:not(:last-child)").each(function(){
+ $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
+ });
+ $(this).parents("tr").find(".add, .edit").toggle();
+ $(".add-new").attr("disabled", "disabled");
+ });
+ // Delete row on delete button click
+ $(document).on("click", ".delete", function(){
+ $(this).parents("tr").remove();
+ $(".add-new").removeAttr("disabled");
+ });
});
</script>
{% endblock %}