ManuelW/octoprint-customControl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjusted Layout, Bug Fixing, Added Script Command

Browse Source
This commit is contained in:
Marc
2015-04-24 14:49:17 +02:00
parent 71e04c3673
commit 6227e12dcd
6 changed files with 306 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
octoprint_customControl/templates/octoprint_customControl.jinja2
View File

@ -4,7 +4,7 @@
</div>
<div class="modal-body">
<form class="form-horizontal" data-bind="with: element">
<!-- ko if: $root.type() == "command" || $root.type() == "container" -->
<!-- ko if: $root.type() == "command" || $root.type() == "script" || $root.type() == "container" -->
<div class="control-group">
<label class="control-label">{{ _('Name') }}</label>
<div class="controls">
@ -21,11 +21,12 @@
</div>
<!-- ko if: name && name() != "" -->
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: collapsable"></input>{{ _('Make Collapsable') }}</label>
<label class="control-label"><input type="checkbox" data-bind="checked: collapsed"></input>{{ _('Make Collapsed') }}</label>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $root.type() == "command" || $root.type() == "script" -->
<!-- ko if: $root.type() == "command" -->
<div class="control-group">
<label class="control-label">{{ _('Commands') }}</label>
@ -33,9 +34,32 @@
<textarea style="width: 97%; height: auto" data-bind="value: commands"></textarea>
</div>
</div>
<!-- /ko -->
<!-- ko if: $root.type() == "script" -->
<div class="control-group">
<label class="control-label">{{ _('Script') }}</label>
<div class="controls">
<input style="width: 97%" data-bind="value: script"></input>
</div>
</div>
<!-- /ko -->
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: $parent.useInputs"></input>{{ _('Use Inputs') }}</label>
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useConfirm"></input>{{ _('Use Confirmation') }}</label>
</div>
<!-- ko if: $root.useConfirm() -->
<div class="control-group">
<label class="control-label">{{ _('Message') }}</label>
<div class="controls">
<input style="width: 97%" data-bind="value: confirm"></input>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $root.type() == "command" || $root.type() == "script"-->
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useInputs"></input>{{ _('Use Inputs') }}</label>
</div>
<!-- ko if: $root.useInputs -->
<div class="control-group">
@ -56,11 +80,14 @@
<div class="row-fluid" style="margin-bottom: 5px">
<div data-bind="css: $root.span('name')"><input class="span12" data-bind="value: name"></input></div>
<div data-bind="css: $root.span('parameter')"><input class="span12" data-bind="value: parameter"></input></div>
<!-- ko ifnot: slider -->
<div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div>
<!-- /ko -->
<!-- ko if: slider -->
<div class="span2"><input class="span12" data-bind="value: slider.min"></input></div>
<div class="span2"><input class="span12" data-bind="value: slider.max"></input></div>
<div class="span1"><input class="span12" data-bind="value: slider.step"></input></div>
<div class="span2"><input type="number" class="span12" data-bind="value: defaultValue"></input></div>
<div class="span2"><input type="number" class="span12" data-bind="value: slider.min"></input></div>
<div class="span2"><input type="number" class="span12" data-bind="value: slider.max"></input></div>
<div class="span1"><input type="number" class="span12" data-bind="value: slider.step"></input></div>
<div class="span1"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
<!-- /ko -->
<div class="span1" data-bind="ifnot: slider, css: { 'offset5': $root.hasSlider() }"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
@ -74,7 +101,11 @@
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $root.type() == "output" -->
<!-- ko if: $root.type() == "command" -->
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useOutput"></input>{{ _('Use Output') }}</label>
</div>
<!-- ko if: $root.type() == "output" || ($root.type() == "command" && $root.useOutput()) -->
<div class="control-group">
<label class="control-label">{{ _('Regex') }}</label>
<div class="controls">
@ -94,6 +125,7 @@
</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.parent && $data.parent.layout && $data.parent.layout() == 'horizontal_grid' -->
<div class="control-group">

85
octoprint_customControl/templates/octoprint_customControl_settings.jinja2
View File

@ -36,6 +36,7 @@
<ul class="dropdown-menu">
<li><a href="#" cmd="createContainer">{{ _('Container') }}</a></li>
<li><a href="#" cmd="createCommand">{{ _('Command') }}</a></li>
<li><a href="#" cmd="createScript">{{ _('Script Command') }}</a></li>
<li><a href="#" cmd="createOutput">{{ _('Output') }}</a></li>
</ul>
</li>
@ -45,78 +46,56 @@
</ul>
<!-- Templates for custom controls -->
<script type="text/html" id="settingsCustomControls_containerTemplate">
<div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal' -->
<div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section custom_section_horizontal_grid">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate_accordion">
<div class="custom_container accordion-group" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': ($parent && $parent.layout && $parent.layout() == 'horizontal') }">
<!-- ko if: name -->
<div class="accordion-heading">
<a class="accordion-toggle" style="display: block; text-decoration: none" data-bind="style: { 'cursor': collapsable() ? '' : 'default' }, attr: { 'data-target': collapsable() ? '#toggle_' + id() : '', 'data-toggle': collapsable() ? 'collapse' : '', 'onclick': collapsable() ? '$(this).children().toggleClass(\'icon-caret-down icon-caret-right\')' : '' }">
<h1 data-bind="text: name, css: { 'icon-caret-down': collapsable }"></h1>
</a>
</div>
<!-- /ko -->
<!-- ko if: layout -->
<div class="accordion-body" data-bind="attr: { 'id': 'toggle_' + id() }, css: { 'collapse in': collapsable }">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal' -->
<div class="custom_section custom_section_horizontal accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section custom_section_horizontal_grid accordion-inner">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
<script type="text/html" id="settingsCustomControls_containerTemplate_nameless">
<div class="custom_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
<!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate_collapsable">
<div class="custom_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
<h1 onclick="$(this).children().first().toggleClass('icon-caret-down icon-caret-right').parent().next().slideToggle('fast')"><i data-bind="css: {'icon-caret-down': !collapsed(), 'icon-caret-right': collapsed()}"></i> <span data-bind="text: name"></span></h1>
<!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal' -->
<div class="custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section_horizontal_grid" data-bind="css: {hide: collapsed() && name() != ''}">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate">
<form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') && defaultValue() } --><!-- /ko -->
</form>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_input">
<!-- ko foreach: input -->
<div class="form-inline">
<label style="cursor: default" data-bind="text: name"></label>
<!-- ko if: slider -->
<input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step()}">
<input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step(), enabled: false }">
<!-- /ko -->
<!-- ko ifnot: slider -->
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue">
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue, disable: true">
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_output">
<label style="cursor: default" data-bind="text: defaultValue"></label>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_command">
<button class="btn" data-bind="text: name"></button>
<button class="btn" data-bind="text: name" onclick="event.preventDefault()"></button>
</script>
<!-- End of templates for custom controls -->