diff options
Diffstat (limited to 'public/assets/js/admin/edit_lesson.js')
| -rw-r--r-- | public/assets/js/admin/edit_lesson.js | 600 |
1 files changed, 600 insertions, 0 deletions
diff --git a/public/assets/js/admin/edit_lesson.js b/public/assets/js/admin/edit_lesson.js new file mode 100644 index 0000000..367c3b7 --- /dev/null +++ b/public/assets/js/admin/edit_lesson.js @@ -0,0 +1,600 @@ +/** NOTE: + * depricated code for tag-system is commented-out and kept in the source-code + * as case-study; the code is operational; + */ + + +// Globals +// ----------------------------------------------------------------------------- + +// NOTE: +// Variable `entity_id` is defined before evaluating this script +// id (int) : the id of edited post (or 0 if new post) + +var lesson; + +var id = (entity_id == 0) ? false : entity_id; + +var categories = [ + // Nope! root can not be a post's category ... { id: 0 , label: 'Ρίζα (root)' } +]; + +var privileges = [ + { id: 0, label: '_Δημόσιο_'} +]; + +var files = []; // array of { id:.., title:.., type:.., path:.. } records + +// TODO: support tags +// var tags = []; // array of integers + + +// an alternative--id when a lesson_id not exists (needed for file-upload) +// ... consist of a 6-digit date string + random number up to 999 +const yymmdd = new Date().toISOString().slice(2, 10).replaceAll('-',''); +var rnd999 = Math.floor(Math.random() * 1000); +var altID = (id == 0) ? ( yymmdd +'-'+ rnd999.toString() ) : id; + + + + +// Supplamentary functions +// ----------------------------------------------------------------------------- + +// 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; +} + +// return course record by course-id +// --- -- -- - - - +function course_record(id) { + var record = 0; + categories.forEach(el => { if (el.id == id) record = el; }); + + return record; +} + + + + +// Modal HTML Creators +// ----------------------------------------------------------------------------- + +const modal_header = (title) => { + return [ + '<div class="modal-header">', + '<h4 class="modal-title" id="myModalLabel">', + title, + '</h4>', + '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">', + '<span aria-hidden="true"></span>', + '</button>', + '</div>' + ].join('\n'); +} + + +const upload_file_form = () => { + return [ + '<form method="POST" id="file_upload_form" name="upload_file_form">', + + '<div class="modal-body">', + + '<input type="hidden" name="folder" value="'+ altID +'">', + + '<div class="form-group">', + '<label for="title">Τίτλος/Περιγραφή για το Αρχείο</label>', + '<input type="text" class="form-control " value="" name="title" id="title" placeholder="Τίτλος για το Αρχείο" required="">', + '</div>', + + '<div class="form-group">', + '<label class="control-label" for="file">Εισαγωγή Αρχείου</label>', + '<input class="form-control" type="file" id="file" name="file" required="">', + '</div>', + + '</div>', + + '<div class="modal-footer">', + '<div class="row" style="width: 50%;">', + '<div class="form-actions">', + '<div class="col col-4">', + '<buton type="button" class="btn btn-default js-modal-close col-12" data-bs-dismiss="modal">', + 'Κλείσιμο', + '</button>', + '</div>', + '<div class="col-8">', + '<button class="btn btn-success col-12" type="submit">Καταχώριση</button>', + '</div>', + '</div>', + '</div>', + '</div>', + + '</form>' + ].join('\n'); +} + + +const preview_article = (title, intro, body) => { + return [ + '<div class="modal-body">', + '<div class="post">', + + '<h2>'+ title +'</h2>', + + ((intro == '') ? '' : ('<div class="intro">'+ intro +'</div>')), + + '<div class="article-body">', + marked.parse(body, { sanitize: true }), + '</div>', + + '</div>', + '</div>', + '<div class="modal-footer">', + '<div class="row" style="width: 50%;">', + '<div class="form-actions">', + '<div class="col-md-4 col-md-offset-4 col-6 col-offset-3">', + '<buton type="button" class="btn btn-default js-modal-close col-12" data-bs-dismiss="modal">', + 'Κλείσιμο', + '</button>', + '</div>', + '</div>', + '</div>', + '</div>' + ].join('\n'); +} + + +$(document).ready(function() { + + // When document is ready + // ------------------------------------------------------------------------- + + + // inti category (select2) + // ... + $("#course_id").select2({ + placeholder: 'Κεφάλαιο', + width: '100%' + }); + + // inti category (select2) + // ... + $("#privilege_id").select2({ + placeholder: 'Επίπεδο Πρόσβασης', + width: '100%' + }); + + + /** DEPRICATED: (tag system) + * + * // init tags (select2) + * // ... + * $('#tags').select2({ + * placeholder: 'Ετικέτες (tags/keywords)', + * width: '100%', + * tags: true + * }); + */ + + /** DEPRICATED: + * + * // TINY-MCE EDITOR + * init editor (tiny MCE) + * tinymce.init({ + * selector: 'form textarea[name=body]', + * language: 'el', + * menubar: true + * }); + */ + + + /** preload content + * --- -- -- - - - + * get post + * get categories + * get tags + * update content (form-elements) + */ + if (id) { // if an `id` is given, load post .. then init_form + + $.getJSON( "/admin/api/lesson/" + id ) + .done( function (data) { + lesson = data; // keep post + + // update fields' values + $('input[name=id]').val(lesson.id); // id + $('input[name=title]').val(lesson.title); // title + $('textarea[name=intro]').val(lesson.intro); // intro + $('textarea[name=body]').val(lesson.body); // body + $('select[name=status]').val( + (lesson.status == 0) ? '0' : "one" + ).trigger('change'); + // $('input[name=status]').prop( // status + // 'checked', + // ((lesson.status==1)? true : false)) + // .trigger('change'); + + // $('#post-info').html('Δημιουργία: '+post.creation_date+'<br>Τελευταία Ενημέρωση: '+ post.update_date); + + // parse media files; then draw + if (lesson.medias_json != null) { + files = JSON.parse(lesson.medias_json); + } + draw_files_list(); // then draw the files list + + init_form_values(); // init all (other) values + }); + + } else { // else ... just init_form + init_form_values(); + } + + + + /** + * load categories and tags; + * if not a new post (id!=0) update form elemnts with post's values + */ + function init_form_values() { + + $.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 + + /** DEPRICATED: (tag system) + * + * // construct tags data + * // --- + * Object.keys(tags_response[0]).forEach( key => { + * tag = tags_response[0][key]; + * tags.push({ + * id: tag.id, + * label: tag.name + * }); + * }); + */ + + // 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 + + // pass categories and tags options onto select2 elements + // --- -- -- - - - + if (id == 0) { + set_parent_options( $('#course_id'), categories ); + set_parent_options( $('#privilege_id'), privileges ); + + } else { + // setup category_id options; select post's chosen category-id + set_parent_options( $('#course_id'), categories, lesson.course_id ); + + /*** DEPRICATED: (tag system) + * + * // parse selected tags + * // --- + * var selected_tag_ids = []; + * if (post.tags_json != null) { + * var selected_tags = JSON.parse(post.tags_json); + * selected_tags.forEach( itag => { selected_tag_ids.push(itag.id); }) + * } + */ + + // setup tags options; select post's chosen tags + set_parent_options( $('#privilege_id'), privileges, lesson.privilege_id ); + + // DEPRICATED: ALSO: if tags selectd, show tags field + // if (selected_tag_ids.length != 0) { $('.optional label[for=tags]').addClass('show'); } + } + + }); + + } + + + /** 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'); } + } + + + /** draw_files_list + * --- -- -- - - - + */ + function draw_files_list() { + var li_list = []; + var ref_icon, ref_class; + + files.forEach( item => { + var copy = [ // copy button + '<button type="button" class="btn btn-xs btn-default js-copy"', + ' data-url="' + item.path +'"', + ' data-type="' + item.type + '"', + '>', + '<i class="far fa-clone"></i>', + '</button>' + ].join(''); + + var del = [ // delete button + '<button type="button" class="btn btn-xs btn-danger js-delete"', + 'data-id="' + item.id + '">', + '<i class="fas fa-trash-alt"></i>', + '</button>' + ].join(''); + var option = [ // li html + '<li>', + '<div class="text">' + item.label + '</div>', + '<div class="actions">', + copy, ' ', del, + '</div>', + '</li>' + ].join(''); + li_list.push(option); // push to li_list + }); + $('#files_list').html( li_list.join('\n') ); + + } + + + + // When form's action-buttons are clicked + // ------------------------------------------------------------------------- + + + // form submit + // --- -- -- - - - + $('.edit-post form').submit( event => { + event.preventDefault(); + + /** DEPRICATED: + * + ### TAG SYSTEM + # // rearrange tags to old and new ones + # // --- + # var old_tags = []; + # var new_tags = []; + # var tags = $('#tags').select2('data'); + # tags.forEach( t => { + # if (!parseInt(t.id)) { + # new_tags.push(t.text); + # } else { old_tags.push(t.id); } + # }) + */ + + var attachments = []; + // attachments (array) of "`media_id`;`reference`" strings + files.forEach( f => { attachments.push( f.id ) }); + + // prepare data to POST + // --- + var data = { + id: parseInt($('.edit-post form input[name=id]').val()), + title: $('.edit-post form input[name=title]').val(), + course_id: parseInt($('#course_id').select2('data')[0].id), + intro: $('.edit-post form textarea[name=intro]').val(), + body: $('.edit-post form textarea[name=body]').val(), + status: ( ($('select[name=status]').val() == "0") ? 0 : 1 ), + privilege_id: parseInt($('#privilege_id').select2('data')[0].id), + // tags: old_tags, + // new_tags: new_tags, + media: attachments + }; + + // select action url (add or update) + // --- + var request = '/admin/api/lesson/' + ((data.id == 0) ? 'add' : 'update'); + + // send POST (ajax) request + $.post(request, data) + .done(function( data ) { + // console.log(data); + window.location.href = '/admin/lessons'; // seems ok; bach to articles + }); + + }); + + + // go-back (to lessons) + // --- -- -- - - - + $('#go-back').click( event => { + if (confirm('Θέλετε να ακυρώσετε τις όποιες αλλαγές και να φύγτε από τη σελίδα;')) { + window.location.href = '/admin/lessons'; + } + }); + + + // copy url button + // --- -- -- - - - + $('.admin-container').on('click', 'button.js-copy', function (e) { + var copytext = ''; // default: copy nothing + + if ($(this).data('id') !== undefined) { + copytext = window.location.origin +'/lesson/' + $(this).data('id'); + } + + if ($(this).data('url') !== undefined) { + copytext = window.location.origin + '/serve/file/' + $(this).data('url') + '?type=' + $(this).data('type'); + } + + navigator.clipboard + .writeText(copytext) + .then(() => { // notify the copy event + $(this).addClass('copied'); + setTimeout( () => { $(this).removeClass('copied'); }, 700); + console.log(copytext, ' copied!'); + }) + .catch(() => { + console.log("error on coping text"); + }); + }); + + + + // delete (remove) file button + // --- -- -- - - - + $('.admin-container').on('click', 'button.js-delete', function (e) { + console.log('delete!'); + var media_id = $(this).data('id'); + + // remove from files array the one with id == media_id + // --- + var temp = []; + files.forEach( it => { if (it.id != media_id) temp.push(it); }); + + files = temp; // re-define files + draw_files_list(); // then re-draw files list + }); + + + + /** DEPRICATED: + * + # // show|hide file as referece button + # // --- -- -- - - - + # $('.admin-container').on('click', 'button.js-reference', function (e) { + # var id = $(this).data('id'); + # + # // toggle reference attribute of item with `id` = id + # // --- + # var temp = []; + # files.forEach( it => { + # if (it.id == id) { + # it.reference = (it.reference==0) ? 1 : 0; + # } + # temp.push(it) + # }); + # + # files = temp; // re-define files + # draw_files_list(); // then re-draw files list + # }); + */ + + + + + + /** When modal show-up + * ------------------------------------------------------------------------- + * ... prepare the manage-category form + * ... update select2 with possible parents + */ + $('#editorModal').on('show.bs.modal', event => { + let button = $(event.relatedTarget); // Button that triggered the modal + let action = button.data('action'); // action + // var modal = $(this); // modal object + + // update modal literature + + switch (action) { + case 'upload_file': + $("#editorModal .modal-content").html( + modal_header('Εισαγωγή Αρχείου') + upload_file_form() + ); + break; + + case 'preview': + let preview = preview_article( + $('.edit-post form input[name=title]').val(), + $('.edit-post form textarea[name=intro]').val(), + $('.edit-post form textarea[name=body]').val() + ); + $("#editorModal .modal-content").html( modal_header('Προεπισκόπηση') + preview); + break; + + default: + // do nothing + } + + }); + + + + /** submit upload file event + * ------------------------------------------------------------------------- + */ + $('#editorModal').on('submit', 'form[name=upload_file_form]', function (event) { + event.preventDefault(); + + // create the FormData object + // --- -- -- - - - + var fd = new FormData(document.getElementById('file_upload_form')); + + // post the form (via ajax) + $.ajax({ + url: '/admin/api/file_upload', + type: 'POST', + data: fd, + contentType: false, + processData: false, + dataType: 'json', + success: function(response) { // on success + + if (response.success) { + files.push({ // ... update files array + id: response.id, + label: response.title, + path: response.path, + type: response.type + }); + draw_files_list(); + + $('#editorModal').modal('hide'); + + } else { + console.log('File not uploaded'); + } + } + }); + }); + + + // TODO: + // disable links while previewing the article + // OR add a target="_blank" + + +}); + |