jsgui3-server 0.0.147 → 0.0.149

package/examples/controls/20) window, task manager app/server.js

@@ -0,0 +1,178 @@
+/**
+ * Task Manager Application Server
+ * 
+ * Demonstrates:
+ * - Server.serve() with a control
+ * - API endpoints for CRUD operations
+ * - In-memory data store (could be replaced with database)
+ */
+
+const jsgui = require('./client');
+const Server = require('../../../server');
+const { Task_Manager_App } = jsgui.controls;
+
+// In-memory task store
+let tasks = [
+    { id: 1, text: 'Welcome to Task Manager!', project: 'Personal', completed: false, created: new Date() },
+    { id: 2, text: 'Try adding a new task', project: 'Personal', completed: false, created: new Date() },
+    { id: 3, text: 'Click checkbox to complete', project: 'Work', completed: true, created: new Date() },
+    { id: 4, text: 'Use the filter to sort by project', project: 'Work', completed: false, created: new Date() },
+    { id: 5, text: 'Check the Stats tab', project: 'Personal', completed: false, created: new Date() }
+];
+
+let next_id = 6;
+
+// Helper to get tasks array (ensures we return a copy)
+const get_tasks = () => [...tasks];
+
+if (require.main === module) {
+    const server = new Server({
+        Ctrl: Task_Manager_App,
+        src_path_client_js: require.resolve('./client.js')
+    });
+
+    server.on('ready', () => {
+        console.log('Server ready, setting up API endpoints...');
+
+        // GET /api/tasks/list - Get all tasks
+        server.publish('tasks/list', () => {
+            return {
+                success: true,
+                tasks: get_tasks(),
+                count: tasks.length
+            };
+        });
+
+        // POST /api/tasks/add - Add a new task
+        server.publish('tasks/add', (data) => {
+            if (!data || !data.text || typeof data.text !== 'string') {
+                return { success: false, error: 'Task text is required' };
+            }
+
+            const new_task = {
+                id: next_id++,
+                text: data.text.trim(),
+                project: data.project || 'Personal',
+                completed: false,
+                created: new Date()
+            };
+
+            tasks.push(new_task);
+
+            return {
+                success: true,
+                task: new_task,
+                tasks: get_tasks()
+            };
+        });
+
+        // POST /api/tasks/toggle - Toggle task completion
+        server.publish('tasks/toggle', (data) => {
+            if (!data || typeof data.id !== 'number') {
+                return { success: false, error: 'Task ID is required' };
+            }
+
+            const task = tasks.find(t => t.id === data.id);
+            if (!task) {
+                return { success: false, error: 'Task not found' };
+            }
+
+            task.completed = !task.completed;
+
+            return {
+                success: true,
+                task,
+                tasks: get_tasks()
+            };
+        });
+
+        // POST /api/tasks/delete - Delete a task
+        server.publish('tasks/delete', (data) => {
+            if (!data || typeof data.id !== 'number') {
+                return { success: false, error: 'Task ID is required' };
+            }
+
+            const index = tasks.findIndex(t => t.id === data.id);
+            if (index === -1) {
+                return { success: false, error: 'Task not found' };
+            }
+
+            const deleted = tasks.splice(index, 1)[0];
+
+            return {
+                success: true,
+                deleted,
+                tasks: get_tasks()
+            };
+        });
+
+        // POST /api/tasks/clear-completed - Remove all completed tasks
+        server.publish('tasks/clear-completed', () => {
+            const before_count = tasks.length;
+            tasks = tasks.filter(t => !t.completed);
+            const removed = before_count - tasks.length;
+
+            return {
+                success: true,
+                removed,
+                tasks: get_tasks()
+            };
+        });
+
+        // GET /api/stats - Get task statistics
+        server.publish('stats', () => {
+            const total = tasks.length;
+            const completed = tasks.filter(t => t.completed).length;
+            const pending = total - completed;
+            const rate = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+            // Group by project
+            const by_project = {};
+            for (const task of tasks) {
+                if (!by_project[task.project]) {
+                    by_project[task.project] = { total: 0, completed: 0 };
+                }
+                by_project[task.project].total++;
+                if (task.completed) {
+                    by_project[task.project].completed++;
+                }
+            }
+
+            return {
+                total,
+                completed,
+                pending,
+                completion_rate: rate,
+                by_project
+            };
+        });
+
+        console.log('API endpoints registered:');
+        console.log('  GET  /api/tasks/list');
+        console.log('  POST /api/tasks/add');
+        console.log('  POST /api/tasks/toggle');
+        console.log('  POST /api/tasks/delete');
+        console.log('  POST /api/tasks/clear-completed');
+        console.log('  GET  /api/stats');
+
+        // Start server
+        const port = parseInt(process.env.PORT, 10) || 52021;
+        server.start(port, (err) => {
+            if (err) throw err;
+            console.log('');
+            console.log('='.repeat(50));
+            console.log('Task Manager Application');
+            console.log('='.repeat(50));
+            console.log(`Open http://localhost:${port} in your browser`);
+            console.log('');
+            console.log('Features:');
+            console.log('  - Add, complete, and delete tasks');
+            console.log('  - Filter tasks by project');
+            console.log('  - View statistics and completion rate');
+            console.log('  - Quick add floating window');
+            console.log('='.repeat(50));
+        });
+    });
+}
+
+module.exports = { tasks, get_tasks };

