|
|
|
@ -1,11 +1,14 @@ |
|
|
|
|
var yo = require('yo-yo') |
|
|
|
|
var csjs = require('csjs-inject') |
|
|
|
|
|
|
|
|
|
// const styleguide = require('../ui/styles-guide/theme-chooser')
|
|
|
|
|
// const styles = styleguide.chooser()
|
|
|
|
|
const yo = require('yo-yo') |
|
|
|
|
const csjs = require('csjs-inject') |
|
|
|
|
|
|
|
|
|
const EventEmitter = require('events') |
|
|
|
|
|
|
|
|
|
const css = csjs` |
|
|
|
|
.pluginManager { |
|
|
|
|
padding: 10px; |
|
|
|
|
} |
|
|
|
|
` |
|
|
|
|
|
|
|
|
|
class PluginManagerComponent { |
|
|
|
|
|
|
|
|
|
constructor () { |
|
|
|
@ -14,6 +17,7 @@ class PluginManagerComponent { |
|
|
|
|
root: null, |
|
|
|
|
items: {} |
|
|
|
|
} |
|
|
|
|
this.filter = '' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
profile () { |
|
|
|
@ -40,101 +44,70 @@ class PluginManagerComponent { |
|
|
|
|
this.store.event.on('remove', (entity) => { this.reRender() }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render () { |
|
|
|
|
let activeMods = yo` |
|
|
|
|
<div id='activePlugs' class=${css.activePlugins}> |
|
|
|
|
<h3>Active Modules</h3> |
|
|
|
|
</div> |
|
|
|
|
` |
|
|
|
|
let inactiveMods = yo` |
|
|
|
|
<div id='inActivePlugs' class=${css.inactivePlugins}> |
|
|
|
|
<h3>Inactive Modules</h3> |
|
|
|
|
</div> |
|
|
|
|
` |
|
|
|
|
let searchbox = yo` |
|
|
|
|
<input id='filter_plugins' placeholder='Search'> |
|
|
|
|
` |
|
|
|
|
var rootView = yo` |
|
|
|
|
<div id='pluginManager' class=${css.plugins_settings} > |
|
|
|
|
<h2>Plugin Manager</h2> |
|
|
|
|
${searchbox} |
|
|
|
|
${activeMods} |
|
|
|
|
${inactiveMods} |
|
|
|
|
</div> |
|
|
|
|
` |
|
|
|
|
|
|
|
|
|
searchbox.addEventListener('keyup', (event) => { this.filterPlugins(event.target) }) |
|
|
|
|
|
|
|
|
|
var modulesActiveNotReq = this.store.getActives().filter(({profile}) => !profile.required) |
|
|
|
|
this.sortObject(modulesActiveNotReq) |
|
|
|
|
|
|
|
|
|
if (modulesActiveNotReq.length > 0) { |
|
|
|
|
modulesActiveNotReq.forEach((mod) => { |
|
|
|
|
activeMods.appendChild(this.renderItem(mod.profile.name)) |
|
|
|
|
}) |
|
|
|
|
activeMods.style.display = 'block' |
|
|
|
|
} else { |
|
|
|
|
activeMods.style.display = 'none' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var modulesAllNotReq = this.store.getAll().filter(({profile}) => !profile.required) |
|
|
|
|
this.sortObject(modulesAllNotReq) |
|
|
|
|
modulesAllNotReq.forEach((mod) => { |
|
|
|
|
if (!modulesActiveNotReq.includes(mod)) { |
|
|
|
|
inactiveMods.appendChild(this.renderItem(mod.profile.name)) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
if (!this.views.root) { |
|
|
|
|
this.views.root = rootView |
|
|
|
|
} |
|
|
|
|
return rootView |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
searchBox () { |
|
|
|
|
if (this.views.root) { |
|
|
|
|
return this.views.root.querySelector('#filter_plugins') |
|
|
|
|
} |
|
|
|
|
return null |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
sortObject (obj) { |
|
|
|
|
obj.sort((a, b) => { |
|
|
|
|
var textA = a.profile.name.toUpperCase() |
|
|
|
|
var textB = b.profile.name.toUpperCase() |
|
|
|
|
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0 |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderItem (item) { |
|
|
|
|
let ctrBtns |
|
|
|
|
|
|
|
|
|
const mod = this.store.getOne(item) |
|
|
|
|
if (!mod) return |
|
|
|
|
let displayName = (mod.profile.displayName) ? mod.profile.displayName : mod.profile.name |
|
|
|
|
let action = () => { |
|
|
|
|
if (this.store.isActive(item)) { |
|
|
|
|
this.appManager.deactivateOne(item) |
|
|
|
|
} else { |
|
|
|
|
this.appManager.activateOne(item) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ctrBtns = yo`<div id='${mod.profile.name}Activation'>
|
|
|
|
|
<button class='btn btn-sm btn-primary' onclick=${(event) => { action(event) }} >${this.store.isActive(item) ? 'deactivate' : 'activate'}</button> |
|
|
|
|
</div>` |
|
|
|
|
const isActive = this.store.actives.includes(mod.profile.name) |
|
|
|
|
const displayName = (mod.profile.displayName) ? mod.profile.displayName : mod.profile.name |
|
|
|
|
|
|
|
|
|
// <div id='${mod.profile.name}Activation' class="custom-control custom-switch">
|
|
|
|
|
// <input type="checkbox" class="custom-control-input" id="customSwitch1">
|
|
|
|
|
// <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
|
|
|
|
|
// </div>
|
|
|
|
|
const input = isActive |
|
|
|
|
? yo`<input onchange="${_ => this.appManager.deactivateOne(item)}" checked type="checkbox" class="form-check-input">` |
|
|
|
|
: yo`<input onchange="${_ => this.appManager.activateOne(item)}" type="checkbox" class="form-check-input">` |
|
|
|
|
|
|
|
|
|
return yo` |
|
|
|
|
<div id=${mod.profile.name} title="${item}" class="card ${css.plugin}" > |
|
|
|
|
<h3>${displayName}</h3> |
|
|
|
|
${mod.profile.description} |
|
|
|
|
${ctrBtns} |
|
|
|
|
<article class="plugin" id="${mod.profile.name}" title="${item}" > |
|
|
|
|
<div id="${mod.profile.name}Activation" class="form-check row align-items-center"> |
|
|
|
|
${input} |
|
|
|
|
<h6 class="form-check-label">${displayName}</h6> |
|
|
|
|
</div> |
|
|
|
|
<p>${mod.profile.description}</p> |
|
|
|
|
</article> |
|
|
|
|
` |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render () { |
|
|
|
|
// Filtering helpers
|
|
|
|
|
const isFiltered = ({profile}) => profile.name.toLowerCase().includes(this.filter) |
|
|
|
|
const isNotRequired = ({profile}) => !profile.required |
|
|
|
|
const sortByName = (a, b) => { |
|
|
|
|
const nameA = a.profile.name.toUpperCase() |
|
|
|
|
const nameB = b.profile.name.toUpperCase() |
|
|
|
|
return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Filter all active and inactive modules that are not required
|
|
|
|
|
const { actives, inactives } = this.store.getAll() |
|
|
|
|
.filter(isFiltered) |
|
|
|
|
.filter(isNotRequired) |
|
|
|
|
.sort(sortByName) |
|
|
|
|
.reduce(({actives, inactives}, {profile}) => { |
|
|
|
|
return this.store.actives.includes(profile.name) |
|
|
|
|
? { actives: [...actives, profile.name], inactives } |
|
|
|
|
: { inactives: [...inactives, profile.name], actives } |
|
|
|
|
}, { actives: [], inactives: [] }) |
|
|
|
|
|
|
|
|
|
const activeTile = actives.length !== 0 |
|
|
|
|
? yo`<h3>Active Modules</h3>` |
|
|
|
|
: '' |
|
|
|
|
const inactiveTile = inactives.length !== 0 |
|
|
|
|
? yo`<h3>Inactive Modules</h3>` |
|
|
|
|
: '' |
|
|
|
|
|
|
|
|
|
const rootView = yo` |
|
|
|
|
<section id="${css.pluginManager}"> |
|
|
|
|
<h2>Plugin Manager</h2> |
|
|
|
|
<hr/> |
|
|
|
|
<div class="form-group"> |
|
|
|
|
<input onkeyup="${e => this.filterPlugins(e)}" class="form-control" placeholder='Search'> |
|
|
|
|
</div> |
|
|
|
|
${activeTile} |
|
|
|
|
${actives.map(name => this.renderItem(name))} |
|
|
|
|
${inactiveTile} |
|
|
|
|
${inactives.map(name => this.renderItem(name))} |
|
|
|
|
</section> |
|
|
|
|
` |
|
|
|
|
if (!this.views.root) this.views.root = rootView |
|
|
|
|
return rootView |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
reRender () { |
|
|
|
@ -144,59 +117,10 @@ class PluginManagerComponent { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
filterPlugins (target) { |
|
|
|
|
if (!target) return |
|
|
|
|
let filterOn = target.value.toUpperCase() |
|
|
|
|
var nodes = this.views.root.querySelectorAll(`.${css.plugin}`) |
|
|
|
|
nodes.forEach((node) => { |
|
|
|
|
let h = node.querySelector('h3') |
|
|
|
|
let txtValue = h.textContent || h.innerText |
|
|
|
|
if (txtValue.toLowerCase().indexOf(filterOn.toLowerCase()) !== -1) { |
|
|
|
|
node.style.display = 'block' |
|
|
|
|
} else { |
|
|
|
|
node.style.display = 'none' |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
filterPlugins ({ target }) { |
|
|
|
|
this.filter = target.value.toLowerCase() |
|
|
|
|
this.reRender() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
module.exports = PluginManagerComponent |
|
|
|
|
|
|
|
|
|
const css = csjs` |
|
|
|
|
.plugins_settings h2 { |
|
|
|
|
font-size: 1em; |
|
|
|
|
border-bottom: 1px red solid; |
|
|
|
|
padding: 10px 20px; |
|
|
|
|
font-size: 10px; |
|
|
|
|
padding: 10px 20px; |
|
|
|
|
text-transform: uppercase; |
|
|
|
|
font-weight: normal; |
|
|
|
|
background-color: white; |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
} |
|
|
|
|
.plugin { |
|
|
|
|
margin: 0; |
|
|
|
|
margin-bottom: 2%; |
|
|
|
|
padding: 0px 20px 10px; |
|
|
|
|
} |
|
|
|
|
.plugin h3 { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
margin-top: 9px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.plugin button { |
|
|
|
|
font-size: 10px; |
|
|
|
|
} |
|
|
|
|
.activePlugins { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.inactivePlugins { |
|
|
|
|
} |
|
|
|
|
.plugins_settings input { |
|
|
|
|
margin: 10px; |
|
|
|
|
} |
|
|
|
|
.hideIt { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
` |
|
|
|
|