mdkcontroller 1.0.0

package/Cores/file/dk.css

@@ -0,0 +1,99 @@
+.dk-loader {
+  position: absolute;
+  width: 350px;
+  height: 350px;
+  border-radius: 50%;
+  background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
+  animation: dk-animate 1.2s linear infinite;
+}
+
+@keyframes dk-animate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.dk-loader span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
+}
+
+.dk-loader span:nth-child(1) {
+  filter: blur(5px);
+}
+
+.dk-loader span:nth-child(2) {
+  filter: blur(10px);
+}
+
+.dk-loader span:nth-child(3) {
+  filter: blur(25px);
+}
+
+.dk-loader span:nth-child(4) {
+  filter: blur(50px);
+}
+
+.dk-loader:after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  background: #f1f1f1;
+  border: solid white 10px;
+  border-radius: 50%;
+}
+
+.dk-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(3px);
+  z-index: 9999;
+  color: black;
+}
+
+.dk-overlay .dk-overlay_boder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.dk-overlay .dk-overlay_boder > strong {
+  z-index: 10;
+}
+
+.dk-overlay .dk-overlay_boder .dk-overlay_box {
+  border: 2px solid #8f32b0ba;
+  border-radius: 10px;
+  box-shadow: 0 0 9px 6px #8f32b0a3;
+  padding: 15px;
+  background-color: white;
+  min-width: 380px;
+  min-height: 200px;
+}
+
+.dk-overlay .dk-overlay_boder > span {
+  font-size: 40px;
+  cursor: pointer;
+}
+
+.dk-transiton500 {
+  transition: all ease 0.5s;
+}
+.dk-transiton300 {
+  transition: all ease 0.3s;
+}

package/Cores/file/dk.js

