fixes and settings GUI

public/app.js

@@ -26,6 +26,7 @@ class App {
       //client routes
       page('/', this.HandleIndex);
       page('/setup', this.HandleSetupIndex);
+      page('/settings', this.HandleSettingsIndex);
       page('/profile', this.HandleUserIndex);
       page('/worlds', this.HandleIndex);
       page('/:user/worlds', this.HandleUserWorlds);
@@ -266,8 +267,8 @@ class App {
         } 
       }, 4),
 
-      "index_vwf_html": "",
-      "appui_js": "",
+      "index_vwf_html": JSON.stringify ("<!-- DEFAULT HTML -->"),
+      "appui_js": JSON.stringify ("//appui in JS"),
       "info_json": JSON.stringify ({
         "info": {
           "en": {
@@ -317,6 +318,19 @@ class App {
 
   //load defaults for first registered user running ./setup
 
+  HandleSettingsIndex() {
+
+    window._app.hideProgressBar();
+    window._app.hideUIControl();
+
+    let el = document.createElement("div");
+    el.setAttribute("id", "appGUI");
+    document.body.appendChild(el);
+
+    _app.initReflectorGUI();
+
+  }
+
   HandleSetupIndex() {
 
     window._app.hideProgressBar();
@@ -733,7 +747,7 @@ class App {
 
     let pathToParse = pathname.replace('/' + user, "");
 
-    app.helpers.Process(pathToParse).then(parsedRequest => {
+    app.helpers.Process(pathToParse).then(async function(parsedRequest) {
 
       localStorage.setItem('lcs_app', JSON.stringify({ path: parsedRequest }));
       console.log(parsedRequest);
@@ -741,7 +755,7 @@ class App {
       var userLibraries = { model: {}, view: {} };
       var application;
 
-      vwf.loadConfiguration(application, userLibraries, compatibilityCheck);
+      await vwf.loadConfiguration(application, userLibraries, compatibilityCheck);
     });
   }
 
@@ -774,7 +788,7 @@ class App {
     var userLibraries = { model: {}, view: {} };
     var application;
 
-    vwf.loadConfiguration(application, userLibraries, compatibilityCheck);
+    await vwf.loadConfiguration(application, userLibraries, compatibilityCheck);
 
   }
 
@@ -805,8 +819,23 @@ class App {
     console.log(loadObj);
 
     //temporary solution for syncing DB replicas using Gun.load()
-    await _LCS_SYS_USER.get('proxy').load(res=>{}, {wait: 200}).then();
-    await _LCSDB.user(userPub).get('worlds').get(loadObj.path.public_path.slice(1)).load(res=>{}, {wait: 200}).then();
+    _LCS_SYS_USER.get('proxy').load(res=>{
+      if (res) 
+      {console.log('proxy loaded');
+
+      _LCSDB.user(userPub).get('worlds').get(loadObj.path.public_path.slice(1)).load(w=>{
+        if (w) {
+          console.log('world files loaded');
+          vwf.ready( vwf.application, loadObj)
+        }
+      }, {wait: 200});
+
+      
+
+    }
+    }, {wait: 200});
+
+    
 
     return loadObj
 
@@ -1291,6 +1320,148 @@ class App {
     }
   }
 
+
+  initReflectorGUI() {
+
+    let reflectorGUI =
+    {
+        $type: "div",
+        id: "reflectorGUI",
+        //style:"background-color: #efefef",
+        class: "mdc-layout-grid mdc-layout-grid--align-left",
+        _reflectorHost: null,
+        _dbHost: null,
+        _refHostField: null,
+        _dbHostField: null,
+        _initData: function () {
+            this._reflectorHost = '';
+            this._dbHost = '';
+
+            let config = JSON.parse(localStorage.getItem('lcs_config'));
+
+            if (config.reflector) {
+                this._reflectorHost = config.reflector
+            }
+            if (config.dbhost) {
+                this._dbHost =config.dbhost
+            }
+        },
+        $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: "h4",
+                                class: "mdc-typography--headline4",
+                                $text: "Connection settings"
+                            }
+                        ]
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                            $components: [
+                                {
+                                    $type: "span",
+                                    class: "mdc-typography--headline5",
+                                    $text: "Reflector: "
+                                },
+                                window._app.widgets.inputTextFieldOutlined({
+                                    "id": 'reflectorInput',
+                                    "label": "Reflector",
+                                    "value": this._reflectorHost,
+                                    "type": "text",
+                                    "init": function() {
+                                                this._refHostField = new mdc.textField.MDCTextField(this);
+                                            },
+                                    "style": 'width: 400px;'
+                                }),
+                            ]
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                            $components: [
+                                {
+                                    $type: "span",
+                                    class: "mdc-typography--headline5",
+                                    $text: "DB Host: "
+                                },
+                                window._app.widgets.inputTextFieldOutlined({
+                                    "id": 'dbhostInput',
+                                    "label": "DB Host",
+                                    "value": this._dbHost,
+                                    "type": "text",
+                                    "init": function() {
+                                        this._dbHostField = new mdc.textField.MDCTextField(this);
+                                    },
+                                    "style": 'width: 400px;'
+                                }),
+                            ]
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                            $components: [
+                                window._app.widgets.buttonRaised(
+                                    {
+                                        "label": 'Update',
+                                        "onclick": function (e) {
+                                            e.preventDefault();
+
+                                            let config = JSON.parse(localStorage.getItem('lcs_config'));
+
+                                            config.reflector = this._refHostField.value;
+                                            config.dbhost = this._dbHostField.value;
+
+                                            localStorage.setItem('lcs_config', JSON.stringify(config));
+                                            window.location.reload(true);
+                                        }
+                                    }),
+                                    {
+                                      $type: 'span',
+                                      $text: " "
+                                    },
+                                    {
+                                      $type: "button",
+                                      class: "mdc-button mdc-button--raised",
+                                      $text: "Close",
+                                      onclick: function (e) {
+                                          window.location.pathname = '/'
+                                      }
+                                    }
+                            ]
+                        }
+
+                    ]
+                }
+            ]
+        }
+
+    }
+
+    document.querySelector("#appGUI").$cell({
+        id: "appGUI",
+        $cell: true,
+        $type: "div",
+        $components: [reflectorGUI]
+    }
+    );
+
+}
+
+
+
 }
 
 export { App }

public/lib/widgets.js

@@ -21,10 +21,14 @@
                 }
                 let inputType = obj.type ? obj.type: 'text';
                 let init = obj.init ? obj.init: initFunc;
