init

user/plugins/admin/themes/grav/app/dashboard/backup.js

@@ -0,0 +1,42 @@
+import $ from 'jquery';
+import { translations } from 'grav-config';
+import request from '../utils/request';
+import { Instances as Charts } from './chart';
+
+$('[data-backup][data-ajax*="backup/"]').on('click', function() {
+    let element = $(this);
+    let url = element.data('ajax');
+    const inDropdown = element.closest('.dropdown-menu');
+
+    (inDropdown.length ? inDropdown : element)
+        .closest('.button-group').find('> button:first')
+        .attr('disabled', 'disabled')
+        .find('> .fa').removeClass('fa-life-ring').addClass('fa-spin fa-refresh');
+
+    request(url, (/* response */) => {
+        if (Charts && Charts.backups) {
+            Charts.backups.updateData({ series: [0, 100] });
+            Charts.backups.element.find('.numeric').html(`0 <em>${translations.PLUGIN_ADMIN.DAYS.toLowerCase()}</em>`);
+        }
+
+        (inDropdown.length ? inDropdown : element)
+            .closest('.button-group').find('> button:first')
+            .removeAttr('disabled')
+            .find('> .fa').removeClass('fa-spin fa-refresh').addClass('fa-life-ring');
+    });
+});
+
+$('[data-backup][data-ajax*="backupDelete"]').on('click', function() {
+    let element = $(this);
+    let url = element.data('ajax');
+    const tr = element.closest('tr');
+    tr.addClass('deleting');
+
+    request(url, (response) => {
+        if (response.status === 'success') {
+            tr.remove();
+        } else {
+            tr.removeClass('deleting');
+        }
+    });
+});

user/plugins/admin/themes/grav/app/dashboard/cache.js

@@ -0,0 +1,49 @@
+import $ from 'jquery';
+import { config } from 'grav-config';
+import request from '../utils/request';
+
+const getUrl = (type = '') => {
+    if (type) {
+        type = `cleartype:${type}/`;
+    }
+
+    return `${config.base_url_relative}/cache.json/task${config.param_sep}clearCache/${type}admin-nonce${config.param_sep}${config.admin_nonce}`;
+};
+
+export default class Cache {
+    constructor() {
+        this.element = $('[data-clear-cache]');
+        $('body').on('click', '[data-clear-cache]', (event) => this.clear(event, event.target));
+    }
+
+    clear(event, element) {
+        let type = '';
+
+        if (event && event.preventDefault) { event.preventDefault(); }
+        if (typeof event === 'string') { type = event; }
+
+        element = element ? $(element) : $(`[data-clear-cache-type="${type}"]`);
+        type = type || $(element).data('clear-cache-type') || '';
+        let url = element.data('clearCache') || getUrl(type);
+
+        this.disable();
+
+        request(url, () => this.enable());
+    }
+
+    enable() {
+        this.element
+            .removeAttr('disabled')
+            .find('> .fa').removeClass('fa-refresh fa-spin fa-retweet').addClass('fa-retweet');
+    }
+
+    disable() {
+        this.element
+            .attr('disabled', 'disabled')
+            .find('> .fa').removeClass('fa-retweet').addClass('fa-refresh fa-spin');
+    }
+}
+
+let Instance = new Cache();
+
+export { Instance };

user/plugins/admin/themes/grav/app/dashboard/chart.js

