main admin and front-end scripts

1 files changed, 177 insertions, 0 deletions

diff --git a/html/assets/js/manage-posts.js b/html/assets/js/manage-posts.js
new file mode 100644
index 0000000..028c773
--- /dev/null
+++ b/html/assets/js/manage-posts.js
@@ -0,0 +1,177 @@
+// Globals
+// -----------------------------------------------------------------------------
+var categories = [];
+var posts = [];
+var table;
+
+var pageUrl = new URL(window.location.href);
+
+
+// Supplamentary functions
+// -----------------------------------------------------------------------------
+
+// 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 category_record(id) {
+    var record = 0;
+    categories.forEach(el => { if (el.id == id) record = el; });
+   
+    return record;
+}
+
+// create actions html (edit and delete buttons)
+// --- -- -- - - -
+function create_actions_html(id) {
+
+    var copy, edit;
+
+    edit = [
+        '<button type="button" class="btn btn-xs btn-warning js-edit"',
+            'data-id="'+ id +'">',
+            '<i class="fas fa-pencil-alt"></i>',
+        '</button>'
+    ].join('\n');
+
+    copy = [
+        '<button type="button" class="btn btn-xs btn-dafault js-copy"',
+            'data-id="'+ id +'">',
+            '<i class="far fa-clone"></i>',
+        '</button>'
+    ].join('\n');
+
+    return copy +' '+ edit;
+}
+
+
+
+$(document).ready(function() {
+
+    // When document is ready
+    // -------------------------------------------------------------------------
+
+    /** init_table for 1st time
+     * --- -- -- - - -
+     * get posts + categories
+     * constuct posts + categories array
+     * render dataTable
+     */
+    // function init_table() {
+
+        $.when(     // when loaded posts and categories
+
+            $.getJSON( "/wiki/ajax", { action: "all_posts_props" } ),
+
+            $.getJSON( "/wiki/ajax", { action: "get_categories_array", exclude: '0' } )
+
+        ).done( function( posts_response, categories_response ) {
+
+            // each response is an array of 3 items:
+            // [0] => data (array)
+            // [1] => [success|fail]
+            // [2] => xhr object
+
+            // construct categories data
+            Object.keys(categories_response[0]).forEach( key => {
+                cat = categories_response[0][key];
+                categories.push({
+                    id: cat.rec.id,
+                    breadcrumb: cat.breadcrumb.replaceAll('\t', ' / ')
+                });
+            });
+
+            // construct posts data
+            Object.keys(posts_response[0]).forEach( key => {
+                po = posts_response[0][key];
+                posts.push({
+                    id: po.id,
+                    title: po.title,
+                    category: category_record(po.category_id).breadcrumb,
+                    updated: po.update_date,
+                    status: ((po.status == 1) ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>'),
+                    actions: create_actions_html(po.id)
+                });
+            });
+
+            // (re-)create categories datatable
+            table = $('#dt-posts').DataTable({
+                language: { url: '/libs/DataTables/localization/Greek.json' },
+                data: posts,
+                order: [[2, 'desc']],
+                columns: [
+                    { data: 'title' },
+                    { data: 'category' },
+                    {   // update date
+                        data: 'updated',
+                        render: {
+                            _: function (data, row, full) { return data; },
+                            display: function (data, row, full) { return mini_date(data); }
+                        }
+                    },
+                    { data: 'status' },
+                    { data: 'actions', width: '64px' }
+                ],
+                columnDefs: [{
+                    'targets': [3,4],
+                    'orderable': false
+                }]
+            });
+
+       });
+
+
+    function mini_date(d){
+        let yy = d.substring(2,4);      // year 2digit
+        let mo = d.substring(5,7);      // month
+        let dd = d.substring(8,10);     // dat
+        let h = d.substring(11,13);     // hour
+        let m = d.substring(14,16);     // minute
+        return dd +'/'+ mo +'/'+ yy +' '+ h +':'+ m;
+    }
+
+
+
+    /** When user ckicks button
+     * -------------------------------------------------------------------------
+     */
+
+
+    /** on(click, .edit-btn)
+     * --- -- -- - - -
+     * We need to attach the event handler to some element
+     * higher up in the DOM tree that will remain present;
+     * so the handled attached on #dt-posts
+     * 
+     * get post-id ; load editpost
+    */
+    $('#dt-posts').on('click', 'button.js-edit', function (e) {
+
+        var id = $(this).data('id');
+        window.location.href = '/wiki/admin?action=editpost&id=' + id
+
+    });
+
+
+    $('#dt-posts').on('click', 'button.js-copy', function (e) {
+        var postUrl = pageUrl.origin +'/wiki/post?id=' + $(this).data('id');
+        
+        navigator.clipboard
+        .writeText(postUrl)
+        .then(() => {
+            $(this).addClass('copied');
+            setTimeout( () => { $(this).removeClass('copied'); }, 700);
+        })
+        .catch(() => {
+            console.log("error on coping text");
+        });
+    });
+
+
+});