Skip to content

Commit

Permalink
toloka search redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@maksii
maksii committed Jun 1, 2024
1 parent cb1e527 commit fbddd39
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 59 deletions.
10 changes: 9 additions & 1 deletion toloka2MediaServer/main_logic.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,12 @@ def search_torrents(args, logger, operation_result=None):
def get_torrent(args, logger, operation_result=None):
torrent = toloka.get_torrent(f"{toloka.toloka_url}/{args}")

return torrent
return torrent

def add_torrent(args, logger, operation_result=None):
#TBD placeholder for now
tolokaTorrentFile = toloka.download_torrent(f"{toloka.toloka_url}/{args}")

client.add_torrent(torrents=tolokaTorrentFile, category="", tags=[""], is_paused=False, download_dir="")

return ""
15 changes: 15 additions & 0 deletions toloka2MediaServerWeb/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,21 @@ def get_torrent():
else:
return []

@app.route('/add_torrent', methods=['GET'])
def add_torrent():
# Extract the search parameter from the URL query string
id = request.args.get('id', default=None, type=str)

if id:
# Convert data to JSON format
toloka2MediaServer.main_logic.add_torrent(id, logger)


# Return the JSON response
return [], 200
else:
return []

@app.route('/add_release', methods=['POST'])
def add_release():
# Process the URL to add release
Expand Down
44 changes: 41 additions & 3 deletions toloka2MediaServerWeb/static/titles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ $(document).ready(function() {
}, visible: true },
{ data: 'hash', title: 'Hash' },
{ data: 'meta', title: 'Meta' },
{ data: 'publish_date', title: 'Publish Date' },
{ data: 'publish_date', title: 'Publish Date', visible: true },
{ data: 'release_group', title: 'Release Group' },
{ data: 'season_number', title: 'Season Number' },
{ data: null, title: 'Actions', orderable: false, render: function(data, type, row) {
Expand All @@ -35,9 +35,10 @@ $(document).ready(function() {
`;
}, visible: true }
],
order: [[9, 'des']],
columnDefs: [
{ targets: '_all', visible: false },
{ targets: [0, 1, 6, 12], visible: true }
{ targets: [0, 1, 6, 9, 12], visible: true }
],
layout: {
topStart: {
Expand All @@ -57,4 +58,41 @@ $(document).ready(function() {
window.refreshTable = function() {
table.ajax.reload();
};
});

function extractNumbers() {
const input = document.getElementById('numberInput').value;
const numbers = input.split('').map((ch) => (ch >= '0' && ch <= '9') ? ch : ' ').join('').trim().split(/\s+/);
const resultList = document.getElementById('result');
resultList.innerHTML = '';

numbers.forEach((number, index) => {
if (number !== '') {
const item = document.createElement('div');
item.className = 'list-group-item';
item.textContent = `Index: ${index+1}, Number: ${number}`;
item.addEventListener('click', () => {
document.getElementById('index').value = index + 1;
resultList.style.display = 'none';
});
resultList.appendChild(item);
}
});

if (numbers.join('').length === 0) {
resultList.style.display = 'none';
} else {
resultList.style.display = 'block';
}
}
// Get the input element
const numberInput = document.querySelector('#numberInput');

// Event listener for input event
numberInput.addEventListener('input', extractNumbers);

// Event listener for change event
numberInput.addEventListener('change', extractNumbers);

});


90 changes: 81 additions & 9 deletions toloka2MediaServerWeb/static/toloka.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ $(document).ready(function () {
$('.d-flex[role="search"]').on('submit', function (e) {
e.preventDefault();
var query = $(this).find('input[type="search"]').val();

const bsOffcanvas = new bootstrap.Offcanvas('#offcanvasTopSearchResults')
bsOffcanvas.toggle()
if (!initialized) {
// Initialize DataTable
table = $('#torrentTable').DataTable({
Expand Down Expand Up @@ -43,9 +44,9 @@ $(document).ready(function () {
{ data: "verify", title: 'verify', visible: false },
{ data: null, title: 'Actions', orderable: false, render: function(data, type, row) {
return `
<button class="btn btn-outline-warning" disabled><span class="bi bi-download" aria-hidden="true"></span><span class="visually-hidden" role="status">Direct Download</span></button>
<button class="btn btn-outline-warning" disabled><span class="bi bi-cloud-download" aria-hidden="true"></span><span class="visually-hidden" role="status">Add to client</span></button>
<button class="btn btn-outline-primary" disabled><span class="bi bi-chevron-double-left" aria-hidden="true"></span><span class="visually-hidden" role="status">Copy Values</span></button>
<button class="btn btn-outline-warning action-download"><span class="bi bi-download" aria-hidden="true"></span><span class="visually-hidden" role="status">Direct Download</span></button>
<button class="btn btn-outline-warning action-add"><span class="bi bi-cloud-download" aria-hidden="true"></span><span class="visually-hidden" role="status">Add to client</span></button>
<button class="btn btn-outline-primary action-copy"><span class="bi bi-chevron-double-left" aria-hidden="true"></span><span class="visually-hidden" role="status">Copy Values</span></button>
`;
}, visible: true }
],
Expand All @@ -57,10 +58,7 @@ $(document).ready(function () {
{
extend: 'colvis',
postfixButtons: ['colvisRestore']
},
{ text: 'Refresh', action: function ( e, dt, node, config ) {
dt.ajax.reload();
}}
}
]
}
}
Expand All @@ -84,17 +82,38 @@ $(document).ready(function () {
success: function (detail) {
var childData = formatDetail(detail, data);
row.child(childData).show();
tr.data('childData', detail);
}
});
}
});

$('#torrentTable tbody').on('click', '.action-download, .action-copy, .action-add', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
var data = row.data();
var childData = tr.data('childData');

switch (true) {
case $(this).hasClass('action-download'):
performDownloadAction(data, childData);
break;
case $(this).hasClass('action-copy'):
performCopyAction(data, childData);
break;
case $(this).hasClass('action-add'):
performAddAction(data, childData);
break;
}
});

initialized = true;
$('#torrentTable').show();
} else {
table.ajax.url('/get_torrents?query=' + query).load();
}
});

function formatLoading() {
return '<div class="d-flex justify-content-center">' +
'<div class="spinner-border" role="status">' +
Expand All @@ -120,7 +139,7 @@ $(document).ready(function () {
<div class="card">
<div class="row g-0">
<div class="col-md-2">
<img src="${detail.thumbnail}" class="card-img-top" alt="...">
<img src="${detail.img}" class="card-img-top" alt="...">
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary position-relative" disabled>
${detail.size}
Expand Down Expand Up @@ -151,4 +170,57 @@ $(document).ready(function () {
</div>
`;
}

const bsOffcanvas = new bootstrap.Offcanvas('#offcanvasTopSearchResults')

function performAddAction(rowData, childData) {
console.log('Add action triggered', rowData, childData);

$.ajax({
url: '/add_torrent?id=' + rowData.torrent_url,
type: 'GET',
success: function (detail) {
console.log('Not implemented YET', detail);
}
});

document.querySelector('#offcanvasTopSearchResults > div.offcanvas-header > button').click()
}

function performCopyAction(rowData, childData) {
console.log('Copy action triggered', rowData, childData);
bsOffcanvas.hide()

document.querySelector('#title').value = rowData.name;
document.querySelector('#url').value = `https://toloka.to/${rowData.url}`;
if(childData != null)
{
var input = document.querySelector('#numberInput');
input.value = childData.files[0].file_name

const event = new Event('input', {
bubbles: true,
cancelable: true,
});
input.dispatchEvent(event);
}
document.querySelector('#offcanvasTopSearchResults > div.offcanvas-header > button').click()
}

function performDownloadAction(rowData, childData) {
console.log('Download action triggered', rowData, childData);
var url = `https://toloka.to/${rowData.torrent_url}`

downloadFile(url);
document.querySelector('#offcanvasTopSearchResults > div.offcanvas-header > button').click()
}

function downloadFile(url) {
const link = document.createElement('a');
link.href = url;
link.download = true;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
59 changes: 13 additions & 46 deletions toloka2MediaServerWeb/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toloka2MediaServer</title>
<title>Toloka2MediaServer v2024.06.01.810</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Expand All @@ -15,7 +15,6 @@
<link href="https://cdn.datatables.net/v/bs5/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/r-3.0.2/sc-2.4.3/sl-2.0.3/datatables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/r-3.0.2/sc-2.4.3/sl-2.0.3/datatables.min.js"></script>
<script src="static/titles.js"></script>

<script src="static/toloka.js"></script>
</head>
<body class="d-flex flex-column h-100">
Expand Down Expand Up @@ -132,45 +131,10 @@
<div class="card-body">
<h5 class="card-title">Get Index</h5>
<label for="numberInput">Enter Text:</label>
<input type="text" class="form-control" id="numberInput" oninput="extractNumbers()" placeholder="[Inari Dub] Arknights Touin Kiro S01 E09 (1080) (UA).mkv">
<input type="text" class="form-control" id="numberInput" placeholder="[Inari Dub] Arknights Touin Kiro S01 E09 (1080) (UA).mkv">
<div id="result" class="result-list list-group"></div>
</div>
</div>
<script>
function extractNumbers() {
const input = document.getElementById('numberInput').value;
const numbers = input.split('').map((ch) => (ch >= '0' && ch <= '9') ? ch : ' ').join('').trim().split(/\s+/);
const resultList = document.getElementById('result');
resultList.innerHTML = '';

numbers.forEach((number, index) => {
if (number !== '') {
const item = document.createElement('div');
item.className = 'list-group-item';
item.textContent = `Index: ${index+1}, Number: ${number}`;
resultList.appendChild(item);
}
});

if (numbers.join('').length === 0) {
resultList.style.display = 'none';
} else {
resultList.style.display = 'block';
}
}

document.addEventListener("DOMContentLoaded", function() {
const forms = document.querySelectorAll('form');

forms.forEach(form => {
form.addEventListener('submit', function(event) {
document.querySelectorAll('form button').forEach(button => {
button.disabled = true;
});
});
});
});
</script>
</div>
<!-- Section 1 -->
<div class="col-md-12">
Expand Down Expand Up @@ -250,14 +214,6 @@ <h5 class="card-title">Update by codename</h5>
<!-- Right Side content -->
<div class="col-md-8">
<div class="row">
<div class="col-md-12 torrentTable">
<div class="card ">
<div class="card-body">
<h5 class="card-title">Search Results</h5>
<table id="torrentTable" class="table table-striped" style="width:100%; display:none;"></table>
</div>
</div>
</div>
<div class="col-md-12">
{% if output %}
<div class="card alert {{ 'alert-success' if output.response_code == 'SUCCESS' else 'alert-danger' if output.response_code == 'FAILURE' else 'alert-warning' }}" >
Expand Down Expand Up @@ -353,6 +309,17 @@ <h5 class="card-title">Added Titles</h5>

</div>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTopSearchResults" aria-labelledby="offcanvasTopSearchResultsLabel" data-bs-backdrop="static" style="height: 90vh;">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopSearchResultsLabel">Search Results</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<table id="torrentTable" class="table table-striped" style="width:100%; display:none;"></table>
</div>
</div>


</main>
<footer class="footer mt-auto py-3 bg-body-tertiary">
<div class="container">
Expand Down

0 comments on commit fbddd39

Please sign in to comment.