diff options
Diffstat (limited to 'gn2/wqflask/templates/case_attributes.html')
| -rw-r--r-- | gn2/wqflask/templates/case_attributes.html | 415 |
1 files changed, 415 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/case_attributes.html b/gn2/wqflask/templates/case_attributes.html new file mode 100644 index 00000000..d1669761 --- /dev/null +++ b/gn2/wqflask/templates/case_attributes.html @@ -0,0 +1,415 @@ +{% extends "base.html" %} +{% block title %}Trait Submission{% endblock %} + +{% block css %} +<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" /> +<style> + .reject, .approve { + margin-bottom: 5px; + } +.case-attribute { + width: 10em; + } + .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"> + <div class="table-wrapper"> + <div class="table-title"> + <div class="row"> + <div class="col-sm-8"> + <h2>Case Attributes Reference Table</h2> + </div> + </div> + </div> + <table class="table table-bordered table-responsive"> + <colgroup> + <col class="case-attribute"> + <col> + <col> + </colgroup> + <thead> + <th scope="col">Case Attribute</th> + <th scope="col">Description</th> + <th scope="col">Actions</th> + </thead> + <tbody> + {% for id_, name, description in case_attributes %} + <tr data-id="{{id_}}"> + <td class="name" data-original-value="{{ name }}">{{ name }}</td> + <td class="description" data-original-value="{{ description }}">{{ description }}</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="true"></span></i></a> + </td> + </tr> + {% endfor %} + <tr id="addNew"> + <td></td> + <td></td> + <td><button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button></td> + </tr> + </tbody> + </table> + + {% if modifications or inserts or deletions %} + <h2>Please Review These Changes</h2> + {% endif %} + {% if modifications %} + <h3>Modify Existing Case Attributes</h3> + <table class="table table-responsive table-hover table-striped cell-border" id="table-modifications"> + <thead> + <th scope="col">Author</th> + <th scope="col">Diff</th> + <th scope="col">Action</th> + </thead> + <tbody> + {% for data in modifications %} + <tr> + <td>{{ data.get('author') }}</td> + <td> + {% if data.get("name")%} + <b>Name:</b><br/> + <small>Original: </small>{{ data["name"].get("Original") }}<br/> + <small>Current: </small>{{ data["name"].get("Current") }} <br/> + <small>Diff:</small><br/> + <pre>{{data["name"].get("Diff")}}</pre> + {% endif %} + {% if data.get("description")%} + <b>Description:</b><br/> + <small>Original: </small>{{ data["description"].get("Original") }}<br/> + <small>Current: </small>{{ data["description"].get("Current") }} <br/> + <small>Diff:</small><br/> + <pre>{{data["description"].get("Diff")}}</pre> + {% endif %} + </td> + <td> + <button data-id="{{ data.get('id') }}" type="button" + class="btn btn-default reject"> + Reject + </button> + <button data-id="{{ data.get('id') }}" type="button" + class="btn btn-success approve"> + Approve + </button> + </td> + </tr> + {% endfor %} + </tbody> + </table> + {% endif %} + {% if deletions %} + <h3>Delete Existing Case Attributes</h3> + <table class="table table-responsive table-hover table-striped cell-border" id="table-modifications"> + <colgroup> + <col class="case-attribute"> + <col> + <col> + <col> + </colgroup> + <thead> + <th scope="col">Case Attribute</th> + <th scope="col">Author</th> + <th scope="col">Description</th> + <th scope="col">Action</th> + </thead> + <tbody> + {% for data in deletions %} + <tr> + <td>{{data.get("name")}}</td> + <td>{{ data.get('author') }}</td> + <td>{{data.get("description")}}</td> + <td> + <button data-id="{{data.get('id')}}" type="button" + class="btn btn-default reject"> + Reject + </button> + <button data-id="{{data.get('id')}}" type="button" class="btn btn-success approve"> + Approve + </button> + </td> + </tr> + {% endfor %} + </tbody> + </table> + {% endif %} + + {% if inserts %} + <h3>Insert New Case Attributes</h3> + <table class="table table-responsive table-hover table-striped cell-border" id="table-modifications"> + <colgroup> + <col class="case-attribute"> + <col> + <col> + <col> + </colgroup> + <thead> + <th scope="col">Case Attribute</th> + <th scope="col">Author</th> + <th scope="col">Description</th> + <th scope="col">Action</th> + </thead> + <tbody> + {% for data in inserts %} + <tr> + <td>{{ data.get("name") }}</td> + <td>{{ data.get("author")}}</td> + <td>{{ data.get("description") }} </td> + <td> + <button data-id="{{ data.get('id') }}" type="button" + class="btn btn-default reject"> + Reject + </button> + <button data-id="{{ data.get('id') }}" type="button" class="btn btn-success approve"> + Approve + </button> + </td> + </tr> + {% endfor %} + </tbody> + </table> + {% endif %} + </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"> + gn_server_url = "{{ gn_server_url }}"; + + $(document).ready( function() { + 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:nth-last-child(2)").index(); + let row = '<tr>' + + '<td class="name"><input type="text" class="form-control"></td>' + + '<td class="description"><input type="text" class="form-control"></td>' + + '<td>' + actions + '</td>' + + '</tr>'; + $(row).insertBefore("#addNew") + $("table tbody tr").eq(index + 1).find(".add, .edit").toggle(); + }); + // 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"); + } + else { + return; + } + + let nameNode = $(this).parents("tr").find(".name"); + let descNode = $(this).parents("tr").find(".description"); + let name = nameNode.html(); + let desc = descNode.html(); + let nodeId = $(this).parents("tr").data("id"); + let originalName = nameNode.data("original-value"); + let originalDesc = descNode.data("original-value"); + let diff = {}; + if (nodeId) { + if (name !== originalName) { + diff["Modification"] = { + name: { + Original: originalName, + Current: name, + }}; + } + if (desc !== originalDesc) { + let desc_ = { + Original: originalDesc, + Current: desc, + } + if (Object.keys(diff).length == 0) { + diff["Modification"] = { + description: desc_ + } + } + else { + diff["Modification"].description = desc_; + } + } + if (!Object.keys(diff).length == 0) { + diff["id"] = nodeId; + } + } else { + if (name) { + diff["Insert"] = { + name: name, + } + } + if (desc) { + if (Object.keys(diff).length == 0) { + diff["Insert"] = { + description: desc, + } + } + else { + diff["Insert"].description = desc; + } + } + } + if(diff) { + $.ajax({ + type: "POST", + data: {"data": JSON.stringify(diff)}, + url: '{{ url_for("metadata_edit.update_case_attributes") }}', + /* contentType: "application/json", */ + success: function(data, status, xhr) { location.reload() } + } + ) + } + }); + // 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"); + let node = $(this).parents("tr") + + let diff = {}; + let nodeId = $(this).parents("tr").data("id"); + diff["Deletion"] = { + name: node.find(".name").data("original-value"), + description: node.find(".description").data("original-value"), + id: node.data("id")} + if (nodeId){ + $.ajax({ + type: "POST", + data: {"data": JSON.stringify(diff)}, + url: '{{ url_for("metadata_edit.update_case_attributes") }}', + success: function(data, status, xhr) { + location.reload(); + } + })} + }); + }); + + $(".reject").click(function(){ + let id = $(this).data("id"); + if (Number.isInteger(id)) { + $.ajax({ + type: "POST", + data: {"id": id}, + url: '{{ url_for("metadata_edit.reject_case_attribute_data") }}', + success: function(data, status, xhr) { + location.reload(); + } + }) + } + }); + $(".approve").click(function(){ + let id = $(this).data("id"); + if (Number.isInteger(id)) { + $.ajax({ + type: "POST", + data: {"id": id}, + url: '{{ url_for("metadata_edit.approve_case_attribute_data") }}', + success: function(data, status, xhr) { + location.reload(); + } + }) + } + }); + </script> + {% endblock %} |