hal/hal-core/resources/web/trigger.tmpl

<h1 class="page-header">
    Triggers

    <form class="pull-right" method="POST">
        <button type="submit" class="btn btn-default" name="action" value="create_flow">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
    </form>
</h1>


{{#flows}}
<div class="col-md-12">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading clearfix" style="padding: 4px 15px;">
            <b class="panel-title">{{.getName()}}</b>
                <form method="POST">
                    <input type="hidden" name="flow-id" value="{{.getId()}}">

                    <div class="btn-toolbar pull-right">
                        <button type="submit" class="btn btn-primary btn-xs" name="action" value="execute_flow">
                            <small class="glyphicon glyphicon-play"></small>
                        </button>

                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" style="padding: 1px 20px;"
                                data-target="#flowModal"
                                data-flow-id="{{.getId()}}"
                                data-enabled="{{.isEnabled()}}"
                                data-name="{{.getName()}}" >
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                    </div>
                </form>
        </div>
        <div class="panel-body {{^.isEnabled()}}disabled{{/.isEnabled()}}" style="padding-bottom: 0px;">
            <table class="table table-condensed" style="margin-bottom: 0px;">
                <thead class="row">
                    <th class="col-md-5 text-center">
                        Triggers
                        <button class="btn btn-default btn-xs pull-right" data-toggle="modal"
                                data-target="#triggerModal" data-action="create_trigger" data-flow-id="{{.getId()}}">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </th>
                    <th></th>
                    <th class="col-md-6 text-center">
                        Actions
                        <button class="btn btn-default btn-xs pull-right" data-toggle="modal"
                                data-target="#actionModal" data-action="create_action" data-flow-id="{{.getId()}}">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </th>
                </thead>

                <tr>
                    <td>
                        <!-- TRIGGERS -->
                        <table class="table table-hover table-condensed table-borderless">
                            {{#.getTriggers()}}
                            <tr><td>
                                <div class="panel panel-default drop-shadow {{#.evaluate()}}panel-success{{/.evaluate()}}">
                                    <div class="panel-heading clearfix" style="padding: 2px 15px;">
                                        <small class="pull-left">{{.getObjectClass()}}</small>
                                        <form method="POST">
                                            <input type="hidden" name="trigger-id" value="{{.getId()}}">

                                            <div class="btn-toolbar pull-right">
                                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal"
                                                        data-target="#triggerModal"
                                                        data-action="modify_trigger"
                                                        data-trigger-id="{{.getId()}}"
                                                        data-type="{{.getObjectClass()}}"
                                                        {{#.getObjectConfigurator().getConfiguration()}}
                                                        data-{{.getName()}}="{{.getString()}}"
                                                        {{/.getObjectConfigurator().getConfiguration()}} >
                                                    <small class="glyphicon glyphicon-pencil"></small>
                                                </button>
                                                <button type="submit" class="btn btn-danger btn-xs" name="action" value="remove_trigger">
                                                    <small class="glyphicon glyphicon-trash"></small>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="panel-body">
                                        <span class="glyphicon glyphicon-time"></span>
                                        {{.}}
                                    </div>
                                </div>
                            </td></tr>
                            {{/.getTriggers()}}
                        </table>
                        <!-- /TRIGGERS -->
                    </td>
                    <td class="text-center text-vert-middle">
                        <span class="glyphicon glyphicon-arrow-right"></span><br />
                        <span class="glyphicon glyphicon-arrow-right"></span><br />
                        <span class="glyphicon glyphicon-arrow-right"></span>
                    </td>
                    <td>
                        <!-- ACTIONS -->
                        <table class="table table-hover table-condensed table-borderless">
                            {{#.getActions()}}
                            <tr><td>
                                <div class="panel panel-default drop-shadow">
                                    <div class="panel-heading clearfix" style="padding: 2px 15px;">
                                        <small class="pull-left">{{.getObjectClass()}}</small>
                                        <form method="POST">
                                            <input type="hidden" name="action-id" value="{{.getId()}}">

                                            <div class="btn-toolbar pull-right">
                                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal"
                                                        data-target="#actionModal"
                                                        data-action="modify_action"
                                                        data-action-id="{{.getId()}}"
                                                        data-type="{{.getObjectClass()}}"
                                                        {{#.getObjectConfigurator().getConfiguration()}}
                                                        data-{{.getName()}}="{{.getString()}}"
                                                        {{/.getObjectConfigurator().getConfiguration()}} >
                                                <small class="glyphicon glyphicon-pencil"></small>
                                                </button>
                                                <button type="submit" class="btn btn-danger btn-xs" name="action" value="remove_action">
                                                    <small class="glyphicon glyphicon-trash"></small>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="panel-body">
                                        <span class="glyphicon glyphicon-play-circle"></span>
                                        {{.}}
                                    </div>
                                </div>
                            </td></tr>
                            {{/.getActions()}}
                        </table>
                        <!-- /ACTIONS -->
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
{{/flows}}




<!-------------------------------- MODALS -------------------------------->
<script>
    $(function(){
        initDynamicModalForm("triggerModal", "trigger-data-conf", "trigger-data-conf-template");
        initDynamicModalForm("actionModal", "action-data-conf", "action-data-conf-template");

        $("#flowModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var modal = $(this);
            modal.find("input[type=text]").val(""); // Reset all inputs

            modal.find("input[name=flow-id]").val(button.data("flow-id"));
            modal.find("input[name=name]").val(button.data("name"));
            modal.find("input[name=enabled]").prop('checked', button.data("enabled"));
            modal.find("input[name=enabled]").bootstrapSwitch('state', button.data("enabled"), true);
        });
    });
</script>

<div class="modal fade" id="flowModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Flow</h4>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <input type="hidden" name="action" value="modify_flow">
                    <input type="hidden" name="flow-id">

                    <!--<div class="checkbox">
                        <label>
                            <input type="checkbox" name="enabled"> Enabled
                        </label>
                    </div>-->
                    <div class="form-group">
                        <label class="control-label">Enabled:</label>
                        <div class="checkbox">
                            <input class="toggle-switch" type="checkbox" name="enabled">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Name:</label>
                        <input type="text" class="form-control" name="name">
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="submit" class="btn btn-danger" name="action" value="remove_flow">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </div>
                    <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="triggerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Trigger</h4>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <input type="hidden" name="action" value="">
                    <input type="hidden" name="flow-id">
                    <input type="hidden" name="trigger-id">
                    <div class="form-group">
                        <label class="control-label">Type:</label>
                        <select class="form-control" name="type">
                            {{#availableTriggers}}
                            <option>{{.getName()}}</option>
                            {{/availableTriggers}}
                        </select>
                    </div>

                    <hr>
                    <div id="trigger-data-conf">
                        <!-- Dynamic form -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="actionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Action</h4>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <input type="hidden" name="action" value="">
                    <input type="hidden" name="flow-id">
                    <input type="hidden" name="action-id">
                    <div class="form-group">
                        <label class="control-label">Type:</label>
                        <select class="form-control" name="type">
                            {{#availableActions}}
                            <option>{{.getName()}}</option>
                            {{/availableActions}}
                        </select>
                    </div>

                    <hr>
                    <div id="action-data-conf">
                        <!-- Dynamic form -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div id="trigger-data-conf-template" class="hidden">
    {{#triggerConf}}
    <div id="{{.clazz.getName()}}">
        {{#.params}}
        <div class="form-group">
            <label class="control-label">{{.getNiceName()}}:</label>
            {{#.isTypeString()}}<input type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
            {{#.isTypeNumber()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeNumber()}}
            {{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}">{{/#.isTypeBoolean()}}
            {{#.isTypeSelection()}}
            <select class="form-control" name="{{.getName()}}">
                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
            </select>
            {{/#.isTypeSelection()}}
        </div>
        {{/.params}}
    </div>
    {{/triggerConf}}
</div>

<div id="action-data-conf-template" class="hidden">
    {{#actionConf}}
    <div id="{{.clazz.getName()}}">
        {{#.params}}
        <div class="form-group">
            <label class="control-label">{{.getNiceName()}}:</label>
            {{#.isTypeString()}}<input type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
            {{#.isTypeNumber()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeNumber()}}
            {{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
            {{#.isTypeSelection()}}
            <select class="form-control" name="{{.getName()}}">
                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
            </select>
            {{/#.isTypeSelection()}}
        </div>
        {{/.params}}
    </div>
    {{/actionConf}}
</div>