ucan-ext-js-kitchen-sink/packages/local/common-ux/src/util/dialog/AboutDialogView.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCAN.common.dialog.AboutDialogView', {
    extend: 'Ext.Dialog',
    alias: 'widget.about-dialog',
    xtype: 'aboutDialogView',
    cls: 'js-ucan-about-dialog-view ucan-about-dialog-view',

    config: {
        url: null,
        appIcon: null,
        appName: null,
        translator: null
    },
    twoWayBindable: {
        url: true,
        appIcon: true,
        appName: true,
        translator: null
    },
    publishes: ['url', 'appIcon', 'appName', 'translator'],

    closable: true,
    hideOnMaskTap: true,
    focusable: true,
    maximizable: true,
    scrollable: true,
    header: false,

    listeners: {
        initialize: function(me) {
            this.onInitialize(me);
        }
    },

    layout: 'hbox',

    items: [
        {
            cls: 'js-ucan-about-dialog-view-about-image ucan-about-dialog-view-about-image',
            html: '<img src="resources/desktop/images/icon.png" style="width:64px; height:auto; transform:translateY(25%);">'
        },
        {
            xtype: 'spacer',
            width: '16px'
        },
        {
            layout: 'vbox',
            items: [
                {
                    cls: 'js-ucan-about-dialog-view-about-header ucan-about-dialog-view-about-header',
                    html: '<h1>App</h1>'
                },
                {
                    cls: 'js-ucan-about-dialog-view-version ucan-about-dialog-view-about-text'
                },
                {
                    cls: 'js-ucan-about-dialog-view-what-is-new ucan-about-dialog-view-about-text',
                    html: '<a title="Link in neuem Reiter öffnen" href="https://confluence.ucan-assess.org/pages/viewpage.action?pageId=50824980" target="_blank">what_is_new</a>'
                },
                {
                    xtype: 'spacer',
                    height: '14px',
                    width: '0px'
                },
                {
                    cls: 'js-ucan-about-dialog-view-used-memory ucan-about-dialog-view-about-text'
                },
                {
                    cls: 'js-ucan-about-dialog-view-max-memory ucan-about-dialog-view-about-text'
                },
                {
                    xtype: 'spacer',
                    height: '14px',
                    width: '0px'
                },
                {
                    cls: 'js-ucan-about-dialog-view-java-variant ucan-about-dialog-view-about-text'
                },
                {
                    cls: 'js-ucan-about-dialog-view-java-version ucan-about-dialog-view-about-text'
                },
                {
                    xtype: 'spacer',
                    height: '14px',
                    width: '0px'
                },
                {
                    cls: 'js-ucan-about-dialog-view-os ucan-about-dialog-view-about-text'
                },
                {
                    xtype: 'spacer',
                    height: '14px',
                    width: '0px'
                },
                {
                    cls: 'js-ucan-about-dialog-view-powered-by ucan-about-dialog-view-about-text',
                    html: '<a title="Link in neuem Reiter öffnen" href="https://cares.institute" target="_blank">powered_by</a>'
                }
            ]
        }
    ],

    buttons: {
        close: {
            bind: '{translator.dialog_close}',
            handler: function(button) {
                Ext.destroy(button.up('window'));
            }
        }
    },

    // region Update Attributes

    updateAppName: function(config) {
        const aboutHeader = this.getAboutHeader();
        aboutHeader.setHtml('<h1>'+config+'</h1>');
    },

    updateAppIcon: function(config) {
        const aboutIcon = this.getAboutIcon();
        aboutIcon.setHtml('<img src="'+config+'" style="width:64px; height:auto; transform:translateY(25%);">');
    },

    updateTranslator: function(config) {
        const aboutText = this.getPoweredByText();
        aboutText.setHtml('<a title="Link in neuem Reiter öffnen" href="https://cares.institute" target="_blank">'+config.powered_by+'</a>');

        const whatIsNew = this.getWhatIsNew();
        whatIsNew.setHtml('<a title="Link in neuem Reiter öffnen" href="https://confluence.ucan-assess.org/pages/viewpage.action?pageId=50824980" target="_blank">'+config.what_is_new+'</a>')

    },

    // endregion

    // region EventHandling

    onInitialize: function(me) {
        me.setMasked(true);
        Ext.Ajax.request({
            url: 'rest/config/about',
            success: function(response) {
                const about = JSON.parse(response.responseText);
                this.getAboutVersion().setHtml(this.getTranslator().version + ': ' + about.version);
                this.getAboutMaxMemory().setHtml(this.getTranslator().max_memory + ': ' + about.heap_max);
                this.getAboutUsedMemory().setHtml(this.getTranslator().used_memory + ': ' + about.heap_size);
                this.getAboutJavaVariant().setHtml("Java " + this.getTranslator().variant + ': ' + about.java_vendor);
                this.getAboutJavaVersion().setHtml("Java " + this.getTranslator().version + ': ' + about.java_version);
                this.getAboutOs().setHtml(this.getTranslator().os + ': ' + about.os_name + ' ' + about.os_version);
                me.setMasked(false);
            },
            failure: function() {
                me.setMasked(false);
            },
            scope: this
        })
    },

    // endregion

    // region Getter

    getPoweredByText: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-powered-by]');
    },

    getWhatIsNew: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-what-is-new]');
    },

    getAboutHeader: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-about-header]');
    },

    getAboutIcon: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-about-image]');
    },

    getAboutVersion: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-version]');
    },

    getAboutMaxMemory: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-max-memory]');
    },

    getAboutUsedMemory: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-used-memory]');
    },

    getAboutJavaVariant: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-java-variant]');
    },

    getAboutJavaVersion: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-java-version]');
    },

    getAboutOs: function() {
        return this.down('[cls~=js-ucan-about-dialog-view-os]');
    }

    // endregion
})