### Cloning and Initializing Node.js Project (Bash)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/readme.md

This snippet provides the necessary bash commands to clone the Node.js database application template, navigate into its directory, set executable permissions for scripts, install dependencies, and configure initial environment and database migration files.

```bash
git clone git@github.com:Mrazbb/nodejs-database-app-template.git
cd nodejs-database-app-template
chmod +x ./scripts/*.sh
npm update --save
npm install
cp .env.main.sample .env.main
cp app/sample.altergen.json app/altergen.json
chmod +x app/entrypoint.sh
```

--------------------------------

### Starting the Application with Docker Compose (Bash)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/readme.md

This command starts the application's Docker containers in detached mode, as defined by the up script in package.json, bringing all services online.

```bash
npm run up
```

--------------------------------

### Initializing Component and Handling Basic Input Changes (JavaScript)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-input.html

This snippet handles initial component setup, including placeholder defaults and autofill logic. It also registers an input and change event listener to trigger a self.check() method, which likely validates or updates the component's state.

```JavaScript
if(config.placeholder==0)config.placeholder='0';
if(config.autofill){
    if(typeof(config.autofill)==='string'){
        config.NAME=config.autofill
    }else{
        var index=self.path.lastIndexOf('.');
        config.NAME=index===-1?self.path:self.path.substring(index+1)
    }
}
self.aclass(cls+' invisible');
self.rclass('invisible',100);
self.redraw();
self.event('input change',function(){
    if(nobindcamouflage)nobindcamouflage=false;
    else self.check()
});
```

--------------------------------

### Component Setup and Event Handlers (self.make)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-edit.html

Sets up the component's DOM structure by appending the edit window and binds global event listeners for `click` (on `.edit`), `dblclick` (on `.edit2`), `keydown`, `blur`, and `paste`. These handlers manage the editing state, apply formatting, and handle navigation (Tab, Enter) and cancellation (Escape).

```JavaScript
self.make=function(){self.aclass(cls);self.append('<div class="{0}-window hidden"></div>'.format(cls));floating=self.find(cls2+'-window');$(document).on('click','.edit',self.edit).on('dblclick','.edit2',self.edit);events.keydown=function(e){var t=this;if(!t.$editevents)return;var meta=t.$edit;if(meta.clear){t.innerHTML='';meta.clear=0}if(!meta.keypressed){meta.keypressed=1;$(t).aclass('edit-keypressed')}if((e.metaKey||e.ctrlKey)&&(e.which===66||e.which===76||e.which===73||e.which===85)){if(meta.type!=='html'){e.preventDefault();e.stopPropagation()}}var el;if(e.which===27){el=$(t);t.$edit.is=false;self.detach(el);return}if(e.which===13||e.which===9){if(e.which===13&&meta.multiline)return;e.preventDefault();el=$(t);if(self.approve(el)){self.detach(el);el.rclass('edit-keypressed');if(e.which===9&&self.focusnext(t,e))return}else self.detach(el)}};events.blur=function(){var t=this;if(t.$editevents){var el=$(t);el.rclass('edit-keypressed');t.$edit.is&&self.approve(el);self.detach(el)}};events.paste=function(e){e.preventDefault();e.stopPropagation();var meta=this.$edit,text=e.originalEvent.clipboardData.getData(self.attrd('clipboard')||'text/plain');text&&document.execCommand('insertText',false,meta.multiline?text.trim():text.replace(/\n|\r/g,'').trim())}};
```

--------------------------------

### Running Docker Compose Commands via NPM (Bash)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/readme.md

These bash commands demonstrate how to use the previously defined NPM scripts to control Docker Compose services, including starting, stopping, restarting, and forcefully killing containers, along with verifying their status.

```bash
npm run up        # Start containers
docker ps         # Verify containers

npm run down      # Stop and remove containers
npm run restart   # Restart containers
npm run stop      # Stop containers
npm run kill      # Forcefully kill containers
```

--------------------------------

### Initializing Layout Settings and Getting Size Data - JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-layout.html

This snippet initializes the 'settings' object by executing a string as a function, likely parsing configuration data. It also defines 'getSize', a recursive helper function that retrieves layout dimensions for a given display size (e.g., 'md', 'sm') from the 'data' object, falling back to larger sizes if a specific one isn't found.

```javascript
settings=new Function('return '+code)();
!noresize&&self.resize()};
var getSize=function(display,data){
    var obj=data[display];
    if(obj)return obj;
    switch(display){
        case'md':return getSize('lg',data);
        case'sm':return getSize('md',data);
        case'xs':return getSize('sm',data)
    }
    return data
};
```

--------------------------------

### Getting Current DOM Node in JavaScript Editor

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-wysiwyg.html

This function, 'self.getNode', retrieves the current DOM node where the selection starts ('anchorNode'). If the node is a text node (nodeType 3), it returns its parent element; otherwise, it returns the node itself, providing the relevant element for formatting checks.

