parsing json response and pretty printing into the main body now. Each manga is getting it's own div so it can be semi-easily expanding with additional information in the future. Main screen is also cleared as part of the onClick now so it helps it be more readable. Active is tested and working, couldn't test download fully.

This commit is contained in:
Dan
2020-08-07 00:18:07 -04:00
parent af4c2dc08d
commit bec0c2dc67
2 changed files with 60 additions and 6 deletions

View File

@@ -42,6 +42,10 @@ ul{
overflow: scroll; overflow: scroll;
height: 200px; height: 200px;
} }
.activeList{
text-align: left;
padding-bottom: 5px;
}
.footer{ .footer{
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 5; grid-column-end: 5;

View File

@@ -6,7 +6,7 @@
<title>Title</title> <title>Title</title>
</head> </head>
<body> <body>
<dev class="grid-container"> <div class="grid-container">
<div class="header">Super Awesome Mange Downloading and Viewing Thing</div> <div class="header">Super Awesome Mange Downloading and Viewing Thing</div>
<div class="nav" align="left"> <div class="nav" align="left">
<ul> <ul>
@@ -17,7 +17,6 @@
</ul> </ul>
</div> </div>
<div class="main" id="main"> <div class="main" id="main">
</div> </div>
<div class="footer"> <div class="footer">
bottom stuffs bottom stuffs
@@ -27,14 +26,65 @@
</html> </html>
<script> <script>
var x = '';
var bookTitle = '';
var bookCommand = '';
function activeReturn() { function activeReturn() {
document.getElementById('main').innerHTML= '';
fetch('/active') fetch('/active')
.then(response => response.json()) .then(response => response.json())
.then(data => document.getElementById("main").innerHTML = JSON.stringify(data)); .then(function(data) {
for (i=0; i < data.active.length; i++ )
{
x = data.active[i];
<!--console.log(x.title)-->
var div = document.createElement('div');
div.setAttribute('id', x.id);
div.setAttribute('class', 'activeList');
div.innerHTML = '<b>' + x.title + '</b><br>';
document.getElementById("main").appendChild(div);
};
});
}; };
function downloadReturn() { function downloadReturn() {
document.getElementById('main').innerHTML='';
<!--Create the main.updated div-->
var div = document.createElement('div');
div.setAttribute('id','updated')
div.innerHTML = '<b>Updated</b>'
document.getElementById('main').appendChild(div);
<!--Create the main.missingFlags div-->
var div = document.createElement('div');
div.setAttribute('id', 'missingFlags');
div.innerHTML='<b>Missing Flags</b>';
document.getElementById('main').appendChild(div);
<!--Create the main.missingManga div-->
var div = document.createElement('div');
div.setAttribute('id', 'missingManga');
div.innerHTML='<b>Missing Manga</b>';
document.getElementById('main').appendChild(div);
<!--Create the main.notUpdated div-->
var div = document.createElement('div');
div.setAttribute('id','notUpdated');
div.innerHTML='<b>Not Updated</b>';
document.getElementById('main').appendChild(div);
fetch('/download') fetch('/download')
.then(response => response.json()) .then(response => response.json())
.then(data => document.getElementById("main").innerHTML = JSON.stringify(data)); .then(function(data){
for (i=0; data.updated.length; i++) {
bookTitle = data.book[i];
bookCommand = data.command[i];
var div = document.createElement('div');
div.setAttribute('id', 'book'+i);
div.innerHTML = bookTitle + "<br>";
document.getElementById("updated").appendChild(div);
};
});
}; };
</script> </script>