livecodingspace-app/public/web/index-app.js

import page from '/lib/page.mjs';

class IndexApp {
    constructor() {
        console.log("app constructor");

        this.worlds = {};
        this.language = _LangManager.language;

        this.options = {

            query: 'pathname=' + window.location.pathname.slice(1,
                window.location.pathname.lastIndexOf("/")),
            secure: window.location.protocol === "https:",
            reconnection: false,
            path: '',
            transports: ['websocket']
        }

        //window.location.host
        var socket = io.connect(window._app.reflectorHost, this.options);

        const parse = (msg) => {
            this.parseAppInstancesData(msg)
        }
        socket.on('getWebAppUpdate', msg => parse.call(this, msg));
        socket.on("connect", function () {

            let noty = new Noty({
                text: 'Connected to Reflector!',
                timeout: 2000,
                theme: 'mint',
                layout: 'bottomRight',
                type: 'success'
            });
            noty.show();
        })

        socket.on('connect_error', function (err) {
            console.log(err);
            var errDiv = document.createElement("div");
            errDiv.innerHTML = "<div class='vwf-err' style='z-index: 10; position: absolute; top: 80px; right: 50px'>Connection error to Reflector!" + err + "</div>";
            document.querySelector('body').appendChild(errDiv);

            let noty = new Noty({
                text: 'Connection error to Reflector! ' + err,
                theme: 'mint',
                layout: 'bottomRight',
                type: 'error'
            });
            noty.show();

        });

    }



    async generateFrontPage() {

        let infoEl = document.createElement("div");
        infoEl.setAttribute("id", "info");

        let lang = _LangManager.locale;

        let infoElHTML = await _app.helpers.getHtmlText('/web/locale/' + lang + '/index.html');
        infoEl.innerHTML = infoElHTML;
        document.body.appendChild(infoEl);

        document.querySelector('#ruLang').addEventListener('click', function (e) {
            _LangManager.locale = 'ru';
            window.location.reload(true);
        });

        document.querySelector('#enLang').addEventListener('click', function (e) {
            _LangManager.locale = 'en';
            window.location.reload(true);
        });

    }

    async initApp() {

        let appEl = document.createElement("div");
        appEl.setAttribute("id", "app");

        let appElHTML = await _app.helpers.getHtmlText('/web/app.html');
        appEl.innerHTML = appElHTML;
        document.body.appendChild(appEl);

        this.initUser();
        this.initUserGUI();
        this.initWorldsListGUI();
        //this.getAppDetailsFromDB();

    }


    initUser() {

        _LCSDB.on('auth', (ack) => {

            if (ack.pub) {

                let alias = _LCSUSER.is.alias;
                let userEl = document.querySelector('#userGUI');
                userEl._status = 'Welcome ' + alias + '!';
                //userEl.style.backgroundColor = '#e6e6e6';   
                userEl.$update();
                document.querySelector('#worldGUI').$update();
                document.querySelector('#main').$update();

                _LCSUSER.get('profile').once(function (data) { console.log(data) })

                var el = document.getElementById("loginGUI");
                if (el) {
                    el.remove();
                }

                _LCSUSER.get('profile').not(function (key) {
                    let profile = { 'alias': alias };
                    _LCSUSER.get('profile').put(profile);
                })

                new Noty({
                    text: alias + ' is succesfully authenticated!',
                    timeout: 2000,
                    theme: 'mint',
                    layout: 'bottomRight',
                    type: 'success'
                }).show();

                //this.getAppDetailsFromUserDB();
            }
            console.log(_LCSUSER.is);
        });
    }

