diff options
| -rw-r--r-- | gn2/wqflask/templates/gnqa.html | 5 | ||||
| -rw-r--r-- | gn2/wqflask/templates/gnqa_answer.html | 375 |
2 files changed, 77 insertions, 303 deletions
diff --git a/gn2/wqflask/templates/gnqa.html b/gn2/wqflask/templates/gnqa.html index 1c373289..1b08deb2 100644 --- a/gn2/wqflask/templates/gnqa.html +++ b/gn2/wqflask/templates/gnqa.html @@ -56,7 +56,9 @@ #gnqna_search_home { field-sizing: normal; } - + .answers { + width: 75%; + } </style> {% endblock %} @@ -103,6 +105,7 @@ </h1> </header> <form class="col-sm-12" id="gnqna_search_home" + hx-history="true" hx-post="/gnqna" hx-target=".gnqa-copy" hx-swap="outerHTML" diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html index beaf8e99..50c7ff53 100644 --- a/gn2/wqflask/templates/gnqa_answer.html +++ b/gn2/wqflask/templates/gnqa_answer.html @@ -1,320 +1,91 @@ -{% extends "base.html" %} -{% block title %}GNQNA{% endblock %} - -{% block css %} -<link rel="stylesheet" type="text/css" href="/static/new/css/markdown.css" /> -<style type="text/css"> - #loader { - display: none; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - background: rgba(0,0,0,0.75) url("/static/gif/loader.gif") no-repeat center center; - z-index: 10000; - } - - .btn{ - cursor: pointer; - outline: 0; - color: #AAA; - - } - - .btn:focus { - outline: none; - } - - - .blue-btn{ - color: blue; - } - - .red-btn{ - color: red; - } - .panel-heading { - padding: 0; - border:0; - } - .panel-title a, .panel-title a:active { - display:block; - padding:15px; - color:#555; - font-weight:bold; - text-decoration:none; - border: none; - - outline: none; - } - - .panel-heading a:before { - font-family: 'Glyphicons Halflings'; - content: "\e114"; - float: right; - transition: all 0.5s; - } - - .panel-heading.active a:before { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - transform: rotate(180deg); - } - -</style> -{% endblock %} - -{% block content %} <!-- Start of body --> - -<div style="min-height: 100vh;width: 100vw; margin-bottom: 10px;"> - <div id="loader"></div> - <div style="margin:10px; border:1px solid #ccc;padding: 15px;"> - <div > - <h1 id="gnqa_query" style="font-weight: bolder">{{query}}<h1> - </div> - - <div style="width:90vw;overflow-wrap: normal; margin-top: 5px;"> - <p id="gnqa_answer">{{answer}} <p> - </div> - - <div> - <div class="rating" style="margin-right:30px;padding:8px;text-align: right;" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}"> - - <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this answer +1 "><i class="fa fa-thumbs-up fa-lg fa-2x" aria-hidden="true"></i></button> - <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this answer -1"><i class="fa fa-thumbs-down fa-lg fa-2x" aria-hidden="true"></i></button> - - </div> - +<section class="container-fluid answers"> + <h1 class="row text-left"> + {{ query }} + </h1> + <div class="row"> + <p class="col-sm-12 lead">{{ answer }}</p> + <div class="rating col-sm-3 col-offset-3" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}"> + <button class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Vote Up"><i class="fa fa-thumbs-up fa-lg fa-2x" aria-hidden="true"></i></button> + <button class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Vote Down"><i class="fa fa-thumbs-down fa-lg fa-2x" aria-hidden="true"></i></button> </div> </div> - - <div> - - - <div class="container" style="min-width:85vw;overflow-y: auto;min-height: 100vh;"> - <h4> <a href="#" style="font-weight: bold;">References</a></h4> - {% if references %} - <ul id="gnqa_ref"> - - {% for reference in references %} - - <li id="gnqa_ref_item"> - <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> - <!--panel starts here --> - <div class="panel panel-default"> - {% if loop.first %} - - <div class="panel-heading active" role="tab" id="heading{{reference.doc_id}}"> - <h4 class="panel-title"> - - <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="true" aria-controls="collapse{{reference.doc_id}}"> - <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2> - </a> - </h4> - </div> - - - <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> - <div class="panel-body"> - - <div> - </div> - {% if reference.pubmed %} - - <div style="margin: 5px;color:#3071a9;cursor: pointer;" > - - <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> - <span><b>See PubMed Info</b></span> - </button> - </div> - - - <div> - {% include 'pubmed_modal.html' %} - </div> - - - {% endif %} - - <p class="node-references">{{reference.comboTxt}}</p> - - + <div class="row container"> + <h1>References</h1> + {% if references %} + + <ul class="list-unstyled"> + {% for reference in references %} + <li> + <div class="panel-group" role="tablist" aria-multiselectable="true"> + <div class="panel panel-default"> + {% if loop.first %} + <div class="panel-heading active" role="tab" id="heading{{ reference.doc_id }}"> + <h4 class="panel-title"> + + <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ reference.doc_id }}" aria-expanded="true" aria-controls="collapse{{reference.doc_id}}"> + <h2>{{ reference.bibInfo }} </h2> + </a> + </h4> + </div> + <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> + <div class="panel-body"> + <div> </div> - </div> - - - - {% else %} - - <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}"> - <h4 class="panel-title"> - - <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="false" aria-controls="collapse{{reference.doc_id}}"> - <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2> - </a> - </h4> - </div> - - - - <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> - - <div class="panel-body"> - - - {% if reference.pubmed %} - - - <div style="margin: 5px;color:#3071a9;cursor: pointer;" > - - <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> - <span><b>See PubMed Info</b></span> - </button> - </div> - - - - <div> - {% include 'pubmed_modal.html' %} - - </div> - - - - {% endif %} + {% if reference.pubmed %} + <div style="margin: 5px;color:#3071a9;cursor: pointer;" > <p class="node-references">{{reference.comboTxt}}</p> - - </div> + <details> + <summary>See PubMed Info</summary> + <h4>{{ reference.pubmed[0].get('title') }}</h4> + <p><b>Authors: {{ reference.pubmed[0].get('authors') }}</b></p> + <p><b>PMID: {{ reference.pubmed[0].get('pub_id') }}</b></p> + <p><b>Abstract: </b> {{ reference.pubmed[0].get('abstract')|safe }}</p> + <p><i><a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article on Pubmed</a></i></p> + </details> + {% endif %} </div> - {% endif %} - </div> - + {% else %} + <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}"> + <h4 class="panel-title"> + + <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="false" aria-controls="collapse{{reference.doc_id}}"> + <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2> + </a> + </h4> </div> - </li> - {% endfor %} - </ul> - {% else %} - <p>No references available.</p> - {% endif %} - </div> - </div> -</div> -{% endblock %} - -{% block js %} -<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script> -<script src="{{ url_for('js', filename='linkify/linkify.min.js') }}" type="text/javascript"></script> -<script src="{{ url_for('js', filename='linkify/linkify-html.min.js') }}" type="text/javascript"></script> -<script type="text/javascript"> - $('.panel-collapse').on('show.bs.collapse', function () { - $(this).siblings('.panel-heading').addClass('active'); - }); - $('.panel-collapse').on('hide.bs.collapse', function () { - $(this).siblings('.panel-heading').removeClass('active'); - }); + <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> - document.addEventListener('DOMContentLoaded', function() { - const GN_SERVER_URL = {{gn_server_url|tojson}} - $('#globalsearchform').hide() - $('footer').hide() - const answer = {{ answer | tojson }}; - const query = {{query | tojson }} - const task_id = {{ task_id | tojson }}["task_id"]; - async function voteRequest (gn_server_url,task_id,metadata){ - try{ - const response = await fetch(`/gnqna/rating/${task_id}`,{ - method:"POST", - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(metadata) - }) - if (response.ok){ - return {"message":"success",status:0} - } - else { - let {error,error_description} = await response.json() - return {"message":`HTTP Error:HTTP Response Code: ${response?.status}-reason-${error_description}`,status:1} - } - } - catch (err){ - return {"message":err,status:1}} - } - likeBtn = document.querySelector("#green"); - dislikeBtn = document.querySelector("#red") - likeBtn.addEventListener("click",(event)=>{ - if (likeBtn.classList.contains("blue-btn")){ - var {caller,weight} = (voteWeight["default"]) - } - else { - var {caller,weight} = voteWeight["like"] + <div class="panel-body"> - } - voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{ - alert(message); - status == 0 ? caller():""; - }) - }) - dislikeBtn.addEventListener("click", (event) = { - var {caller,weight} = voteWeight["dislike"] - if (dislikeBtn.classList.contains("red-btn")){ - var {caller,weight} = (voteWeight["default"]) - } - voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{ - alert(message) - status == 0 ? caller():"" - })); - let voteWeight = { - like: { - caller:function(){ - dislikeBtn.classList.remove("red-btn") - likeBtn.classList.toggle("blue-btn") - }, - weight: 1 - }, - dislike: { - caller:function(){ - likeBtn.classList.remove("blue-btn") - dislikeBtn.classList.toggle("red-btn") - }, + {% if reference.pubmed %} - weight:-1 - }, - default: { - caller:function() { - likeBtn.classList.remove("blue-btn") - dislikeBtn.classList.remove("red-") - }, - }} -</script> -<script type="text/javascript"> - function nodeLinkify(node_list) { - node_list.forEach((node) => { - node.innerHTML = linkifyHtml(node.innerHTML, { - target:{ - url:"_blank", - email:null - } - }) - }) + <div style="margin: 5px;color:#3071a9;cursor: pointer;" > - nodeLinkify(document.querySelectorAll(".pubmed-abstract")) + <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> + <span><b>See PubMed Info</b></span> + </button> + </div> - nodeLinkify(document.querySelectorAll(".node-references")) + {% endif %} - var coll = document.getElementsByClassName("collapsible-btn"); - for (var i = 0; i < coll.length; i++) { - coll[i].addEventListener("click", function() { + <p class="node-references">{{reference.comboTxt}}</p> - this.classList.toggle("active-btn"); - }); - } -</script> -{% endblock %} + </div> + </div> + {% endif %} + </div> + </div> + </li> + {% endfor %} + </ul> + + {% else %} + <p><i>No references available.</i></p> + {% endif %} + </div> +</section> |