-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
0 additions
and
249 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,250 +1 @@ | ||
<!DOCTYPE html> | ||
|
||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>sns-yt-comments</title> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | ||
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> | ||
</head> | ||
|
||
<body id="banner" onload="execute()"> | ||
<script> | ||
// Make sure the client is loaded before calling this method. | ||
async function execute() { | ||
document.getElementById("1a").innerHTML = '<br><br><div class="text-center"><div class="spinner-border" role="status"></div></div> ' | ||
document.getElementById("2a").innerHTML = '<br><br><div class="text-center"><div class="spinner-border" role="status"></div></div> ' | ||
document.getElementById("3a").innerHTML = '<br><br><div class="text-center"><div class="spinner-border" role="status"></div></div> ' | ||
|
||
const fetchResSNS = await fetch("https://lucaleonardobologna.it/snscommentsfull/"); | ||
const jsonDataSNS = await fetchResSNS.json(); | ||
populate(jsonDataSNS, "1a"); | ||
|
||
const fetchResSC = await fetch("https://lucaleonardobologna.it/sccommentsfull/"); | ||
const jsonDataSC = await fetchResSC.json(); | ||
populate(jsonDataSC, "2a"); | ||
|
||
const fetchResPGENG = await fetch("https://lucaleonardobologna.it/pgengcommentsfull/"); | ||
const jsonDataPGENG = await fetchResPGENG.json(); | ||
populate(jsonDataPGENG, "3a"); | ||
} | ||
|
||
|
||
function populate(res, divId) { | ||
let mainSnSdiv = document.getElementById(divId); | ||
mainSnSdiv.innerHTML = ""; | ||
mainSnSdiv.scrollTop = 0; | ||
|
||
// Handle the results here (response.result has the parsed body). | ||
res["items"].forEach(element => { | ||
/* container div */ | ||
let cdiv = document.createElement("div"); | ||
cdiv.classList.add("container", "border"); | ||
cdiv.setAttribute("style", "padding-top:4px; padding-bottom:4px") | ||
|
||
/* author-time row" */ | ||
let authorTimeRow = document.createElement("div"); | ||
authorTimeRow.classList.add("row"); | ||
/* author div */ | ||
let authorDiv = document.createElement("div"); | ||
authorDiv.classList.add("col-8", "text-wrap", "text-break") | ||
authorDiv.setAttribute("style", "font-size:14px") | ||
let author = element["snippet"]["topLevelComment"]["snippet"]["authorDisplayName"]; | ||
let authorImage = element["snippet"]["topLevelComment"]["snippet"]["authorProfileImageUrl"]; | ||
|
||
authorDiv.innerHTML = "<img width=22px src='" + authorImage + "''> <strong>" + author + "</strong>"; | ||
/* time div */ | ||
let timeDiv = document.createElement("div"); | ||
timeDiv.classList.add("col-4") | ||
timeDiv.setAttribute("style", "font-size:13px") | ||
let creationDateString = element["snippet"]["topLevelComment"]["snippet"]["updatedAt"]; | ||
let currentTime = new Date(); | ||
let creationDate = new Date(creationDateString); | ||
let timeToDisplay = timeText(currentTime, creationDate); | ||
timeDiv.innerHTML = timeToDisplay; | ||
/* */ | ||
authorTimeRow.appendChild(authorDiv) | ||
authorTimeRow.appendChild(timeDiv) | ||
cdiv.appendChild(authorTimeRow) | ||
|
||
/* comment row */ | ||
let commentRow = document.createElement("div"); | ||
commentRow.classList.add("row"); | ||
commentRow.setAttribute("style", "margin-top:8px; margin-bottom:12px;") | ||
let commentDiv = document.createElement("div"); | ||
commentDiv.classList.add("col-12", "text-wrap", "text-break"); | ||
let comment = element["snippet"]["topLevelComment"]["snippet"]["textOriginal"]; | ||
commentDiv.innerHTML = comment + "<br>"; | ||
commentRow.appendChild(commentDiv) | ||
cdiv.appendChild(commentRow) | ||
|
||
/* footer row */ | ||
let footerRow = document.createElement("div"); | ||
footerRow.classList.add("row"); | ||
footerRow.setAttribute("style", "font-size:13px; background-color: #f1f1f1; padding-bottom:7px; padding-top:7px") | ||
let footerDiv = document.createElement("div"); | ||
footerDiv.classList.add("col-12", "text-wrap", "text-break"); | ||
let videoID = element["snippet"]["topLevelComment"]["snippet"]["videoId"]; | ||
let videoTitle = element["videoTitle"] | ||
let videoPublishedAt = new Date(element["videoPublishedAt"]) | ||
let timeVideoPublished = timeText(currentTime, videoPublishedAt); | ||
let linkToAppPre = "intent://m.youtube.com/watch?v="; | ||
let linkToAppPost = "&feature=mweb_c3_open_app&itc_campaign=mweb_c3_open_app&redirect_app_store_ios=1&app=desktop#Intent;package=com.google.android.youtube;scheme=vnd.youtube;launchFlags=268435456;end" | ||
let linkToApp = linkToAppPre + videoID + linkToAppPost; | ||
let replies = element["snippet"]["totalReplyCount"]; | ||
|
||
let videoDetailsDiv = document.createElement("div"); | ||
videoDetailsDiv.classList.add("col-12") | ||
let answersDiv = document.createElement("div"); | ||
answersDiv.classList.add("col-4") | ||
let appDiv = document.createElement("div"); | ||
appDiv.classList.add("col-3") | ||
let urlDiv = document.createElement("div"); | ||
urlDiv.classList.add("col-3") | ||
let arrowDiv = document.createElement("div"); | ||
arrowDiv.classList.add("col-2") | ||
|
||
videoDetailsDiv.innerHTML = "<strong>" + videoTitle + "</strong>" + " - " + timeVideoPublished; | ||
answersDiv.innerHTML = "<strong>Risposte: " + replies; | ||
|
||
appDiv.innerHTML = "<a href='" + linkToApp + "'><i class='bi bi-youtube'></i> App</a>" | ||
urlDiv.innerHTML = "<a href='https://www.youtube.com/watch?v=" + videoID + "' target=_blank><i class='bi bi-youtube'></i> Url</a>"; | ||
arrowDiv.innerHTML = "<a href='#banner'><i class='bi bi-arrow-up'></i><a>" | ||
|
||
footerRow.appendChild(videoDetailsDiv) | ||
footerRow.appendChild(answersDiv) | ||
footerRow.appendChild(appDiv) | ||
footerRow.appendChild(urlDiv) | ||
footerRow.appendChild(arrowDiv) | ||
|
||
cdiv.appendChild(footerRow) | ||
|
||
let titleContentDiv = document.createElement("div"); | ||
titleContentDiv.classList.add("col-12"); | ||
|
||
cdiv.scrollTop = 0; | ||
mainSnSdiv.appendChild(cdiv); | ||
}); | ||
} | ||
|
||
|
||
/* ------------ */ | ||
|
||
function timeText(currentTime, creationDate) { | ||
// To calculate the time difference of two dates | ||
var DifferenceInTime = currentTime.getTime() - creationDate.getTime(); | ||
|
||
// To calculate the no. of days between two dates | ||
let diffDays = DifferenceInTime / (1000 * 3600 * 24); | ||
let diffHours = diffDays * 24; | ||
let diffMinutes = diffHours * 60; | ||
let diffYears = diffDays/365; | ||
let diffMonths = diffDays/30; | ||
let timeToDisplay = ""; | ||
if (diffYears > 1){ | ||
let displayTime = Math.floor(diffYears); | ||
if (displayTime == 1) | ||
text = " anno fa" | ||
else | ||
text = " anni fa" | ||
timeToDisplay = displayTime + text | ||
} | ||
else if (diffMonths > 1){ | ||
let displayTime = Math.floor(diffMonths); | ||
if (displayTime == 1) | ||
text = " mese fa" | ||
else | ||
text = " mesi fa" | ||
timeToDisplay = displayTime + text | ||
} | ||
else if (diffDays > 1) { | ||
let displayTime = Math.floor(diffDays); | ||
if (displayTime == 1) | ||
text = " giorno fa" | ||
else | ||
text = " giorni fa" | ||
timeToDisplay = displayTime + text; | ||
} else if (diffHours > 1) { | ||
let displayTime = Math.floor(diffHours); | ||
if (displayTime == 1) | ||
text = " ora fa" | ||
else | ||
text = " ore fa" | ||
timeToDisplay = displayTime + text; | ||
} else { | ||
let displayTime = Math.ceil(diffMinutes); | ||
if (displayTime == 1) | ||
text = " min fa" | ||
else | ||
text = " min fa" | ||
timeToDisplay = displayTime + text; | ||
} | ||
timeToDisplay = timeToDisplay; | ||
return timeToDisplay; | ||
} | ||
|
||
|
||
|
||
</script> | ||
|
||
<!-- Tab content --> | ||
<div id="exTab1" class=""> | ||
<div id="" class="sticky-top container" style="margin-top:2px"> | ||
<ul class=" nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" | ||
style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);"> | ||
<li class="nav-item" role="presentation"> | ||
<button href="#1a" class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" | ||
role="tab" aria-selected="true">SnS</button> | ||
</li> | ||
<li class="nav-item" role="presentation"> | ||
<button href="#2a" class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" | ||
aria-selected="false">Siate Curiosi</button> | ||
</li> | ||
<li class="nav-item" role="presentation"> | ||
<button href="#3a" class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" | ||
aria-selected="false">PG Eng</button> | ||
</li> | ||
</ul> | ||
<button id="updateBtn" onclick="execute()" | ||
style="background-color: white; border-color: #ffd174; border-width: 4px; --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem; margin-top:6px; margin-bottom:6px" | ||
type="button" class="container rounded-4 btn"> | ||
Aggiorna | ||
</button> | ||
</div> | ||
<div id="tab-container" class=" container "> | ||
<div class="row tab-content clearfix"> | ||
<div class="tab-pane active" id="1a"> | ||
</div> | ||
<div class="tab-pane" id="2a"> | ||
</div> | ||
<div class="tab-pane" id="3a"> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
</div> | ||
|
||
<!-- Tab content --> | ||
|
||
<!-- Bootstrap core JavaScript | ||
================================================== --> | ||
<!-- Placed at the end of the document so the pages load faster --> | ||
</div> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" | ||
crossorigin="anonymous"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" | ||
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" | ||
crossorigin="anonymous"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" | ||
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" | ||
crossorigin="anonymous"></script> | ||
<script> document.querySelectorAll('.nav-link').forEach(linkItem => { | ||
linkItem.addEventListener('click', _ => { | ||
window.scrollTo(0, 0) | ||
}) | ||
})</script> | ||
</body> | ||
</html> |