owl-bt/src/client/app/tree/treeItemDetails/treeItemDetails.html

owl-bt is editor for Behavior trees. It has been inspired by Unreal engine behavior trees in a way, that it supports special node items like decorators and services. This makes trees smaller and much more readable.

<div class="node-item-details">
  <div ng-show="hasSelectedItem()">
    <div ng-if="isInvalidDesc()">
      Error: Missing descriptor in project file
    </div>
    <form name="form" novalidate>
      <fieldset>
        <legend>Base properties</legend>
        <div ng-controller="ItemBasePropertyEditorCtrl as svc">
          <label>Label</label><input class="form-control" ng-model="svc.label"
            ng-model-options="{ getterSetter: true, updateOn: 'blur' }"></input>
          <label>Comment</label><textarea class="form-control" ng-model="svc.comment"
            ng-model-options="{ getterSetter: true, updateOn: 'blur' }"></textarea>
        </div>

        <div ng-if="selIsDecorator()" ng-controller="DecoratorBasePropertyEditorCtrl as dec">
          <div class="checkbox"><label><input type="checkbox" ng-model="dec.inverseCheckCondition"
                ng-model-options="{ getterSetter: true }"></input>Inverse check condition</label></div>
          <div class="checkbox"><label><input type="checkbox" ng-model="dec.periodic"
                ng-model-options="{ getterSetter: true }"></input>Periodic check</label></div>
        </div>
        <div ng-if="selIsService()" ng-controller="ServiceBasePropertyEditorCtrl as svc">
          <div class="form-group">
            <label>Time Between Ticks</label><input type="number" class="form-control" ng-model="svc.timeBetweenTicks"
              ng-model-options="{ getterSetter: true, updateOn: 'blur' }"></input>
          </div>
          <div class="form-group">
            <label>First Tick Time</label><input type="number" class="form-control" ng-model="svc.firstTickTime"
              ng-model-options="{ getterSetter: true, updateOn: 'blur' }"></input>
          </div>
        </div>
      </fieldset>
      <fieldset ng-if="!isInvalidDesc()">
        <legend>Custom properties</legend>
        <property-editor-list></property-editor-list>
      </fieldset>
    </form>
  </div>
  <div ng-show="!hasSelectedItem()" class="tree-item-details_no-sel">
    Select a node in the tree view
  </div>
</div>