hal/resource/web/trigger.tmpl

<h1 class="page-header">
    Triggers

    <form class="pull-right" method="POST">
        <input type="hidden" name="action" value="create_flow" />
        <button type="submit" class="btn btn-default">
            <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">
            <form method="POST">
                <input type="hidden" name="action" value="remove_flow">
                <input type="hidden" name="flow-id" value="{{.getId()}}">
                <div class="btn-toolbar pull-right">
                    <button type="submit" class="btn btn-danger btn-xs" style="padding: 1px 20px;">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                </div>
            </form>
        </div>
        <div class="panel-body">
            <table class="table table-condensed">
                <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" style="padding: 2px 15px;">
                                        <small>{{.getObjectClass()}}</small>
                                        <form method="POST">
                                            <input type="hidden" name="action" value="remove_trigger">
                                            <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()}} >
                                                    <span class="glyphicon glyphicon-pencil"></span>
                                                </button>
                                                <button type="submit" class="btn btn-danger btn-xs">
                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </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>
                    </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" style="padding: 2px 15px;">
                                        <small>{{.getObjectClass()}}</small>
                                        <form method="POST">
                                            <input type="hidden" name="action" value="remove_action">
                                            <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()}} >
                                                <span class="glyphicon glyphicon-pencil"></span>
                                                </button>
                                                <button type="submit" class="btn btn-danger btn-xs">
                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </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("trigger");
        initDynamicModalForm("action");
    });


    var dynamicConf = {};

    function initDynamicModalForm(name){
        // read in all configurations into global variable (to skip naming issues)
        dynamicConf[name] = [];
        $("#"+name+"-data-conf-template div").each(function(){
            dynamicConf[name][$(this).attr("id")] = $(this).html();
        });
        // Update dynamic inputs
        $("#"+name+"Modal select[name=type]").change(function(){
            $("#"+name+"Modal #"+name+"-data-conf").html(dynamicConf[name][$(this).val()]);
        });
        // click event
        $("#"+name+"Modal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var modal = $(this);
            modal.find("input").val(""); // Reset all inputs

            // set dynamic form data
            modal.find("select[name=type]").val(button.data("type"));
            modal.find("select[name=type]").change(); // Update dynamic inputs
            $.each(button.attr(), function(fieldName, value) {
                if(fieldName.startsWith("data-")) {
                    fieldName = fieldName.substring(5);
                    console.log(fieldName, value);
                    // case insensitive search
                    input = modal.find("input").filter(function() {
                           return this.name.toLowerCase() == fieldName;
                    });
                    if (input.attr("type") == "checkbox") { // special handling for checkboxes
                        if (value=="true") input.attr("checked", "true");
                        else               input.removeAttr("checked", "true");
                        // Add default false value as a unchecked checkbox is not included in the post
                        input.parent().prepend("<input type='hidden' name='"+input.attr("name")+"' value='false' />");
                    } else {
                        input.val(value);
                    }
                }
            });
        });
    }
</script>

<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()}}
            {{#.isTypeInt()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeInt()}}
            {{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}">{{/#.isTypeBoolean()}}
            {{#.isTypeEnum()}}
            <select class="form-control" name="{{.getName()}}">
                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
            </select>
            {{/#.isTypeEnum()}}
        </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()}}
            {{#.isTypeInt()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeInt()}}
            {{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
            {{#.isTypeEnum()}}
            <select class="form-control" name="{{.getName()}}">
                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
            </select>
            {{/#.isTypeEnum()}}
        </div>
        {{/.params}}
    </div>
    {{/actionConf}}
</div>