```JavaScript
self.getNode=function(){
  var node=D.getSelection().anchorNode;
  if(node)return(node.nodeType===3?node.parentNode:node)
};
```

--------------------------------

### Initializing Total.js Application with Options - JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/docs/documentation.md

This snippet initializes a Total.js application, setting various configuration options such as release mode, service mode, and cluster settings. It demonstrates how to configure the application's startup behavior, including IP, port, and temporary directory paths, before running the framework.

```JavaScript
// ===================================================
// Total.js v5 start script
// https://www.totaljs.com
// ===================================================

require('total5');

const options = {};

// options.ip = '127.0.0.1';
// options.port = parseInt(process.argv[2]);
// options.unixsocket = PATH.join(F.tmpdir, 'app_name.socket');
// options.unixsocket777 = true;
// options.config = { name: 'Total.js' };
// options.sleep = 3000;
// options.inspector = 9229;
// options.watch = ['private'];
// options.livereload = 'https://yourhostname';
// options.watcher = true; // enables watcher for the release mode only controlled by the app `F.restart()`
// options.edit = 'wss://www.yourcodeinstance.com/?id=projectname'
options.release = process.argv.includes('--release');


// Service mode:
options.servicemode = process.argv.includes('--service') || process.argv.includes('--servicemode');
// options.servicemode = 'definitions,modules,config';

// Cluster:
// options.tz = 'utc';
// options.cluster = 'auto';
// options.limit = 10; // max 10. threads (works only with "auto" scaling)

F.run(options);
```

--------------------------------

### Initializing Application Links in Node.js (Commented)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/views/admin.html

This commented-out snippet demonstrates a pattern for initial client-side data loading. It uses `CLINIT` to fetch 'pages_links' via `TAPI` and then processes the response using `FUNC.sitemap` before passing it to the next function. This is likely for populating navigation links on application startup.

```JavaScript
CLINIT('links', function(next) { TAPI('pages_links', response => next(FUNC.sitemap(response))); }, true);
```

--------------------------------

### Helper Function for Path Resolution (findfn)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-edit.html

Defines a helper function `findfn` used to resolve paths for component properties or global data. It checks if the path starts with '@' to access component-specific properties, otherwise it uses `GET` for global scope resolution, providing flexible data access.

```JavaScript
var findfn=function(opt,path){if(path.charAt(0)==='@'){var com=opt.element.component();return com?com[path.substring(1)]:null}else return GET(opt.scope?opt.scope.makepath(path):path)};
```

--------------------------------

### Initializing Navigation Editor in Node.js (Commented)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/views/admin.html

This commented-out snippet shows a pattern for initial client-side data loading for a navigation editor. It uses `CLINIT` to fetch 'nav_editor' data via `TAPI` and passes the response directly to the next function, suggesting it's for populating an editable navigation structure.

```JavaScript
CLINIT('nav', function(next) { TAPI('nav_editor', next); }, true);
```

--------------------------------

### Injecting API Token and Handling Open Platform in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/views/admin.html

An immediately invoked function expression (IIFE) that handles 'openplatform' query parameters, encodes them, and appends them to the API definition. It also sets 'common.ready' to true and removes the 'invisible' class from the body, indicating the application is ready.

```JavaScript
(function() {
  var openplatform = NAV.query.openplatform || '';

```

--------------------------------

### Generating TMS Security Token in Total.js Plugin (JavaScript)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/plugins/settings/public/index.html

This function generates a new 35-character GUID (Globally Unique Identifier) and sets it as the value for the `secret_tms` field, likely used for a TMS security token. It also triggers a UI update to show the generated token.

```JavaScript
exports.generate = function() {
    exports.set('secret_tms @type:show', GUID(35));
};
```

--------------------------------

### Initializing Form in JavaScript UI Component

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-listform.html

The `check` function ensures the form element is properly initialized and appended to its container. It's a one-time setup function (`self.$$check` prevents re-execution) that also triggers initial compilation and validation if `config.invalidform` is enabled, setting the form's initial invalid state.

```JavaScript
self.check=function(){if(!self.$$check){form=$(form)[0];container.append(form);self.compile&&self.compile();self.$$check=true;self.$$invalid=true;if(config.invalidform)self.validate2()}};
```

--------------------------------

### Creating Sample List View with User Details (SQL)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/docs/documentation.md

This SQL view, `public.view_sample_list`, provides a list of sample data records. It enriches the sample data by performing LEFT JOINs with the `tbl_user` table to retrieve the names of the users who created, updated, or removed each sample record, enhancing readability and context.