@@ -0,0 +1,154 @@
+const DK = {
+    varHide: {
+        showBusyCache: {},
+        currentScriptPath: ''
+    },
+    showBusy: (show, mess) => {
+        const temp = DK.varHide.showBusyCache;
+        if (show) {
+            temp[mess] = (temp[mess] ?? 0) + 1;
+        } else {
+            temp[mess] = (temp[mess] ?? 0) - 1;
+            if (temp[mess] <= 0)
+                delete temp[mess];
+        }
+        const keys = Object.keys(temp);
+        let textShow = '';
+        keys.forEach((k) => {
+            textShow += `${k} x ${temp[k]} <br/>`;
+        });
+        const overlayId = 'dkoverlay_busy';
+        let dk_overlay = document.getElementById(overlayId);
+        if (!dk_overlay) {
+            dk_overlay = document.createElement('div');
+            dk_overlay.style.zIndex = 10000;
+            dk_overlay.id = overlayId;
+            dk_overlay.classList.add('dk-overlay');
+            const overlay_boder = document.createElement('div');
+            overlay_boder.classList.add('dk-overlay_boder');
+            const loader = document.createElement('div');
+            loader.classList.add('dk-loader');
+            const span1 = document.createElement('span');
+            const span2 = document.createElement('span');
+            const span3 = document.createElement('span');
+            const span4 = document.createElement('span');
+
+            const strong = document.createElement('strong');
+            strong.id = dk_overlay.id + '_content';
+            loader.appendChild(span1);
+            loader.appendChild(span2);
+            loader.appendChild(span3);
+            loader.appendChild(span4);
+            overlay_boder.appendChild(loader);
+            overlay_boder.appendChild(strong);
+            dk_overlay.appendChild(overlay_boder);
+            document.body.appendChild(dk_overlay);
+        }
+        const strongContent = document.getElementById(overlayId + '_content');
+        if (textShow) {
+            strongContent.innerHTML = textShow;
+            dk_overlay.style.display = 'block';
+        } else {
+            dk_overlay.style.display = 'none';
+        }
+    },
+    generateRandomToken: (length = 20) => {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789`~!@#$%^&*()?<>:{}/*-+';
+        let token = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            token += characters.charAt(randomIndex);
+        }
+        return token;
+    },
+    showMessage: (mess, type = 1, layer = 10001) => {
+        let imageName = 'information.png';
+        switch (type) {
+            case 1: imageName = 'information.png'; break;
+            case 2: imageName = 'success.png'; break;
+            case 3: imageName = 'warning.png'; break;
+            case 4: imageName = 'error.png'; break;
+            default: break;
+        }
+        const overlayId = 'dkoverlay_message_' + DK.generateRandomToken();
+        let dk_overlay = document.getElementById(overlayId);
+        if (!dk_overlay) {
+            dk_overlay = document.createElement('div');
+            dk_overlay.style.zIndex = layer;
+            dk_overlay.id = overlayId;
+            dk_overlay.classList.add('dk-overlay');
+            const overlay_boder = document.createElement('div');
+            overlay_boder.classList.add('dk-overlay_boder');
+            if (overlay_boder) {
+                const overlay_box = document.createElement('div');
+                overlay_box.classList.add('dk-overlay_box');
+                if (overlay_box) {
+                    const closeX = document.createElement('span');
+                    closeX.innerText = 'X';
+                    closeX.onclick = () => {
+                        document.body.removeChild(dk_overlay);
+                    };
+                    closeX.style.cssText = `font-size: 25px;cursor: pointer;float: right;font-weight: bold;color: #157272a6;margin: -18px -8px 0 0;`;
+
+                    const divImage = document.createElement('div');
+                    divImage.style.cssText = `height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;`;
+                    divImage.innerHTML = `<img style='position: fixed;opacity: 0.1;width: 150px;' src='${(DK.varHide.currentScriptPath + '/' + imageName)}'/>`;
+                    const overlay_inner = document.createElement('span');
+                    overlay_inner.style.cssText = 'font-weight: bold;overflow-wrap: anywhere;max-width: 500px;z-index: 1;overflow: auto;';
+                    overlay_inner.classList.add('dk-overlay_inner');
+
+                    overlay_box.appendChild(closeX);
+                    overlay_box.appendChild(divImage);
+                    divImage.appendChild(overlay_inner);
+                }
+                overlay_boder.appendChild(overlay_box);
+            }
+
+            dk_overlay.appendChild(overlay_boder);
+            document.body.appendChild(dk_overlay);
+        }
+        var dialog = dk_overlay.getElementsByClassName('dk-overlay_inner')[0];
+        dialog.innerHTML = mess;
+        const scripts = dialog.getElementsByTagName('script');
+        for (let i = 0; i < scripts.length; i++) {
+            const script = scripts[i];
+            const scriptContent = script.textContent || script.innerText;
+            const scriptFunction = new Function(scriptContent);
+            scriptFunction();
+        }
+        const maxWidthSpan = document.body.clientWidth - 60;
+        dialog.style.maxWidth = (maxWidthSpan > 800 ? 800 : maxWidthSpan) + 'px';
+        dk_overlay.style.display = 'block';
+        const imgTag = dk_overlay.getElementsByTagName('img')[0];
+        imgTag.style.height = dialog.parentNode.parentNode.clientHeight + 'px';
+    },
+    ImportCss: (src) => {
+        var link = document.createElement("link");
+        link.href = src;
+        link.type = "text/css";
+        link.rel = "stylesheet";
+        link.media = "screen,print";
+
+        document.getElementsByTagName("head")[0].appendChild(link);
+    },
+    ImportJS: (src) => {
+        var scriptJS = document.createElement("script");
+        scriptJS.src = src;
+        document.getElementsByTagName("head")[0].appendChild(scriptJS);
+    }
+}
+document.addEventListener('DOMContentLoaded', () => {
+    const scriptElements = document.getElementsByTagName('script');
+    for (let x = 0; x < scriptElements.length; x++) {
+        const currentScript = scriptElements[x];
+        const scriptPath = currentScript.src;
+        if (scriptPath.endsWith('/dk.js')) {
+            DK.varHide.currentScriptPath = scriptPath.substring(0, scriptPath.lastIndexOf('/dk.js'))
+            DK.ImportCss(DK.varHide.currentScriptPath + '/dk.css');
+            setTimeout(() => {
+                DK.ImportJS(DK.varHide.currentScriptPath + '/dk_table.js');
+                DK.ImportCss(DK.varHide.currentScriptPath + '/dk_table.css');
+            }, 100);
+        }
+    }
+});