@@ -0,0 +1,138 @@
+import $ from 'jquery';
+import chartist from 'chartist';
+import { translations } from 'grav-config';
+import { Instance as gpm } from '../utils/gpm';
+import { Instance as updates } from '../updates';
+
+// let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+export const defaults = {
+    data: {
+        series: [100, 0]
+    },
+    options: {
+        Pie: {
+            donut: true,
+            donutWidth: 10,
+            startAngle: 0,
+            total: 100,
+            showLabel: false,
+            height: 150,
+            // chartPadding: !isFirefox ? 10 : 25 // workaround for older versions of firefox
+            chartPadding: 5
+        },
+        Bar: {
+            height: 164,
+            chartPadding: 20, // workaround for older versions of firefox
+
+            axisX: {
+                showGrid: false,
+                labelOffset: {
+                    x: 0,
+                    y: 0
+                }
+            },
+            axisY: {
+                offset: 15,
+                showLabel: true,
+                showGrid: true,
+                labelOffset: {
+                    x: 5,
+                    y: 5
+                },
+                scaleMinSpace: 25
+            }
+        }
+    }
+};
+
+export default class Chart {
+    constructor(element, options = {}, data = {}) {
+        this.element = $(element) || [];
+        if (!this.element[0]) { return; }
+
+        let type = (this.element.data('chart-type') || 'pie').toLowerCase();
+        this.type = type.charAt(0).toUpperCase() + type.substr(1).toLowerCase();
+
+        options = Object.assign({}, defaults.options[this.type], options);
+        data = Object.assign({}, defaults.data, data);
+        Object.assign(this, {
+            options,
+            data
+        });
+        this.chart = chartist[this.type](this.element.find('.ct-chart').empty()[0], this.data, this.options);
+        this.chart.on('created', () => {
+            this.element.find('.hidden').removeClass('hidden');
+
+            // FIX: workaround for chartist issue not allowing HTML in labels anymore
+            // https://github.com/gionkunz/chartist-js/issues/937
+            this.element.find('.ct-label').each((index, label) => {
+                label = $(label);
+                const text = label.html().replace('&lt;', '<').replace('&gt;', '>');
+                label.html(text);
+            });
+        });
+    }
+
+    updateData(data) {
+        Object.assign(this.data, data);
+        this.chart.update(this.data);
+    }
+};
+
+export class UpdatesChart extends Chart {
+    constructor(element, options = {}, data = {}) {
+        super(element, options, data);
+
+        this.chart.on('draw', (data) => this.draw(data));
+
+        gpm.on('fetched', (response) => {
+            if (!response.payload) { return; }
+
+            let payload = response.payload.grav;
+            let missing = (response.payload.resources.total + (payload.isUpdatable ? 1 : 0)) * 100 / (response.payload.installed + (payload.isUpdatable ? 1 : 0));
+            let updated = 100 - missing;
+
+            this.updateData({ series: [updated, missing] });
+
+            if (response.payload.resources.total) {
+                updates.maintenance('show');
+            }
+        });
+    }
+
+    draw(data) {
+        if (data.index) { return; }
+
+        let notice = translations.PLUGIN_ADMIN[data.value === 100 ? 'FULLY_UPDATED' : 'UPDATES_AVAILABLE'];
+        this.element.find('.numeric span').text(`${Math.round(data.value)}%`);
+        this.element.find('.js__updates-available-description').html(notice);
+        this.element.find('.hidden').removeClass('hidden');
+    }
+
+    updateData(data) {
+        super.updateData(data);
+
+        // missing updates
+        if (this.data.series[0] < 100) {
+            this.element.closest('#updates').find('[data-update-packages]').fadeIn();
+        }
+    }
+}
+
+let charts = {};
+
+$('[data-chart-name]').each(function() {
+    let element = $(this);
+    let name = element.data('chart-name') || '';
+    let options = element.data('chart-options') || {};
+    let data = element.data('chart-data') || {};
+
+    if (name === 'updates') {
+        charts[name] = new UpdatesChart(element, options, data);
+    } else {
+        charts[name] = new Chart(element, options, data);
+    }
+});
+
+export let Instances = charts;

user/plugins/admin/themes/grav/app/dashboard/index.js

@@ -0,0 +1,12 @@
+import Chart, { UpdatesChart, Instances } from './chart';
+import { Instance as Cache } from './cache';
+import './backup';
+
+export default {
+    Chart: {
+        Chart,
+        UpdatesChart,
+        Instances
+    },
+    Cache
+};

user/plugins/admin/themes/grav/app/dashboard/update.js

@@ -0,0 +1 @@
+// See ../updates/update.js