Skip to content

Commit

Permalink
Add info endpoint on index
Browse files Browse the repository at this point in the history
  • Loading branch information
@MichaelBelgium
MichaelBelgium committed Jan 29, 2025
1 parent 696e17f commit 0bb05f2
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 6 deletions.
89 changes: 84 additions & 5 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<?php include 'includes/nav.php'; ?>

<div class="row mt-2">
<div class="col-lg-6">
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h5 class="card-title">Convert</h5>
Expand Down Expand Up @@ -91,7 +91,7 @@
</div>
</div>

<div class="col-lg-6">
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h5 class="card-title">Search</h5>
Expand All @@ -100,10 +100,9 @@
<form action="search.php" method="get" id="frm-search">
<div class="row">
<div class="col-lg-8">

<div class="form-floating mb-3">
<input type="text" name="q" class="form-control" id="q" required placeholder="search term" />
<label for="q">Search term</label>
<input type="text" name="q" class="form-control" id="q_search" required placeholder="search term" />
<label for="q_search">Search term</label>
</div>
</div>

Expand Down Expand Up @@ -146,6 +145,86 @@
</div>
</div>
</div>

<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h5 class="card-title">Info</h5>
</div>
<div class="card-body">
<form action="info.php" method="get" id="frm-info">
<div class="row">
<div class="col-lg-8">
<div class="form-floating mb-3">
<input type="text" name="q" class="form-control" id="q_info" required placeholder="" />
<label for="q_info">Youtube ID or url</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-outline-primary"><i class="fas fa-search"></i> Retrieve info</button>
</form>
</div>
</div>

<div class="card mt-3" id="info-response">
<div class="card-header">
<h5 class="card-title">Json response</h5>
</div>
<div class="card-body">
<pre>{}</pre>
</div>
<div class="card-footer">
<table class="table table-borderless table-sm w-auto">
<tbody>
<tr>
<td>Error:</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Error message:</td>
<td>-</td>
</tr>
<tr>
<td>Channel:</td>
<td>-</td>
</tr>
<tr>
<td>Channel ID:</td>
<td>-</td>
</tr>
<tr>
<td>Channel URL:</td>
<td>-</td>
</tr>
<tr>
<td>Description:</td>
<td>-</td>
</tr>
<tr>
<td>Duration:</td>
<td>-</td>
</tr>
<tr>
<td>ID:</td>
<td>-</td>
</tr>
<tr>
<td>Published at:</td>
<td>-</td>
</tr>
<tr>
<td>Title:</td>
<td>-</td>
</tr>
<tr>
<td>URL:</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

Expand Down
54 changes: 53 additions & 1 deletion script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
const frmConvert = document.getElementById('frm-convert');
const removeButton = document.getElementById('remove');
const frmSearch = document.getElementById('frm-search');
const frmInfo = document.getElementById('frm-info');

frmConvert.addEventListener('submit', (e) => {
e.preventDefault();
Expand Down Expand Up @@ -30,7 +31,7 @@ document.addEventListener('DOMContentLoaded', () => {
e.preventDefault();

const submitButton = frmSearch.querySelector("button[type=submit]");
const query = document.getElementById('q').value;
const query = document.getElementById('q_search').value;
const maxResults = document.getElementById('max_results').value;

submitButton.classList.add("disabled");
Expand All @@ -40,6 +41,20 @@ document.addEventListener('DOMContentLoaded', () => {
.then(response => response.json())
.then(data => handleSearchResponse(data, submitButton));
});

frmInfo.addEventListener('submit', (e) => {
e.preventDefault();

const submitButton = frmInfo.querySelector("button[type=submit]");
const query = document.getElementById('q_info').value;

submitButton.classList.add("disabled");
submitButton.innerHTML = "<i class=\"fas fa-spin fa-sync-alt\"></i> Getting info...";

fetch(`${frmInfo.getAttribute('action')}?q=${query}`)
.then(response => response.json())
.then(data => handleInfoResponse(data, submitButton));
});
});

function handleConvertResponse(data, submitButton) {
Expand Down Expand Up @@ -89,6 +104,9 @@ function handleSearchResponse(data, submitButton) {
ulElement.innerHTML = '';

if(data.error) {
for (let i = 0; i < tableCells.length; i++)
tableCells[i].innerText = "-";

tableCells[0].innerHTML = "<i class=\"fa fa-check\"></i>";
tableCells[1].innerText = data.message;
} else {
Expand Down Expand Up @@ -116,4 +134,38 @@ function handleSearchResponse(data, submitButton) {
ulElement.appendChild(item);
});
}
}

function handleInfoResponse(data, submitButton)
{
submitButton.innerHTML = "<i class=\"fa fa-search\"></i> Retrieve info";
submitButton.classList.remove("disabled");

const preElement = document.getElementById("info-response").querySelector('pre');
preElement.innerText = JSON.stringify(data, null, 4);

const tableCells = document.querySelectorAll("#info-response table tr td:last-child");

if (data.error)
{
for (let i = 0; i < tableCells.length; i++)
tableCells[i].innerText = "-";

tableCells[0].innerHTML = "<i class=\"fa fa-check\"></i>";
tableCells[1].innerText = data.message;
}
else
{
tableCells[0].innerHTML = "<i class=\"fa fa-times\"></i>";
tableCells[1].innerText = "-";
tableCells[2].innerText = data.channel;
tableCells[3].innerText = data.channel_id;
tableCells[4].innerHTML = `<a target='_blank' href='${data.channel_url}'>${data.channel_url}</a>`;
tableCells[5].innerText = data.description;
tableCells[6].innerText = data.duration + ' seconds';
tableCells[7].innerText = data.id;
tableCells[8].innerText = data.published_at;
tableCells[9].innerText = data.title;
tableCells[10].innerHTML = `<a target='_blank' href='${data.url}'>${data.url}</a>`;
}
}

0 comments on commit 0bb05f2

Please sign in to comment.