```SQL
CREATE OR REPLACE VIEW "public"."view_sample_list" AS (
	SELECT
        m.id,
        m.name,
        m.body,
        m.countupdate,
        m.ismobile,

        -- user
        m.createdbyid,
        m.updatedbyid,
        m.removedbyid,
		createdby.name AS createdbyname,
		updatedby.name AS updatedbyname,
		removedby.name AS removedbyname,
        m.dtcreated,
        m.dtupdated,
        m.dtremoved
	FROM
		public.tbl_sample m -- m is for main table
		LEFT JOIN tbl_user createdby ON createdby.id = m.createdbyid
		LEFT JOIN tbl_user updatedby ON updatedby.id = m.updatedbyid
		LEFT JOIN tbl_user removedby ON removedby.id = m.removedbyid
);
```

--------------------------------

### Building Date Picker HTML - UI Rendering - JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-datepicker.html

This function begins the process of constructing the HTML structure for the date picker. It initializes an array `builder` and pushes the opening `div` tag for the header, including navigation controls for "next" and "previous" months/years. This snippet is incomplete but shows the start of dynamic HTML generation.

```JavaScript
self.makehtml=function(){var builder=[];builder.push('<div class="{0}-header"><span class="{0}-next"><i class="ti ti-angle-right"></i></span><span class="{0}-prev"><i class="ti ti-angle-left"></i></span>
```

--------------------------------

### Managing PostgreSQL Database Backups (Bash)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/readme.md

These commands facilitate backing up and restoring the PostgreSQL database. npm run postgres:backup creates a dump, and npm run postgres:restore loads data from a specified SQL backup file.

```bash
npm run postgres:backup [backup.sql]
npm run postgres:restore [backup.sql]
```

--------------------------------

### Calculating and Applying Final UI Element Positions - JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-layout.html

'getWidth' and 'getHeight' are utility functions to get the actual dimensions of an element, returning 0 if hidden. 'self.refresh' is the core layout calculation function. It determines the final 'top', 'bottom', 'left', and 'right' positions and dimensions for the main layout regions, accounting for margins, borders, and visibility, then applies these via CSS.

```javascript
var getWidth=function(el){return el.hclass('hidden')?0:el.width()};
var getHeight=function(el){return el.hclass('hidden')?0:el.height()};
self.refresh=function(){
    var top=0,bottom=0,right=0,left=0,hidden='hidden',top2=0,bottom2=0,space=2,topbottomoffset=0,right2visible=isright2&&!s.right.hclass(hidden);
    if(s.top)top=top2=getHeight(s.top);
    if(s.bottom)bottom=bottom2=getHeight(s.bottom);
    var width=self.width()-(config.border*2);
    var height=self.height()-(config.border*2);
    if(istop2){topbottomoffset++;top2=0}
    if(isbottom2){topbottomoffset--;bottom2=0}
    if(s.left&&!s.left.hclass(hidden)){
        var cssleft={};
        space=top&&bottom?2:top||bottom?1:0;
        cssleft.left=0;
        cssleft.top=istop2?config.border:(top?(top+config.space):0);
        cssleft.height=isbottom2?(height-top2-config.border):(height-top2-bottom2-(config.space*space));
        cssleft.height+=topbottomoffset;
        s.left.css(cssleft);
        cssleft.width=s.left.width();
        s.leftlock.css(cssleft);
        delete cssleft.width;
        left=s.left.width();
        cssleft.left=s.left.width();
        s.leftresize.css(cssleft);
        s.leftresize.tclass(hidden,!s.left.hclass(cls+'-resizable'))
    }
    if(s.right&&!s.right.hclass(hidden)){
        right=s.right.width();
        space=top&&bottom?2:top||bottom?1:0;
        var cssright={};
        cssright.left=right2visible?(getWidth(s.left)+config.border+config.space):(width-right);
        cssright.top=istop2?config.border:(top?(top+config.space):0);
        cssright.height=isbottom2?(height-top2-config.border):(height-top2-bottom2-(config.space*space));
        cssright.height+=topbottomoffset;
        s.right.css(cssright);
        cssright.width=s.right.width();
        if(!isright2&&(width-cssright.left)<=0){s.right.css('left',0);cssright.width++}
        s.rightlock.css(cssright);
        delete cssright.width;
        if(right2visible)cssright.left+=s.right.width();
        else cssright.left=width-right-2;
        s.rightresize.css(cssright);
        s.rightresize.tclass(hidden,!s.right.hclass(cls+'-resizable'))
    }
    if(s.top){
        var csstop={};
        space=left?config.space:0;
        csstop.left=istop2?(left+space):0;
        if(right2visible&&istop2)csstop.left+=getWidth(s.right)+config.space;
        space=left&&right?2:left||right?1:0;
        csstop.width=istop2?(width-right-left-(config.space*space)):width;
        csstop.top=0;
        s.top.css(csstop);
        s.topresize.css(csstop);
        csstop.height=s.top.height();
        s
    }
};
```

--------------------------------

### Configuring Total.js Environment and Default Settings in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/views/admin.html

Configures Total.js environment settings ('ENV') and defines default values ('DEF') for fallback URLs, HTML versions, and user language. These settings influence the rendering and behavior of UI components and asset loading.

