apps/colors => move a copy of the app back into the neo repo neomjs#5467

kyr0 · Jun 23, 2024 · a24a687 · a24a687
1 parent 702c05c
commit a24a687
Show file tree

Hide file tree

Showing 24 changed files with 943 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,11 @@
 /apps/**/*.mjs
 /apps/**/neo-config.json
 
+!/apps/colors/index.html
+!/apps/colors/**/*.mjs
+!/apps/colors/neo-config.json
+!/apps/colors/childapps/widget/index.html
+!/apps/colors/childapps/widget/neo-config.json
 !/apps/covid/index.html
 !/apps/covid/**/*.mjs
 !/apps/covid/neo-config.json

diff --git a/apps/colors/app.mjs b/apps/colors/app.mjs
@@ -0,0 +1,6 @@
+import Viewport from './view/Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Colors'
+});
diff --git a/apps/colors/childapps/widget/app.mjs b/apps/colors/childapps/widget/app.mjs
@@ -0,0 +1,7 @@
+import Viewport from './view/Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    appThemeFolder: 'colors',
+    mainView      : Viewport,
+    name          : 'Widget'
+});
diff --git a/apps/colors/childapps/widget/index.html b/apps/colors/childapps/widget/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>Dashboard Widget</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>
diff --git a/apps/colors/childapps/widget/neo-config.json b/apps/colors/childapps/widget/neo-config.json
@@ -0,0 +1,11 @@
+{
+    "appPath"             : "../../apps/colors/childapps/widget/app.mjs",
+    "basePath"            : "../../../../",
+    "environment"         : "development",
+    "loadApplicationDelay": 100,
+    "mainPath"            : "../../../src/Main.mjs",
+    "mainThreadAddons"    : ["AmCharts", "DragDrop", "Navigator", "Stylesheet"],
+    "themes"              : ["neo-theme-dark"],
+    "useSharedWorkers"    : true,
+    "workerBasePath"      : "../../../../src/worker/"
+}
diff --git a/apps/colors/childapps/widget/view/Viewport.mjs b/apps/colors/childapps/widget/view/Viewport.mjs
@@ -0,0 +1,19 @@
+import BaseViewport from '../../../../../src/container/Viewport.mjs';
+
+/**
+ * @class Widget.view.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Widget.view.Viewport'
+         * @protected
+         */
+        className: 'Widget.view.Viewport'
+    }
+}
+
+Neo.setupClass(Viewport);
+
+export default Viewport;
diff --git a/apps/colors/index.html b/apps/colors/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>Colors</title>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>
diff --git a/apps/colors/model/Color.mjs b/apps/colors/model/Color.mjs
@@ -0,0 +1,43 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Colors.model.Color
+ * @extends Neo.data.Model
+ */
+class Color extends Model {
+    static config = {
+        /**
+         * @member {String} className='Colors.model.Color'
+         * @protected
+         */
+        className: 'Colors.model.Color'
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let startCharCode = 'A'.charCodeAt(0),
+            i             = 0,
+            len           = 26, // amount of chars inside the ISO basic latin alphabet
+            fields        = [{
+                name: 'id',
+                type: 'String'
+            }];
+
+        for (; i < len; i++) {
+            fields.push({
+                name: 'column' + String.fromCharCode(startCharCode + i),
+                type: 'String'
+            })
+        }
+
+        this.fields = fields
+    }
+}
+
+Neo.setupClass(Color);
+
+export default Color;
diff --git a/apps/colors/neo-config.json b/apps/colors/neo-config.json
@@ -0,0 +1,11 @@
+{
+    "appPath"         : "../../apps/colors/app.mjs",
+    "basePath"        : "../../",
+    "environment"     : "development",
+    "mainPath"        : "../src/Main.mjs",
+    "mainThreadAddons": ["AmCharts", "DragDrop", "Navigator", "Stylesheet"],
+    "remotesApiUrl"   : "remotes-api.json",
+    "themes"          : ["neo-theme-dark"],
+    "useSharedWorkers": true,
+    "workerBasePath"  : "../../src/worker/"
+}
diff --git a/apps/colors/remotes-api.json b/apps/colors/remotes-api.json
@@ -0,0 +1,13 @@
+{
+    "namespace": "Colors.backend",
+    "type"     : "websocket",
+    "url"      : "https://still-castle-38841.herokuapp.com/",
+
+    "services": {
+        "ColorService": {
+            "methods": {
+                "read": {"params":  [{"type":  "Object"}]}
+            }
+        }
+    }
+}
diff --git a/apps/colors/store/Colors.mjs b/apps/colors/store/Colors.mjs
@@ -0,0 +1,24 @@
+import ColorModel from '../model/Color.mjs';
+import Store      from '../../../src/data/Store.mjs';
+
+/**
+ * @class Colors.store.Colors
+ * @extends Neo.data.Store
+ */
+class Colors extends Store {
+    static config = {
+        /**
+         * @member {String} className='Colors.store.Colors'
+         * @protected
+         */
+        className: 'Colors.store.Colors',
+        /**
+         * @member {Neo.data.Model} model=ColorModel
+         */
+        model: ColorModel
+    }
+}
+
+Neo.setupClass(Colors);
+
+export default Colors;
diff --git a/apps/colors/view/BarChartComponent.mjs b/apps/colors/view/BarChartComponent.mjs
@@ -0,0 +1,64 @@
+import AmChartComponent from '../../../src/component/wrapper/AmChart.mjs';
+
+/**
+ * @class Colors.view.BarChartComponent
+ * @extends Neo.component.wrapper.AmChart
+ */
+class BarChartComponent extends AmChartComponent {
+    static config = {
+        /**
+         * @member {String} className='Colors.view.BarChartComponent'
+         * @protected
+         */
+        className: 'Colors.view.BarChartComponent',
+        /**
+         * @member {String[]} baseCls=['colors-bar-chart']
+         */
+        baseCls: ['colors-bar-chart'],
+        /**
+         * @member {String} chartType='PieChart'
+         */
+        chartType: 'XYChart',
+        /**
+         * @member {Object} chartConfig
+         */
+        chartConfig: {
+            series: [{
+                type: 'ColumnSeries',
+
+                columns: {
+                    propertyFields: {
+                        fill  : 'color',
+                        stroke: 'color'
+                    }
+                },
+
+                dataFields: {
+                    categoryX: 'color',
+                    valueY   : 'count'
+                }
+            }],
+            xAxes: [{
+                type: 'CategoryAxis',
+
+                dataFields: {
+                    category: 'color',
+                    title: {
+                        text: 'Colors'
+                    }
+                }
+            }],
+            yAxes: [{
+                type: 'ValueAxis',
+
+                title: {
+                    text: 'Occurrences in table cells'
+                }
+            }]
+        }
+    }
+}
+
+Neo.setupClass(BarChartComponent);
+
+export default BarChartComponent;
diff --git a/apps/colors/view/HeaderToolbar.mjs b/apps/colors/view/HeaderToolbar.mjs
@@ -0,0 +1,95 @@
+import CheckBox    from '../../../src/form/field/CheckBox.mjs';
+import ComboBox    from '../../../src/form/field/ComboBox.mjs';
+import NumberField from '../../../src/form/field/Number.mjs';
+import Toolbar     from '../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Colors.view.HeaderToolbar
+ * @extends Neo.toolbar.Base
+ */
+class HeaderToolbar extends Toolbar {
+    static config = {
+        /**
+         * @member {String} className='Colors.view.HeaderToolbar'
+         * @protected
+         */
+        className: 'Colors.view.HeaderToolbar',
+        /**
+         * @member {String[]} cls=['portal-header-toolbar']
+         */
+        cls: ['portal-header-toolbar'],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch',wrap:'wrap'}
+         */
+        layout: {ntype: 'hbox', align: 'center', pack: 'start', wrap: 'wrap'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            bind   : {disabled: data => data.isUpdating},
+            handler: 'onStartButtonClick',
+            text   : 'Start'
+        }, {
+            bind   : {disabled: data => !data.isUpdating},
+            handler: 'onStopButtonClick',
+            text   : 'Stop'
+        }, {
+            module       : NumberField,
+            bind         : {value: data => data.amountColors},
+            clearable    : false,
+            editable     : false,
+            labelPosition: 'inline',
+            labelText    : 'Amount Colors',
+            listeners    : {change: 'onChangeAmountColors'},
+            maxValue     : 10,
+            minValue     : 3,
+            width        : 120
+        }, {
+            module       : ComboBox,
+            bind         : {value: data => String(data.amountColumns)},
+            clearable    : false,
+            editable     : false,
+            labelPosition: 'inline',
+            labelText    : 'Amount Columns',
+            listeners    : {change: 'onChangeAmountColumns'},
+            store        : ['5', '10', '15', '20', '26'],
+            width        : 120
+        }, {
+            module       : ComboBox,
+            bind         : {value: data => String(data.amountRows)},
+            clearable    : false,
+            editable     : false,
+            labelPosition: 'inline',
+            labelText    : 'Amount Rows',
+            listeners    : {change: 'onChangeAmountRows'},
+            store        : ['5', '10', '15', '20'],
+            width        : 120
+        }, '->', {
+            handler  : 'onDetachTableButtonClick',
+            iconCls  : 'fas fa-table',
+            reference: 'detach-table-button',
+            text     : 'Table'
+        }, {
+            handler  : 'onDetachPieChartButtonClick',
+            iconCls  : 'fas fa-chart-pie',
+            reference: 'detach-pie-chart-button',
+            text     : 'Pie Chart'
+        }, {
+            handler  : 'onDetachBarChartButtonClick',
+            iconCls  : 'fas fa-chart-column',
+            reference: 'detach-bar-chart-button',
+            text     : 'Bar Chart'
+        }, {
+            module        : CheckBox,
+            bind          : {checked: data => data.openWidgetsAsPopups},
+            hideLabel     : true,
+            listeners     : {change: 'onChangeOpenWidgetsAsPopups'},
+            showValueLabel: true,
+            valueLabelText: 'Popups'
+        }]
+    }
+}
+
+Neo.setupClass(HeaderToolbar);
+
+export default HeaderToolbar;
diff --git a/apps/colors/view/PieChartComponent.mjs b/apps/colors/view/PieChartComponent.mjs
@@ -0,0 +1,58 @@
+import AmChartComponent from '../../../src/component/wrapper/AmChart.mjs';
+
+/**
+ * @class Colors.view.PieChartComponent
+ * @extends Neo.component.wrapper.AmChart
+ */
+class PieChartComponent extends AmChartComponent {
+    static config = {
+        /**
+         * @member {String} className='Colors.view.PieChartComponent'
+         * @protected
+         */
+        className: 'Colors.view.PieChartComponent',
+        /**
+         * @member {String[]} baseCls=['colors-pie-chart']
+         */
+        baseCls: ['colors-pie-chart'],
+        /**
+         * @member {String} chartType='PieChart'
+         */
+        chartType: 'PieChart',
+        /**
+         * @member {Object} _vdom
+         */
+        /**
+         * @member {Object} chartConfig
+         */
+        chartConfig: {
+            series: [{
+                type: 'PieSeries',
+
+                colors: {
+                    list: [
+                        '#1c60a0',
+                        '#206db6',
+                        '#247acb',
+                        '#2e87da',
+                        '#4493de',
+                        '#59a0e2',
+                        '#6face6',
+                        '#85b9ea',
+                        '#9bc5ed',
+                        '#b0d2f1'
+                    ]
+                },
+
+                dataFields: {
+                    category: 'color',
+                    value   : 'count'
+                }
+            }]
+        }
+    }
+}
+
+Neo.setupClass(PieChartComponent);
+
+export default PieChartComponent;