Merge pull request #44 from WDI-Ideas/development

Development
This commit is contained in:
BOBBY VISHWAKARMA
2024-05-15 17:40:28 +05:30
committed by GitHub
4 changed files with 59 additions and 41 deletions

View File

@@ -346,17 +346,25 @@
<div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab" tabindex="2">
<div class="d-flex justify-content-sm-end justify-content-center mb-3">
<div class="dropdown">
<a class="dropdown-toggle btn btn-primary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="rfq-filter btn _effect--ripple waves-effect waves-light dropdown-toggle d-flex justify-content-between align-items-center" type="button" id="drop-one" data-bs-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#505050" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
</svg>
Filter
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="">
<a class="dropdown-item" href="javascript:void(0)" onclick="getReportData('7')">Last 7 days</a>
<a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(20)">Last 20 days</a>
<a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(30)">Last 30 days</a>
{% comment %} <a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(40)">Last 40 days</a> {% endcomment %}
<a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(60)">Last 60 days</a>
<a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(90)">Last 90 days</a>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="drop-one" style="">
<li class=""><a class="dropdown-item" href="#"><input type="radio" id="radio7" value="7" name="dateFilter" checked> <label class="ms-2" for="radio7">Last 7 days</label></a></li>
<li class=""><a class="dropdown-item" href="#"><input type="radio" id="radio20" value="20" name="dateFilter"> <label class="ms-2" for="radio20">Last 20 days</label></a></li>
<li class=""><a class="dropdown-item" href="#"><input type="radio" id="radio30" value="30" name="dateFilter"> <label class="ms-2" for="radio30">Last 30 days</label></a></li>
<li class=""><a class="dropdown-item" href="#"><input type="radio" id="radio60" value="60" name="dateFilter"> <label class="ms-2" for="radio60">Last 60 days</label></a></li>
<li class=""><a class="dropdown-item" href="#"><input type="radio" id="radio90" value="90" name="dateFilter"> <label class="ms-2" for="radio90">Last 90 days</label></a></li>
</ul>
</div>
</div>
<div id="loaderContainer" class="text-center" style="display: none;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="tab-content" id="pills-tab3Content">
@@ -393,13 +401,22 @@ var mealUrl = "{% url 'module_activity:meal_detail' pk=0 %}"
var medicationUrl = "{% url 'module_activity:medication_detail' pk=0 %}"
var bowelUrl = "{% url 'module_activity:bowel_detail' pk=0 %}"
var symptomUrl = "{% url 'module_activity:meal_symptom_detail' pk=0 %}"
var reportUrl = "{% url 'module_activity:report_data' principal_id=obj.id %}?date_range=20"
var reportUrl = "{% url 'module_activity:report_data' principal_id=obj.id %}?date_range=date_range_data"
// Entry point
$(document).ready(function() {
tableName = $('#table');
//dataTableInstance = initializeDataTable(tableName, activityMainUrl);
//getReportData();
var selectedDays = $('input[name="dateFilter"]:checked').val();
getReportData(selectedDays);
$('input[name="dateFilter"]').change(function() {
selectedDays = $(this).val();
console.log(selectedDays)
getReportData(selectedDays);
});
});
// Function to initialize DataTable
@@ -522,18 +539,20 @@ function filterActivityData(dateRange){
}
*/
function getReportData(timeRange){
console.log("data range is ", timeRange)
var url = timeRange ? reportUrl.replace("7", timeRange) : reportUrl
function getReportData(days){
console.log("data range is ", days)
var url = days ? reportUrl.replace("date_range_data", days) : reportUrl
$('#pills-tab3Content').empty()
// Show loader
$('#loaderContainer').show();
$.ajax({
url: url,
type: 'GET',
success: function(response) {
console.log("reposne is ", response);
// Hide loader
$('#loaderContainer').hide();
if (response.status == 200){
setReportContent(response.data)
setReportContent(response.data, days)
}
if (response.status == 202){
const errorCard = $('<div class="card card-danger text-center mt-3 p-4 tab-pane-content"></div>');
@@ -548,12 +567,13 @@ function getReportData(timeRange){
}
},
error: function(response) {
// Hide loader
$('#loaderContainer').hide();
}
});
}
function setReportContent(data) {
function setReportContent(data, days) {
// Clear previous content
$('#pills-tab3Content').empty();
@@ -562,7 +582,7 @@ function setReportContent(data) {
const section = $('<div class="row tab-pane-content d-flex justify-content-center gap-5 mb-5"></div>');
if (data.food_avoid) {
createFoodToAvoid(section, data.food_avoid);
createFoodToAvoid(section, data.food_avoid, days);
}
if (data.highest_stool) {
@@ -590,13 +610,13 @@ function setReportContent(data) {
$('#pills-tab3Content').append(tableSection);
}
function createFoodToAvoid(parent, content) {
function createFoodToAvoid(parent, content, days) {
const col = $('<div class="col-md-3 tab-pane-content food-column text-center card d-flex flex-column justify-content-center align-items-center gap-4 py-4"><div class="h-100"></div></div>');
const title = $('<h5></h5>').text('Foods to Avoid');
const img = $('<img height="100" width="100">').attr('src', "{% static 'img/foods.png' %}");
const h4 = $('<h3></h4>').text(content);
const h6 = $('<h6></h6>').html(
'Based on the Symptoms added within the last 7 days, <b>' + content + '</b> should be avoided.'
'Based on the Symptoms added within the last '+ days +' days, <b>' + content + '</b> should be avoided.'
);
col.append(title);

View File

@@ -73,7 +73,7 @@
<!-- modal for View FAQ Question Answer -->
<div class="modal fade" id="faqmodal" tabindex="-1" role="dialog" aria-labelledby="faqModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content" >
<div class="modal-header">
<h5 class="modal-title" id="faqModalLabel">Faq</h5>
@@ -336,7 +336,8 @@ function viewClickEvent(dataTableInstance) {
$('body').on('click', '.view', function(){
var id =$(this).data('id');
var rowData = dataTableInstance.row($(this).closest('tr')).data();
var question = rowData.question;
var answer = rowData.answer;
// Set the data in the modal content
$('#questionData').text(question);
$('#answerData').text(answer);

View File

@@ -128,6 +128,7 @@
submitHandler: function(form) {
// Disable the submit button to prevent multiple submissions
$('button[type="submit"]').prop('disabled', true);
form.submit()
}
});
});

View File

@@ -68,8 +68,9 @@
</div>
<!-- modal for View Feedback Question Answer -->
<div class="modal fade" id="feedbackmodal" tabindex="-1" role="dialog" aria-labelledby="feedbackmodalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal fade" id="feedbackmodal" tabindex="-1" role="dialog" aria-labelledby="feedbackmodalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content" >
<div class="modal-header">
<h5 class="modal-title" id="feedbackmodalLabel">Feedback</h5>
@@ -77,12 +78,8 @@
</button>
</div>
<div class="modal-body">
<div class="card mb-2">
<div class="card-body">
<p class="mb-0" id="messageText"></p>
</div>
</div>
</div>
<p class="mb-0" id="messageText"></p>
</div>
<div class="modal-footer">
<button class="btn btn-dark" data-bs-dismiss="modal">Discard</button>
</div>
@@ -130,9 +127,8 @@ function initializeDataTable(tableName, mainUrl) {
{
data: "comment",
render: function (data, type, row) {
console.log(data)
return `<button class="btn btn-primary view-comment" onclick="showDataModal('${data}')">View</button>`;
}
return `<button class="btn btn-primary view-comment" data-comment="${data}">View</button>`;
}
],
debug: true,
@@ -178,11 +174,11 @@ function reloadDataTable() {
dataTableInstance.ajax.reload();
}
function showDataModal(data) {
console.log(data)
$('#messageText').text(data);
$('#feedbackmodal').modal('show');
}
$(document).on("click", ".view-comment", function() {
var comment = $(this).data("comment");
$('#messageText').text(comment);
$('#feedbackmodal').modal('show');
});