```JavaScript
ENV('indentation', 201);
ENV('margin', 60);
DEF.fallback = '@{#}/cdn/j-{0}.html';
DEF.versionhtml = '@{CONF.version}';
DEF.languagehtml = '@{user.language}';
```

--------------------------------

### Creating Sample Data Table in SQL

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/docs/documentation.md

Defines the `tbl_sample` table for storing generic sample data entries. It includes a serial `id` as the primary key, text fields for `name` and `body`, integer `countupdate`, boolean `ismobile`, and foreign keys linking to `tbl_user` for `createdbyid`, `updatedbyid`, and `removedbyid`, along with timestamps for auditing.

```SQL
CREATE TABLE "public"."tbl_sample" (

    -- IDENTIFIERS
    "id" SERIAL NOT NULL,

    -- MAIN FIELDS
    "name" TEXT,
    "body" TEXT,

    -- NUMBERS
    "countupdate" INTEGER DEFAULT 0,

    -- BOOLEANS
    "ismobile" BOOLEAN DEFAULT FALSE,

    -- USER
    "createdbyid" INTEGER,
    "updatedbyid" INTEGER,
    "removedbyid" INTEGER,
	"dtcreated" TIMESTAMP,
	"dtupdated" TIMESTAMP,
    "dtremoved" TIMESTAMP,

    CONSTRAINT "tbl_product_createdbybyid_fkey" FOREIGN KEY ("createdbyid") REFERENCES "public"."tbl_user"("id") MATCH SIMPLE ON UPDATE CASCADE ON DELETE SET NULL,
    CONSTRAINT "tbl_product_updatedbyid_fkey" FOREIGN KEY ("updatedbyid") REFERENCES "public"."tbl_user"("id") MATCH SIMPLE ON UPDATE CASCADE ON DELETE SET NULL,
    CONSTRAINT "tbl_product_removedbyid_fkey" FOREIGN KEY ("removedbyid") REFERENCES "public"."tbl_user"("id") MATCH SIMPLE ON UPDATE CASCADE ON DELETE SET NULL,

    -- CONSTRAINTS
    PRIMARY KEY ("id")
);
```

--------------------------------

### Initializing UI Dropdown Component

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-dropdown.html

The 'make' function serves as the component's initialization entry point. It compiles the Tangular template for dropdown options, sets the component type, retrieves initial content, applies base CSS classes, triggers a redraw, and configures event handlers or data sources based on provided settings.

```JavaScript
self.make=function(){self.template=Tangular.compile('<option value="{{value}}"{{if selected}} selected="selected"{{ fi}}>{{text}}</option>');self.type=config.type;content=self.html();self.aclass(cls+'-container');self.redraw();config.if&&(condition=FN(config.if));config.items&&self.reconfigure({items:config.items});config.datasource&&self.reconfigure('datasource:'+config.datasource)};
```

--------------------------------

### Defining a Duplicator Component in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-duplicator.html

This snippet defines a 'duplicator' component using a framework-specific `COMPONENT` function. It initializes internal state for templates and open instances. Key methods include `make` for parsing inline templates, `configure` for setting data sources or external template URLs, `insert` for creating new instances, `rebind` for synchronizing instances with a data array, and `setter` for controlling the visibility of individual instances. It relies on global functions like `AJAX`, `GUID`, `W`, `setTimeout2`, `COMPILE`, and `FREE` for its operations.

```javascript
COMPONENT('duplicator',function(self,config,cls){var cls2='.'+cls,open=[],ready=false,templates={};self.readonly();self.make=function(){var tmp=self.find('script');for(var i=0;i<tmp.length;i++){var name=tmp[i].getAttribute('data-id')||'default';templates[name]={url:tmp[i].getAttribute('data-url'),html:tmp[i].innerHTML.trim()}}tmp.remove();self.aclass(cls)};self.configure=function(key,value){switch(key){case'datasource':self.datasource(value,self.rebind);break;case'url':AJAX('GET '+value,function(response){if(typeof(response)==='string')templates.default=response.trim()});break}};self.insert=function(obj,show,callback){if(open.indexOf(obj)!==-1)return;var template=templates[obj.template||'default'];if(!template)return;if(template.url){AJAX('GET '+template.url,function(response){template.url='';template.html=response||'';self.insert(obj,show)});return}var scope='duplicator'+GUID(5);obj.scopename=function(){return scope};open.push(obj);W[scope]=obj;self.append('<div data-scope="{0}__isolated:true" data-id="{0}" class="{2}-container hidden">{1}</div>'.format(scope,template.html,cls));show&&self.set(obj);callback&&callback(obj)};self.rebind=function(path,arr){if(!Object.keys(templates).length){setTimeout(self.rebind,500,path,arr);return}if(typeof(path)==='object')arr=path;if(arr==null)return;var is=false,cache={};for(var i=0;i<arr.length;i++){var item=arr[i];if(open.indexOf(item)===-1){self.insert(item,null,function(item){cache[item.scopename()]=1;setTimeout2(self.ID+'compile',COMPILE,100)})}else{cache[item.scopename()]=1}}var remove=[];for(var i=0;i<open.length;i++){var item=open[i],sn=item.scopename();if(cache[sn])continue;else remove.push(item)}for(var i=0;i<remove.length;i++){var item=remove[i],sn=item.scopename();open=open.remove(item);self.find(cls2+'-container[data-id="{0}"]'.format(sn)).remove();delete W[sn]}remove.length&&FREE();if(!ready){ready=true;self.refresh();self.rclass('invisible')}};self.setter=function(value){if(!ready)return;var arr=self.find(cls2+'-container');var scope=value&&value.scopename?value.scopename():'';var target=null;for(var i=0;i<arr.length;i++){var el=$(arr[i]);var s=el.attrd('id');if(s===scope)target=el;else el.aclass('hidden')}target&&target.rclass('hidden')}});
```

