Barely presentable dynamic javascript frontpage
This commit is contained in:
parent
a5c52223dd
commit
a4f6e305b1
|
@ -0,0 +1,97 @@
|
|||
class TPDF {
|
||||
|
||||
static display() {
|
||||
console.log(TPDF.xhr.responseText);
|
||||
|
||||
if (TPDF.xhr.readyState == 4 && TPDF.xhr.status == 200) {
|
||||
TPDF.output.removeChild(TPDF.output.childNodes[0]);
|
||||
var results = JSON.parse(TPDF.xhr.responseText);
|
||||
|
||||
for (var i in results['books']) {
|
||||
var dtAuthors = document.createElement('dt');
|
||||
dtAuthors.appendChild(document.createTextNode('Authors'));
|
||||
var dtPublisher = document.createElement('dt');
|
||||
dtPublisher.appendChild(document.createTextNode('Publisher'));
|
||||
var dtYear = document.createElement('dt');
|
||||
dtYear.appendChild(document.createTextNode('Year'));
|
||||
var dtPages = document.createElement('dt');
|
||||
dtPages.appendChild(document.createTextNode('Pages'));
|
||||
var dtISBN = document.createElement('dt');
|
||||
dtISBN.appendChild(document.createTextNode('ISBN'));
|
||||
var dtId = document.createElement('dt');
|
||||
dtId.appendChild(document.createTextNode('ID'));
|
||||
|
||||
var ddAuthors = document.createElement('dd');
|
||||
var authorsString = '';
|
||||
for (var j in results['books'][i]['authors']) {
|
||||
authorsString += results['books'][i]['authors'][j];
|
||||
if (j < results['books'][i]['authors'].length - 1) authorsString += ', ';
|
||||
}
|
||||
ddAuthors.appendChild(document.createTextNode(authorsString));
|
||||
|
||||
var ddPublisher = document.createElement('dd');
|
||||
ddPublisher.appendChild(document.createTextNode(results['books'][i]['publisher']));
|
||||
var ddYear = document.createElement('dd');
|
||||
ddYear.appendChild(document.createTextNode(results['books'][i]['year']));
|
||||
var ddPages = document.createElement('dd');
|
||||
ddPages.appendChild(document.createTextNode(results['books'][i]['page']));
|
||||
var ddISBN = document.createElement('dd');
|
||||
ddISBN.appendChild(document.createTextNode(results['books'][i]['isbn']));
|
||||
var ddId = document.createElement('dd');
|
||||
ddId.appendChild(document.createTextNode(results['books'][i]['id']));
|
||||
|
||||
|
||||
var bookElement = document.createElement('section');
|
||||
var titleElement = document.createElement('h2');
|
||||
var coverElement = document.createElement('img');
|
||||
|
||||
var dlElement = document.createElement('dl');
|
||||
var authorsElement = document.createElement('ul');
|
||||
|
||||
dlElement.appendChild(dtAuthors);
|
||||
dlElement.appendChild(ddAuthors);
|
||||
dlElement.appendChild(dtPublisher);
|
||||
dlElement.appendChild(ddPublisher);
|
||||
dlElement.appendChild(dtYear);
|
||||
dlElement.appendChild(ddYear);
|
||||
dlElement.appendChild(dtPages);
|
||||
dlElement.appendChild(ddPages);
|
||||
dlElement.appendChild(dtISBN);
|
||||
dlElement.appendChild(ddISBN);
|
||||
dlElement.appendChild(dtId);
|
||||
dlElement.appendChild(ddId);
|
||||
|
||||
|
||||
|
||||
titleElement.appendChild(document.createTextNode(results['books'][i]['title']));
|
||||
coverElement.src = 'https://golem.linux.it/cgi/tpdf/output/images/' + results['books'][i]['cover'];
|
||||
coverElement.alt = 'Cover of «' + results['books'][i]['title'] + '»';
|
||||
|
||||
bookElement.appendChild(titleElement);
|
||||
bookElement.appendChild(coverElement);
|
||||
bookElement.appendChild(dlElement);
|
||||
|
||||
|
||||
TPDF.output.appendChild(bookElement);
|
||||
}
|
||||
}
|
||||
else {
|
||||
TPDF.output.childNodes[0].textContent = 'API Error. Try later.';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
static submit() {
|
||||
TPDF.xhr = new XMLHttpRequest();
|
||||
TPDF.xhr.onload = TPDF.display;
|
||||
TPDF.xhr.open('GET', 'https://golem.linux.it/cgi/tpdf/main.py?format=json')
|
||||
TPDF.xhr.send(null);
|
||||
|
||||
TPDF.output = document.getElementById('tpdfOutput');
|
||||
TPDF.output.childNodes[0].textContent = 'Searching...';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
TPDF.xhr = null;
|
||||
TPDF.output = null;
|
10
index.html
10
index.html
|
@ -3,11 +3,12 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
|
||||
<script type="text/javascript" src="frontend.js"></script>
|
||||
<title>TPDF - Tellico Parser anD Finder</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div id="tpdfSearchDiv">
|
||||
<h1>TPDF - Tellico Parser anD Finder</h1>
|
||||
|
||||
<form action="main.py" method="get">
|
||||
|
@ -19,9 +20,14 @@
|
|||
<input type="text" name="author" />
|
||||
<br />
|
||||
|
||||
<input type="submit" />
|
||||
<input type="button" value="Submit" onclick="TPDF.submit();"/>
|
||||
<input type="reset" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div id="tpdfOutput">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
|
1
main.py
1
main.py
|
@ -45,6 +45,7 @@ if format == 'html':
|
|||
print('Content-Type: text/html; charset=utf-8')
|
||||
else:
|
||||
print('Content-Type: text/json; charset=utf-8')
|
||||
print('Access-Control-Allow-Origin: *')
|
||||
|
||||
print()
|
||||
|
||||
|
|
11
style.css
11
style.css
|
@ -4,14 +4,15 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
color: black;
|
||||
background-color: #DEDEDE;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
background-color: #fff1ca;
|
||||
}
|
||||
|
||||
/******* Search form *******/
|
||||
#tpdfSearchDiv {
|
||||
padding: 10px;
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
form label {
|
||||
display: inline-block;
|
||||
width: 10em;
|
||||
|
|
Loading…
Reference in New Issue