    initUserGUI() {

        let worldGUI =
        {
            $type: "div",
            id: "worldGUI",
            class: "mdc-layout-grid mdc-layout-grid--align-left",
            _status: '',
            $init: function () {
                this._status = "init";
            },
            $update: function () {
                let guiForAll = [
                    window._app.widgets.buttonStroked(
                        {
                            "label": 'Default World Protos',
                            "onclick": function (e) {
                                e.preventDefault();
                                _app.indexApp.getAppDetailsFromDefaultDB('protos');

                            }
                        }),
                    window._app.widgets.buttonStroked(
                        {
                            "label": 'Default World States',
                            "onclick": function (e) {
                                e.preventDefault();
                                _app.indexApp.getAppDetailsFromDefaultDB('states');

                            }
                        })
                ];

                var guiUser = [];
                if (_LCSUSER.is) {
                    guiUser = []
                }

                this.$components = [
                    {
                        $type: "h1",
                        class: "mdc-typography--headline4",
                        $text: "Worlds list"
                    }
                ].concat(guiForAll).concat(guiUser)
            }
        }

        let userGUI =
        {
            $type: "div",
            id: "userGUI",
            // style:"background-color: #ffeb3b",
            class: "mdc-layout-grid mdc-layout-grid--align-left",
            _status: "",
            $init: function () {
                this._status = "Welcome!"
            },
            $update: function () {

                var gui = {};
                if (_LCSUSER.is) {
                    gui = [
                        window._app.widgets.buttonRaised(
                            {
                                "label": 'Sign OUT',
                                "onclick": function (e) {
                                    _LCSUSER.leave().then(ack => {
                                        if (ack.ok == 0) {
                                            window.sessionStorage.removeItem('alias');
                                            window.sessionStorage.removeItem('tmp');
                                            window.location.reload(true);
                                        }
                                    });
                                }
                            }),
                        {
                            $type: "p"
                        },
                        window._app.widgets.buttonStroked(
                            {
                                "label": 'PROFILE',
                                "onclick": function (e) {
                                    e.preventDefault();
                                    window.location.pathname = "/profile"
                                }
                            }),
                        {
                            $type: "p"
                        },
                        window._app.widgets.buttonStroked(
                            {
                                "label": 'My World protos',
                                "onclick": function (e) {
                                    e.preventDefault();
                                    let alias = _LCSUSER.is.alias;
                                    page.redirect('/' + alias + '/worlds/protos');
                                    //_app.indexApp.getWorldsProtosFromUserDB(alias);
                                }
                            }),
                        window._app.widgets.buttonStroked(
                            {
                                "label": 'My World states',
                                "onclick": function (e) {
                                    e.preventDefault();
                                    let alias = _LCSUSER.is.alias;
                                    page.redirect('/' + alias + '/worlds/states');
                                    //_app.indexApp.getWorldsFromUserDB(alias);       
                                }
                            })
                    ]
                }
                this.$components = [
                    window._app.widgets.buttonRaised(
                        {
                            "label": 'Connection settings',
                            "onclick": function (e) {
                                e.preventDefault();
                                window.location.pathname = '/settings';
                            }
                        }),
                    {
                        $type: "h1",
                        class: "mdc-typography--headline3",
                        $text: this._status
                    }
                ].concat(gui)
            }
        }

    
        let loginGUI =
        {
            $type: "div",
            id: "loginGUI",
            //style:"background-color: #efefef",
            class: "mdc-layout-grid mdc-layout-grid--align-left",
            _alias: null,
            _pass: null,
            _passField: null,
            _aliasField: null,
            _initData: function () {
                this._alias = '';
                this._pass = '';
                // if (window.sessionStorage.getItem('alias')) {
                //     this._alias = window.sessionStorage.getItem('alias')
                // }
                // if (window.sessionStorage.getItem('tmp')) {
                //     this._pass = window.sessionStorage.getItem('tmp')
                // }
            },
            $init: function () {
                this._initData();
            },
            $update: function () {

                this.$components = [
                    {
                        $type: "div",
                        class: "mdc-layout-grid__inner",
                        $components: [
                            {
                                $type: "div",
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                $components: [
                                    {
                                        $type: "span",
                                        class: "mdc-typography--headline5",
                                        $text: "Login: "
                                    },
                                    window._app.widgets.inputTextFieldOutlined({
                                        "id": 'aliasInput',
                                        "label": "Login",
                                        "value": this._alias,
                                        "type": "text",
                                        "init": function() {
                                                    this._aliasField = new mdc.textField.MDCTextField(this);
                                                }
                                    }),
                                ]
                            },
                            {
                                $type: "div",
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                $components: [
                                    {
                                        $type: "span",
                                        class: "mdc-typography--headline5",
                                        $text: "Password: "
                                    },
                                    window._app.widgets.inputTextFieldOutlined({
                                        "id": 'passwordInput',
                                        "label": "Password",
                                        "value": this._pass,
                                        "type": "password",
                                        "init": function() {
                                            this._passField = new mdc.textField.MDCTextField(this);
                                        }
                                    }),
                                ]
                            },
                            {
                                $type: "div",
                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                $components: [
                                    window._app.widgets.buttonRaised(
                                        {
                                            "label": 'Sign UP',
                                            "onclick": function (e) {
                                                e.preventDefault();

                                                let alias = this._aliasField.value;
                                                let pass = this._passField.value

                                                if (pass.length < 7) {
                                                    new Noty({
                                                        text: "Your passphrase needs to be longer than 7 letters",
                                                        timeout: 2000,
                                                        theme: 'mint',
                                                        layout: 'bottomRight',
                                                        type: 'error'
                                                    }).show();
                                                } else {
                                                    //
                                                    _LCSUSER.create(alias, pass,
                                                        (ack) => {
                                                            if (!ack.wait) { }
                                                            if (ack.err) {
                                                                console.log(ack.err)
                                                                return ack.err
                                                            };
                                                            if (ack.pub) {
                                                                _LCSUSER.auth(alias, pass);
                                                                _LCSDB.get('users').get(alias).put({
                                                                    'alias': alias,
                                                                    'pub': ack.pub
                                                                });
                                                            }
                                                        });
                                                }
                                            }
                                        }),
                                    {
                                        $type: "span",
                                        $text: " "
                                    },
                                    window._app.widgets.buttonRaised(
                                        {
                                            "label": 'Sign IN',
                                            "onclick": function (e) {
                                                e.preventDefault();
                                                _LCSUSER.auth(this._aliasField.value, this._passField.value, ack => {

                                                    if (ack.err) {
                                                        new Noty({
                                                            text: ack.err,
                                                            timeout: 2000,
                                                            theme: 'mint',
                                                            layout: 'bottomRight',
                                                            type: 'error'
                                                        }).show();

                                                    }
                                                });
                                            }
                                        })
                                        


                                ]
                            }

                        ]
                    }
                ]
            }

        }

        document.querySelector("#userLobby").$cell({
            id: "userLobby",
            $cell: true,
            $type: "div",
            $components: [ 
               
                userGUI, loginGUI, _app.widgets.divider, worldGUI]
        }
        );
    }