--------------------------------

### Initializing Global Variables and Common Objects in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/views/admin.html

Initializes global 'user' and 'common' objects, setting up various properties like 'breadcrumb', 'clientid', 'name', 'openplatform', 'plugins', API roots, and redirect functions. These variables are fundamental for client-side operations and framework integration.

```JavaScript
var user = null;
var common = {};
common.breadcrumb = [];
common.clientid = GUID(5) + Date.now().toString(36);
common.name = document.title;
common.openplatform = NAV.query.openplatform || '';
common.plugins = PARSE('#pluginsdata');
common.api = common.root = '@{CONF.$api}';
common.redirect = REDIRECT;
common.root = '/admin/';
```

--------------------------------

### Showing Loading State in Node.js

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/views/admin.html

This snippet listens for the '@flag showloading' event. Upon activation, it invokes `SETTER('loading/show')` to display a loading indicator, typically used to inform the user about ongoing background processes.

```JavaScript
ON('@flag showloading', function() { SETTER('loading/show'); });
```

--------------------------------

### Preparing Shopping Cart Data Source (JavaScript)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-shoppingcart.html

This helper function ensures the shopping cart data source is initialized. If the data source or its `items` array is null, it creates a new structure with default values for price, count, total, and discount, then sets it on the component.

```JavaScript
self.prepare=function(){var datasource=self.get();!datasource&&(datasource={});if(!datasource.items){datasource.items=[];datasource.price=0;datasource.count=0;datasource.total=0;datasource.discount=config.discount;self.set(datasource)}return datasource}
```

--------------------------------

### Implementing User Account Menu Logic in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/plugins/admin/public/extensions.html

Defines the useraccount function, which creates and displays a contextual menu for user account actions. It populates menu items based on user properties (e.g., user.openplatform, user.iframe) and defines a callback to handle selected options, such as changing credentials via TAPI('admin_read') or logging out via TAPI('logout'). It uses SETTER('menu/show', opt) to display the menu.

```JavaScript
function useraccount(el) {
    var opt = {};
    opt.element = el;
    opt.items = [];
    opt.items.push(Thelpers.encode(user.name));
    if (!user.openplatform)
        opt.items.push({ id: 'account', name: '@(Change credentials)', icon: 'ti ti-key' });
    if (!user.iframe)
        opt.items.push({ id: 'logout', name: '@(Logout)', icon: 'ti ti-power-off red' });
    opt.align = 'right';
    opt.callback = function(selected) {
        switch (selected.id) {
            case 'account':
                TAPI('admin_read', function(response) {
                    SET('formcredentials @reset', response);
                    SET('common.form', 'formcredentials');
                });
                break;
            case 'logout':
                TAPI('logout @showloading', function() {
                    if (user.openplatform)
                        W.close();
                    else
                        location.href = '/admin/';
                });
                break;
        }
    };
    if (opt.items.length > 1)
        SETTER('menu/show', opt);
}
```

--------------------------------

### Defining UI Loading Component in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-loading.html

This JavaScript code defines a 'loading' UI component using a custom framework's COMPONENT function. It manages the component's lifecycle, including initialization (make), showing the loader with optional text (show), and hiding it after a specified timeout (hide). It ensures the component is read-only, a singleton, and not compiled.

```JavaScript
COMPONENT('loading',function(self,config,cls){var delay,prev;self.readonly();self.singleton();self.nocompile();self.make=function(){self.aclass(cls+' '+cls+'-'+(config.style||1));self.append('<div><div class="'+cls+'-text hellip"></div></div>')};self.show=function(text){clearTimeout(delay);if(prev!==text){prev=text;self.find('.'+cls+'-text').html(text||'')}self.rclass('hidden');document.activeElement&&document.activeElement.blur();return self};self.hide=function(timeout){clearTimeout(delay);delay=setTimeout(function(){self.aclass('hidden')},timeout||1);return self}});
```

--------------------------------

### Initializing CMS Editor Plugin in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/pages/editor.html

