#controllers/dashboard/index.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'] = 'index'

    kdict['categories'] = getdb.call('all')

    return template('dashboard/index.tpl', data=kdict)

#models/categorydb/getdb.py
import setConnection

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

    if amount == 'all':
        cursor.execute("SELECT * FROM category ORDER BY name ")
        categories = cursor.fetchall()
        return categories
    else:
        cursor.execute("SELECT * FROM category ORDER BY datetime(datetime) DESC, rowid DESC LIMIT ?", (amount,))
        categories = cursor.fetchall()

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

    return categories, count[0]

<!--views/dashboard/post.tpl-->
<link rel='stylesheet' href='/static/styles/post.css' />
<script src="/static/scripts/ckeditor/ckeditor.js"></script>
<script src="/static/scripts/video.js"></script>

<section class='Main'>
    <div class='content'>
        <form action='/users/post' method='post' >
            <input type='text' name='title' placeholder='ចំណងជើង' required />
            <textarea name="content" id="editor" ></textarea>
            <div class='wrapper'>
                <select name='category' >
                    %for category in data['categories']:
                        <option>{{ category[0] }}</option>
                    %end
                </select>
                <input type='text' name='thumb' required placeholder="តំណរ​ភ្ជាប់​រូប​តំណាង" />
                <input type='datetime-local' value='datetime' name='datetime' required />
                <input type='submit' value='ចុះ​ផ្សាយ' />
            </div>
            <input name='entries' value='' type='hidden' />
        </form>

        <div class='form'>
            <select name='type'>
                <option>YouTube</option>
                <option>YouTubePlaylist</option>
                <option>Facebook</option>
                <option>OK</option>
                <option>Dailymotion</option>
                <option>Vimeo</option>
            </select>
            <input name='id' type='text' placeholder="អត្តសញ្ញាណវីដេអូ" required />
            <select name='ending'>
                <option>ចប់​ហើយ</option>
                <option>មិន​ទាន់ចប់</option>
            </select>
            <input onclick='genJson()' type="button" value="បញ្ចូល​វីដេអូ" />
        </div>

        <table class='viddata'></table>
    
        <script src="/static/scripts/ckeditor/config.js"></script>
    </div>
</section>

var episode = 0

const genJson = () => {
    const type = $('select[name="type"').val()
    const id = $('input[name="id"').val()
    const ending = $('select[name="ending"').val()
            
    var entries = {
        type: type,
        id: id,
        ending: ending,
    }
        
    var success = false
    for(let v in entries){
        if(entries[v] === ''){
            alert('You need to fill the required field '+v)
            success = false
            break
        }else{
            success = true
        }
    }

    if(success){
        let json = $('input[name="entries"]').val()
        entries = {
            type: type,
            id: id,
            ending: ending,
        }
        if(json === ''){
            json = JSON.stringify([entries])
            $('input[name="entries"]').val(json)
        }else{
            json = JSON.parse(json)
            json.push(entries)
            json = JSON.stringify(json)
            $('input[name="entries"').val(json)
        }

        let html = `<td title="Delete" onClick="deleteRow(event)" class="episode">${++episode}</td>`
        for(let v in entries){
            html += `<td class="td${episode}">${entries[v]}</td>`
        }

        if($('.viddata').html() === ''){
            $('.viddata').append('<tr>')
            $('.viddata').append('<th>ភាគ/លុប</th>')
            $('.viddata').append('<th>ប្រភេទ​</th>')
            $('.viddata').append('<th>អត្តសញ្ញាណ​</th>')
            $('.viddata').append('<th>ចប់ឬ​នៅ?</th>')
            $('.viddata').append('</tr>')
        }

        $('.viddata').append(`<tr>${html}</tr>`)
    }
}

function deleteRow(e) {
    e.target.parentElement.remove()
    
    let index = parseInt(e.target.innerHTML)
    index = index - 1
    let json = $('input[name="entries"]').val()
    json = JSON.parse(json)
    json.splice(index, 1);
    json = JSON.stringify(json)
    if(json.length === 0){
        json = ''
    }
    $('input[name="entries"').val(json)

    episode -= 1
    for(let v=0; v<episode; v++){
        $('.episode').eq(v).html(v+1)
    }
}

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

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