features.html

<!--
  ~ Copyright (c) 2022 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0
  ~
  ~ SPDX-License-Identifier: EPL-2.0
  -->
<h5 data-bs-toggle="collapse" data-bs-target="#collapseFeatures">
    Features <span class="badge badge-info" id="featureCount"></span></h5>
<hr />
<div class="collapse show" id="collapseFeatures">
    <div class="row resizable_pane" style="height:500px;">
        <div class="col-md-4 resizable_flex_column">
            <div class="input-group input-group-sm mb-1 mt-1">
                <label class="input-group-text">FeatureId</label>
                <input type="text" class="form-control" id="theFeatureId">
                <button class="btn btn-outline-secondary btn-sm" id="createFeature">
                    <i class="bi bi-plus-square"></i>
                </button>
                <button class="btn btn-outline-secondary btn-sm" id="deleteFeature">
                    <i class="bi bi-trash3"></i>
                </button>
            </div>
            <div class="table-wrap">
                <table class="table table-striped table-hover table-sm">
                    <tbody id="featuresTable"></tbody>
                </table>
            </div>
        </div>
        <div class="col-md-8 resizable_flex_column">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabCrudFeature">Feature Details</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabMessage2Feature">Message to Feature</a>
                </li>
            </ul>
            <div class="tab-content" style="flex-grow: 1;">
                <div class="tab-pane container active no-margin" id="tabCrudFeature">
                    <div class="resizable_flex_column">
                        <div class="input-group input-group-sm mb-1 mt-1">
                            <label class="input-group-text">Definition</label>
                            <input type="text" class="form-control" id="featureDefinition"></input>
                            <button class="btn btn-outline-secondary btn-sm" id="putFeature">update</button>
                        </div>
                        <div class="input-group input-group-sm" style="flex-grow: 1; display: flex;">
                            <label class="input-group-text">Properties<br>and<br>Desired<br>Properties</label>
                            <div class="ace_container" style="flex-grow: 1;">
                                <div class="script_editor" id="featurePropertiesEditor"></div>
                            </div>
                            <div class="ace_container" style="flex-grow: 1;">
                                <div class="script_editor" id="featureDesiredPropertiesEditor"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane container fade no-margin" id="tabMessage2Feature">
                    <div class="resizable_flex_column">
                        <div class="input-group input-group-sm mb-1 mt-1">
                            <label class="input-group-text">Subject and Timeout</label>
                            <input type="text" class="form-control" id="messageFeatureSubject"></input>
                            <input type="number" class="form-control form-control-sm" id="messageTimeout"
                                value="10"></input>
                            <button class="btn btn-outline-secondary btn-sm" id="messageFeature">send</button>
                        </div>
                        <div class="input-group input-group-sm" style="flex-grow: 1; display: flex;">
                            <label class="input-group-text">Payload<br>and<br>Response</label>
                            <textarea class="form-control form-control-sm" style="resize:none; flex-grow: 1;"
                                spellcheck="false" id="messageFeaturePayload">{}</textarea>
                            <textarea class="form-control form-control-sm" style="resize:none; flex-grow: 1;"
                                spellcheck="false" id="messageFeatureResponse"></textarea>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>