This function initializes the CMS editor plugin by fetching a list of widgets, parsing their JavaScript code, and setting up the plugin's state and HTML content. It also configures a preview link based on the provided `opt.url`.

```JavaScript
exports.init = function(opt) {
    meta = opt;
    exports.tapi('widgets_list', function(widgets) {
        for (var item of widgets) parsejs(item);
        widgets.quicksort('name');
        exports.set({ name: opt.name, ready: true, html: { html: opt.html, layout: opt.layout, type: opt.type, widgets: widgets }});
    });
    $('#{name}preview'.args(exports)).tclass('hidden', !opt.url).attr('href', opt.url || '');
};
```

--------------------------------

### Creating Database from SQL Definitions (Bash)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/readme.md

These commands use pg-altergen to build a Docker image for database operations and then apply SQL definitions from the app/sql folder to create or migrate the PostgreSQL database schema and data.

```bash
npm run altergen:build-image
npm run altergen
```

--------------------------------

### Initializing WYSIWYG Editor and Button Actions (JavaScript)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-wysiwyg.html

This method initializes the WYSIWYG editor's DOM structure, appends toolbar buttons based on the `config` object, and attaches event listeners to these buttons. It leverages `document.execCommand` for various text formatting operations like bold, italic, underline, unordered lists, marking, code blocks, and link creation, and uses helper functions (`check`, `clean`) for managing element states.

```JavaScript
self.make=function(){self.aclass(cls);self.attr('wysiwyg','true');var buttons=[];buttons.push('<button name="bold"><i class="ti ti-bold"></i></button><button name="italic"><i class="ti ti-italic"></i></button><button name="underline"><i class="ti ti-underline"></i></button></button>');if(config.ul)buttons.push('<button name="ul"><i class="ti ti-list"></i></button>');if(config.code)buttons.push('<button name="code"><i class="ti ti-highlighter"></i></button>');if(config.links)buttons.push('<button name="link"><i class="ti ti-link"></i></button>');self.append('<div class="{0}-toolbar">{2}</div><div class="{0}-placeholder">{1}</div><div class="{0}-body" contenteditable="true"></div>'.format(cls,config.placeholder,buttons.join('')));editor=self.find(cls2+'-body');placeholder=self.find(cls2+'-placeholder');placeholder.on('click',function(){placeholder.aclass('hidden');editor.focus()});self.find('button').on('click',function(){editor.focus();switch(this.name){case'bold':D.execCommand('Bold',false,null);break;case'italic':D.execCommand('Italic',false,null);break;case'underline':D.execCommand('Underline',false,null);break;case'ul':var node=self.getNode();var selection=self.getSelection();D.execCommand('insertHtml',false,'<ul><li>{0}</li></ul>'.format((node===editor[0]?selection:node.innerHTML)||''));break;case'mark':var node=self.getNode();var tag=check(node,'SPAN');if(tag){clean(tag)}else{var selection=self.getSelection();selection&&D.execCommand('insertHtml',false,'<span class="marked">{0}</span>'.format(node===editor[0]?selection:node.innerHTML))}break;case'code':var node=self.getNode();var tag=check(node,'CODE');if(tag){clean(tag)}else{var selection=self.getSelection();selection&&D.execCommand('insertHtml',false,'<code>{0}</code>'.format(node===editor[0]?selection:node.innerHTML))}break;case'clean':var selection=self.getSelection();if(selection){node=self.getSelection(true)}else{node=findparent(self.getNode());node&&clean(node)}break;case'link':var node=self.getNode();var tag=check(node,'A');if(tag){clean(tag)}else{var id='#URL'+Date.now();var html=self.getSelection();if(html){D.execCommand('CreateLink',false,id);var a=self.find('a[href="{0}"]').attr('target','_blank').attr('href',html);self.event('link',a)}}break}}).each(function(){buttons[this.name]=this});var el=self.element;el.on('selectstart',function(){clearTimeout(timers.selec}
```

--------------------------------

### Initializing Keyboard Shortcut Component - JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-shortcuts.html

This snippet defines the 'shortcuts' component, initializing its internal state variables like 'items', 'keys', and 'keys_session'. It sets up global event listeners for keydown events to capture user input and trigger registered shortcut callbacks. It also registers a listener for 'component + knockknock' events to refresh shortcuts.

