Creating Category Template

#controllers/index.py
import config, copy, json
from flask import render_template, redirect, session, request
from flask_classful import FlaskView, route
from controllers.post import Post

class Index(FlaskView):
    def __init__(self):
        self.post = Post()

    @route('/')
    def index(self):
        session['page'] = 0
        vdict = self.post.get_post()
        return render_template('index.html', data=vdict)

    @route('/panel')
    def get_post(self):
        nav = request.args.get('nav', 0, type=str)

        if nav == 'previous':
            session['page'] += 1
        elif nav == 'next':
            if session['page'] > 0:
                session['page'] -= 1
        else:
            session['page'] = 0

        vdict = self.post.get_post(page=session['page'])
        
        if not vdict['posts']:
            session['page'] -= 1

        return json.dumps(vdict)

    @route('/favicon.ico')
    def favicon(self):
        redirect('/static/images/site_logo.png')

    @route('/post/<id>')
    def get_single_post(self, id):
        vdict = self.post.get_single_post(id)
        return render_template('post.html', data=vdict)

    @route('/post/load/<label>')
    def load_post(self, label):
        vdict = self.post.get_post(config.vdict['post_max_category'], category=label)
        return vdict

    @route('/post/load/ajax/<label>')
    def load_post(self, label):
        ajax = request.args.get('ajax', 0, type=int)
        
        vdict = self.post.get_post(config.vdict['post_max_category'], category=label, page=ajax)
        return vdict

    @route('/category/<label>')
    def get_post_category(self, label):
        vdict = self.post.get_post(config.vdict['post_max_category'], category=label)
        return render_template('category.html', data=vdict)

#controllers/post.py
import config, copy
from flask import render_template, redirect
from lib import Lib
from models.dashboard.postdb import Postdb

class Post():
  def __init__(self):
    self.postdb = Postdb()
    self.lib = Lib()

  def get_post(self, amount=5, category="", page=0):
    vdict = copy.deepcopy(config.vdict)
    vdict['posts'] = self.postdb.select(amount=amount, category=category, page=page)
    vdict['thumbs'] = self.lib.get_thumbs(vdict['posts'], 3)
    vdict['videos'] = self.lib.get_video_data(vdict['posts'], 7)
    vdict['category'] = category

    new_post_list = []
    for post in vdict['posts']:
      new_post = list(post)
      new_post[4] = post[4].strftime('%d/%m/%Y') 
      new_post[5] = post[5].strftime('%H:%M:%S') 
      new_post_list.append(new_post)

    vdict['posts'] = new_post_list

    return vdict

  def get_single_post(self, id):
    vdict = copy.deepcopy(config.vdict)
    vdict['post'] = self.postdb.select(1, id=id)

    return vdict

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

  loadPost(label){
    $('#load-more img').attr('src', '/static/images/loading.gif');
    category.page += 1;
    
    $.get('/post/load/ajax/'+label, 
    {'ajax':category.page}
    ,function(data, status){
      if(status === "success"){
        var html = "";
        
        for(var v=0; v<data['posts'].length; v++){
          html += `<div class="post-wrapper">`;
          html += `<a class="wrapper" href="/post/${data['posts'][v][0]}">`;
          html += `<img src="${ data['thumbs'][v] }" />`;
          if(data['videos'][v]){
            html += `<img class="play-icon" src="/static/images/play.png" />`;
          }
          html += `<p class="post-date">${ data['posts'][v][4] }</p>`;
          html += `</a>`;
          html += `<a class="post-title" href="/post/${ data['posts'][v][0] }">${ data['posts'][v][1] }</a>`;
          html += `</div>`;
        }

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

      }else{
        alert('Fail to connect to server.');
      }
    });
  }
}//End of class

const category = new Category();

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

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

{% block content %}
<div id="container">
{% for v in range(data['posts']|length) %}
  <div class="post-wrapper">
    <a class="wrapper" href="/post/{{data['posts'][v][0]}}">
      <img src="{{ data['thumbs'][v] }}" />
      {% if data['videos'][v] %}
      <img class="play-icon" src="/static/images/play.png" />
      {% endif %}
      <p class="post-date">{{ data['posts'][v][4] }}</p>
    </a>

    <a class="post-title" href="/post/{{ data['posts'][v][0] }}">{{ data['posts'][v][1] }}</a>
  </div>
{% endfor %}
</div>

<div id="load-more" class="load-more region">
  <img onclick="category.loadPost(`{{ data['category'] }}`)" src="/static/images/load-more.png" />
</div>

{% endblock %}

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