Ajax Call Functionality
#controllers/category.py
import config, copy
from flask import render_template, session, redirect
from flask_classful import FlaskView, route
from controllers.dashboard.category import Category

class Dashboard(FlaskView):
  def __init__(self):
    self.cat = Category()

  @route('/')
  def index(self):
    vdict = copy.deepcopy(config.vdict)
    vdict['blog_title'] = 'ទំព័រ​គ្រប់គ្រង'

    if 'logged-in' in session:
      return render_template('dashboard/dashboard.html', data=vdict)
    else:
      return redirect('/login/')

  @route('/category/', methods=['GET', 'POST'])
  def category(self):
    session['page'] = 0
    return self.cat.get_post()

  @route('/category/delete/<category>')
  def delete(self, category):
    return self.cat.delete(category)

  @route('/category/edit/<category>')
  def edit(self, category):
    return self.cat.edit(category)

  @route('/category/load/')
  def load(self):
    session['page'] += 1
    return self.cat.load(session['page'])
    
dashboard = Dashboard()
#controllers/dashboard/category.py
import config, copy, lib, datetime
from flask import render_template, request, session, redirect
from models.dashboard.categorydb import Categorydb

class Category():
  def __init__(self):
    self.categorydb = Categorydb()
    self.lib = lib.Lib()

  def get_post(self):
    vdict = copy.deepcopy(config.vdict)
    vdict['blog_title'] = 'បង្កើតប្រភេទមេរៀន'
    vdict['datetime'] = self.lib.get_timezone()
    vdict['categories'] = self.categorydb.select(vdict['dashboard_max_category'])
    vdict['thumbs'] = self.lib.get_thumbs(vdict['categories'], 2)

    if (request.method == "POST") and ('logged-in' in session):
      category = request.form['fcategory-title']
      if not category:
        category = 'unknown'
        
      content = request.form['fcontent']
      date = request.form['fcategory-date']
      time = request.form['fcategory-time']
      author = session['logged-in']

      try:
        date = datetime.datetime.strptime(date, "%d/%m/%Y")
      except ValueError:
        vdict['message'] = 'ទំរង់​កាលបរិច្ឆេទ​មិន​ត្រឹមត្រូវ!'
        return render_template('dashboard/category.html', data=vdict)

      try:
        time = datetime.datetime.strptime(time, "%H:%M:%S")
      except ValueError:
        vdict['message'] = 'ទំរង់​ពេល​វេលា​មិន​ត្រឹមត្រូវ!'
        return render_template('dashboard/category.html', data=vdict)

      self.categorydb.insert(category, content, date, time, author)
      vdict['categories'] = self.categorydb.select(vdict['dashboard_max_category'])
      vdict['thumbs'] = self.lib.get_thumbs(vdict['categories'], 2)

      return render_template('dashboard/category.html', data=vdict)

    else:
      if 'logged-in' in session:
        return render_template('dashboard/category.html', data=vdict)

      return render_template('login.html', data=vdict)

  def delete(self, category):
    if 'logged-in' in session:
      self.categorydb.delete(category)
      return redirect('/dashboard/category/')

    return render_template('login.html', data=vdict)

  def edit(self, category):
    if 'logged-in' in session:
      vdict = copy.deepcopy(config.vdict)
      vdict['blog_title'] = 'បង្កើតប្រភេទមេរៀន'
      vdict['categories'] = self.categorydb.select(vdict['dashboard_max_category'])
      vdict['thumbs'] = self.lib.get_thumbs(vdict['categories'], 2)
      category = self.categorydb.select(1, category)
      vdict['datetime'] = (category[3].strftime('%d/%m/%Y'), category[4].strftime('%H:%M:%S'))
      vdict['category'] = category

      return render_template('dashboard/category.html', data=vdict)

    return render_template('login.html', data=vdict)

  def load(self, page):
    if 'logged-in' in session:
      vdict = copy.deepcopy(config.vdict)
      vdict['blog_title'] = 'បង្កើតប្រភេទមេរៀន'
      vdict['categories'] = self.categorydb.select(vdict['dashboard_max_category'], page=page)
      vdict['thumbs'] = self.lib.get_thumbs(vdict['categories'], 2)
      new_list = []
      for category in vdict['categories']:
        new_cat = list(category)
        new_cat[3] = category[3].strftime('%d/%m/%Y') 
        new_cat[4] = category[4].strftime('%H:%M:%S') 
        new_list.append(new_cat)

      vdict['categories'] = new_list
      return vdict
    else:
      return render_template('login.html', data=vdict)