package/Cores/file/dk_table.css

@@ -0,0 +1,63 @@
+.dk-table-x1 {
+  font-family: Arial, Helvetica, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+  min-width: 800px;
+}
+
+.dk-table-x1 th {
+  padding: 5px;
+  font-size: 15px;
+}
+.dk-table-x1 td {
+  font-size: 13px;
+  border: 1px solid #ddd;
+}
+.dk-table-x1 tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+.dk-table-x1 tr:hover {
+  background-color: #ddd;
+}
+
+.dk-table-x1 th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #04aa6d;
+  color: white;
+  font-weight: bold;
+  border: 1px solid;
+}
+
+.dk-table-x1 input[type="checkbox"] {
+  min-height: 22px;
+  width: 30px;
+  margin: auto;
+  display: block;
+}
+.dk-table-x1 input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}
+.dk-table-x1 input:not([type="checkbox"]) {
+  width: 100%;
+}
+.dk-table-x1 input:not(:disabled) {
+  display: block;
+  color: #495057;
+  background-color: #fff;
+  background-image: none;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+.dk-actionsBar {
+  padding: 5px 10px;
+  width: max-content;
+}
+.dk-actionsBar button {
+  border-radius: 6px;
+  border: none;
+}

package/Cores/file/dk_table.js

@@ -0,0 +1,252 @@
+const DKTable = {
+    rowOnFocus: {},
+    rowClick: (sender) => {
+        const trTag = sender.currentTarget;
+        const table = trTag.upParent('table');
+        if (trTag.dataset.editting == "true") return;
+        const cellIndex = sender.target.cellIndex;
+        if (DKTable.rowOnFocus[table.id]) {
+            const lastRow = DKTable.rowOnFocus[table.id];
+            DKTable.hideUpdateRecord(lastRow, table, false);
+        }
+        DKTable.rowOnFocus[table.id] = trTag;
+
+        const storeData = JSON.parse(table.dataset.store);
+        const fieldTypes = JSON.parse(table.dataset.fieldType);
+        const primaryKey = table.dataset.primaryKey;
+        const currentKeyValue = trTag.dataset.primaryValue;
+
+        const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
+        let objectCurrent = cache.updated.find(f => f[primaryKey] == currentKeyValue);
+        if (!objectCurrent) {
+            objectCurrent = storeData.find(f => f[primaryKey] == currentKeyValue);
+        }
+        DKTable.hideLoadRecord(trTag, objectCurrent, fieldTypes, sender.target);
+        console.log('Your input is: ', sender.target);
+        var cell = trTag.cells[cellIndex];
+        if (cell?.children[0]) {
+            cell.children[0].focus();
+        }
+    },
+    hideUpdateRecord: (trTag = new HTMLElement(), table = new HTMLElement(), isClear = false) => {
+        if (trTag.dataset.editting == 'false') {
+            return;
+        }
+        const storeData = JSON.parse(table.dataset.store);
+        const fieldTypes = JSON.parse(table.dataset.fieldType);
+        const primaryKey = table.dataset.primaryKey;
+        const currentKeyValue = trTag.dataset.primaryValue;
+        const objectCurrent = storeData.find(f => f[primaryKey] == currentKeyValue) || {};
+        ///
+        const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
+        let itemOnCache = cache.updated.find(f => f[primaryKey] == currentKeyValue);
+        if (!itemOnCache) {
+            if (isClear) {
+                itemOnCache = objectCurrent;
+                DKTable.rowOnFocus[table.id] = undefined;
+            } else {
+                cache.updated.push({ ...objectCurrent });
+                itemOnCache = cache.updated.find(f => f[primaryKey] == currentKeyValue);
+            }
+        }
+        if (!isClear) {
+            fieldTypes.forEach(field => {
+                const input = trTag.querySelector(`input[name="${field.fieldName}"]`).closest('input');
+                if (input) {
+                    switch (input.type) {
+                        case 'checkbox':
+                            itemOnCache[field.fieldName] = input.checked;
+                            break;
+                        default:
+                            itemOnCache[field.fieldName] = input.value;
+                            break;
+                    }
+                }
+            });
+        }
+        trTag.dataset.primaryValue = itemOnCache[primaryKey];
+        trTag.innerHTML = "";
+        fieldTypes.forEach(field => {
+            const td = document.createElement('td');
+            switch (field.dataType) {
+                case "boolean":
+                    td.innerHTML = `<input type="checkbox" ${(itemOnCache[field.fieldName] ? 'checked' : '')} onclick='DKTable.inputCheckboxReadOnly(event)'>`; break;
+                default:
+                    td.innerText = itemOnCache[field.fieldName]; break;
+            }
+            trTag.appendChild(td);
+        });
+
+        let areEqual = true;
+        let hasChild = false;
+        for (const key in itemOnCache) {
+            hasChild = true;
+            if (objectCurrent[key] !== itemOnCache[key]) {
+                areEqual = false;
+                break;
+            }
+        }
+        if (areEqual && hasChild) {
+            cache.updated = cache.updated.filter(obj => obj[primaryKey] !== itemOnCache[primaryKey]);
+        }
+        trTag.dataset.editting = "false";
+        table.dataset.cache = JSON.stringify(cache);
+    },
+    hideLoadRecord: (trTag = new HTMLElement(), data = {}, fieldTypes = []) => {
+        const inputWs = [];
+        for (let index = 0; index < trTag.children.length; index++) {
+            const element = trTag.children[index];
+            inputWs.push(element.clientWidth);
+        }
+        trTag.innerHTML = "";
+        let firsttd = null;
+        let ccinput = 0;
+        fieldTypes.forEach(field => {
+            const td = document.createElement('td');
+            td.style.minWidth = inputWs[ccinput++] + 'px';
+            switch (field.dataType) {
+                case "boolean":
+                    td.innerHTML = `<input name="${field.fieldName}" type="checkbox" ${data[field.fieldName] ? 'checked' : ''}>`;
+                    break;
+                case "number":
+                    td.innerHTML = `<input name="${field.fieldName}" type='number' value='${data[field.fieldName] || 0}'>`;
+                    break;
+                case "date":
+                    td.innerHTML = `<input name="${field.fieldName}" type='date' value='${data[field.fieldName] || ""}'>`;
+                    break;
+                default:
+                    td.innerHTML = `<input name="${field.fieldName}" type='text' value='${data[field.fieldName] || ""}'>`;
+                    break;
+            }
+            firsttd = firsttd || td;
+            trTag.appendChild(td);
+        });
+        // firsttd.children[0].focus();
+        trTag.dataset.editting = "true";
+    },
+    CommitDataTable: (table = new HTMLElement()) => {
+        const storeData = JSON.parse(table.dataset.store);
+        if (DKTable.rowOnFocus[table.id]) {
+            const lastRow = DKTable.rowOnFocus[table.id];
+            DKTable.hideUpdateRecord(lastRow, table, false);
+        }
+
+        const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
+        const host = document.location.origin;
+        DK.showBusy(true, "Đang cập nhật thông tin phân quyền video");
+        fetch(host + table.dataset.postTo, {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(cache)
+        })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    throw new Error('API request failed');
+                }
+            })
+            .then(res => {
+                DK.showBusy(false, "Đang cập nhật thông tin phân quyền video");
+                if (res.success) {
+                    DK.showMessage("Đã cập nhật thành công", 1);
+                }
+                else {
+                    DK.showMessage(res.message, 4);
+                }
+            })
+            .catch(error => {
+                DK.showBusy(false, "Đang cập nhật thông tin phân quyền video");
+                DK.showMessage(error, 4);
+            });;
+    },
+    DeleteRowCurrent: (table = new HTMLElement()) => {
+        if (DKTable.rowOnFocus[table.id]) {
+            const storeData = JSON.parse(table.dataset.store);
+            const primaryKey = table.dataset.primaryKey;
+            const lastRow = DKTable.rowOnFocus[table.id];
+            const currentKeyValue = lastRow.dataset.primaryValue;
+            const objectOriginal = storeData.find(f => f[primaryKey] == currentKeyValue);
+            ///
+            const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
+            let objectCache = cache.updated.find(f => f[primaryKey] == currentKeyValue);
+            if (objectOriginal) {
+                cache.deleted.push(objectOriginal);
+            }
+            cache.updated = cache.updated.filter(obj => obj[primaryKey] !== objectCache[primaryKey]);
+            table.dataset.cache = JSON.stringify(cache);
+            lastRow.remove();
+            delete DKTable.rowOnFocus[table.id];
+        }
+    },
+    AddNewRow: (table = new HTMLElement()) => {
+        const fieldTypes = JSON.parse(table.dataset.fieldType);
+        const primaryKey = table.dataset.primaryKey;
+        const cache = JSON.parse(table.dataset.cache || JSON.stringify({ updated: [], deleted: [] }));
+
+        const tbody = table.downChild('tbody');
+        const trTag = document.createElement('tr');
+        trTag.onclick = () => { DKTable.rowClick(trTag) };
+        const currentTicks = new Date().getTime();
+        if (!fieldTypes.find(f => f.fieldName == primaryKey)) {
+            trTag.dataset.primaryValue = "AutoGenerate_" + currentTicks.toString();
+            cache.updated.push(JSON.parse(`{"${primaryKey}":"${trTag.dataset.primaryValue}"}`));
+            table.dataset.cache = JSON.stringify(cache);
+        }
+        trTag.innerHTML = "";
+        fieldTypes.forEach(field => {
+            const td = document.createElement('td');
+            switch (field.dataType) {
+                case "boolean":
+                    td.innerHTML = `<input type="checkbox" disabled>`;
+                    break;
+                case "number":
+                    td.innerText = 0;
+                    break;
+                default:
+                    td.innerText = "";
+                    break;
+            }
+            trTag.appendChild(td);
+        });
+        trTag.dataset.editting = "false";
+        tbody.appendChild(trTag);
+    },
+    keyDownOnTable: (keyCode, sender) => {
+        // ESC
+        if (keyCode == 27) {
+            const table = sender;
+            if (DKTable.rowOnFocus[table.id]) {
+                const lastRow = DKTable.rowOnFocus[table.id];
+                DKTable.hideUpdateRecord(lastRow, table, true);
+            }
+        }
+    },
+    inputCheckboxReadOnly: (event) => {
+        event.preventDefault();
+    }
+}
+HTMLElement.prototype.upParent = function (name) {
+    if (this.parentNode.tagName.toLowerCase() == name.toLowerCase()) {
+        return this.parentNode;
+    }
+    if (this.parentNode) {
+        return this.parentNode.upParent(name);
+    }
+    return null;
+}
+HTMLElement.prototype.downChild = function (name) {
+    for (let index = 0; index < this.children.length; index++) {
+        const element = this.children[index];
+        if (element.tagName.toLowerCase() == name.toLowerCase()) {
+            return element;
+        }
+
+        const downTry = element.downChild(name);
+        if (downTry)
+            return downTry;
+    }
+    return null;
+}