+
+                let style = obj.style ? obj.style: "";
+
                 return {
                     $cell: true,
                     $type: "div",
                     class: "mdc-text-field mdc-text-field--outlined mdc-text-field--dense",
+                    style: style,
                     $init: init,
                     $components:[
                         {

public/vwf.js

@@ -270,7 +270,7 @@
         //     [1] vwf.loadConfiguration( ..., { "vwf/model/glge": [ "#scene, "second param" ] }, { ... } )
         //     [2] vwf.loadConfiguration( ..., { "vwf/model/glge": "#scene" }, { ... } )
         //     [3] vwf.loadConfiguration( ..., { "vwf/model/javascript": undefined }, { ... } )
-       this.loadConfiguration = function(/* [ componentURI|componentObject ] { modelInitializers }
+       this.loadConfiguration = async function(/* [ componentURI|componentObject ] { modelInitializers }
             { viewInitializers } */) {
             var args = Array.prototype.slice.call( arguments );
 
@@ -561,7 +561,7 @@
 
                 require( requireConfig, getActiveLibraries(requireArray, false), function( ready ) {
 
-                    ready( function() {
+                    ready( async function() {
 
                         // Merge any application configuration settings into the configuration
                         // object.
@@ -573,7 +573,7 @@
                         // accepts three parameters: a world specification, model configuration parameters,
                         // and view configuration parameters.
 
-                        vwf.initialize(application, getActiveLibraries(initializers["model"], true), getActiveLibraries(initializers["view"], true), callback);
+                        await vwf.initialize(application, getActiveLibraries(initializers["model"], true), getActiveLibraries(initializers["view"], true), callback);
 
                     } );
 
@@ -618,7 +618,7 @@
         /// 
         /// @name module:vwf.initialize
 
-        this.initialize = function( /* [ componentURI|componentObject ] [ modelInitializers ]
+        this.initialize = async function( /* [ componentURI|componentObject ] [ modelInitializers ]
             [ viewInitializers ] */ ) {
 
             var args = Array.prototype.slice.call( arguments );
@@ -812,8 +812,9 @@
                 callback(compatibilityStatus);
             }
 
-            _app.getApplicationState()
-                .then(res => self.ready( application, res))
+            await _app.getApplicationState();
+        //    await _app.getApplicationState()
+        //         .then(res => self.ready( application, res))
 
         };
 

public/web/app.html

@@ -1,42 +1,7 @@
-<div id="appGUI" class="mdc-layout-grid">
-  <div class="mdc-layout-grid__inner">
-      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
-          <h1 class="mdc-typography--headline4">Connection Settings</h1>
-        </div>
-    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
-      <div id="reflectorMenu" class="text-field-container">
-        <div id="reflectorSelect" class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense">
-          <input id="currentReflector" type="text" class="mdc-text-field__input mdc-typography--headline6" style="width:300px;">
-          <label for="currentReflector" class="mdc-floating-label">Reflector</label>
-          <div class="mdc-notched-outline">
-            <svg>
-              <path class="mdc-notched-outline__path"/>
-            </svg>
-          </div>
-          <div class="mdc-notched-outline__idle"></div>
-        </div>
-      </div>
-    </div>
-    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
-      <div id="dbMenu" class="text-field-container">
-        <div id="dbSelect" class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense">
-          <input id="currentdb" type="text" class="mdc-text-field__input mdc-typography--headline6" style="width:300px;">
-          <label for="currentdb" class="mdc-floating-label mdc-floating-label--float-above">DB Host</label>
-          <div class="mdc-notched-outline">
-            <svg>
-              <path class="mdc-notched-outline__path"/>
-            </svg>
-          </div>
-          <div class="mdc-notched-outline__idle"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<div id="appGUI"></div>
 <hr class="mdc-list-divider mdc-theme--text-hint-on-background divider" />
 <div id="userLobby"></div>
 <div id="main"></div>
-<hr class="mdc-list-divider mdc-theme--text-hint-on-background divider" />
 <div id="footer">
   <div id="about" class="mdc-layout-grid">
     <div class="mdc-layout-grid__inner">

public/web/index-app.js

@@ -55,14 +55,6 @@ class IndexApp {
     }
 
 
-    initReflectorServer() {
-        this.currentReflector = localStorage.getItem('lcs_reflector');
-        if (!this.currentReflector) {
-            localStorage.setItem('lcs_reflector', window.location.host);
-            this.currentReflector = localStorage.getItem('lcs_reflector');
-        }
-    }
-
 
     async generateFrontPage() {
 
@@ -96,8 +88,6 @@ class IndexApp {
         appEl.innerHTML = appElHTML;
         document.body.appendChild(appEl);
 
-        this.initReflectorSelector();
-        this.initDBSelector();
         this.initUser();
         this.initUserGUI();
         this.initWorldsListGUI();
@@ -259,6 +249,14 @@ class IndexApp {
                     ]
                 }
                 this.$components = [
+                    window._app.widgets.buttonRaised(
+                        {
+                            "label": 'Connection settings',
+                            "onclick": function (e) {
+                                e.preventDefault();
+                                window.location.pathname = '/settings';
+                            }
+                        }),
                     {
                         $type: "h1",
                         class: "mdc-typography--headline3",
@@ -268,8 +266,7 @@ class IndexApp {
             }
         }
 
-
-
+    
         let loginGUI =
         {
             $type: "div",
@@ -283,12 +280,12 @@ class IndexApp {
             _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')
-                }
+                // 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();
@@ -318,24 +315,6 @@ class IndexApp {
                                                     this._aliasField = new mdc.textField.MDCTextField(this);
                                                 }
                                     }),
-                                    // {
-                                    //     class: "mdc-text-field",
-                                    //     $type: "span",
-                                    //     $init: function() {
-                                    //         this._aliasField = new mdc.textField.MDCTextField(this);
-                                    //     },
-                                    //     $components: [
-                                    //         {
-                                    //             class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
-                                    //             $type: "input",
-                                    //             type: "text",
-                                    //             value: this._alias
-                                    //         }
-
-                                    //     ]
-
-                                    // }
-
                                 ]
                             },
                             {
@@ -356,24 +335,6 @@ class IndexApp {
                                             this._passField = new mdc.textField.MDCTextField(this);
                                         }
                                     }),
-                                    // {
-                                    //     class: "mdc-text-field",
-                                    //     $type: "span",
-                                    //     $init: function() {
-                                    //         this._passField = new mdc.textField.MDCTextField(this);
-                                    //     },
-                                    //     $components: [
-                                    //         {
-                                    //             class: "mdc-text-field__input prop-text-field-input mdc-typography--headline6",
-                                    //             $type: "input",
-                                    //             type: "password",
-                                    //             value: this._pass
-                                    //         }
-
-                                    //     ]
-
-                                    // }
-
                                 ]
                             },
                             {
@@ -441,6 +402,7 @@ class IndexApp {
                                                 });
                                             }
                                         })
