Adding Book to Frontpage

#controllers/book.py
import config, copy, uuid, datetime
from flask import render_template, session, redirect, request
from lib import Lib
from models.dashboard.bookdb import Bookdb

class Book():
  def __init__(self):
    self.lib = Lib()
    self.bookdb = Bookdb()

  def get_post_book(self):
    vdict = copy.deepcopy(config.vdict)  
    vdict['books'] = self.bookdb.select(vdict['book_max_post'])
    vdict['thumbs'] = self.lib.get_thumbs(vdict['books'], 2)
    return vdict

  def load(self, page):
    vdict = copy.deepcopy(config.vdict)
    vdict['books'] = self.bookdb.select(vdict['book_max_post'], page=page)
    vdict['thumbs'] = self.lib.get_thumbs(vdict['books'], 2)

    new_list = []
    for book in vdict['books']:
      new_book = list(book)
      new_book[3] = book[3].strftime('%d/%m/%Y') 
      new_book[4] = book[4].strftime('%H:%M:%S') 
      new_list.append(new_book)

      vdict['books'] = new_list
      return vdict

//static/scripts/index.js
class Index{
  constructor(){
    this.page = 0;
  }

  navigate(nav){
    $('#front-nav .home').attr('src', '/static/images/loading.gif')
    $.get("/panel",
    {nav:nav},
    function(data, status){
      if(status == "success"){
        var html = '';
        var data = JSON.parse(data);
        
        if((data.posts).length !== 0){
          for(var v in data.posts){
            if(v == 0){
              html += '<div class="wrapper1">';
              html += '<div  style="position:relative;padding-top:57.30%;">';
            }else{
              html += '<div class="wrapper">';
              html += '<div  style="position:relative;padding-top:56.25%;">';
            }

            html += `<a href="/post/${ data['posts'][v][0] }"><img src="${ data['thumbs'][v] }" style="position:absolute;top:0;left:0;width:100%;min-height:100%;" /></a>`;
            html += `<a href="/post/${ data['posts'][v][0] }"><p class="title" >${ data['posts'][v][1] }</p></a>`;

            if (data['videos'][v].length){
              html += `<a href="/post/${ data['posts'][v][0] }"><img class="play-icon" src="/static/images/play.png" /></a>`;
            }

            html += `<p class="date-news" >${(data['posts'][v][4]) }</p>`;
            html += '</div>';
            html += '</div>';
          }

          $('#front-panel').html(html);
        }

        $('#front-nav .home').attr('src', '/static/images/home.png')
        
      }else
        alert('Fail to connect to server.');
    });
  }

  loadBook(){
    $('#load-more img').attr('src', '/static/images/loading.gif');
    index.page += 1;

    $.get('/book/load/',
      {'ajax':index.page},
      function(data, status){
        if(status === "success"){
          var html = "";
        
          for(var v=0; v<data['books'].length; v++){
            html += `<a href="/book/${ data['books'][v][0] }"><img src="${ data['thumbs'][v] }" /></a>`;
          }

          $('#books').append(html);
          $('#load-more img').attr('src', '/static/images/load-more.png');

        }else{
          alert('Fail to connect to server.');
        }
    });
  }

}//End of class

const index = new Index();

<!--templates/index.html-->
{% extends "base.html" %}

{% block head %}
{{ super() }}
<link href="/static/styles/index.css" rel="stylesheet" >
<script src="/static/scripts/index.js"></script>
{% endblock %}

{% block main %}
<div id="front-panel">

{% if 'posts' in data %}
  {% for v in range(data['posts']|length) %}
  {% if v == 0 %}
  <div class='wrapper1'>
    <div  style="position:relative;padding-top:57.30%;">
  {% else %}
  <div class='wrapper'>
    <div  style="position:relative;padding-top:56.25%;">
  {% endif %}
      <a href="/post/{{ data['posts'][v][0] }}"><img src="{{ data['thumbs'][v] }}" style="position:absolute;top:0;left:0;width:100%;min-height:100%;" /></a>
      <a href="/post/{{ data['posts'][v][0] }}"><p class="title" >{{ data['posts'][v][1] }}</p></a>
      {% if data['videos'][v]|length %}
      <a href="/post/{{ data['posts'][v][0] }}"><img class="play-icon" src="/static/images/play.png" /></a>
      {% endif %}
      <p class="date-news" >{{ (data['posts'][v][4]) }}</p>
    </div>
  </div>
  {% endfor %}
  
</div>
{% endif %}

<div id='front-nav'>
  <img onclick="index.navigate('next')" class="left" src="/static/images/left.png" />
  <img onclick="index.navigate('home')" class="home" src="/static/images/home.png" />
  <img onclick="index.navigate('previous')" class="right" src="/static/images/right.png" />
</div>

<div id="books">
  {% if 'books' in data %}
  {% for v in range(data['books']['books']|length) %}
  <a href="/book/{{ data['books']['books'][v][0] }}"><img src="{{ data['books']['thumbs'][v] }}" /></a>
  {% endfor %}
  {% endif %}
</div>

<div id="load-more" class="load-more region">
  <img onclick="index.loadBook()" src="/static/images/load-more.png" />
</div>

{% endblock %}

GitHub: "https://github.com/Sokhavuth/E-Learning
Heroku: https://khmerweb-elearning.herokuapp.com/