neo.mjs 5.10.3 → 5.10.4

package/buildScripts/createClass.mjs

@@ -164,7 +164,7 @@ if (programOpts.info) {
             console.log(chalk.red('Drop mode not yet supported for the neo framework scope'));
             process.exit(1);
         } else {
-            classFolder = path.join(cwd, '/src/', ns.join('/'));
+            classFolder = path.join(cwd, className.startsWith('Neo.examples') ? '/' : '/src/', ns.join('/'));
             folderDelta = ns.length;
         }
     } else {
@@ -551,12 +551,20 @@ if (programOpts.info) {
             baseFileName  = opts.baseFileName,
             baseClassPath = baseClass.split('.').join('/'),
             className     = opts.className,
-            importSrc     = root === 'Neo' ? '' : 'src/',
+            importSrc     = 'src/',
             isSingleton   = opts.isSingleton,
             file          = opts.file,
             i             = 0,
             importDelta   = '';
 
+        if (root === 'Neo') {
+            if (className.startsWith('Neo.examples')) {
+                importSrc = 'src/';
+            } else {
+                importSrc = '';
+            }
+        }
+
         for (; i < opts.folderDelta; i++) {
             importDelta += '../';
         }

package/examples/ConfigurationViewport.mjs

@@ -35,9 +35,13 @@ class ConfigurationViewport extends Viewport {
          */
         configItemWidth: 270,
         /**
-         * @member {Number} configItemWidth=270
+         * @member {Number} configPanelFlex=1
          */
         configPanelFlex: 1,
+        /**
+         * @member {Number} configPanelMinWidth=350
+         */
+        configPanelMinWidth: 350,
         /**
          * @member {Neo.component.Base|null} exampleComponent=null
          */
@@ -70,7 +74,7 @@ class ConfigurationViewport extends Viewport {
             module: Panel,
             cls   : ['neo-panel', 'neo-container', 'neo-configuration-panel'],
             flex  : me.configPanelFlex,
-            style : {margin: '20px', minWidth: '350px'},
+            style : {margin: '20px', minWidth: me.configPanelMinWidth},
 
             containerConfig: {
                 style: {overflowY: 'scroll'}

package/examples/component/process/MainContainer.mjs

@@ -0,0 +1,90 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Process               from '../../../src/component/Process.mjs';
+import Container             from '../../../src/container/Base.mjs';
+import CheckBox              from "../../../src/form/field/CheckBox.mjs";
+import ColorField             from "../../../src/form/field/Color.mjs"
+
+/**
+ * @class Neo.examples.component.process.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.component.process.MainContainer',
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module   : CheckBox,
+            checked  : false,
+            value    : 5,
+            labelText: 'horizontal',
+            listeners: {change: me.onConfigChange.bind(me, 'horizontal')}
+        }, {
+            module   : ColorField,
+            clearable : false,
+            labelText: 'arrowColor',
+            value: '#aaa',
+            listeners: {change: me.onConfigChange.bind(me, 'arrowColor')}
+        }, {
+            module   : ColorField,
+            clearable : false,
+            labelText: 'iconColor',
+            value: '#953499',
+            listeners: {change: me.onConfigChange.bind(me, 'iconColor')}
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create({
+            module: Container,
+            style: {
+                overflow: 'auto',
+                maxHeight: '100%'
+            },
+            items : [{
+                html: '<h1>Configurable</h1>',
+                style: {textAlign: 'center'}
+            }, {
+                module    : Process,
+                flag      : 'color-change',
+                arrowColor: '#aaa',
+                horizontal: false,
+                iconColor : '#953499',
+                items     : [{
+                    iconCls: 'fa fa-plane-departure',
+                    title  : 'Start Eingabe',
+                    text   : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.'
+                }, {
+                    iconCls: 'fa fa-road',
+                    title  : 'Zwischenstand',
+                    text   : 'Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.'
+                }, {
+                    iconCls: 'fa fa-plane-arrival',
+                    title  : 'Endstand vor dem Aufladen',
+                    text   : 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.'
+                }, {
+                    iconCls: 'fa fa-square-poll-vertical',
+                    title  : 'Ausgabe',
+                    text   : 'Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.'
+                }]
+            }]
+        });
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigChange(config, opts) {
+        const process = this.down({flag: 'color-change'});
+
+        process[config] = opts.value;
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/component/process/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.component.process'
+});

package/examples/component/process/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Process Component</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/process/neo-config.json

@@ -0,0 +1,6 @@
+{
+  "appPath": "examples/component/process/app.mjs",
+  "basePath": "../../../",
+  "environment": "development",
+  "mainPath": "./Main.mjs"
+}

package/examples/component/process/realWorldExample/MainContainer.mjs

@@ -0,0 +1,334 @@
+import Button                from "../../../../src/button/Base.mjs";
+import CheckBox              from "../../../../src/form/field/CheckBox.mjs";
+import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
+import Component             from '../../../../src/component/Base.mjs';
+import Container             from '../../../../src/container/Base.mjs';
+import DisplayField          from "../../../../src/form/field/Display.mjs"
+import Form                  from "../../../../src/form/Container.mjs"
+import NumberField           from "../../../../src/form/field/Number.mjs"
+import Process               from '../../../../src/component/Process.mjs';
+import RangeField            from "../../../../src/form/field/Range.mjs"
+import SelectField           from "../../../../src/form/field/Select.mjs";
+import TextField             from "../../../../src/form/field/Text.mjs"
+import Toast                 from '../../../../src/component/Toast.mjs';
+
+/**
+ * @class Neo.examples.component.process.realWorldExample.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.component.process.realWorldExample.MainContainer',
+        configItemLabelWidth: 110,
+        configItemWidth     : 250,
+        configPanelMinWidth : 250,
+        configPanelFlex     : 'none',
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module   : CheckBox,
+            checked  : false,
+            value    : 5,
+            labelText: 'horizontal',
+            listeners: {change: me.onConfigChange.bind(me, 'horizontal')}
+        }, {
+            module   : TextField,
+            labelText: 'arrowColor',
+            listeners: {change: me.onConfigChange.bind(me, 'arrowColor')}
+        }, {
+            module   : TextField,
+            labelText: 'iconColor',
+            listeners: {change: me.onConfigChange.bind(me, 'iconColor')}
+        }];
+    }
+
+    createExampleComponent() {
+        const me            = this,
+              onRangeChange = me.onRangeChange.bind(me),
+              // Wetterdaten von Berlin Tiergarten
+              weatherUrl    = 'https://api.open-meteo.com/v1/forecast?latitude=52.51239766781255&longitude=13.35733940978727&current_weather=true';
+
+        let weather = fetch(weatherUrl).then(async (response) => {
+            let result        = await response.json(),
+                temperature   = Math.ceil(result.current_weather.temperature),
+                temperatureEl = me.down({flag: 'temperature'})
+
+            temperatureEl.value = temperature;
+        });
+
+        return Neo.create({
+            module      : Container,
+            maxWidth    : 450,
+            maxHeight   : '100%',
+            style       : {
+                overflowY: 'auto',
+                margin   : '0 auto'
+            },
+            itemDefaults: {
+                horizontal: false
+            },
+            items       : [{
+                module: Component,
+                vdom  : {
+                    cn: [
+                        {tag: 'img', src: './RangeHeader.jpg', width: '100%'}
+                    ]
+                }
+            }, {
+                module: Process,
+                flag  : 'start-process',
+                items : [{
+                    iconCls: 'fa fa-plane-departure',
+                    title  : 'Start Eingabe',
+                    text   : 'Batterie % und Kilometerstand'
+                }]
+            }, {
+                module   : Form,
+                hasFields: true,
+                layout   : {ntype: 'vbox', align: 'stretch'},
+                items    : [{
+                    module   : NumberField,
+                    flag     : 'max-capacity',
+                    labelText: 'max. Kapazität kWh',
+                    minValue : 1,
+                    maxValue : 500,
+                    value    : 29
+                }, {
+                    module           : RangeField,
+                    flag             : 'start-battery',
+                    labelText        : 'Batterie %',
+                    showResultInLabel: true,
+                    minValue         : 1,
+                    maxValue         : 100,
+                    value            : 100,
+                    listeners        : {change: onRangeChange}
+                }, {
+                    module   : NumberField,
+                    flag     : 'start-km',
+                    labelText: 'Kilometerstand',
+                    minValue : 0,
+                    maxValue : 500000
+                }],
+                listeners: {fieldFocusLeave: onRangeChange}
+            }, {
+                module: Process,
+                flag  : 'end-process',
+                items : [{
+                    iconCls: 'fa fa-plane-arrival',
+                    title  : 'Ankunft Eingabe',
+                    text   : 'Batterie % und Kilometerstand'
+                }]
+            }, {
+                module   : Form,
+                hasFields: true,
+                layout   : {ntype: 'vbox', align: 'stretch'},
+                items    : [{
+                    module           : RangeField,
+                    flag             : 'end-battery',
+                    labelText        : 'Batterie %',
+                    showResultInLabel: true,
+                    minValue         : 0,
+                    maxValue         : 99,
+                    value            : 0,
+                    listeners        : {change: onRangeChange}
+                }, {
+                    module   : NumberField,
+                    flag     : 'end-km',
+                    labelText: 'Kilometerstand',
+                    minValue : 0,
+                    maxValue : 500000,
+                }],
+                listeners: {fieldFocusLeave: onRangeChange}
+            }, {
+                module    : Process,
+                flag      : 'result-process',
+                arrowColor: 'rgb(200 155 12)',
+                items     : [{
+                    iconCls: 'fa fa-square-poll-vertical',
+                    title  : 'Ergebnisse',
+                    text   : 'Errechnete Ergebnisse'
+                }]
+            }, {
+                module   : Form,
+                hasFields: true,
+                layout   : {ntype: 'vbox', align: 'stretch'},
+                listeners: {fieldChange: onRangeChange},
+                items    : [{
+                    module   : DisplayField,
+                    flag     : 'result',
+                    labelText: 'Rest Kilometer'
+                }, {
+                    module   : DisplayField,
+                    flag     : 'remain-kWh',
+                    labelText: 'Rest kWh'
+                }, {
+                    module   : DisplayField,
+                    flag     : 'average-kWh',
+                    labelText: 'kwH pro 100km'
+                }]
+            }, {
+                module    : Process,
+                arrowColor: 'rgb(200 155 12)',
+                items     : [{
+                    iconCls: 'fa fa-magnifying-glass-chart',
+                    title  : 'Zusätzliche Angaben',
+                    text   : 'Für die Langzeitauswertung'
+                }]
+            }, {
+                module      : Form,
+                flag        : 'additional-information',
+                disabled    : true,
+                layout      : {ntype: 'vbox', align: 'stretch'},
+                itemDefaults: {
+                    showResultInLabel: true,
+                    value            : 20
+                },
+                items       : [{
+                    module      : SelectField,
+                    displayField: 'name',
+                    labelText   : 'Fahrstil',
+                    value       : 'normal',
+
+                    store: {
+                        data : [
+                            {style: 'sportStyle', name: 'sport', code: 'sportCode'},
+                            {style: 'nomalStyle', name: 'normal', code: 'normalCode'},
+                            {style: 'ecoStyle', name: 'eco', code: 'ecoCode'},
+                        ],
+                        model: {
+                            fields: [
+                                {name: 'style', type: 'string'},
+                                {name: 'name', type: 'string'},
+                                {name: 'code', type: 'string'}
+                            ]
+                        }
+                    }
+                }, {
+                    module   : RangeField,
+                    flag     : 'highway',
+                    labelText: 'Autobahn %',
+                    minValue : 0,
+                    maxValue : 100,
+                }, {
+                    module   : RangeField,
+                    flag     : 'temperature',
+                    labelText: 'Außen-Temp.',
+                    minValue : -20,
+                    maxValue : 50
+                }, {
+                    module : Button,
+                    text   : 'Speichern und Auswerten',
+                    ui     : 'secondary',
+                    style  : {
+                        minHeight   : '50px',
+                        marginBottom: '35px'
+                    },
+                    handler: me.onSaveClick.bind(me)
+                }],
+                listeners   : {fieldChange: onRangeChange}
+            }]
+        });
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigChange(config, opts) {
+        const processes = Neo.find({ntype: 'process'});
+
+        processes.forEach(process => {
+            process[config] = opts.value;
+        });
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRangeChange(data) {
+        const me                      = this,
+              startBattery            = me.down({flag: 'start-battery'}).value,
+              endBatteryEl            = me.down({flag: 'end-battery'}),
+              endBattery              = endBatteryEl.value,
+              startKm                 = me.down({flag: 'start-km'}).value,
+              endKmEl                 = me.down({flag: 'end-km'}),
+              endKm                   = endKmEl.value,
+              additionalInformationEl = me.down({flag: 'additional-information'});
+
+        if (startKm) {
+            const startProcess = this.down({flag: 'start-process'});
+
+            startProcess.arrowColor = '#12FE88';
+        }
+        if (endKm) {
+            const startProcess = this.down({flag: 'end-process'});
+
+            startProcess.arrowColor = '#12FE88';
+        }
+
+        if ((startKm && !endKm) || endKm <= startKm) {
+            endKmEl.value = startKm + 5;
+        }
+        if (endBattery >= startBattery) {
+            endBatteryEl.value = startBattery - 1;
+        }
+
+        if (startKm && endKm) {
+            const resultEl      = me.down({flag: 'result'}),
+                  kwpMaxEl      = me.down({flag: 'max-capacity'}),
+                  remainKwhEl   = me.down({flag: 'remain-kWh'}),
+                  averageKwhEl  = me.down({flag: 'average-kWh'}),
+                  maxCapacityEl = me.down({flag: 'max-capacity'}),
+                  batteryDiff   = startBattery - endBattery,
+                  kmDiff        = endKm - startKm,
+                  kWhUsed       = maxCapacityEl.value * (batteryDiff / 100),
+                  resultKm      = (endBattery) * kmDiff / batteryDiff;
+
+            additionalInformationEl.disabled = false;
+            resultEl.value = Math.ceil(resultKm);
+            remainKwhEl.value = Math.ceil(kwpMaxEl.value * (endBattery / 100));
+            averageKwhEl.value = Math.ceil(100 * (kWhUsed / kmDiff));
+        } else {
+            additionalInformationEl.disabled = true;
+        }
+    }
+
+    /**
+     * Shows a toast
+     */
+    onSaveClick() {
+        const averageKwh = this.down({flag: 'average-kWh'}).value;
+        let msg     = `Du hast einen durchschnittlichen Verbrauch von ${averageKwh} kwh/100km.`,
+            iconCls = 'fa fa-user-tie',
+            title   = 'results',
+            ui;
+
+        if (averageKwh > 25) {
+            msg = `Du bist seeehr sportlich unterwegs mit ${averageKwh} kWh auf 100km`;
+            iconCls = 'fa fa-flag-checkered';
+            ui = 'danger';
+            title = 'racing';
+        } else if (averageKwh < 15) {
+            msg = `Du bist sehr umweltbewusst gefahren und hast nur ${averageKwh} kwh/100km verbraucht.`;
+            iconCls = 'fa-brands fa-pagelines';
+            ui = 'success';
+            title = 'ECO';
+        }
+
+        Neo.toast({
+            appName: this.appName,
+            ui     : ui,
+            iconCls: iconCls,
+            title  : title,
+            msg    : msg
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/component/process/realWorldExample/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.component.realWorldExample.process'
+});

package/examples/component/process/realWorldExample/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Process Real World Example</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/process/realWorldExample/neo-config.json

@@ -0,0 +1,6 @@
+{
+  "appPath": "examples/component/process/realWorldExample/app.mjs",
+  "basePath": "../../../../",
+  "environment": "development",
+  "mainPath": "./Main.mjs"
+}

package/examples/component/toast/MainContainer.mjs

@@ -51,20 +51,23 @@ class MainContainer extends Viewport {
                 labelText: 'iconCls',
                 name     : 'iconCls'
             }, {
-                module   : SelectField,
-                labelText: 'position = tr',
-                name     : 'position',
-                store    : {data: [{name: 'tl'}, {name: 'tc'}, {name: 'tr'}, {name: 'bl'}, {name: 'bc'}, {name: 'br'}]}
+                module    : SelectField,
+                labelText : 'position = tr',
+                name      : 'position',
+                store     : {data: [{name: 'tl'}, {name: 'tc'}, {name: 'tr'}, {name: 'bl'}, {name: 'bc'}, {name: 'br'}]},
+                valueField: 'name'
             }, {
                 module   : SelectField,
                 labelText: 'slideDirection = right',
                 name     : 'slideDirection',
-                store    : {data: [{name: 'down'}, {name: 'up'}, {name: 'left'}, {name: 'right'}]}
+                store    : {data: [{name: 'down'}, {name: 'up'}, {name: 'left'}, {name: 'right'}]},
+                valueField: 'name'
             }, {
                 module   : SelectField,
                 labelText: 'ui = info',
                 name     : 'ui',
-                store    : {data: [{name: 'info'}, {name: 'danger'}, {name: 'success'}]}
+                store    : {data: [{name: 'info'}, {name: 'danger'}, {name: 'success'}]},
+                valueField: 'name'
             }, {
                 module   : NumberField,
                 labelText: 'minHeight = 50',

package/examples/component/toast/MainContainerController.mjs

@@ -33,19 +33,19 @@ class MainContainerController extends ComponentController {
             output  = me.getReference('output'),
             button  = me.getReference('creation-button'),
             oVdom   = output.vdom.cn[0].cn[0],
-            isValid = form.isValid(),
+            isValid = await form.isValid(),
             values;
 
         if (Neo.isBoolean(data.value)) {
             me.getReference('closable').value = data.value;
         }
 
-        values = form.getValues();
+        values = await form.getValues();
 
         values.appName = me.component.appName;
         button.disabled = !isValid;
 
-        if (form.validate()) {
+        if (isValid) {
             oVdom.cn = output.itemTpl(values);
 
             output.update();
@@ -58,10 +58,10 @@ class MainContainerController extends ComponentController {
     /**
      * Cleanup the values and show the toast
      */
-    createToast() {
+    async createToast() {
         let me     = this,
             form   = me.getReference('form'),
-            values = form.getValues(),
+            values = await form.getValues(),
             clear  = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable', 'timeout'];
 
         // use the defaults from toast if not set

package/examples/component/toast/neo-config.json

@@ -3,5 +3,5 @@
     "basePath"        : "../../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["HighlightJS", "Stylesheet"]
+    "mainThreadAddons": ["HighlightJS", "Stylesheet", "ScrollSync"]
 }