#controllers/dashboard/category/get.py
import config
from bottle import template
from copy import deepcopy
from models.categorydb import getdb

def call():
    kdict = deepcopy(config.kdict)
    kdict['siteLogo'] = 'ទំព័រ​ជំពូក'
    kdict['route'] = 'category'

    categories, count = getdb.call(kdict['maxItemList'])

    kdict['items'] = categories
    kdict['count'] = count
    
    return template('dashboard/index.tpl', data=kdict)

#models/categorydb/getdb.py
import setConnection

def call(amount):
    cursor, connection = setConnection.call()

    cursor.execute("SELECT * FROM category ORDER BY datetime(datetime) DESC LIMIT ?", (amount,))
    categories = cursor.fetchall()

    cursor.execute("SELECT COUNT(*) FROM category")
    count = cursor.fetchone()
    
    cursor.close()

    return categories, count[0]

<!--views/dashboard/index.tpl-->
% rebase('base.tpl')

<link href="/static/styles/partials/header.css" rel="stylesheet"></link>
<section class='Head'>
    <header class='region'>
        <div class='site-logo'>{{ data['siteLogo'] }}</div>

        <form action='/dashboard/search' method='post'>
            <select name="select">
                <option>ការផ្សាយ</option>
                <option>ជំពូក</option>
                <option>សៀវភៅ</option>
                <option>អ្នក​ប្រើប្រាស់</option>
            </select>
            <input type='text' name="q" placeholder="Search" required />
            <input type="submit" value='បញ្ជូន'​ />
        </form>

        <div class='logout'><a href='/dashboard/logout'>ចេញ​ក្រៅ</a></div>
    </header>
</section>

<link href="/static/styles/partials/body.css" rel="stylesheet"></link>
<section class='Body region'>
    %include('dashboard/menu.tpl')

    <%
    if 'index' in data['route']:
        include('dashboard/post.tpl')
    elif 'category' in data['route']:
        include('dashboard/category.tpl')
    end
    %>
</section>

<link href="/static/styles/partials/listing.css" rel="stylesheet"></link>
<section class='Listing region'>
    %if 'count' in data:
        <div class='info'>Total amount of item: {{data['count']}}</div>
    %else:
        <div class='info'>Total amount of item:</div>
    %end

    <div class='items'>
        %if 'items' in data:
        %for item in data['items']:
            <div class='item'>
                <a href="/{{data['route']}}/{{item[3]}}"><img class='thumb' src="{{item[1]}}" /></a>

                <div class='wrapper'>
                    <a href="/{{data['route']}}/{{item[3]}}">{{item[0]}}</a>
                    <p class='date'></p>
                    <script>
                        $('.items .item .date').html(new Date("{{item[2]}}").toLocaleDateString()) 
                    </script>
                </div>
                
                <div class='icon'>
                    <a href='/dashboard/edit'><img src='/static/images/edit.png' /></a>
                    <a href='/dashboard/delete'><img src='/static/images/delete.png' /></a>
                </div>
            </div>
        %end
        %end
    </div>

    <div class='load-more'><img src="/static/images/load-more.png" /></div>
</section>

/*asset/css/partials/listing*/
.Listing{
    margin-top: 10px;
}

.Listing .info{
    background: lightgrey;
    padding: 5px;
    text-align: center;
    margin-bottom: 10px;
}

.Listing .items{
    display: grid;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    grid-gap: 10px;
}

.Listing .items .item{
    display: grid;
    grid-template-columns: 20% auto 20%;
    grid-gap: 10px;
    align-items: center;
    background: lightgrey;
}

.Listing .items .item .thumb{
    width: 100%;
    float: left;
}

.Listing .items .item .icon{
    text-align: right;
    padding-right: 10px;
    visibility: hidden;
}

.Listing .items .item:hover .icon{
    visibility: visible;
}

.Listing .items .item .icon img{
    width: 35px;
}

.Listing .load-more{
    background: lightgrey;
    margin: 10px 0;
    text-align: center;
    padding: 5px 0 0;
}

.Listing .load-more img:hover{
    opacity: .5;
    cursor: pointer;
}

GitHub: https://github.com/Sokhavuth/REST-API

Vercel: https://rest-api-zeta.vercel.app