+                                        
 
 
                                 ]
@@ -457,45 +419,13 @@ class IndexApp {
             id: "userLobby",
             $cell: true,
             $type: "div",
-            $components: [userGUI, loginGUI, _app.widgets.divider, worldGUI]
+            $components: [ 
+               
+                userGUI, loginGUI, _app.widgets.divider, worldGUI]
         }
         );
     }
 
-    initReflectorSelector() {
-
-        const ref = document.querySelector('#currentReflector');
-        ref.value = window._app.reflectorHost;
-
-        const reflectorSelect = document.querySelector('#reflectorSelect');
-        mdc.textField.MDCTextField.attachTo(reflectorSelect);
-        reflectorSelect.addEventListener('change', function (e) {
-            console.log(e.target.value);
-            let config = JSON.parse(localStorage.getItem('lcs_config'));
-            config.reflector = e.target.value;
-            localStorage.setItem('lcs_config', JSON.stringify(config));
-            window.location.reload(true);
-        });
-    }
-
-    initDBSelector() {
-
-        const ref = document.querySelector('#currentdb');
-        ref.value = window._app.dbHost;
-
-        const dbSelect = document.querySelector('#dbSelect');
-        mdc.textField.MDCTextField.attachTo(dbSelect);
-        dbSelect.addEventListener('change', function (e) {
-            console.log(e.target.value);
-
-            let config = JSON.parse(localStorage.getItem('lcs_config'));
-            config.dbhost = e.target.value;
-
-            localStorage.setItem('lcs_config', JSON.stringify(config));
-            window.location.reload(true);
-        });
-    }
-
     parseAppInstancesData(data) {
 
         if (data == "{}") {