```JavaScript
COMPONENT('shortcuts',function(self){var items=[],length=0,keys={},keys_session={},issession=false;self.singleton();self.readonly();self.blind();self.nocompile&&self.nocompile();var cb=function(o,e){o.callback(e,o.owner)};self.make=function(){$(W).on('keydown',function(e){var f=e.key||'',c=e.keyCode;if(f.length>1&&f.charAt(0)==='F')c=0;else f='-';var key=(e.ctrlKey?1:0)+''+(e.altKey?1:0)+''+(e.shiftKey?1:0)+''+(e.metaKey?1:0)+f+c;if(issession){if(!keys_session[key])return}else{if(!keys[key])return}if(length&&!e.isPropagationStopped()){for(var i=0;i<length;i++){var o=items[i];if(o.fn(e)){if(o.prepare&&!o.prepare(e,e.target))continue;if(o.prevent){e.preventDefault();e.stopPropagation()}setTimeout(cb,100,o,e);return}}}});ON('component + knockknock',self.refresh)};self.refreshforce=function(){var arr=document.querySelectorAll('.shortcut');var index=0;while(true){var item=items[index++];if(item==null)break;if(item.owner){index--;items.splice(index,1)}}for(var i=0;i<arr.length;i++){var shortcut=arr[i].getAttribute('data-shortcut');shortcut&&self.register(shortcut,self.execshortcut,true,null,arr[i])}};self.session=function(callback){issession=true;keys_session={};callback(self.register)};self.end=function(){issession=false};self.execshortcut=function(e,owner){var evt=$.Event('click');evt.shortcutEvent=evt.shortcut=e;$(owner).trigger(evt)};self.refresh=function(){setTimeout2(self.ID,self.refreshforce,500)};self.exec=function(shortcut){var item=items.findItem('shortcut',shortcut.toLowerCase().replace(/\s/g,''));item&&item.callback(null,$(item.owner))};self.register=function(shortcut,callback,prevent,prepare,owner){if(typeof(prevent)==='function'){var tmp=prepare;prepare=prevent;prevent=tmp}var currentkeys=issession?keys_session:keys,ismac=M.ua.os.toLowerCase()==='mac';var special=ismac?'metaKey':'ctrlKey',specialindex=ismac?3:0;shortcut.split(',').trim().forEach(function(shortcut){var builder=[],alias=[],cachekey=[0,0,0,0,'-',0];shortcut.split('+').trim().forEach(function(item){var lower=item.toLowerCase();alias.push(lower);switch(lower){case'ctrl':cachekey[0]=1;break;case'alt':cachekey[1]=1;break;case'shift':cachekey[2]=1;break;case'win':case'meta':case'cmd':cachekey[3]=1;break}switch(lower){case'ctrl':case'alt':case'shift':builder.push('e.{0}Key'.format(lower));return;case'win':case'meta':case'cmd':builder.push('e.metaKey');return;case'ins':builder.push('e.keyCode===45');cachekey[5]=45;return;case'space':builder.push('e.keyCode===32');cachekey[5]=32;return;case'tab':builder.push('e.keyCode===9');cachekey[5]=9;return;case'esc':builder.push('e.keyCode===27');cachekey[5]=27;return;case'enter':builder.push('e.keyCode===13');cachekey[5]=13;return;case'backspace':builder.push('e.keyCode===8');cachekey[5]=8;break;case'del':case'delete':builder.push('e.keyCode===46');cachekey[5]=46;return;case'save':builder.push('(e.{0}&&e.keyCode===83)'.format(special));cachekey[specialindex]=1;cachekey[5]=83;return;case'remove':builder.push('((e.{0}&&e.keyCode===8)||e.keyCode===46)'.format(special));cachekey[5]=-1;return;case'clone':builder.push('(e.{0}&&e.keyCode===68)'.format(special));cachekey[specialindex]=1;cachekey[5]=68;return;case'selectall':builder.push('(e.{0}&&e.keyCode===65)'.format(special));cachekey[specialindex]=1;cachekey[5]=65;return;case'copy':builder.push('(e.{0}&&e.keyCode===67)'.format(special));cachekey[specialindex]=1;cachekey[5]=67;return;case'undo':builder.push('(e.{0}&&e.keyCode===90)'.format(special));cachekey[specialindex]=1;cachekey[5]=90;return;case'redo':builder.push('(e.{0}&&e.shiftKey&&e.keyCode===90)'.format(special));cachekey[specialindex]=1;cachekey[5]=90;return;case'refresh':builder.push('e.key===\'F5\'');cachekey[5]=116;return;case'up':builder.push('e.keyCode===38');cachekey[5]=38;return;case'down':builder.push('e.keyCode===40');cachekey[5]=40;return;case'right':builder.push('e.keyCode===39');cachekey[5]=39;return;case'left':builder.push('e.keyCode===37');cachekey[5]=37;return;case'f1':case'f2':case'f3':case'f4':case'f5':case'f6':case'f7':case'f8':case'f9':case'f10':case'f11':case'f12':var a=item.toUpperCase();builder.push('e.key===\'{0}\''.format(a));cachekey[4]=a;return;case'capslock':builder.push('e.which===20');cachekey[5]=20;return}var num=item.parseInt();if(num){builder.push('e.which==='+num);cachekey[5]=num}else{num=item.toUpperCase().charCodeAt(0);cachekey[5]=num;builder.push('e.keyCode==={0}'.format(num))}});items.push({shortcut:alias.join('+'),fn:new Function('e','return '+builder.join('&&')),callback:callback,prevent:prevent,owner:owner,prepare:prepare});length=items.length;var k;if(cachekey[5]===-1){cachekey[5]=8;cachekey[3]=1;k=cachekey.join('');currentkeys[k]=1;cachekey[3]=0;cachekey[5]=46}k=cachekey.join('');currentkeys[k]=1});if(!owner)self.refresh();return self});
```

