cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [genericElements:index_table] Added close button for stat widget config UI

pull/93/head
Sami Mokaddem 2021-11-23 13:49:34 +01:00
parent ef91cfcee3
commit 025b551e77
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
2 changed files with 61 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
templates/element/genericElements/IndexTable/Statistics/index_statistic_field_amount.php
View File

@ -43,7 +43,6 @@ foreach ($statistics['usage'] as $scope => $graphData) {
'class' => ['btn-statistics-pie-configurator-' . $seedPiechart],
'params' => [
'data-bs-toggle' => 'popover',
'data-bs-title' => __('Configure chart'),
]
])
);
@ -66,32 +65,58 @@ foreach ($statistics['usage'] as $scope => $graphData) {
<script>
$(document).ready(function() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('.btn-statistics-pie-configurator-<?= $seedPiechart ?>'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
let popoverTriggerList = [].slice.call(document.querySelectorAll('.btn-statistics-pie-configurator-<?= $seedPiechart ?>'))
let popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
const popover = new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
sanitize: false,
title: () => {
return '<div class="d-flex align-items-center justify-content-between"> \
<?= __('Configure chart') ?> \
<button type = "button" class="btn-xs btn-close" aria-label="Close"></button> \
</div>'
},
content: () => {
return '<div class="popover-form-container"> \
<div class="input-group flex-nowrap"> \
<span class="input-group-text"><?= __('Amount') ?></span> \
<input type="number" min="1" class="form-control entry-amount" placeholder="7" aria-label="<?= __('Days') ?>" value="<?= h($statistics_pie_amount) ?>"> \
</div> \
<div class="form-check"> \
<input class="form-check-input cb-include-remaining" type="checkbox" value="" id="checkbox-include-remaining" <?= $statistics_pie_include_remaining ? 'checked' : '' ?>> \
<label class="form-check-label" for="checkbox-include-remaining"> \
<?= __('Merge skipped entries') ?> \
</label> \
</div> \
<div class="form-check"> \
<input class="form-check-input cb-ignore-null" type="checkbox" value="" id="checkbox-ignore-null" <?= $statistics_pie_ignore_null ? 'checked' : '' ?>> \
<label class="form-check-label" for="checkbox-ignore-null"> \
<?= __('Ignore NULL values') ?> \
</label> \
</div> \
<button class="btn btn-primary" type="button" onclick="statisticsPieConfigurationRedirect(this)"><?= __('Update chart') ?> </button> \
</div>'
<div class="input-group flex-nowrap"> \
<span class="input-group-text"><?= __('Amount') ?></span> \
<input type="number" min="1" class="form-control entry-amount" placeholder="7" aria-label="<?= __('Days') ?>" value="<?= h($statistics_pie_amount) ?>"> \
</div> \
<div class="form-check"> \
<input class="form-check-input cb-include-remaining" type="checkbox" value="" id="checkbox-include-remaining" <?= $statistics_pie_include_remaining ? 'checked' : '' ?>> \
<label class="form-check-label" for="checkbox-include-remaining"> \
<?= __('Merge skipped entries') ?> \
</label> \
</div> \
<div class="form-check"> \
<input class="form-check-input cb-ignore-null" type="checkbox" value="" id="checkbox-ignore-null" <?= $statistics_pie_ignore_null ? 'checked' : '' ?>> \
<label class="form-check-label" for="checkbox-ignore-null"> \
<?= __('Ignore NULL values') ?> \
</label> \
</div> \
<button class="btn btn-primary" type="button" onclick="statisticsPieConfigurationRedirect(this)"><?= __('Update chart') ?> </button> \
</div>'
}
})
popoverTriggerEl.addEventListener('shown.bs.popover', function(evt) {
const popover = bootstrap.Popover.getInstance(this)
const popoverEl = popover.getTipElement()
const popoverBtnCloseEl = popoverEl.querySelector('.popover-header button.btn-close')
popoverBtnCloseEl.addEventListener('click', function() {
popover.hide()
})
})
return popover
})
let popoverCloseBtnlist = [].slice.call(document.querySelectorAll('.popover .popover-header button.btn-close'))
popoverCloseBtnlist.map(function(popoverBtnCloseEl) {
return popoverBtnCloseEl.addEventListener('click', function() {
const popoverEl = this.closest('.popover')
const popover = bootstrap.Popover.getInstance(popoverEl)
if (popover !== null) {
popover.hide()
}
})
})

15
templates/element/genericElements/IndexTable/Statistics/index_statistic_timestamp.php
View File

@ -40,7 +40,6 @@ $panelControlHtml = sprintf(
'class' => ['btn-statistics-days-configurator-' . $seed,],
'params' => [
'data-bs-toggle' => 'popover',
'data-bs-title' => __('Set statistics spanning days'),
]
])
);
@ -103,6 +102,12 @@ $card = $this->Bootstrap->card([
container: 'body',
html: true,
sanitize: false,
title: () => {
return '<div class="d-flex align-items-center justify-content-between"> \
<?= __('Set spanning window') ?> \
<button type = "button" class="btn-xs btn-close" aria-label="Close"></button> \
</div>'
},
content: () => {
return '<div class="input-group flex-nowrap"> \
<span class="input-group-text" id="addon-wrapping-<?= $seed ?>"><?= __('Days') ?></span> \
@ -111,6 +116,14 @@ $card = $this->Bootstrap->card([
</div>'
}
})
document.querySelector('.btn-statistics-days-configurator-<?= $seed ?>').addEventListener('shown.bs.popover', function(evt) {
const popover = bootstrap.Popover.getInstance(this)
const popoverEl = popover.getTipElement()
const popoverBtnCloseEl = popoverEl.querySelector('.popover-header button.btn-close')
popoverBtnCloseEl.addEventListener('click', function() {
popover.hide()
})
})
})
function statisticsDaysRedirect(clicked) {