fix

2026-11-13 19:06:11 +03:00 · 2021-11-21 22:33:57 +03:00
parent 5f02b7a453
commit cafa01c3a5
9 changed files with 311 additions and 164 deletions
@@ -0,0 +1,102 @@
+:root {
+    --logger-color-emergency: hsl(0, 100%, 55%);
+    --logger-color-alert: hsl(192, 100%, 98%);
+    --logger-color-critical: hsl(0, 100%, 55%);
+    --logger-color-error: hsl(0, 100%, 55%);
+    --logger-color-warning: hsl(31, 100%, 55%);
+    --logger-color-notice: #909090;
+    --logger-color-info: hsl(205, 100%, 61%);
+    --logger-color-debug: #909090;
+    --logger-color-success: #8bc34a;
+    --logger-lvl: 0;
+}
+.kit-logger, #kit-logger {
+    margin: 0;
+    padding: 5px;
+    font-family: monospace;
+    background: hsla(0, 0%, 11%, 1);
+    color: #909090;
+    overflow-y: scroll !important;
+    word-break: break-all;
+    display: block;
+}
+.kit-logger:empty, #kit-logger:empty {
+    display: none;
+}
+.kit-logger--fixed {
+    position: sticky;
+    bottom: 0;
+    height: 30vh;
+}
+logger-item {
+    margin: 0;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -webkit-align-content: flex-start;
+    -ms-flex-line-pack: start;
+    align-content: flex-start;
+    -webkit-align-items: flex-start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    white-space: pre-line;
+    padding-left: calc(var(--logger-lvl, 0) * 25px);
+    font-size: 12px !important;
+    line-height: 14px !important;
+}
+logger-item__value * {
+    color: inherit;
+}
+logger-item__msg {
+
+}
+logger-item__key {
+    min-width: 25px;
+    padding-right: 5px;
+    white-space: nowrap;
+    color: var(--logger-color-key, #909090);
+}
+logger-item__key:empty {
+    display: none;
+}
+logger-item__lvl {
+    min-width: 25px;
+}
+logger-item__value {
+    flex: 1 0 0;
+    white-space: pre-wrap;
+    color: var(--logger-color-value, #c1c1c1);
+}
+logger-item__value * {
+    font-size: inherit !important;
+    line-height: inherit !important;
+    color: inherit !important;
+    white-space: inherit !important;
+}
+
+
+.kit-logger-row--error {
+    --logger-color-key: var(--logger-color-error);
+    --logger-color-value: var(--logger-color-error);
+}
+.kit-logger-row--info {
+    --logger-color-key: var(--logger-color-info);
+    --logger-color-value: var(--logger-color-info);
+}
+.kit-logger-row--warning {
+    --logger-color-key: var(--logger-color-warning);
+    --logger-color-value: var(--logger-color-warning);
+}
+.kit-logger-row--success {
+    --logger-color-key: var(--logger-color-success);
+    --logger-color-value: var(--logger-color-success);
+}
@@ -0,0 +1,134 @@
+/** @module loggerService */
+__PluginManager__.register('loggerService', function(module, exports, require, global){
+
+    var support = require('support');
+    var Logger = require('Logger');
+
+    var lightMap = [
+        {class: '', keys: []},
+        {class: 'text-danger', keys: []},
+        {class: 'text-secondary', keys: []},
+    ];
+    var getLightClass = function(key) {
+        key = ''+key;
+        var addClass = '', ar;
+        for(var i=0; i < lightMap.length; i++){
+            ar = lightMap[i]['keys'];
+            addClass = ar.includes(key)?lightMap[i]['class']:addClass;
+        }
+        return addClass;
+    };
+    var htmlCollectionTemplater = '<div class="kit-logger kit-logger--fixed"></div>';
+    // function dump(value) {
+    //     var rArray = [];
+    //     if(value === null) {
+    //         rArray[0] = 'null';
+    //     } else {
+    //         rArray[0] = String(typeof value);
+    //         rArray[1] = emptyPHP(value)?'empty':'';
+    //     }
+    //     return rArray.join(' ');
+    // };
+    function getRowNode(level, key, value, opClass = ''){
+        if(opClass) {
+            opClass = ' kit-logger-row--'+opClass;
+        }
+        var lvlTemplate;
+        key = String(key);
+        value = String(value);
+        lvlTemplate = level?'style="--logger-lvl:'+level+';" ':'';
+        var result = '<logger-item '+lvlTemplate+'class="'+getLightClass(key)+opClass+'"><logger-item__key>'+key+'</logger-item__key><logger-item__value>'+value+'</logger-item__value></logger-item>';
+
+        return support.makeNode(result);
+    }
+    function getItemObjectNode(id = ''){
+        var entity = '', css = '', style = '';
+        if(id) {
+            css = '<style>input#'+id+':checked ~ [data-entity-id="'+id+'"] {display: block !important;}</style>';
+            entity = ' data-entity-id="'+id+'"';
+            style = ' style="display: none"'
+        }
+        return support.makeNode('<logger-item-object'+entity+style+'>'+css+'</logger-item-object>');
+    }
+
+
+
+    /**
+     * @extends kit.Logger
+     * @class LoggerService
+     * @memberOf kit
+     */
+    var LoggerService = function() {
+        Logger.prototype.constructor.apply(this, arguments);
+        this.onLog.push(this.__log);
+    };
+
+    support.extend(LoggerService.prototype, Logger.prototype);
+
+    LoggerService.prototype.setHtmlCollection = function (node) {
+        /**
+         * @type {HTMLElement}
+         */
+        this.__htmlCollection = node || document.getElementById('kit-logger') || document.querySelector('.kit-logger') || support.makeNode(__htmlCollectionTemplater);
+
+        if((this.__htmlCollection instanceof HTMLElement) && !this.__htmlCollection.parentElement) {
+            document.body.appendChild(this.__htmlCollection)
+        }
+    };
+
+    LoggerService.prototype.__row = function(message, lvl = 0, opClass = '') {
+        if (!this.__htmlCollection) {
+            this.setHtmlCollection();
+        }
+        var log = this.__htmlCollection;
+
+        function setObjectValue(log, lvl, key, value, opClass, depth = 3, openDepth = 1, isRoot = true) {
+            var rowChild, isObj = support.isObject(value), id = isObj?support.uniqueId():'',
+                val = (isObj&&depth)?'<label for="'+id+'">'+value+'</label>':value, inp, j,
+                len = isObj?Object.keys(value).length:0;
+
+            if(!isRoot || (isRoot && !isObj)) {
+                log.appendChild(getRowNode(lvl, key, '' + val + (isObj?(' ['+len+']'):''), opClass));
+            }
+            if(isObj&&depth) {
+                !isRoot && ++lvl;
+                depth = Math.max(0, depth - 1);
+                log.appendChild(inp = support.makeNode('<input id="'+id+'" type="checkbox" style="display: none;">'));
+                inp.checked = !!openDepth;
+                openDepth = Math.max(0, openDepth - 1);
+                log.appendChild(rowChild = getItemObjectNode(id));
+                for(j in value) {
+                    if(value.hasOwnProperty(j))
+                        setObjectValue(rowChild, lvl, j, value[j], opClass, depth, openDepth, false);
+                }
+            }
+        }
+
+        setObjectValue(log, lvl, '', message, opClass, 6, 3);
+
+        log.scrollTop = log.scrollHeight;
+    };
+
+    LoggerService.prototype.__log = function(data = {
+        lvl: 0,
+        message: '',
+        context: [],
+        type: ''
+    }){
+        lvl = support.toNumber(data.lvl);
+        var opClass = String(data.type);
+        this.__row(data.message, lvl, opClass);
+        if(support.isObject(data.context))
+            this.__row(data.context, lvl+1);
+    };
+
+    /**
+     * @memberOf kit.service
+     * @class logger
+     **/
+    var logger = new LoggerService();
+
+    global.service.logger = logger;
+
+    module.exports = logger;
+});