Skip to content

Commit

Permalink
inclusion of abandoned and bookmark tables
Browse files Browse the repository at this point in the history
  • Loading branch information
roseva1 committed Feb 29, 2024
1 parent 6a79ae1 commit 7491290
Show file tree
Hide file tree
Showing 5 changed files with 263 additions and 93 deletions.
2 changes: 1 addition & 1 deletion turkle/migrations/0014_bookmark.py
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Generated by Django 4.2.6 on 2023-11-14 13:41
# Generated by Django 4.2.6 on 2024-02-08 15:16

from django.conf import settings
from django.db import migrations, models
Expand Down
27 changes: 27 additions & 0 deletions turkle/static/turkle/css/turkle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,30 @@ div.task-preview {
background: #fff;
opacity: 0.8;
}
.table-alert{
margin-bottom: 0;
height: 100%;
}
.column-div {
float: left;
width: 50%;
border-radius: 5px;
padding: 5pt;
position: relative;
overflow: hidden;
height: 100%;
}

.table-header, .table-body {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.table-body-container {
height: 12vh;
overflow-y: auto;
}
.column-div th, td {
text-align: left;
padding: 8px;
}
6 changes: 4 additions & 2 deletions turkle/templates/turkle/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
{% load turkle_tags %}{% for tag in turkle_meta_tags %}{{ tag|meta_tag }}{% endfor %}
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">
<link href="{% static "turkle/css/turkle.css" %}" rel="stylesheet" type="text/css"/>
<link href="{% static "turkle/bootstrap-4.1.3/css/bootstrap.min.css" %}" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link href="{% static "turkle/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css" %}" rel="stylesheet" type="text/css"/>
<link href="{% static "turkle/css/turkle.css" %}" rel="stylesheet" type="text/css"/>
{% block head %}
{% endblock %}
</head>
Expand Down
319 changes: 230 additions & 89 deletions turkle/templates/turkle/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,115 +2,256 @@
{% load static %}

{% block body %}
{% if batch_rows %}
<row style="padding: 5pt; width: 100%; height: 25vh;">
<div class="column-div">
<div class="table-alert alert alert-primary" role="alert" style="background-color: transparent;">
<h3>Bookmarked</h3>
<table class="table-header">
<thead>
<tr>
<th>Project</th>
<th>Batch</th>
<th>Actions</th>
<th></th>
</tr>
</thead>
</table>

{% if abandoned_assignments %}
<div class="container-fluid">
{% for aa in abandoned_assignments %}
<div class="alert alert-warning clearfix" role="alert">
<div class="float-left">
You have abandoned <b>Task {{ aa.task.id }}</b>
from Project <b>{{ aa.task.batch.project.name }}</b>,
Batch <b>{{ aa.task.batch.name }}</b>
<div class="table-body-container">
<table class="table-body" id="bookmarkedTasksTable" >
<tbody>
</tbody>
</table>
</div>
</div>
</div>

<div class="float-right">
<div class="inline-form-buttons">
<a href="{% url 'task_assignment' aa.task.id aa.task_assignment_id %}" class="btn btn-sm btn-primary">
Resume working on Task
</a>
<form method="post" action="{% url 'return_task_assignment' aa.task.id aa.task_assignment_id %}">
{% csrf_token %}
<input type="submit" class="btn btn-sm btn-primary" value="Return Task" />
</form>
</div>
<div class="column-div">
<div class="table-alert alert alert-warning" role="alert">
<h3>Abandoned Assignments</h3>
{% if abandoned_assignments %}
<table class="table-header">
<thead>
<tr>
<th>Project</th>
<th>Batch</th>
<th>Actions</th>
<th></th>
</tr>
</thead>
</table>
<div class="table-body-container">
<table class="table-body">
<tbody>
{% for aa in abandoned_assignments %}
<tr>
<td>{{ aa.task.batch.project.name }}</td>
<td>{{ aa.task.batch.name }}</td>
<td>
<a href="{% url 'task_assignment' aa.task.id aa.task_assignment_id %}" class="btn btn-outline-primary">
Resume Task
</a>
</td>
<td>
<form method="post" action="{% url 'return_task_assignment' aa.task.id aa.task_assignment_id %}" style="display:inline-block;">
{% csrf_token %}
<input type="submit" class="btn btn-outline-primary" value="Return Task" />
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="alert alert-info">No abandoned assignments found.</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
</row>


{% block content %}
{% endblock %}
<div class="container-fluid content mt-2" style="padding-bottom: 5vh;">
<table id="batchTable" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
<tr>
<th style="width: 2vw;"></th>
<th>Project</th>
<th>Batch</th>
<th>Batch Published</th>
<th>Tasks Available</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{% for batch_row in batch_rows %}
<tr id="{{ batch_row.batch_name }}">
<td style="width: 2vw;">
<span>
<!-- Bookmark icon that will visually represent the checkbox -->
<i id="icon_{{ batch_row.batch_name }}" onclick="toggleBookmark('{{ batch_row.batch_name }}')" class="bi {% if batch_row.selected == 'checked' %}bi-bookmark-fill{% else %}bi-bookmark{% endif %}"></i>

<div class="container-fluid content mt-2">
{% if batch_rows %}
<table class="table table-bordered table-hover">
<tr class="thead-dark">
<th>Project</th>
<th>Batch</th>
<th>Batch Published</th>
<th>Batch Bookmarked</th>
<th>Tasks Available</th>
<th></th>
<th></th>
</tr>
{% for batch_row in batch_rows %}
<tr>
<td>{{ batch_row.project_name }}</td>
<td>{{ batch_row.batch_name }}</td>
<td>{{ batch_row.batch_published }}</td>
<td>
<input type="checkbox" class="btn-check" id="{{ batch_row.batch_name }}" value="{{ batch_row.batch_name }}" {{ batch_row.selected}}></input>
</td>
<td>{{ batch_row.assignments_available }}</td>
<td>
<a href="{{ batch_row.preview_next_task_url }}" role="button" class="btn btn-sm btn-primary">
Preview next Task
</a>
</td>
<td>
<form method="post" action="{{ batch_row.accept_next_task_url }}">
{% csrf_token %}
<input type="submit" class="btn btn-sm btn-primary" value="Accept next Task" />
</form>
</td>
</tr>
{% endfor %}
</table>
<!-- Hidden input to store the value, assuming 'checked' means the bookmark is active -->
<input type="hidden" id="hidden_{{ batch_row.batch_name }}" name="{{ batch_row.batch_name }}" value="{% if batch_row.selected == 'checked' %}1{% else %}0{% endif %}">
</span>
</td>
<td>{{ batch_row.project_name }}</td>
<td>{{ batch_row.batch_name }}</td>
<td>{{ batch_row.batch_published }}</td>
<td>{{ batch_row.assignments_available }}</td>
<td>
<a href="{{ batch_row.preview_next_task_url }}" role="button" class="btn btn-sm btn-primary">
Preview Next Task
</a>
</td>
<td>
<form method="post" action="{{ batch_row.accept_next_task_url }}">
{% csrf_token %}
<input type="submit" class="btn btn-sm btn-primary" value="Accept Next Task" />
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<h1>No Tasks available at this time</h1>
{% if not user.is_authenticated %}
<h4>
You may need to <a href="{% url 'login' %}">Login</a> to see available Tasks
</h4>
{% endif %}
<div class="container-fluid content mt-2">
<h1>No Tasks available at this time</h1>
{% if not user.is_authenticated %}
<h4>
You may need to <a href="{% url 'login' %}">Login</a> to see available Tasks
</h4>
{% endif %}
{% endif %}
</div>

{% endblock %}
$(document).ready(function() {
$('#example').DataTable();
});

{% block script %}
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
<script>
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
$(document).ready(function () {
// Listen for checkbox changes
$('input[type="checkbox"]').change(function () {
$.ajax({
url: ""{% url "index" %}"",
method: 'POST', // or 'GET' depending on your needs
headers: {"X-CSRFToken": getCookie("csrftoken")},
data: {
action: 'bookmarking',
rowId: $(this).val(), // Send the value associated with the checkbox
bookmarked: $(this).is(':checked') // You can add any additional data you need
}

function updateSecondaryTable() {
const secondaryTableBody = document.querySelector('#bookmarkedTasksTable tbody');

secondaryTableBody.innerHTML = '';

$('#batchTable').DataTable().rows().every(function () {
var row = this.node();
var $input = $(row).find('input[type="hidden"]');
if ($input.val() === "1") {

const originalRow = row.cloneNode(true);
const newRow = document.createElement('tr');

const cellsToCopy = [1, 2, 5, 6];
cellsToCopy.forEach(index => {
const cell = originalRow.cells[index].cloneNode(true);
newRow.appendChild(cell);
});

secondaryTableBody.appendChild(newRow);
}
});

}

$(document).ready(function () {
var table = $('#batchTable').DataTable({
stateSave: true,
retrieve: true,
pageLength : 10,
lengthMenu: [[5, 10, 20], [5, 10, 20]],
columnDefs: [{"orderable": false, "targets": [5, 6] },
{
targets: 0,
orderData: [0],
render: function(data, type, row, meta) {
if (type === 'sort') {
var value = $(row[meta.col]).find("input").val();
return value || 0;
}
return data;
}
}]
});

$('.dataTables_length').addClass('bs-select');
updateSecondaryTable();

});


function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();

if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}

function toggleBookmark(batchName) {

const hiddenInput = document.getElementById(`hidden_${batchName}`);
const iconElement = document.getElementById(`icon_${batchName}`);
const isChecked = hiddenInput.value === "1";

let newIconClass;
let newValue;

if (isChecked) {
newValue = "0"; // Update the new value for the hidden input
newIconClass = 'bi-bookmark'; // Update the class for the icon
} else {
newValue = "1"; // Update the new value for the hidden input
newIconClass = 'bi-bookmark-fill'; // Update the class for the icon
}

const row = $(hiddenInput).closest('tr');
var table = $('#batchTable').DataTable();
const rowIndex = table.row(row).index();

const newCellHTML = `<td style="width: 2vw;">
<span>
<i id="icon_${batchName}" onclick="toggleBookmark('${batchName}')" class="${newIconClass}"></i>
<input type="hidden" id="hidden_${batchName}" name="${batchName}" value="${newValue}">
</span>
</td>`;


table.cell(rowIndex, 0).data(newCellHTML).draw(false);

$.ajax({
url: "{% url 'index' %}",
method: 'POST',
headers: {"X-CSRFToken": getCookie("csrftoken")},
data: {
action: 'bookmarking',
rowId: batchName,
bookmarked: hiddenInput.value === "1"
}
});

updateSecondaryTable();

}

</script>
{% endblock %}
Loading

0 comments on commit 7491290

Please sign in to comment.