appwrite/public/scripts/app.js

// Views

window.ls.container.get('view')
    .add({
        selector: 'data-acl',
        controller: function(element, document, router, alerts) {
            document.body.classList.remove('console');
            document.body.classList.remove('home');

            document.body.classList.add(router.getCurrent().view.scope);

            if(!router.getCurrent().view.project) {
                document.body.classList.add('hide-nav');
                document.body.classList.remove('show-nav');
            }
            else {
                document.body.classList.add('show-nav');
                document.body.classList.remove('hide-nav');
            }

            // Special case for console index page

            if('/console' === router.getCurrent().path) {
                document.body.classList.add('index');
            }
            else {
                document.body.classList.remove('index');
            }
        }
    })
    .add({
        selector: 'data-cookie-policy',
        repeat: false,
        controller: function(element, alerts, cookie) {
            if(!cookie.get('cookie-alert')) {
                let text = element.dataset['cookiePolicy'] || '';

                alerts.add({text: text, class: 'cookie-alert', link: '/policy/cookies', callback: function () {
                    cookie.set('cookie-alert', 'true', 365 * 10); // 10 years
                }}, 0);
            }
        }
    })
    .add({
        selector: 'data-ls-ui-alerts',
        controller: function(element, window, view) {
            window.document.addEventListener('alerted', function() {
                view.render(element);
            }, true);
        }
    })
    .add({
        selector: 'data-ls-ui-alerts-delete',
        controller: function(document, element, alerts, expression) {
            let message = expression.parse(element.dataset['message']);

            let remove = function () {
                alerts.remove(message);
            };

            element.addEventListener('click', remove);
        }
    })
    .add({
        selector: 'data-forms-headers',
        repeat: false,
        controller: function(element) {
            let key      = document.createElement('input');
            let value    = document.createElement('input');
            let wrap     = document.createElement('div');
            let cell1     = document.createElement('div');
            let cell2     = document.createElement('div');

            key.type = 'text';
            key.className = 'margin-bottom-no';
            key.placeholder = 'Key';
            value.type = 'text';
            value.className = 'margin-bottom-no';
            value.placeholder = 'Value';

            wrap.className = 'row thin margin-bottom-small';
            cell1.className = 'col span-6';
            cell2.className = 'col span-6';

            element.parentNode.insertBefore(wrap, element);
            cell1.appendChild(key);
            cell2.appendChild(value);
            wrap.appendChild(cell1);
            wrap.appendChild(cell2);

            key.addEventListener('input', function () {
                syncA();
            });

            value.addEventListener('input', function () {
                syncA();
            });

            element.addEventListener('change', function () {
                syncB();
            });

            let syncA = function () {
                element.value = key.value.toLowerCase() + ':' + value.value.toLowerCase();
            };

            let syncB = function () {
                let split = element.value.toLowerCase().split(':');
                key.value = split[0] || '';
                value.value = split[1] || '';

                key.value = key.value.trim();
                value.value = value.value.trim();
            };

            syncB();
        }
    })
    .add({
        selector: 'data-prism',
        repeat: false,
        controller: function(window, document, element, alerts) {
            Prism.highlightElement(element);

            let copy = document.createElement('i');

            copy.className = 'icon-docs copy';
            copy.title = 'Copy to Clipboard';

            copy.addEventListener('click', function () {
                window.getSelection().removeAllRanges();

                let range = document.createRange();

                range.selectNode(element);

                window.getSelection().addRange(range);

                try {
                    document.execCommand('copy');
                    alerts.add({text: 'Copied to clipboard', class: ''}, 3000);
                } catch (err) {
                    alerts.add({text: "Failed to copy text ", class: 'error'}, 3000);
                }

                window.getSelection().removeAllRanges();
            });

            element.parentNode.parentNode.appendChild(copy);
        }
    })
    .add({
        selector: 'data-code-example',
        repeat: false,
        controller: function(window, document, element, cookie) {
            let prefix = element.dataset['codeExample'] || 'unknown';

            element.addEventListener('change', function () {
                select(element.value);
            });

            let select = function (value) {
                for (let i=0; i< element.length; i++){
                    document.body.classList.remove(prefix + '-' + element.options[i].value);
                }

                document.body.classList.add(prefix + '-' + value);

                cookie.set('language-' + prefix, value, 365);

                document.dispatchEvent(new CustomEvent('updated-language-' + prefix));
            };

            document.addEventListener('updated-language-' + prefix, function () {
                element.value = cookie.get('language-' + prefix);
            });

            let def = cookie.get('language-' + prefix) || element.options[0].value;

            select(def);

            element.value = def;
        }
    })
    .add({
        selector: 'data-ls-ui-chart',
        repeat: false,
        controller: function(element, container, date, document) {
            let child = document.createElement('canvas');

            child.width = 500;
            child.height = 175;

            let stats = container.get('usage');

            if(!stats || !stats['requests'] || !stats['requests']['data']) {
                return;
            }

            let config = {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: 'Requests',
                        backgroundColor: 'rgba(230, 248, 253, 0.3)',
                        borderColor: '#29b5d9',
                        borderWidth: 2,
                        data: [
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0
                        ],
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: false,
                        text: 'Stats'
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                        caretPadding: 0
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: false
                        }],
                        yAxes: [{
                            display: false,
                        }]
                    }
                }
            };

            for (let i = 0; i < stats['requests']['data'].length; i++) {
                config.data.datasets[0].data[i] = stats['requests']['data'][i].value;
                config.data.labels[i] = date.format('d F Y', stats['requests']['data'][i].date);
            }

            let chart = container.get('chart');

            if(chart) {
                //if(JSON.stringify(chart.data.datasets[0].data) === JSON.stringify(config.data.datasets[0].data) && element.dataset['canvas']) {
                //    return;
                //}

                //chart.destroy();
            }

            element.innerHTML = '';

            element.appendChild(child);

            container.set('chart', new Chart(child.getContext('2d'), config), true);

            element.dataset['canvas'] = true;
        }
    })
;