skeleton commit; based on an anom project

1 files changed, 382 insertions, 0 deletions

diff --git a/public/assets/js/admin/edit_page.js b/public/assets/js/admin/edit_page.js
new file mode 100644
index 0000000..ec0e84e
--- /dev/null
+++ b/public/assets/js/admin/edit_page.js
@@ -0,0 +1,382 @@
+// Globals
+// -----------------------------------------------------------------------------
+
+// NOTE:
+// Variable `entity_id` is defined before evaluating this script
+// id (int) : the id of edited post (or 0 if new post)
+
+var page;
+
+var id = (entity_id == 0) ? false : entity_id;
+
+var files = [];     // array of { id:.., title:.., type:.., path:.. } records
+
+// TODO: support tags
+// var tags = [];      // array of integers
+
+
+
+// an alternative--id when a page_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, body) => {
+    return [
+        '<div class="modal-body">',
+            '<div class="post">',
+
+                '<h2>'+ title +'</h2>',
+
+                '<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
+    // -------------------------------------------------------------------------
+
+    /** preload content
+     * --- -- -- - - -
+     * get page
+     * update content (form-elements)
+     */
+    if (id) {   // if an `id` is given, load post .. then init_form
+
+        $.getJSON( "/admin/api/page/" + id )
+        .done( function (data) {
+            page = data;            // keep post
+
+            // update fields' values
+            $('input[name=id]').val(page.id);           // id
+            $('input[name=title]').val(page.title);     // title
+            $('textarea[name=body]').val(page.body);    // body
+            $('select[name=status]').val(
+                (page.status == 0) ? '0' : "one"
+                ).trigger('change');
+
+            // $('#post-info').html('Δημιουργία: '+post.creation_date+'<br>Τελευταία Ενημέρωση: '+ post.update_date);
+
+            // parse media files; then draw
+            if (page.medias_json != null) {
+                files = JSON.parse(page.medias_json);
+            }
+            draw_files_list();      // then draw the files list          
+
+        });
+
+    }
+
+
+    /** 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-page form').submit( event => {
+        event.preventDefault();
+
+        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-page form input[name=id]').val()),
+            title: $('.edit-page form input[name=title]').val(),
+            body: $('.edit-page form textarea[name=body]').val(),
+            status: ( ($('select[name=status]').val() == "0") ? 0 : 1 ),
+            media: attachments
+        };
+
+        // select action url (add or update)
+        // ---
+        var request = '/admin/api/page/' + ((data.id == 0) ? 'add' : 'update');
+
+        // send POST (ajax) request
+        $.post(request, data)
+        .done(function( data ) {
+            console.log(data);
+            window.location.href = '/admin/pages';      // seems ok; bach to articles
+        });       
+
+    });
+
+
+    // go-back (to pages)
+    // --- -- -- - - -
+    $('#go-back').click( event => {
+        if (confirm('Θέλετε να ακυρώσετε τις όποιες αλλαγές και να φύγτε από τη σελίδα;')) {
+            window.location.href = '/admin/pages';
+        }
+    });
+
+
+    // 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 +'/page/' + $(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
+    });
+
+
+   
+    /** 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-page form input[name=title]').val(),
+                        $('.edit-page 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"
+
+
+});
+