package/examples/controls/6) window, color_palette/client.js

@@ -1,68 +1,165 @@
-const jsgui = require('jsgui3-client');
-const {controls, Control, mixins} = jsgui;
-const {dragable} = mixins;
-const {Grid, Color_Palette} = controls;
-const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
-class Demo_UI extends Active_HTML_Document {
-    constructor(spec = {}) {
-        spec.__type_name = spec.__type_name || 'demo_ui';
-        super(spec);
-        const {context} = this;
-        if (typeof this.body.add_class === 'function') {
-            this.body.add_class('demo-ui');
-        }
-        const compose = () => {
-            const window = new controls.Window({
-                context: context,
-                title: 'jsgui3-html Color_Palette Control',
-                pos: [10, 10]
-            });
-            const color_palette = new Color_Palette({
-                context,
-                //grid_size: [10, 10],
-                size: [280, 180]
-            })
-            window.inner.add(color_palette);
-            this.body.add(window);
-        }
-        if (!spec.el) {
-            compose();
-        }
-    }
-    activate() {
-        if (!this.__active) {
-            super.activate();
-            const {context} = this;
-            context.on('window-resize', e_resize => {
-
-            });
-        }
-    }
-}
-
-
-Demo_UI.css = `
-* {
-    margin: 0;
-    padding: 0;
-}
-body {
-    overflow-x: hidden;
-    overflow-y: hidden;
-    background-color: #E0E0E0;
-}
-.demo-ui {
-    /* 
-    display: flex;
-    flex-wrap: wrap;
-    
-    flex-direction: column; 
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    min-height: 100vh;
-    */
-}
-`;
-controls.Demo_UI = Demo_UI;
-module.exports = jsgui;
+const jsgui = require('jsgui3-client');
+const { controls, Control } = jsgui;
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+const { Color_Picker } = controls;
+
+if (typeof Color_Picker !== 'function') {
+    throw new Error('Expected controls.Color_Picker to be exported from jsgui3-client/jsgui3-html.');
+}
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('demo-ui');
+        }
+
+        if (!spec.el) {
+            this.compose_ui();
+        }
+    }
+
+    compose_ui() {
+        const { context } = this;
+
+        const window_ctrl = new controls.Window({
+            context,
+            title: 'jsgui3-html Color_Picker Controls',
+            pos: [10, 10],
+            size: [620, 520]
+        });
+
+        const intro_text = new Control({ context, tag_name: 'p' });
+        intro_text.add_class('picker-intro');
+        intro_text.add('Improved color picking controls from jsgui3-html.');
+        window_ctrl.inner.add(intro_text);
+
+        const color_picker_default = new Color_Picker({
+            context,
+            value: '#3b82f6'
+        });
+        color_picker_default.add_class('demo-color-picker-default');
+        window_ctrl.inner.add(color_picker_default);
+
+        const color_picker_compact = new Color_Picker({
+            context,
+            value: '#ef4444',
+            show_wheel: false,
+            show_rgb_inputs: true,
+            show_alpha: true,
+            layout: 'compact',
+            output_format: 'rgba'
+        });
+        color_picker_compact.add_class('demo-color-picker-compact');
+        window_ctrl.inner.add(color_picker_compact);
+
+        const compact_value_readout = new Control({ context, tag_name: 'div' });
+        compact_value_readout.add_class('demo-color-picker-readout');
+        compact_value_readout.add(`Selected: ${color_picker_compact.value}`);
+        window_ctrl.inner.add(compact_value_readout);
+
+        this._ctrl_fields = {
+            color_picker_compact,
+            compact_value_readout
+        };
+
+        this.body.add(window_ctrl);
+    }
+
+    activate() {
+        if (!this.__active) {
+            super.activate();
+
+            const root_el = (this.body && this.body.dom && this.body.dom.el) || (this.dom && this.dom.el) || null;
+            if (!root_el) {
+                return;
+            }
+
+            const compact_root_el = root_el.querySelector('.demo-color-picker-compact');
+            const readout_el = root_el.querySelector('.demo-color-picker-readout');
+            if (!compact_root_el || !readout_el) {
+                return;
+            }
+
+            const build_rgba_value_text = () => {
+                const input_r = compact_root_el.querySelector('.cp-rgb-r');
+                const input_g = compact_root_el.querySelector('.cp-rgb-g');
+                const input_b = compact_root_el.querySelector('.cp-rgb-b');
+                const alpha_slider = compact_root_el.querySelector('.cp-slider-a');
+
+                const has_rgb_inputs = input_r && input_g && input_b;
+                if (!has_rgb_inputs) {
+                    const hex_input = compact_root_el.querySelector('.cp-hex-input');
+                    return hex_input ? String(hex_input.value || '') : '';
+                }
+
+                const red_value = Number(input_r.value);
+                const green_value = Number(input_g.value);
+                const blue_value = Number(input_b.value);
+                const alpha_value = alpha_slider ? (Number(alpha_slider.value) / 100) : 1;
+
+                if (!Number.isFinite(red_value) || !Number.isFinite(green_value) || !Number.isFinite(blue_value)) {
+                    return '';
+                }
+                return `rgba(${red_value}, ${green_value}, ${blue_value}, ${alpha_value})`;
+            };
+
+            const set_readout_text = () => {
+                const value_text = build_rgba_value_text();
+                readout_el.textContent = `Selected: ${value_text}`;
+            };
+
+            set_readout_text();
+            const schedule_set_readout_text = () => {
+                setTimeout(set_readout_text, 0);
+            };
+
+            compact_root_el.addEventListener('input', schedule_set_readout_text);
+            compact_root_el.addEventListener('change', schedule_set_readout_text);
+            compact_root_el.addEventListener('click', schedule_set_readout_text);
+            this.on('destroy', () => {
+                compact_root_el.removeEventListener('input', schedule_set_readout_text);
+                compact_root_el.removeEventListener('change', schedule_set_readout_text);
+                compact_root_el.removeEventListener('click', schedule_set_readout_text);
+            });
+        }
+    }
+}
+
+Demo_UI.css = `
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    background-color: #e0e0e0;
+}
+
+.picker-intro {
+    margin: 8px 0 10px 0;
+    font-family: 'Segoe UI', sans-serif;
+    font-size: 13px;
+    color: #34495e;
+}
+
+.demo-color-picker-default {
+    margin-bottom: 14px;
+}
+
+.demo-color-picker-readout {
+    margin-top: 10px;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 12px;
+    color: #263238;
+}
+`;
+
+controls.Demo_UI = Demo_UI;
+controls.Color_Picker = Color_Picker;
+module.exports = jsgui;