added progress display, better rounding

TODO: getPrev gives wrong values,
design, testing

cps/static/css/main.css

@@ -826,3 +826,9 @@ input:-moz-placeholder { color: #454545; }
 .icon-columns::before { content: '\e810'; } /* '' */
 .icon-list::before { content: '\e800'; } /* '' */
 .icon-resize-small::before { content: '\e808'; } /* '' */
+
+#progress{
+    right: 40px;
+    bottom: 40px;
+    text-align: center;
+}

cps/static/js/reading/epub-progress.js

@@ -7,7 +7,7 @@ class EpubParser {
     }
 
 
-    getTotalByteLength() {
+    getTotalByteLength() { //TODO unrealistic values
         let size = 0;
         for (let key of Object.keys(this.files)) {
             let file = this.files[key];
@@ -171,7 +171,7 @@ class EpubParser {
     }
 }
 function waitFor(variable, callback) {
-  var interval = setInterval(function() {
+  const interval = setInterval(function() {
     if (variable!==undefined) {
       clearInterval(interval);
       callback();
@@ -185,12 +185,12 @@ function waitFor(variable, callback) {
  */
 function calculateProgress(){
     let data=reader.rendition.currentLocation().end;
-    return epubParser.getProgress(epubParser.absPath(data.href),data.cfi).toFixed(2)*100;
+    return Math.round(epubParser.getProgress(epubParser.absPath(data.href),data.cfi)*100);
 }
 var epubParser;
 waitFor(reader.book,()=>{
     epubParser = new EpubParser(reader.book.archive.zip.files);
-})
+});
 /*
 register new event emitter locationchange that fires on urlchange
 source: https://stackoverflow.com/a/52809105/21941129
@@ -214,7 +214,10 @@ source: https://stackoverflow.com/a/52809105/21941129
         window.dispatchEvent(new Event('locationchange'));
     });
 })();
+let progressDiv=document.getElementById("progress");
 window.addEventListener('locationchange',()=>{
-    let newPos=epubParser.calculateProgress();
+    let newPos=calculateProgress();
+    console.log(newPos);
+    progressDiv.textContent=newPos+"%";
     //getelement set element value
 });

cps/templates/read.html

@@ -68,7 +68,7 @@
     <div id="prev" class="arrow">‹</div>
     <div id="viewer"></div>
     <div id="next" class="arrow">›</div>
-
+    <div id="progress">0%</div>
     <div id="loader"><img src="{{ url_for('static', filename='img/loader.gif') }}"></div>
 </div>
 <div class="modal md-effect-1" id="settings-modal">