From 0bb05f210269f6444b307b675f0f7289874bab9b Mon Sep 17 00:00:00 2001 From: "Michael V." Date: Wed, 29 Jan 2025 20:43:47 +0100 Subject: [PATCH] Add info endpoint on index --- index.php | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++---- script.js | 54 ++++++++++++++++++++++++++++++++- 2 files changed, 137 insertions(+), 6 deletions(-) diff --git a/index.php b/index.php index cc4f931..00bc037 100644 --- a/index.php +++ b/index.php @@ -12,7 +12,7 @@
-
+
Convert
@@ -91,7 +91,7 @@
-
+
Search
@@ -100,10 +100,9 @@
+ +
+
+
+
Info
+
+
+ +
+
+
+ + +
+
+
+ + +
+
+ +
+
+
Json response
+
+
+ 
{}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Error:
Error message:-
Channel:-
Channel ID:-
Channel URL:-
Description:-
Duration:-
ID:-
Published at:-
Title:-
URL:-
+
+
+
diff --git a/script.js b/script.js index edf72fc..a530e20 100644 --- a/script.js +++ b/script.js @@ -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(); @@ -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"); @@ -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 = " Getting info..."; + + fetch(`${frmInfo.getAttribute('action')}?q=${query}`) + .then(response => response.json()) + .then(data => handleInfoResponse(data, submitButton)); + }); }); function handleConvertResponse(data, submitButton) { @@ -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 = ""; tableCells[1].innerText = data.message; } else { @@ -116,4 +134,38 @@ function handleSearchResponse(data, submitButton) { ulElement.appendChild(item); }); } +} + +function handleInfoResponse(data, submitButton) +{ + submitButton.innerHTML = " 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 = ""; + tableCells[1].innerText = data.message; + } + else + { + tableCells[0].innerHTML = ""; + tableCells[1].innerText = "-"; + tableCells[2].innerText = data.channel; + tableCells[3].innerText = data.channel_id; + tableCells[4].innerHTML = `${data.channel_url}`; + 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 = `${data.url}`; + } } \ No newline at end of file