diff --git a/js/custom-nodes-manager.js b/js/custom-nodes-manager.js index e78c884a..3ec0ef11 100644 --- a/js/custom-nodes-manager.js +++ b/js/custom-nodes-manager.js @@ -7,8 +7,9 @@ import { manager_instance, rebootAPI, install_via_git_url } from "./common.js"; import TG from "./turbogrid.esm.js"; const icons = { - conflicts: '', - search: '' + search: '', + extensions: '', + conflicts: '' } const pageCss = ` @@ -134,11 +135,12 @@ const pageCss = ` text-decoration: underline; } +.cn-manager-grid .cn-extensions-button, .cn-manager-grid .cn-conflicts-button { display: inline-block; width: 20px; height: 20px; - color: orange; + color: green; border: none; padding: 0; margin: 0; @@ -146,19 +148,33 @@ const pageCss = ` min-width: 20px; } +.cn-manager-grid .cn-conflicts-button { + color: orange; +} + +.cn-manager-grid .cn-extensions-list, .cn-manager-grid .cn-conflicts-list { line-height: normal; text-align: left; max-height: 80%; - min-height: 100px; + min-height: 200px; + min-width: 300px; overflow-y: auto; - background-color: #CCCC55; - color: #AA3333; - font-size: 11px; + font-size: 12px; border-radius: 5px; padding: 10px; } +.cn-manager-grid .cn-extensions-list { + border-color: var(--bg-color); +} + +.cn-manager-grid .cn-conflicts-list { + background-color: #CCCC55; + color: #AA3333; +} + +.cn-manager-grid .cn-extensions-list h3, .cn-manager-grid .cn-conflicts-list h3 { margin: 0; padding: 5px 0; @@ -722,16 +738,19 @@ export class CustomNodesManager { const rows = this.custom_nodes || []; rows.forEach((item, i) => { item.id = i + 1; - - const conflicts = this.conflict_mappings[item.files[0]]; - if(conflicts) { - item.conflictsCount = conflicts.length; - item.conflictsList = conflicts; - } else { - item.conflictsCount = 0; - item.conflictsList = []; + const nodeKey = item.files[0]; + const extensionInfo = this.extension_mappings[nodeKey]; + if(extensionInfo) { + const { extensions, conflicts } = extensionInfo; + if (extensions.length) { + item.extensions = extensions.length; + item.extensionsList = extensions; + } + if (conflicts) { + item.conflicts = conflicts.length; + item.conflictsList = conflicts; + } } - }); const columns = [{ @@ -787,38 +806,51 @@ export class CustomNodesManager { return `
${description}
`; } }, { - id: "conflictsCount", + id: "extensions", + name: "Extensions", + width: 80, + align: 'center', + formatter: (extensions, rowItem, columnItem) => { + const extensionsList = rowItem.extensionsList; + if (!extensionsList) { + return; + } + const list = []; + const eId = `popover_extensions_${columnItem.id}_${rowItem.tg_index}`; + list.push(``) + list.push(`
`) + list.push(`

【${rowItem.title}】Extension Nodes:

`); + extensionsList.forEach(en => { + list.push(`
  • ${en}
    • `); + }) + list.push("
    "); + return list.join(""); + } + }, { + id: "conflicts", name: "Conflicts", width: 80, align: 'center', - formatter: (conflictsCount, rowItem, columnItem) => { - if(!conflictsCount) { - return + formatter: (conflicts, rowItem, columnItem) => { + const conflictsList = rowItem.conflictsList; + if (!conflictsList) { + return; } - const popoverId = `popover_${columnItem.id}_${rowItem.tg_index}`; - let buf = `'; - - buf += `
    `; - buf += `

    【${rowItem.title}】 Conflicted Nodes:

    ` - - rowItem.conflictsList.forEach(conflict => { - let node_name = conflict[0]; - - let extension_name = conflict[1].split('/').pop(); - if(extension_name.endsWith('/')) { - extension_name = extension_name.slice(0, -1); - } - if(node_name.endsWith('.git')) { + const list = []; + const cId = `popover_conflicts_${columnItem.id}_${rowItem.tg_index}`; + list.push(``) + list.push(`
    `) + list.push(`

    【${rowItem.title}】Conflicted Nodes:

    `); + conflictsList.forEach(en => { + let [node_name, extension_name] = en; + extension_name = extension_name.split('/').filter(it => it).pop(); + if(extension_name.endsWith('.git')) { extension_name = extension_name.slice(0, -4); } - - buf += `
  • ${node_name} [${extension_name}]
    • `; - }); - - buf += "
    "; - return buf; + list.push(`
  • ${node_name} [${extension_name}]
    • `); + }) + list.push("
    "); + return list.join(""); } }, { id: 'author', @@ -1059,9 +1091,9 @@ export class CustomNodesManager { // =========================================================================================== - async getConflictMappings() { + async getExtensionMappings() { const mode = manager_instance.datasrc_combo.value; - this.showStatus(`Loading conflict mappings (${mode}) ...`); + this.showStatus(`Loading extension mappings (${mode}) ...`); const res = await this.fetchData(`/customnode/getmappings?mode=${mode}`); if (res.error) { console.log(res.error); @@ -1069,43 +1101,45 @@ export class CustomNodesManager { } const data = res.data; - - let node_to_extensions_map = {}; - - for(let k in data) { - for(let i in data[k][0]) { - let node = data[k][0][i]; - let l = node_to_extensions_map[node]; + + const extension_mappings = {}; + const conflicts_map = {}; + Object.keys(data).forEach(k => { + const [extensions, metadata] = data[k]; + extension_mappings[k] = { + extensions, + metadata + } + extensions.forEach(node => { + let l = conflicts_map[node]; if(!l) { l = []; - node_to_extensions_map[node] = l; + conflicts_map[node] = l; } l.push(k); - } - } - - let conflict_map = {}; - for(let node in node_to_extensions_map) { - if(node_to_extensions_map[node].length > 1) { - for(let i in node_to_extensions_map[node]) { - let extension = node_to_extensions_map[node][i]; - let l = conflict_map[extension]; - - if(!l) { - l = []; - conflict_map[extension] = l; + }) + }) + + Object.keys(conflicts_map).forEach(node => { + const list = conflicts_map[node]; + if(list.length > 1) { + list.forEach(k => { + const item = extension_mappings[k]; + if(!item) { + console.log(`not found ${k}`) + return; } - - for(let j in node_to_extensions_map[node]) { - let extension2 = node_to_extensions_map[node][j]; - if(extension != extension2) - l.push([node, extension2]); - } - } + item.conflicts = []; + list.forEach(key => { + if(k !== key) { + item.conflicts.push([node, key]) + } + }) + }) } - } + }) - return conflict_map; + return extension_mappings; } async getMissingNodes() { @@ -1241,7 +1275,7 @@ export class CustomNodesManager { this.showLoading(); - this.conflict_mappings = await this.getConflictMappings(); + this.extension_mappings = await this.getExtensionMappings(); const mode = manager_instance.datasrc_combo.value; this.showStatus(`Loading custom nodes (${mode}) ...`);