mirror of https://github.com/MISP/MISP
chg: [UI] WIP - generic_picker added templating system for select
optionspull/4024/head
mokaddem
parent
5b7fff5df2
commit
7d6f6b1300
|
|
@ -110,13 +110,21 @@ class GalaxiesController extends AppController
|
|||
$items[__('All clusters')] = "/galaxies/selectCluster/" . h($target_id) . '/' . h($target_type) . '/0';
|
||||
foreach ($galaxies as $galaxy) {
|
||||
if ($galaxy['Galaxy']['id'] != -1) {
|
||||
$items[h($galaxy['Galaxy']['name'])] = "/galaxies/selectCluster/" . h($target_id) . '/' . h($target_type) . '/' . h($galaxy['Galaxy']['id']);
|
||||
} else { // attackMatrix
|
||||
$items[h($galaxy['Galaxy']['name'])] = array(
|
||||
'functionName' => "getMitreMatrixPopup('" . h($target_id) . "/" . h($target_type) . "')",
|
||||
'isPill' => true
|
||||
$items[$galaxy['Galaxy']['name']] = array(
|
||||
'value' => "/galaxies/selectCluster/" . h($target_id) . '/' . h($target_type) . '/' . h($galaxy['Galaxy']['id']),
|
||||
'template' => '<it class="fa fa-{{=it.icon}}" style="margin-right: 5px;"></it>{{=it.name}}',
|
||||
'templateData' => array(
|
||||
'icon' => h($galaxy['Galaxy']['icon']),
|
||||
'name' => h($galaxy['Galaxy']['name'])
|
||||
)
|
||||
);
|
||||
} else { // attackMatrix
|
||||
$items[$galaxy['Galaxy']['name']] = array(
|
||||
'functionName' => "getMitreMatrixPopup('" . h($target_id) . "/" . h($target_type) . "')",
|
||||
'isPill' => true,
|
||||
'img' => "/img/mitre-attack-icon.ico",
|
||||
// 'icon' => 'fa-filter'
|
||||
);
|
||||
// getMitreMatrixPopup('echo h($target_id) . "/" . h($target_type);')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,8 @@
|
|||
$addTagButton = ' ';
|
||||
if ($full) {
|
||||
$addTagButton = sprintf(
|
||||
'<button id="addTagButton" class="btn btn-inverse noPrint" style="line-height:10px; padding: 4px 4px;" onClick="popoverPopup(this, %s);">+</button>',
|
||||
'<button id="addTagButton" class="btn btn-inverse noPrint" style="line-height:10px; padding: 4px 4px;" title="%s" onClick="popoverPopup(this, %s);">+</button>',
|
||||
__("Add tag"),
|
||||
sprintf("'%s/attribute', 'tags', 'selectTaxonomy'", h($attributeId))
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
<?php
|
||||
if ($isSiteAdmin || ($mayModify && $isAclTagger)):
|
||||
?>
|
||||
<span class="btn btn-inverse noPrint addGalaxy" data-target-type="<?php echo h($target_type);?>" data-target-id="<?php echo h($target_id); ?>" role="button" tabindex="0" aria-label="<?php echo __('Add new cluster');?>" style="padding: 1px 5px !important;font-size: 12px !important;"><?php echo __('Add');?></span>
|
||||
<span class="btn btn-inverse noPrint addGalaxy" data-target-type="<?php echo h($target_type);?>" data-target-id="<?php echo h($target_id); ?>" role="button" tabindex="0" aria-label="<?php echo __('Add new cluster');?>" title="<?php echo __('Add new cluster');?>" style="padding: 1px 5px !important;font-size: 12px !important;"><?php echo __('Add');?></span>
|
||||
<?php
|
||||
endif;
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
),
|
||||
'chosen_options' => array(
|
||||
'width' => '400px',
|
||||
'search_contains' => true, // matches starting from anywhere within a word
|
||||
//'no_results_text' => '', // set to replace the default no result text after filtering
|
||||
//'max_selected_options' => 'Infinity' // set to replace the max selected options
|
||||
'disable_search_threshold' => 10,
|
||||
|
|
@ -56,6 +57,15 @@
|
|||
} else {
|
||||
$additionalData = json_encode(array());
|
||||
}
|
||||
|
||||
if (isset($param['template'])) {
|
||||
$option_html .= ' data-template=' . base64_encode($param['template']);
|
||||
}
|
||||
if (isset($param['templateData'])) {
|
||||
$option_html .= ' data-templatedata=' . base64_encode(json_encode($param['templateData']));
|
||||
}
|
||||
debug($param['templateData']);
|
||||
|
||||
$option_html .= ' data-additionaldata=' . $additionalData;
|
||||
|
||||
if (in_array('disabled', $param)) {
|
||||
|
|
@ -74,7 +84,7 @@
|
|||
return $option_html;
|
||||
}
|
||||
|
||||
function add_link_params($name, $param, $defaults = array()) {
|
||||
function add_link_params($name, $param, $defaults=array()) {
|
||||
$param_html = ' ';
|
||||
if (is_array($param)) { // add data as param
|
||||
if (isset($param['functionName'])) {
|
||||
|
|
@ -101,6 +111,21 @@
|
|||
}
|
||||
return $param_html;
|
||||
}
|
||||
|
||||
function add_pill($name, $param, $defaults=array()) {
|
||||
$pill_html = '<li>';
|
||||
$pill_html .= '<a href="#" data-toggle="pill" class="pill-pre-picker"';
|
||||
$pill_html .= ' ' . add_link_params($name, $param, $defaults);
|
||||
$pill_html .= '>';
|
||||
if (isset($param['img'])) {
|
||||
$pill_html .= '<img src="' . $param['img'] . '" style="margin-right: 5px; height: 14px;">';
|
||||
} else if (isset($param['icon'])) {
|
||||
$pill_html .= '<span class="fa ' . $param['icon'] . '" style="margin-right: 5px;"></span>';
|
||||
}
|
||||
$pill_html .= h($name) . '</a>';
|
||||
$pill_html .= '</li>';
|
||||
return $pill_html;
|
||||
}
|
||||
?>
|
||||
|
||||
<script>
|
||||
|
|
@ -120,6 +145,32 @@ function setupChosen(id) {
|
|||
fetchRequestedData($select);
|
||||
});
|
||||
}
|
||||
|
||||
// hack to add template into the div
|
||||
$elem.on('chosen:showing_dropdown keyup change', function() {
|
||||
var $chosenContainer = $elem.parent().find('.chosen-container');
|
||||
$chosenContainer
|
||||
.find('.chosen-results .active-result, .chosen-single span')
|
||||
.html(function() {
|
||||
var $item = $(this);
|
||||
var index = $item.data('option-array-index');
|
||||
var $option;
|
||||
if (index !== undefined) {
|
||||
$option = $elem.find('option:eq(' + index + ')');
|
||||
} else {
|
||||
var text = $item.text();
|
||||
$option = $elem.find('option:contains(' + text + ')');
|
||||
}
|
||||
var template = $option.data('template');
|
||||
if (template !== undefined && template !== '') {
|
||||
var template = atob(template);
|
||||
var temp = doT.template(template);
|
||||
var templateData = JSON.parse(atob($option.data('templatedata')));
|
||||
var res = temp(templateData);
|
||||
return res;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Used to keep the popover arrow at the correct place regardless of the popover content
|
||||
|
|
@ -143,13 +194,16 @@ function fetchRequestedData(clicked) {
|
|||
beforeSend: function() {
|
||||
var loadingHtml = '<div style="height: 40px; width: 40px; left: 50%; position: relative;"><div class="spinner" style="height: 30px; width: 30px;"></div></div>';
|
||||
var $arrow = $clicked.closest('div.popover').find('div.arrow');
|
||||
var $wrapper = $clicked.closest('div').find('div.generic-picker-wrapper');
|
||||
syncPopoverArrow($arrow, $wrapper, loadingHtml)
|
||||
},
|
||||
success:function (data, textStatus) {
|
||||
$wrapper = $clicked.closest('div').find('div.generic-picker-wrapper');
|
||||
var $arrow = $clicked.closest('div.popover').find('div.arrow');
|
||||
syncPopoverArrow($arrow, $wrapper, data)
|
||||
},
|
||||
error:function() {
|
||||
$wrapper = $clicked.closest('div').find('div.generic-picker-wrapper');
|
||||
$wrapper.html('<div class="alert alert-error" style="margin-bottom: 0px;">Something went wrong - the queried function returned an exception. Contact your administrator for further details (the exception has been logged).</div>');
|
||||
},
|
||||
url: $clicked.data('endpoint')
|
||||
|
|
@ -198,11 +252,7 @@ function submitFunction(clicked, callback) {
|
|||
<ul class="nav nav-pills">
|
||||
<?php foreach ($items as $name => $param): ?>
|
||||
<?php if (isset($param['isPill']) && $param['isPill']): ?>
|
||||
<li>
|
||||
<a href="#" data-toggle="pill" class="pill-pre-picker" <?php echo add_link_params($name, $param, $defaults); ?> >
|
||||
<?php echo h($name); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php echo add_pill($name, $param, $defaults); ?>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
|
@ -210,20 +260,14 @@ function submitFunction(clicked, callback) {
|
|||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
setTimeout(function() { // let time for the popup to show
|
||||
setupChosen("<?php echo $select_id; ?>");
|
||||
}, 10);
|
||||
setupChosen("<?php echo $select_id; ?>");
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php else: ?>
|
||||
<ul class="nav nav-pills">
|
||||
<?php foreach ($items as $name => $param): ?>
|
||||
<li>
|
||||
<a href="#" data-toggle="pill" class="pill-pre-picker" <?php echo add_link_params($name, $param, $defaults); ?> >
|
||||
<?php echo h($name); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php echo add_pill($name, $param, $defaults); ?>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,6 @@
|
|||
* Generic pre select picker from JSON
|
||||
* Required: $choices
|
||||
*/
|
||||
|
||||
/** Config **/
|
||||
$select_threshold = 6;
|
||||
|
||||
/** Global **/
|
||||
$use_select = count($choices) > $select_threshold;
|
||||
?>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
echo $this->Html->script('jquery-ui'); // UI support
|
||||
echo $this->Html->css('chosen.min');
|
||||
echo $this->Html->script('chosen.jquery.min');
|
||||
echo $this->Html->script('doT');
|
||||
?>
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -909,21 +909,26 @@ a.pill-pre-picker {
|
|||
}
|
||||
|
||||
.generic-picker-wrapper {
|
||||
padding: 7px;
|
||||
margin-top: 3px;
|
||||
background-color: #65737e32;
|
||||
padding: 7px;
|
||||
margin-top: 3px;
|
||||
background-color: #65737e32;
|
||||
border: 1px #65737ec8 solid;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.generic-picker-wrapper:before {
|
||||
content: '';
|
||||
margin-right: 5px;
|
||||
margin-left: 2px;
|
||||
border-left: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
height: 10px;
|
||||
width: 5px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
content: '';
|
||||
margin-right: 5px;
|
||||
margin-left: 2px;
|
||||
border-left: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
height: 10px;
|
||||
width: 5px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.active-result .fa:before {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.gray_out {
|
||||
|
|
|
|||
Loading…
Reference in New Issue