path: root/public/assets/js/admin/lessons.js

// Globals
// -----------------------------------------------------------------------------
var categories = [];
var privileges = [ { id: 0, label: 'Δημόσιο' } ];
var lessons = [];
var table;



// Supplamentary functions
// -----------------------------------------------------------------------------

// array.indexOf polyfill
// --- -- -- - - -
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}


// function for sorting an array by 'label' attribute
// --- -- -- - - -
function compare_label (a,b) {
    if ( a.label < b.label ) { return -1; }
    if ( a.label > b.label ) { return 1; }
    return 0;
}


// function for sorting an array by 'breadcrumb' attribute
// --- -- -- - - -
function compare_breadcrumb (a,b) {
    if ( a.breadcrumb < b.breadcrumb ) { return -1; }
    if ( a.breadcrumb > b.breadcrumb ) { return 1; }
    return 0;
}

// return category record by category-id
// --- -- -- - - -
function lesson_record(id) {
    var record = 0;
    lessons.forEach(el => { if (el.id == id) record = el; });
   
    return record;
}

/** course(id) 
 * label of course with
 * @param id (int)
 */
function course_(id) {
    let reply = false;
    categories.forEach( cat => { if (cat.id == id) reply = cat.label; })
    return reply;
}

/** privilege(id) 
 * label of privilege with
 * @param id (int)
 */
function privilege_(id) {
    let reply = false;
    privileges.forEach( pri => { if (pri.id == id) reply = pri.label; });
    return reply;
}


//// return children of parent
//// --- -- -- - - -
//function childs_of_parents(list) {
//    // if 'list' is integer then make it an one-item list
//    parents = (Number.isInteger(list)) ? [ list ] : list;
//
//    var childs = [];
//
//    if (parents.length == 0) { return []; }
//
//    parents.forEach( pid => {
//        categories.forEach( el => { if (el.parent == pid) childs.push(el.id)});
//    });
//
//    var grandchilds = childs_of_parents(childs);
//
//    return childs.concat(grandchilds);
//}


// create actions html (edit and delete buttons)
// --- -- -- - - -
function create_actions_html(el) {

    var pub, del, edit;

    // preapre [show|hide]-file as reference
    if (el.status == 1) {
        pub = '<span class="btn btn-sm"><i class="fas fa-eye"></i></span>';

    } else {
        pub = '<span class="btn btn-sm"><i class="fas fa-eye-slash"></i></span>';
    }

    del = "";

    fast_edit = [
        '<button type="button" class="btn btn-sm btn-light"',
            'data-bs-toggle="modal" data-bs-target="#manageLessons"',
            'data-id="'+ el.id +'">',
            '<i class="fa-solid fa-bolt"></i>',
        '</button>'
    ].join('\n');

    edit = [
        '<a type="button" class="btn btn-sm btn-warning "',
            'href="/admin/edit_lesson/'+ el.id +'">',
            '<i class="fas fa-pencil-alt"></i>',
        '</a>'
    ].join('\n');

    return pub +' '+ fast_edit +' '+ edit +' '+ del;
}