<!--templates/category.html-->
{% extends 'dashboard/dashboard.html' %}

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

{% block content %}
  <form id='category' action='/dashboard/category/' method="POST" >
    {% if 'category' in data %}
    <input id='category-title' value="{{ data['category'][1] }}" name="fcategory-title" type="text" placeholder="ប្រភេទ​មេរៀន" required />
    <textarea name="fcontent" id="editor" >{{ data['category'][2] }}</textarea>
    {% else: %}
    <input id='category-title' value="" name="fcategory-title" type="text" placeholder="ប្រភេទ​មេរៀន" required />
    <textarea name="fcontent" id="editor" ></textarea>
    {% endif %}
    <div id="bottombar">
      <input id="submit" class="bottom-widget" type="submit" value="ចុះ​ផ្សាយ">
      <input id="category-date" value="{{ data['datetime'][0] }}" class="bottom-widget category-time" type="text" name="fcategory-date" required />
      <input id="category-time" value="{{ data['datetime'][1] }}" class="bottom-widget category-time" type="text" name="fcategory-time" required />
      <input disabled type='text' value="{{ session['logged-in'] }}" id="category-author" class="category-time" name="fcategory-author" required />
    </div>
  </form>
  <div id="message">{{ data['message'] }}</div>
  <script src="/static/scripts/ckeditor/config.js"></script>
{% endblock %}

{% block item_listing %}
<ul id="item-listing" class="item-listing region">
  {% for v in range(data['categories']|length) %}
  <li class="category">
    <a class="thumbnail" href="/category/{{ data['categories'][v][1] }}"><img src="{{data['thumbs'][v]}}" /></a>
    <script>
      var width = $('#category .thumbnail').css('width');
      var height = parseInt(width)*9/16;
      $('#category .thumbail').css('height', height);
    </script>
    <div class='title'>
      <a href="/category/{{ data['categories'][v][1] }}">{{ data['categories'][v][1] }}</a>
      <span>{{ data['categories'][v][3].strftime('%d/%m/%Y') }}</span>
    </div>
    <div class="crud">
      <a class="user">{{ data['categories'][v][-1] }}</a>
      <a href='/dashboard/category/delete/{{ data["categories"][v][1] }}'><img src="/static/images/delete.png" /></a>
      <a href='/dashboard/category/edit/{{ data["categories"][v][1] }}'><img src="/static/images/edit.png" /></a>
    </div>
  </li>
  {% endfor %}
</ul>
<div id="load-more" class="load-more region">
  <img onclick="lib.load_items('/dashboard/category/load/')" src="/static/images/load-more.png" />
  <script> 
    const lib = new Lib();
    function listing_items(data){
      var html = '';
      for(var v=0; v<data['categories'].length; v++){
        html += '<li class="category">';
        html += `<a class="thumbnail" href="/category/${ data['categories'][v][1] }"><img src="${data['thumbs'][v]}" /></a>`;
        html += `<div class='title'>`;
        html += `<a href="/category/${ data['categories'][v][1] }">${ data['categories'][v][1] }</a>`;
        html += `<span>${ data['categories'][v][3] }</span>`;
        html += `</div>`;
        html += `<div class="crud">`;
        html += `<a class="user">${ data['categories'][v][5] }</a>`;
        html += `<a href='/dashboard/category/delete/${ data["categories"][v][1] }'><img src="/static/images/delete.png" /></a>`;
        html += `<a href='/dashboard/category/edit/${ data["categories"][v][1] }'><img src="/static/images/edit.png" /></a>`;
        html += `</div>`;
        html += `</li>`;
      }

      $('#item-listing').append(html);
      $('#load-more img').attr('src', '/static/images/load-more.png')
    }
  </script>
</div>
<script>
  var width = $('#category .thumbnail').css('width');
  var height = parseInt(width)*9/16;
  $('#category .thumbail').css('height', height);
</script>
{% endblock %}

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