    initWorldsListGUI() {

        var self = this;
        let worldsListGUI = {

            $cell: true,
            $type: "div",
            id: "main",
            _status: "",
            _jsonData: {},
            _emptyLists: function () {
                Object.entries(this._jsonData).forEach(function (element) {
                    //console.log(element);
                    let el = document.getElementById(element[0] + 'List');
                    if (el)
                        el._setListData({});
                });
            },
            $init: function () {
                this._jsonData = {} //data//JSON.parse(data);
            },
            _makeWorldCard: function (m) {
                let langID = localStorage.getItem('krestianstvo_locale');
                var appInfo = m
                if (langID) {
                    if (m[1][langID]) {
                        appInfo = [m[0], m[1][langID], m[1].user, m[1].type, m[1].created, m[1].modified]
                    }
                }
                return {
                    $cell: true,
                    $type: "div",
                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
                    $components: [
                        this._worldCardDef(appInfo)
                    ]
                }

            },
            $update: function () {
                this.$components = [
                    {
                        $type: "div",
                        class: "mdc-layout-grid",
                        $components: [
                            {
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            {
                                                $type: "H3",
                                                $text: this._status
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: Object.entries(this._jsonData).sort(function(el1, el2){
                                    return parseInt(el2[1].created) - parseInt(el1[1].created)
                                }).map(this._makeWorldCard)
                            }
                        ]

                    },


                ]
            },
            _worldCardDef: function (desc) {

                let userGUI = [];
                let cardInfo = {
                    "title": ""
                };

                if (desc[3] == 'saveState') {
                    cardInfo.title = desc[0].split('/')[2];
                }

                if (desc[3] == 'proto') {
                    cardInfo.title = desc[0];

                    userGUI.push(

                        {
                            $type: "a",
                            class: "mdc-button mdc-button--compact mdc-card__action",
                            $text: "States",
                            onclick: function (e) {
                                //console.log('clone');
                                self.showOnlySaveStates(desc[0], desc[2]);
                                //self.refresh();
                            }
                        }
                    )
                }

                if (_LCSUSER.is) {

                    if (_LCSUSER.is.alias == desc[2]) {
                        userGUI.push(
                            {
                                $type: "a",
                                class: "mdc-button mdc-button--compact mdc-card__action",
                                $text: "Edit info",
                                //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
                                onclick: function (e) {
                                    //'/:user/:type/:name/edit/:file'
                                    if (desc[3] == 'proto') {
                                        window.location.pathname = "/" + desc[2] + '/proto/' + desc[0] + '/edit/info_json'
                                    } else if (desc[3] == 'saveState') {
                                        let names = desc[0].split('/');
                                        let filename = ('savestate_/' + names[0] + '/' + names[2] + '_info_vwf_json').split('/').join("~");
                                        window.location.pathname = "/" + desc[2] + '/state/' + names[0] + '/edit/' + filename;
                                    }
                                    //self.refresh();
                                }
                            }
                        );

                        if (desc[3] == 'proto') {
                            userGUI.push(
                                {
                                    $type: "a",
                                    class: "mdc-button mdc-button--compact mdc-card__action",
                                    $text: "Edit proto",
                                    //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
                                    onclick: function (e) {
                                        window.location.pathname = "/" + desc[2] + '/proto/' + desc[0] + '/edit/index_vwf_yaml'
                                    }
                                }
                            );

                            userGUI.push(
                                {
                                    $type: "a",
                                    class: "mdc-button mdc-button--compact mdc-card__action",
                                    $text: "Delete",
                                    //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
                                    onclick: function (e) {
                                        _app.deleteWorld(desc[0], 'proto');
                                    }
                                }
                            );
                        }


                        if(desc[3] == 'saveState'){
                            userGUI.push(
                                {
                                    $type: "a",
                                    class: "mdc-button mdc-button--compact mdc-card__action",
                                    $text: "Delete",
                                    //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
                                    onclick: function (e) {
                                        _app.deleteWorld(desc[0], 'state');
                                    }
                                }
                            );
                        }


                    }

                    if (desc[3] == 'proto') {
                        userGUI.push(
                            {
                                $type: "a",
                                class: "mdc-button mdc-button--compact mdc-card__action",
                                $text: self.language.t('clone proto'),//"clone",
                                onclick: function (e) {
                                    //console.log('clone');
                                    _app.cloneWorldPrototype(desc[0], desc[2]);
                                    //self.refresh();
                                }
                            }

                        )
                    } else if (desc[3] == 'saveState') {

                        
                        // userGUI.push(
                        //     {
                        //         $type: "a",
                        //         class: "mdc-button mdc-button--compact mdc-card__action mdc-button--outlined",
                        //         $text: "Clone",
                        //         onclick: function (e) {
                        //             //console.log('clone');

                        //             //self.cloneWorldState(desc[0], desc[2]);

                        //             //self.refresh();
                        //         }
                        //     })
                    }

                }

                return {
                    $cell: true,
                    $type: "div",
                    class: "mdc-card world-card",
                    _appInfo: desc,
                    $components: [
                        {
                            $type: "section",
                            class: "mdc-card__media world-card__16-9-media",
                            $init: function () {
                                if (desc[1].imgUrl !== "") {
                                    this.style.backgroundImage = 'linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(' + desc[1].imgUrl + ')';
                                }
                            }
                        },
                        {
                            $type: "section",
                            class: "mdc-card__primary",
                            $components: [
                                {
                                    $type: "h1",
                                    class: "mdc-card__title mdc-card__title--large",
                                    $text: desc[1].title
                                },
                                {
                                    $type: "h2",
                                    class: "mdc-card__subtitle mdc-theme--text-secondary-on-background",
                                    $text: desc[1].text 
                                },
                                {
                                    $type: "span",
                                    class: "mdc-card__subtitle mdc-theme--text-secondary-on-background",
                                    $text: 'id: '
                                },
                                {
                                    $type: "input",
                                    type: "text",
                                    disabled: "",
                                    style: "font-size:18px",
                                    value: cardInfo.title
                                },
                                {
                                    $type: "p", 
                                },
                                {
                                    $type: "span",
                                    class: "mdc-card__subtitle mdc-theme--text-secondary-on-background",
                                    $text: 'created: ' + (new Date(desc[4])).toUTCString()
                                },
                                {
                                    $type: "p", 
                                }
                                // ,{
                                //     $type: "span",
                                //     class: "mdc-card__subtitle mdc-theme--text-secondary-on-background",
                                //     $text: 'modified: ' + (new Date(desc[5])).toUTCString()
                                // }
                            ]
                        },
                        {
                            $type: "section",
                            class: "mdc-card__actions",
                            $components: [
                                {
                                    $type: "a",
                                    class: "mdc-button mdc-button--compact mdc-card__action mdc-button--outlined",
                                    $text: self.language.t('start'),//"Start new",
                                    target: "_blank",
                                    href: "/" + desc[2] + '/' + desc[0],
                                    onclick: function (e) {
                                        self.refresh();
                                    }
                                },
                                {
                                    $type: "a",
                                    class: "mdc-button mdc-button--compact mdc-card__action",
                                    $text: "Details",//"clone",
                                    //href: "/" + desc[2] + '/' + desc[0] +'/about',
                                    onclick: function (e) {
                                        e.preventDefault();
                                        window.location.pathname = "/" + desc[2] + '/' + desc[0] +'/about'
                                        //console.log('clone');
                                       // _app.cloneWorldPrototype(desc[0], desc[2]);
                                        //self.refresh();
                                    }
                                }
                            ].concat(userGUI)
                        },

                        {
                            $type: "section",
                            class: "mdc-card__actions",
                            $components: [

                                {
                                    $type: "ul",
                                    _listData: {},
                                    _setListData: function (data) {
                                        this._listData = data;
                                    },
                                    class: "mdc-list mdc-list--two-line",
                                    'aria-orientation': "vertical",
                                    id: desc[0] + 'List',
                                    $update: function () {
                                        var connectText = {}

                                        let cardListData = Object.entries(this._listData).filter(el => el[1].user == this._appInfo[2]);

                                        if (cardListData.length !== 0) {
                                            connectText = {
                                                // $type: "span",
                                                // class: "mdc-theme--text-secondary",
                                                // $text: "...or connect to:"
                                            }
                                        }
                                        this.$components = [
                                            {
                                                $type: "hr",
                                                class: "mdc-list-divider"
                                            }
                                        ].concat(cardListData.map(this._worldListItem))
                                        //     [connectText]
                                        // }].concat(Object.entries(this._listData).map(this._worldListItem))


                                    },
                                    _worldListItem: function (m) {
                                        return {
                                            $type: "li",
                                            class: "mdc-list-item",
                                            $components: [
                                                {
                                                    $type: "span",
                                                    class: "world-link mdc-list-item__text",
                                                    $components: [
                                                        {
                                                            $type: "span",
                                                            class: "mdc-list-item__primary-text",
                                                            $components: [
                                                                {
                                                                    $type: "a",
                                                                    $text: m[0],
                                                                    target: "_blank",
                                                                    href: window.location.protocol + "//" + window.location.host + "/" + m[1].user + m[0],
                                                                    onclick: function (e) {
                                                                        //self.refresh();
                                                                    }
                                                                },
                                                            ]
                                                        },
                                                        {
                                                            $type: "span",
                                                            class: "mdc-list-item__secondary-text",
                                                            $text: self.language.t('users') + m[1].clients
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            }
        }

        document.querySelector("#main").$cell({
            $cell: true,
            $type: "div",
            $components: [worldsListGUI]
        })

    }

    async showOnlySaveStates(index, userAlias) {

        let userPub = await _LCSDB.get('users').get(userAlias).get('pub').once().then();

        var db = _LCSDB.user(userPub);

        if (_LCSUSER.is) {
            if (_LCSUSER.is.alias == userAlias)
                db = _LCSUSER;
        }

        this.worlds = {};
        document.querySelector("#main")._jsonData = Object.assign({}, this.worlds);
        document.querySelector("#main")._status = "Save states of the World: " + index + ' for user: ' + userAlias;
        document.querySelector("#main").$update();
        //let userAlias = _LCSUSER.is.alias;

        db.get('documents').get(index).once(save => {
            if (save) {
                let saves = Object.keys(save).filter(el => el.includes('_info_vwf_json'));
                console.log(saves);

                if (saves) {
                    saves.forEach(el => {
                        db.get('documents').get(index).get(el).once(res => {
                            if (res) {
                                let created = res.created ? res.created: res.modified;

                                let fileName = el.split('/')[2].replace('_info_vwf_json', "");
                                let world = JSON.parse(res.file);
                                let root = Object.keys(world)[0];
                                world[root].user = userAlias;
                                world[root].type = 'saveState';
                                world[root].created = created;
                                world[root].modified = res.modified;
                                this.worlds[index + '/load/' + fileName] = world[root];
                                document.querySelector("#main")._jsonData = Object.assign({}, this.worlds);
                            }
                        })
                    })
                }
            }
        })
    }

    async getWorldsProtosFromUserDB(userAlias) {

        let userPub = await _LCSDB.get('users').get(userAlias).get('pub').once().then();

        console.log('get user worlds for: ' + userAlias);
        this.worlds = {};
        document.querySelector("#main")._jsonData = Object.assign({}, this.worlds);

        if (!userPub) {
            document.querySelector("#main")._status = "no such user";
            document.querySelector("#main").$update();
        }

        if (userPub) {

            document.querySelector("#main")._status = "Worlds protos for: " + userAlias;
            document.querySelector("#main").$update();

            var db = _LCSDB.user(userPub);

            if (_LCSUSER.is) {
                if (_LCSUSER.is.alias == userAlias)
                    db = _LCSUSER;
            }

            db.get('worlds').map().once((w, index) => {

                if (w) {
                    db.get('worlds').get(index).get('info_json').once(res => {

                        if (res && res !== 'null') {

                            if (res.file && res.file !== 'null') {

                            let created = res.created ? res.created: res.modified;

                            let world = JSON.parse(res.file);
                            let root = Object.keys(world)[0];
                            world[root].user = userAlias;
                            world[root].type = 'proto';
                            world[root].created = created;
                            world[root].modified = res.modified;
                            this.worlds[index] = world[root];
                            document.querySelector("#main")._jsonData = Object.assign({}, this.worlds);
                            }
                        }

                    })

                }
            })
        }

    }


    async getWorldsFromUserDB(userAlias) {

        let userPub = await _LCSDB.get('users').get(userAlias).get('pub').once().then();

        console.log('get user worlds for: ' + userAlias);
        this.worlds = {};
        document.querySelector("#main")._jsonData = Object.assign({}, this.worlds);

        if (!userPub) {
            document.querySelector("#main")._status = "no such user";
            document.querySelector("#main").$update();
        }

        if (userPub) {

            document.querySelector("#main")._status = "Worlds states for: " + userAlias;
            document.querySelector("#main").$update();

            var db = _LCSDB.user(userPub);

            if (_LCSUSER.is) {
                if (_LCSUSER.is.alias == userAlias)
                    db = _LCSUSER;
            }


            db.get('worlds').map().once((w, index) => {

                if (w) {

                    db.get('documents').get(index).once(save => {
                        if (save) {
                            let saves = Object.keys(save).filter(el => el.includes('_info_vwf_json'));
                            console.log(saves);

                            if (saves) {

                                saves.forEach(el => {

                                    db.get('documents').get(index).get(el).once(res => {

                                        if (res ) {
                                            if(res.file && res.file !== "null") {

                                            let created = res.created ? res.created: res.modified;

                                            let fileName = el.split('/')[2].replace('_info_vwf_json', "");
                                            let world = JSON.parse(res.file);
                                            let root = Object.keys(world)[0];
                                            world[root].user = userAlias;
                                            world[root].type = 'saveState';
                                            world[root].created = created;
                                            world[root].modified = res.modified;
                                            this.worlds[index + '/load/' + fileName] = world[root];
                                            document.querySelector("#main")._jsonData = Object.assign({}, this.worlds);
                                            }
                                        }
                                    })
                                })
                            }
                        }
                    })
                }
            })
        }
    }


    async getAppDetailsFromDefaultDB(type) {

        let defaultUserPUB = await _LCSDB.get('lcs/app').path('pub').once().then();
        var userAlias = await _LCSDB.user(defaultUserPUB).get('alias').once().then();

        page.redirect('/' + userAlias + '/worlds/' + type);

    }

    async getAppDetailsFromDB() {

        let defaultUserPUB = await _LCSDB.get('lcs/app').path('pub').once().then();
        var userAlias = await _LCSDB.user(defaultUserPUB).get('alias').once().then();

        if (userAlias)
            this.getWorldsProtosFromUserDB(userAlias);
    }


    refresh() {
        // socket.emit('getWebAppUpdate', "");
    }


    parseAppInstancesData(data) {

        if (data == "{}") {
            var el = document.querySelector(".instance");
            if (el) {
                var topEl = el.parentNode;
                topEl.removeChild(el);
            }
            // let removeElements = elms => Array.from(elms).forEach(el => el.remove()); 
        }
    
        let jsonObj = JSON.parse(data);
        var parsed = {};
        for (var prop in jsonObj) {
            var name = prop.split('/')[1];
            if (parsed[name]) {
                parsed[name][prop] = jsonObj[prop];
            } else {
                parsed[name] = {};
                parsed[name][prop] = jsonObj[prop];
            }
    
        }
        //console.log(parsed);
    
        if (Object.entries(this.worlds).length !== 0)
            document.querySelector("#main")._emptyLists();
    
        for (var prop in parsed) {
            var name = prop;
            let obj = Object.entries(parsed[prop]);
            var lists = {};
            obj.forEach(el => {
                let sotSave = prop;
    
                if (el[1].loadInfo['save_name']) {
                    let saveName = prop + '/load/' + el[1].loadInfo.save_name;
                    if (!lists[saveName])
                        lists[saveName] = {};
    
                    lists[saveName][el[0]] = el[1]
                } else {
                    if (!lists[name])
                        lists[name] = {};
    
                    lists[name][el[0]] = el[1]
    
                }
            });
    
            // console.log(lists);
    
            Object.entries(lists).forEach(list => {
    
                let element = document.getElementById(list[0] + 'List');
                if (element) {
                    element._setListData(list[1]);
                }
            })
        }
        // console.log(data)
    }


}
export { IndexApp }
    //export {getAppDetails, generateFrontPage, setLanguage, initLocale};