diff options
| author | Alexander_Kabui | 2024-05-07 21:05:57 +0300 |
|---|---|---|
| committer | Alexander_Kabui | 2024-05-07 21:05:57 +0300 |
| commit | 14774b3d923eb1a3fe98345a04e4993c25a67d88 (patch) | |
| tree | b280fbe7446938d9462e3bc084ef19f1c2b70fd7 | |
| parent | 2bbcfaee98d594c767f8fac647e3e3dc0d39a338 (diff) | |
| download | genenetwork2-14774b3d923eb1a3fe98345a04e4993c25a67d88.tar.gz | |
Use HTMX Js api to toggle upvote and downvote functionality.
| -rw-r--r-- | gn2/wqflask/templates/gnqa_answer.html | 28 |
1 files changed, 23 insertions, 5 deletions
diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html index bde39329..0ddcfde7 100644 --- a/gn2/wqflask/templates/gnqa_answer.html +++ b/gn2/wqflask/templates/gnqa_answer.html @@ -5,11 +5,9 @@ <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{ query }}</i></b></mark><br/> {{ answer }} </p> - <div class="rating row" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}" - hx-vals='{"query": "{{query}}","answer":"{{answer}}"}' - > - <button class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Vote Up" hx-post="/gnqna/rating/{{task_id['task_id']}}/1" hx-target="#rate" hx-swap="innerHTML" hx-trigger="click"><i class="fa fa-thumbs-up fa-sm fa-1x" aria-hidden="true"></i></button> - <button class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Vote Down" hx-post="/gnqna/rating/{{task_id['task_id']}}/-1" hx-target="#rate" hx-swap="innerHTML" hx-trigger="click"><i class="fa fa-thumbs-down fa-sm fa-1x" aria-hidden="true"></i></button> + <div class="rating row" data-doc-id="{{query}}"> + <button class="btn" id="upvote" data-toggle="tooltip" data-placement="top" title="Vote Up"><i class="fa fa-thumbs-up fa-sm fa-1x" aria-hidden="true"></i></button> + <button class="btn" id="downvote" data-toggle="tooltip" data-placement="top" title="Vote Down"><i class="fa fa-thumbs-down fa-sm fa-1x" aria-hidden="true"></i></button> <sub id="rate" class="text-info"> </sub> </div> @@ -92,3 +90,23 @@ </details> </div> </section> +{% block js %} + +<script> +var query = {{ query|tojson }}; +var answer = {{ answer|tojson }} +var {task_id} = {{ task_id|tojson }} + htmx.on("#upvote", "click", function(evt){ + vote_count = htmx.find(".btn-success") ? 0 : 1 + htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`, {target: "#rate", swap:"innerHTML",values: {'query': query, 'answer': answer}}).then(()=>{ + htmx.toggleClass(htmx.find('#upvote'), 'btn-success'); + htmx.removeClass(htmx.find("#downvote"), "btn-danger"); +})}); + htmx.on("#downvote", "click", function(evt){ + vote_count = htmx.find(".btn-danger") ? 0 : -1 + htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`, {target: "#rate", swap:"innerHTML",values: {'query': query, 'answer': answer}}).then(()=>{ + htmx.toggleClass(htmx.find('#downvote'), 'btn-danger'); + htmx.removeClass(htmx.find("#upvote"), "btn-success") + })}); +</script> +{% endblock %} |