--------------------------------

### Initializing UI Tree Component and Event Handlers (Total.js JavaScript)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-tree.html

The `self.make` function initializes the component by applying CSS classes and compiling the Tangular template for tree items, supporting drag-and-drop and checkboxes. It registers click handlers for checkboxes, tree items (for selection), and options buttons, and a focusout handler for input fields to revert changes.

```JavaScript
self.make=function()
```

```text

```

--------------------------------

### Styling UI Loading Component with CSS

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-loading.html

This CSS defines the visual appearance and animation for a UI loading component. It includes styles for the overlay, spinner (using an SVG data URI), progress bar, and text, along with dark mode adjustments and a keyframe animation for the progress bar.

```CSS
.ui-loading{position:fixed;width:100%;height:100%;background-color:rgba(255,255,255,0.8);left:0;top:0;z-index:1000}.ui-loading-1>div{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI4LjA0MiUiIHkxPSIwJSIgeDI9IjY1LjY4MiUiIHkyPSIyMy44NjUlIiBpZD0iYSI+PHN0b3Agc3RvcC1jb2xvcj0iI0EwQTBBMCIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0EwQTBBMCIgc3RvcC1vcGFjaXR5PSIuNjMxIiBvZmZzZXQ9IjYzLjE0NiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjQTBBMEEwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCIgc3Ryb2tlPSJ1cmwoI2EpIiBzdHJva2Utd2lkdGg9IjIiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE4IDE4IiB0bz0iMzYwIDE4IDE4IiBkdXI9IjAuOXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjxjaXJjbGUgZmlsbD0iI0EwQTBBMCIgY3g9IjM2IiBjeT0iMTgiIHI9IjEiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE4IDE4IiB0bz0iMzYwIDE4IDE4IiBkdXI9IjAuOXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat 50% 50%;background-size:80px 80px;width:80px;height:80px;position:absolute;left:50%;top:50%;margin:-40px 0 0 -40px}.ui-loading-2>div{min-height:5px;background-color:#4285f4;width:0;position:absolute;z-index:1;animation:loadinganimation 5s infinite}.ui-loading-1 .ui-loading-text{position:absolute;width:250px;text-align:center;margin:90px 0 0 -125px;left:50%;font-size:12px;color:#000;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.ui-loading-2 .ui-loading-text{font-size:11px;padding:0 5px}.ui-loading-text i{margin-right:5px}.ui-dark .ui-loading{background-color:rgba(0,0,0,0.8)}.ui-dark .ui-loading>div{color:#FFF}@keyframes loadinganimation{0%{left:0}60%{left:0;width:100%}70%{left:70%;width:30%}90%{left:100%;width:30%}100%{left:0;width:0}}
```

--------------------------------

### Generating Configuration Files (Bash)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/readme.md

This command generates the .env and config files from the .env.main file, which is essential for the application to pick up environment variables and configurations.

```bash
npm run config:generate
```

--------------------------------

### Initializing Total.js Shopping Cart Component (JavaScript)

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-shoppingcart.html

The `make` function is called during component initialization. It attempts to load existing shopping cart items from the cache and, if found, populates the component's data source and recalculates the cart's sum.

```JavaScript
self.make=function(){var items=CACHE(Name);if(items&&items.length){var datasource=self.prepare();datasource.items=items}self.sum(true)}
```

--------------------------------

### Defining UI Box Component in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-box.html

This JavaScript snippet defines a 'box' component using a custom framework (likely Total.js's COMPONENT function). It initializes the component with default configuration options such as z-index, padding, scrollbar behavior, and alignment, and sets up internal variables.

```JavaScript
COMPONENT('box','zindex:12;padding:25;scrollbar:1;scrolltop:1;style:1;align:center;background:1;transparent:0',function(self,config,cls){var cls2='.'+cls,csspos={},nav=false,init=false;if(!W.$$box){W.$$box_lev
```

--------------------------------

### Managing UI Component Z-Index and Initial Classes in JavaScript

Source: https://github.com/mrazbb/nodejs-database-app-template/blob/main/app/public/cdn/j-box.html

This snippet manages the component's z-index to ensure proper layering within the UI, incrementing a global box level. It also applies initial CSS classes (invisible, hidden) and triggers a release function if available, preparing the component for display.

```JavaScript
if(W.$$box_level<1)W.$$box_level=1;W.$$box_level++;self.css('z-index',W.$$box_level*config.zindex);self.aclass('invisible');self.rclass('hidden');self.release&&self.release(false);
```