$(document).ready(function() {

    // When document is ready
    // -------------------------------------------------------------------------


    // inti category (select2)
    // ...
    $("#privilege_id").select2({
        placeholder: 'Επίπεδο Πρόσβασης',
        dropdownParent: $('#manageLessons'),
        width: '100%'
    });
    
    /** init selec2 element (used to specify parent-category)
     * --- -- -- - - -
     */
    $("#course_id").select2({
        placeholder: 'Κεφάλαιο',
        dropdownParent: $('#manageLessons'),
        width: '100%',
    });

    
    /** init_table
     * --- -- -- - - -
     * get categories
     * constuct categories array
     * render dataTable 
     */
    function init_table() {

        // get all categories from server (ajax)
        $.getJSON( "/admin/api/lessons")
        .done(function( json ) {
            // then ...

            // reset categories
            lessons.length = 0;

            // construct (new) categories data
            Object.keys(json).forEach( key => {
                el = json[key];
                lessons.push({
                    id: parseInt(el.id),
                    title: el.title,
                    course_id: el.course_id,
                    course: course_(el.course_id),
                    privilege_id: el.privilege_id,
                    privilege: privilege_(el.privilege_id),
                    actions: create_actions_html(el)
                });
            });

            // sort by breadcrumb
            // categories.sort( compare_breadcrumb );

            // destroy previous datatable table instances
            $('#dt-lessons').dataTable().fnClearTable();
            $('#dt-lessons').dataTable().fnDestroy();

            // (re-)create categories datatable
            table = $('#dt-lessons').DataTable({
                language: { url: '/libs/DataTables/localization/Greek.json' },           
                data: lessons,
                ordering: false,
                columns: [
                    { data: 'id' },
                    { data: 'title' },
                    { data: 'course' },
                    { data: 'privilege' },
                    { data: 'actions' }
                ]
            });

        })
        .fail(function( jqxhr, textStatus, error ) {
            console.log( "Request Failed (" + error +")" );
        });

    }


    $.when(     // when loaded posts and categories

        $.getJSON( "/admin/api/categories" ),

        $.getJSON( "/admin/api/privileges" )

    ).done( function( categories_response, privileges_response ) {

        // construct categories data
        // ---
        Object.keys(categories_response[0]).forEach( key => {
            cat = categories_response[0][key];
            categories.push({
                id: cat.rec.id,
                label: cat.breadcrumb.replaceAll('\t', ' / ')
            });
        });
        categories.sort( compare_label );  // sort categories by breadcrumb

        // construct provileges data
        // ---
        Object.keys(privileges_response[0]).forEach( key => {
            priv = privileges_response[0][key];
            privileges.push({
                id: priv.id,
                label: priv.label
            });
        });
        privileges.sort( compare_label );  // sort categories by breadcrumb

        set_parent_options( $('#course_id'), categories );
        set_parent_options( $('#privilege_id'), privileges );

        init_table();   // init table on first run
    });


    /** set_parent_options()
     * 
     * -> create options for parents <select>
     * -> choose selected parent
     * 
     * NOTE:
     * the targer <select> should be a select2 control
     * 
     * @param parents (array): array of parents
     * @param selected (int): selected parent
     */
    function set_parent_options(selector, list, selected_value = false) {

        list.forEach( li => {   // attach options into <select> control
            selector.append(`<option value="${li.id}">${li.label}</option>`);
        });

        if (selected_value !== false) {     // mark selected option(s)
            selector.val(selected_value).trigger('change');
        }
        else { selector.val(null).trigger('change'); }
    }



    /** When modal show-up
     * -------------------------------------------------------------------------
     * ... prepare the manage-category form 
     * ... update select2 with possible parents
     */
    $('#manageLesson').on('show.bs.modal', event => {
        var button = $(event.relatedTarget);        // Button that triggered the modal
        var id = parseInt( button.data('id') );     // category_id from data-id
        // var modal = $(this);    // modal object     
        
        //// update modal literature
        //// ---
        //$('#manageCategory .modal-title').html(             // modal title
        //    (id) ? 'Ενημέρωση Κατηγορίας' : 'Δημιουργία Κατηγορίας'
        //);
        //$('#manageCategory form input[name=id]').val( id );     // category id (hidden)
        //$('#manageCategory form input[name=label]').val(    // category label
        //    (id) ? category_record(id).label : ""
        //);
        //prepare_parents_element(id);        // prepare <select> for parents
    })


    /** set_parent_options()
     * 
     * -> create options for parents <select>
     * -> choose selected parent
     * 
     * NOTE:
     * the targer <select> should be a select2 control
     * 
     * @param parents (array): array of parents
     * @param selected (int): selected parent
     */
        function set_parent_options(selector, list, selected_value = false) {

            list.forEach( li => {   // attach options into <select> control
                selector.append(`<option value="${li.id}">${li.label}</option>`);
            });
    
            if (selected_value !== false) {     // mark selected option(s)
                selector.val(selected_value).trigger('change');
            }
            else { selector.val(null).trigger('change'); }
        }
    




    // When form is submited
    // -------------------------------------------------------------------------

    $('#manageCategory form').submit( event => {
        event.preventDefault();

        // prepare data to POST
        var data = {
            id: parseInt($('#manageCategory form input[name=id]').val()),
            label: $('#manageCategory form input[name=label]').val(),
            parent_id: parseInt($('#parent_id').select2('data')[0].id)
        };

        // select action url (add or update)
        var request = '/admin/api/categories/' + ((data.id == 0)  ? 'add' : 'update');

        // send POST request
        $.post(request, data)
        .done(function( data ) {

            $('#manageCategory').modal('hide');     // when done, close modal

            init_table();       // reload table of categories
        });       

    });

});