96 lines
3 KiB
HTML
96 lines
3 KiB
HTML
<style>
|
|
.pointer-icon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.property-list {
|
|
list-style-type: none;
|
|
list-style-image: none;
|
|
padding-left: 26px;
|
|
}
|
|
|
|
.property-name {
|
|
width: 12em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.property-value {
|
|
padding: 0 0.2em;
|
|
min-width: 8em;
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
<div class="ui-widget ui-widget-content ui-corner-all" data-bind="visible: hasGraphItems" style="padding-bottom: 1ex; margin-bottom: 1ex;">
|
|
<div class="ui-widget-header">Property Graph</div>
|
|
<div style="height: 300px; width: 100%"
|
|
data-bind="flotchart: { data: flotData, options: flotOptions, hover: graphHover }"></div>
|
|
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
|
|
<div style="display: inline; float: left">
|
|
<div data-bind="button: { icons: { primary : 'ui-icon-gear' }, text: true, label: 'Settings' }, click: settings"></div>
|
|
<div data-bind="button: { icons: startIcons, text: true, label: startLabel }, click: startPause "></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" ui-widget
|
|
ui-widget-contentui-corner-all">
|
|
<div class="ui-widget-header">Property Tree</div>
|
|
<div data-bind="template: { name: 'propertytree-template', data: properties }"></div>
|
|
</div>
|
|
<script type="text/html" id="propertytree-template">
|
|
<ul class="property-list" data-bind="foreach: $data">
|
|
<li>
|
|
<span class="ui-icon pointer-icon" style="display: inline-block;"
|
|
data-bind="
|
|
css: {
|
|
'ui-icon-triangle-1-e': hasChildren,
|
|
'ui-icon-triangle-1-se': isExpanded,
|
|
'ui-icon-refresh': hasValue,
|
|
'ui-icon-blank': !(hasValue||hasChildren),
|
|
},
|
|
attr: {
|
|
title: hasValue ? 'refresh' : 'expand/collapse',
|
|
},
|
|
click: toggle,
|
|
"></span>
|
|
|
|
<span class="property-name"
|
|
data-bind="
|
|
text: indexedName,
|
|
css: {
|
|
'pointer-icon': hasChildren,
|
|
},
|
|
click: toggle,
|
|
"></span>
|
|
|
|
<span class="ui-icon ui-icon-blank" style="display: inline-block;"
|
|
data-bind="
|
|
css: {
|
|
'ui-icon-image': isPlottable,
|
|
'pointer-icon': hasValue,
|
|
},
|
|
attr: {
|
|
title: hasValue ? 'toggle plot' : '',
|
|
},
|
|
click: togglePlot,
|
|
"></span>
|
|
<span class="property-value ui-state-hover pointer-icon ui-corner-all"
|
|
data-bind="
|
|
text: value,
|
|
visible: hasValue,
|
|
click: valueEdit,
|
|
"></span>
|
|
|
|
<div data-bind="
|
|
template: {
|
|
name: 'propertytree-template',
|
|
data: children
|
|
},
|
|
visible: isExpanded
|
|
"></div>
|
|
</li>
|
|
</ul>
|
|
</script>
|
|
<script type="text/html" id="inplace-editor-template">
|
|
<input style="width: 8em" >
|
|
</script>
|