Skip to content

Commit

Permalink
removed bootstrap from registry view
Browse files Browse the repository at this point in the history
  • Loading branch information
lb-actoron committed Mar 7, 2022
1 parent 6665cfc commit 5645fa4
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 42 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,38 @@ class RegistryViewElement extends CidElement
self.getSubscription("Platforms").table.insert({headings: ["","",""]})
self.getSubscription("Queries").table.insert({headings: ["","",""]})

function initAcc(elem, option)
{
self.shadowRoot.addEventListener('click', function (e)
{
if(!e.target.matches(elem+' .a-btn'))
{
return;
}
else
{
if(!e.target.parentElement.classList.contains('active'))
{
if(option==true)
{
var elems = self.shadowRoot.querySelectorAll(elem +' .a-container');
Array.prototype.forEach.call(elems, function (e)
{
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}
else
{
e.target.parentElement.classList.remove('active');
}
}
});
}

initAcc('.accordion', true);

//self.initready = true;
self.subscribe();
}
Expand Down Expand Up @@ -384,55 +416,47 @@ class RegistryViewElement extends CidElement
return super.requestUpdate();
}

/*static get styles()
{
var ret = [];
if(super.styles!=null)
ret.push(super.styles);
ret.push(
css`
`);
return ret;
}*/

asyncRender()
{
return html`
<div id="tab"></div>
<div id="panel">
<label for="global">${this.app.lang.t('Show only global services and queries')}</label>
<input type="checkbox" id="global" .checked="${this.global}" @click="${(e) => {this.global = e.target.checked;}}">
<!--<lit-datatable .data="${this.services}" .conf="${[{ property: 'type', header: 'Service Type', hidden: false }, { property: 'providerId.name', header: 'Provided By', hidden: false }]}"></lit-datatable>-->
<div id="panel" class="container-fluid m-0 p-0">
<div>
<input type="checkbox" id="global" .checked="${this.global}" @click="${(e) => {this.global = e.target.checked;}}">
<label for="global">${this.app.lang.t('Show only global services and queries')}</label>
</div>
<div id="accordion">
<div class="card m-0">
<div class="card-header">
<h4 class="card-link" data-toggle="collapse" href="#collapseOne">${this.app.lang.t('Services')}</h4>
<div class="accordion">
<div class="a-container">
<h4 class="a-btn">${this.app.lang.t('Services')}</h4>
<div class="a-panel">
<table id="tableservices" class="${this.getSubscription("Services")?'': 'down'}"></table>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
<table id="tableservices" class="${this.getSubscription("Services")?'': 'down'}">
</table>
</div>
</div>
</div>
<div class="card m-0">
<div class="card-header">
<h4 class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">${this.app.lang.t('Platforms')}</h4>
</div>
<div class="a-container">
<h4 class="a-btn">${this.app.lang.t('Platforms')}</h4>
<div class="a-panel">
<table id="tableplatforms" class="${this.getSubscription("Platforms").connected?'': 'down'}"></table>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
<table id="tableplatforms" class="${this.getSubscription("Platforms").connected?'': 'down'}">
</table>
</div>
</div>
</div>
<div class="card m-0">
<div class="card-header">
<h4 class="collapsed card-link" data-toggle="collapse" href="#collapseThree">Queries</h4>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
<table id="tablequeries" class="${this.getSubscription("Queries")?'': 'down'}">
</table>
</div>
</div>
<div class="a-container">
<h4 class="a-btn">${this.app.lang.t('Queries')}</h4>
<div class="a-panel">
<table id="tablequeries" class="${this.getSubscription("Queries")?'': 'down'}"></table>
</div>
</div>
</div>
</div>
</div>
</div>
`;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -414,3 +414,37 @@ jadex-app {
display: flex;
height: 100%;
}


/* Panel style */
.accordion .a-container .a-panel {
width: 100%;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}

/* Panel style when active */
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
height: auto;
max-height: 500px;
}

.a-btn {
margin: 0;
position: relative;
padding: 1em 0 1em 0.5em;
width: 100%;
font-weight: 400;
display: block;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease-in-out;
border: solid 1px #DFDFDF;
background-color: #F7F7F7;
}

0 comments on commit 5645fa4

Please sign in to comment.