@dualbox/editor 1.0.1 → 1.0.3

package/js/src/v/templates/editMainSettings.html

@@ -0,0 +1,265 @@
+@{ var utils = require('../Utils') }
+
+@!(data)
+<div class="edit-main-panel h100" id="edit-main-panel">
+    <div style="padding-left: 10px; padding-top: 10px; padding-right: 10px;">
+        <h2 class="edit-dualbox-app">
+            <div class="dualbox-node-name">
+                <span class="text-truncate d-inline-block" style="width: 290px">Application</span>
+            </div>
+        </h2>
+    </div>
+
+    <div class="edit-body">
+        <div class="card">
+            <div class="card-header" id="dualbox-main-desc" data-toggle="collapse" data-target="#dualbox-main-desc-collapse" aria-expanded="false" aria-controls="dualbox-main-desc-collapse">
+                <h5 class="mb-0 btn-link">Description</h5>
+            </div>
+
+            <div id="dualbox-main-desc-collapse" class="collapse show" aria-labelledby="dualbox-main-desc" data-parent="#edit-main-panel">
+                <div class="card-body">
+                    <p class="application-description">@(data.app.getDescription() || "[No description available]") <button class="btn btn-xs btn-light btn-edit-app-description"><i class="fa fa-edit"></i></button></p>
+                </div>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-header" id="dualbox-main-events" data-toggle="collapse" data-target="#dualbox-main-events-collapse" aria-expanded="false" aria-controls="dualbox-main-events-collapse">
+                <h5 class="mb-0 btn-link">Events</h5>
+            </div>
+
+            <div id="dualbox-main-events-collapse" class="collapse" aria-labelledby="dualbox-main-events" data-parent="#edit-main-panel">
+                <div class="card-body" style="padding-left: 4px; padding-right: 4px;">
+                    <button class="btn btn-success btn-add-app-event mb-3">Add application event</button>
+
+                    @{var keys = data.app.getEventsNames() }
+                    @for(var k=0; k<keys.length; k++) {
+                        @{ var key = keys[k]; }
+                        <!--<p>@(key)</p>-->
+                        <div class="card">
+                            <div class="card-header" id="dualbox-event-@(key)" data-toggle="collapse" data-target="#dualbox-event-@(key)-collapse" aria-expanded="false" aria-controls="dualbox-event-@(key)-collapse">
+                                <h5 class="mb-0 btn-link" style="font-size: 16px; font-weight: normal;">
+                                    @(key)
+                                    <div class="float-right d-inline-block">
+                                        <button class="btn btn-light btn-xs btn-rename-app-event" data-event="@(key)">
+                                            <i class="fa fa-edit"></i>
+                                        </button>
+                                        <button class="btn btn-danger btn-xs btn-remove-app-event" data-event="@(key)">
+                                            <i class="fa fa-minus"></i>
+                                        </button>
+                                    </div>
+                                </h5>
+                            </div>
+
+                            <div id="dualbox-event-@(key)-collapse" class="collapse" aria-labelledby="dualbox-event-@(key)" data-parent="#dualbox-main-events">
+                                <div class="card-body" style="padding-left: 4px; padding-right: 4px;">
+                                    <h5 style="font-size: 16px; text-decoration: underline; font-weight: normal;">Description</h5>
+                                    <p>@(data.app.getEventDescription(key) || "[no description available]") <button class="btn btn-xs btn-light btn-edit-event-description" data-event="@key"><i class="fa fa-edit"></i></button></p>
+                                    <h5 class="mt-3" style="font-size: 16px; text-decoration: underline; font-weight: normal;">Triggers</h5>
+
+                                    <table class="table-desc table-striped" style="font-size: 12px!important;">
+                                        <thead class="thead-dark">
+                                            <th>Target</th>
+                                            <th>Event</th>
+                                            <th>If</th>
+                                            <th>Data</th>
+                                            <th>Action</th>
+                                        </thead>
+                                        <tbody>
+                                            @{ var events = data.app.getEventIn(key); }
+                                            @for(var i=0; i<events.length; i++) {
+                                                @{ var evt = events[i]; }
+                                                <tr data-index="@(i)">
+                                                    <td>
+                                                        @if(evt.node !== undefined) {
+                                                            <select class="form-control form-control-sm select-event-target" dualbox-target="events-in" data-event="@key" data-index="@(i)" >
+                                                                @{ var nodes = data.app.m.getNodes("ui"); }
+                                                                @for(var j=0; j<nodes.length; j++) {
+                                                                    @{ var node = nodes[j]; }
+                                                                    @if( node.getEventsNames().length !== 0 ) {
+                                                                        <option value="@(node.getGraphId())" @if(node.getGraphId()===evt.node){selected}>@(node.getGraphId())</option>
+                                                                    }
+                                                                }
+                                                            </select>
+                                                        }
+                                                        else {
+                                                            <span>@(evt.selector)</span>
+                                                        }
+                                                    </td>
+                                                    <td>
+                                                        <select class="form-control form-control-sm select-event-name" dualbox-target="events-in" data-event="@key" data-index="@(i)" >
+                                                        @if(evt.node) {
+                                                            <!-- options will be dynamically changed when target change -->
+                                                            @{ var targetNode = data.app.m.getNode(evt.node); }
+                                                            @{ var targetEvents = targetNode.getEventsNames(); }
+                                                            @for(var j=0; j<targetEvents.length; j++) {
+                                                                @{ var targetEvent = targetEvents[j]; }
+                                                                <option value="@(targetEvent)" @if(evt.event===targetEvent){selected}>@(targetEvent)</option>
+                                                            }
+                                                        }
+                                                        else {
+                                                            <option value="hide">hide</option>
+                                                            <option value="show">show</option>
+                                                        }
+                                                        </select>
+                                                    </td>
+                                                    <td>
+                                                        <input class="form-control form-control-sm event-if" type="text" dualbox-target="events-in" data-event="@key" data-index="@(i)" value="@(evt.if)" />
+                                                    </td>
+                                                    <td>
+                                                        <input class="form-control form-control-sm event-data" type="text" dualbox-target="events-in" data-event="@key" data-index="@(i)" value="@(evt.data)" />
+                                                    </td>
+                                                    <td>
+                                                        <button class="btn btn-danger btn-xs btn-remove-in-event" data-event="@key" data-index="@(i)" >
+                                                            <i class="fa fa-minus"></i>
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            }
+                                            <tr>
+                                                <td colspan="5" style="padding-top: 0px; padding-bottom: 0px;">
+                                                    <button class="btn btn-sm btn-add-subevent" data-event="@key" style="width: 100%;">Add a subevent</button>
+                                                </td>
+                                            <tr>
+                                        </tbody>
+                                    </table>
+
+                                    <h5 class="mt-3" style="font-size: 16px; text-decoration: underline; font-weight: normal;">Callback</h5>
+
+                                    <table class="table-desc table-striped" style="font-size: 12px!important;">
+                                        <thead class="thead-dark">
+                                            <th>Target</th>
+                                            <th>Event</th>
+                                            <th>Action</th>
+                                        </thead>
+                                        <tbody>
+                                            @{ var evt = data.app.getEventOut(key); }
+                                            @if( evt ) {
+                                                <tr data-index="@(i)">
+                                                    <td>
+                                                        @if(evt.node !== undefined) {
+                                                            <select class="form-control form-control-sm select-event-target" dualbox-target="events-out" data-index="@(i)" >
+                                                                @{ var nodes = data.app.m.getNodes("ui"); }
+                                                                @for(var j=0; j<nodes.length; j++) {
+                                                                    @{ var node = nodes[j]; }
+                                                                    @if( node.getEventsNames().length !== 0 ) {
+                                                                        <option value="@(node.getGraphId())" @if(node.getGraphId()===evt.node){selected}>@(node.getGraphId())</option>
+                                                                    }
+                                                                }
+                                                            </select>
+                                                        }
+                                                        else {
+                                                            <span>@(evt.selector)</span>
+                                                        }
+                                                    </td>
+                                                    <td>
+                                                        <select class="form-control form-control-sm select-event-name" dualbox-target="events-out" data-index="@(i)" >
+                                                            <!-- options will be dynamically changed when target change -->
+                                                            @{ var targetNode = data.app.m.getNode(evt.node); }
+                                                            @{ var targetEvents = targetNode.getEventsNames(); }
+                                                            @for(var j=0; j<targetEvents.length; j++) {
+                                                                @{ var targetEvent = targetEvents[j]; }
+                                                                <option value="@(targetEvent)" @if(evt.event===targetEvent){selected}>@(targetEvent)</option>
+                                                            }
+                                                        </select>
+                                                    </td>
+                                                    <td>
+                                                        <button class="btn btn-danger btn-xs btn-remove-out-event" data-event="@key">
+                                                            <i class="fa fa-minus"></i>
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            }
+                                            else {
+                                                <tr>
+                                                    <td colspan="3" style="padding-top: 0px; padding-bottom: 0px;">
+                                                        <button class="btn btn-sm btn-add-callback" data-event="@key" style="width: 100%;">Add a callback</button>
+                                                    </td>
+                                                </tr>
+                                            }
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal edit-value-modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Edit value</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div>
+                        <div class="form-check">
+                            <input type="radio" class="form-check-input set-value unset-value" id="unset-value" name="set-value" value="unset-value" checked>
+                            <label class="form-check-label" for="unset-value">
+                                don't set a value
+                            </label>
+                        </div>
+                        <div class="form-check">
+                            <input type="radio" class="form-check-input set-value set-value-null" id="set-value-null" name="set-value" value="set-value-null">
+                            <label class="form-check-label" for="set-value-null">
+                                set null
+                            </label>
+                        </div>
+                        <div class="form-check">
+                            <input type="radio" class="form-check-input set-value set-value-type" id="set-value-type" name="set-value" value="set-value-type" aria-label="Set a value of type">
+                            <div class="form-inline form-check-label" style="height: 24px;">
+                                <label for="set-value-type">
+                                    set a value of type:
+                                    <select class="form-control choose-value-type d-inline-block form-control-sm ml-2">
+                                        <option value="string">String</option>
+                                        <option value="number">Number</option>
+                                        <option value="boolean">Boolean</option>
+                                        <option value="object">Object</option>
+                                    </select>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="has-value" style="display: none;">
+                        <hr/>
+                        <div class="define-value define-boolean" style="display: none;">
+                            <div class="form-inline">
+                                <label>Value: </label>
+                                <select class="form-control form-control-sm bool-value d-inline-block ml-2">
+                                    <option value=true>True</option>
+                                    <option value=false>False</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="define-value define-number" style="display: none;">
+                            <div class="form-inline">
+                                <label>Value: </label>
+                                <input type="number" class="form-control form-control-sm number-value ml-2"/>
+                            </div>
+                        </div>
+                        <div class="define-value define-string" style="display: none;">
+                            <div class="form-inline">
+                                <label>Value: </label>
+                                <input type="text" class="form-control form-control-sm text-value ml-2"/>
+                            </div>
+                        </div>
+                        <div class="define-value define-object" style="display: none;">
+                            <label>Value: </label>
+                            <div class="json-editor" style="height: 400px;"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary btn-save">Save changes</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+

package/js/src/v/templates/editMainSettings.js

@@ -0,0 +1,240 @@
+const swal = require('sweetalert2');
+const _ = require('lodash');
+
+const JSONEditor = require('@dualbox/dualbox-lib-jsoneditor');
+
+var TemplateBinds = function(view, div, data) {
+    var editor = null;
+
+    div.ready(() => {
+        // bind the json editor
+        editor = new JSONEditor(div.find('.json-editor')[0], { modes: ['tree', 'code', 'text' ]});
+        editor.set({});
+
+        div.find('button[data-toggle="tooltip"]').tooltip();
+
+        div.find('.btn-edit-app-description').click(function(e) {
+            swal({
+                input: 'text',
+                title: 'Enter the description',
+            }).then((result) => {
+                view.c.setAppDescription(result.value);
+            });
+        });
+
+        div.find('.btn-edit-event-description').click(function(e) {
+            var eventName = $(e.target).attr('data-event');
+
+            swal({
+                input: 'text',
+                title: 'Enter the description',
+            }).then((result) => {
+                view.c.setAppEventDescription(eventName, result.value);
+            });
+        });
+
+        div.find('.btn-remove-app-event').click(function(e) {
+            var name = $(this).attr('data-event');
+            view.c.removeAppEvent(name);
+        });
+
+        div.find('.btn-rename-app-event').click(function(e) {
+            var name = $(this).attr('data-event');
+            swal({
+                input: 'text',
+                title: 'Enter the new event name',
+            }).then((result) => {
+                if( result.value ) {
+                    view.c.renameAppEvent(name, result.value);
+                }
+            });
+        });
+
+        div.find('.event-if').change(function(e) {
+            var index = parseInt($(this).attr('data-index'));
+            var val = $(this).val();
+            view.c.setEventIf( "#application-" + $(this).attr('dualbox-target') + '-' + $(this).attr('data-event'), index, val );
+        });
+
+        div.find('.event-data').change(function(e) {
+            var index = parseInt($(this).attr('data-index'));
+            var val = $(this).val();
+            view.c.setEventData( "#application-" + $(this).attr('dualbox-target') + '-' + $(this).attr('data-event'), index, val );
+        });
+
+        div.find('.select-event-target').change(function(e) {
+            var target = $(this).val();
+
+            // change options of closest .select-event-name according to this new target
+            var targetNode = view.m.getNode(target);
+            var targetEvents = targetNode.getEventsNames();
+            var select = $(this).closest('tr').find('.select-event-name');
+            select.html('');
+            _.each(targetEvents, (eventName) => {
+                select.append( $('<option/>', {
+                    value: eventName
+                }).append(eventName));
+            });
+
+            var index = parseInt($(this).attr('data-index'));
+            view.c.setEventTarget( "#application-" + $(this).attr('dualbox-target') + '-' + $(this).attr('data-event'), index, target );
+        });
+
+        div.find('.select-event-name').change(function(e) {
+            var index = parseInt($(this).attr('data-index'));
+            var val = $(this).val();
+            view.c.setEventName( "#application-" + $(this).attr('dualbox-target') + '-' + $(this).attr('data-event'), index, val );
+        });
+
+        div.find('.btn-add-app-event').click(function(e) {
+            swal({
+                input: 'text',
+                title: 'Enter the event name',
+            }).then((result) => {
+                view.c.addAppEvent(result.value);
+            });
+        });
+
+        div.find('.btn-remove-in-event').click(function(e) {
+            var eventName = $(this).attr('data-event');
+            var index = parseInt($(this).attr('data-index'));
+            view.c.removeAppInEvent(eventName, index);
+        });
+
+        div.find('.btn-remove-out-event').click(function(e) {
+            var eventName = $(this).attr('data-event');
+            view.c.removeAppOutEvent(eventName);
+        });
+
+        div.find('.btn-add-subevent').click(function(e) {
+            var eventName = $(this).attr('data-event');
+            view.c.addSubEvent(eventName);
+        });
+
+        div.find('.btn-add-callback').click(function(e) {
+            var eventName = $(this).attr('data-event');
+            view.c.addCallback(eventName);
+        });
+
+        div.find('.setValue').click(function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            var modal = div.find('.edit-value-modal');
+            modal.modal('show');
+
+            // set the link data on the modal
+            modal.attr('data-id', $(this).attr('data-id'));
+            modal.attr('data-type', $(this).attr('data-type'));
+            modal.attr('data-name', $(this).attr('data-name'));
+            modal.attr('data-value', $(this).attr('data-value'));
+            modal.attr('data-valueType', $(this).attr('data-valueType'));
+
+            // choose the right settings according to the link data
+            if( $(this).attr('data-undefined') ) {
+                modal.find('.unset-value').prop('checked', true);
+            }
+            else if( $(this).attr('data-null') ) {
+                modal.find('.set-value-null').prop('checked', true);
+            }
+            else {
+                modal.find('.set-value-type').prop('checked', true);
+                modal.find('.has-value').show();
+            }
+
+            var valueType = $(this).attr('data-valueType');
+            if( valueType ) {
+                modal.find('.choose-value-type').val( valueType );
+                modal.find('.define-value').hide();
+                modal.find('.define-' + valueType).show();
+
+                // set the existing value
+                var value = $(this).attr('data-value');
+                switch(valueType) {
+                case "string":  val = modalSetValue.find('.text-value').val(value); break;
+                case "number":  val = modalSetValue.find('.number-value').val(parseFloat(value)); break;
+                case "boolean": val = modalSetValue.find('.bool-value').val(value); break;
+                case "object":  val = editor.set((value && JSON.parse(value)) || {}); break;
+                default:
+                    console.log('couldnt find value type: ' + valueType);
+                }
+            }
+        });
+
+        // set up the modal control (for setting a value)
+        var modalSetValue = div.find('.edit-value-modal');
+        modalSetValue.find('.set-value-type').change(function(e) {
+            if( $(this).is(':checked') ) {
+                modalSetValue.find('.has-value').show();
+            }
+            else {
+                modalSetValue.find('.has-value').hide();
+            }
+
+            var valueType = modalSetValue.find('.choose-value-type').val();
+            modalSetValue.find('.define-value.define-' + valueType).show();
+        });
+
+        modalSetValue.find('.choose-value-type').change(function(e) {
+            var valueType = $(this).val();
+            modalSetValue.find('.define-value').hide();
+            modalSetValue.find('.define-' + valueType).show();
+        });
+
+        modalSetValue.find('.btn-save').click(function(e) {
+            var val;
+            if( modalSetValue.find('.unset-value').is(':checked') ) {
+                // remove default value
+                val = undefined;
+            }
+            else if( modalSetValue.find('.set-value-null').is(':checked') ) {
+                val = null;
+            }
+            else {
+                var type = modalSetValue.find('.choose-value-type').val();
+                switch( type ) {
+                case "string":  val = modalSetValue.find('.text-value').val(); break;
+                case "number":  val = parseFloat(modalSetValue.find('.number-value').val()); break;
+                case "boolean": val = modalSetValue.find('.bool-value').val() == "true"; break;
+                case "object":  val = editor.get(); break;
+                default:
+                    throw "cant recognize type: " + type;
+                }
+            }
+
+            // set the new value
+            var destId =   modalSetValue.attr('data-id');
+            var destName = modalSetValue.attr('data-name');
+            var destType = modalSetValue.attr('data-type'); // "attr" or "input"
+
+            /* TODO
+            if(val !== undefined){
+                view.m.getNode(destId).val( destType, destName, val );
+            }else{
+                view.m.getNode(destId).deleteVal( destType, destName );
+            }
+            */
+            modalSetValue.modal('hide');
+
+            var field = $('.' + destType + '-' + destId + '-' + destName); // the display field
+            if( val === undefined ) {
+                field.text("");
+            }
+            else if ( val === null ) {
+                field.text("null");
+            }
+            else {
+                switch(type) {
+                case "string":  field.text( '"' + val + '"'); break;
+                case "number":  field.text(val); break;
+                case "boolean": field.text(val ? "true" : "false"); break;
+                case "object":  field.text('[Object]'); break;
+                default:
+                    throw "cant recognize type: " + type;
+                }
+            }
+        });
+    });
+};
+
+module.exports = TemplateBinds;

package/js/src/v/templates/editNodeSettings.css

@@ -0,0 +1,86 @@
+.edit-dualbox-node-id {
+    margin-bottom: 0px;
+    display: inline-block;
+}
+
+.edit-dualbox-node-package-name {
+    font-style: italic;
+}
+
+.btn-edit-dualbox-node-name {
+    display: inline-block;
+    margin-left: 5px;
+    margin-top: -10px;
+    position: relative;
+    top: -10px;
+    vertical-align: bottom;
+}
+
+.module-left-description {
+    padding-top: 30px;
+    font-size: 12px;
+    text-align: center;
+}
+
+.card-settings .card-body {
+    font-size: 12px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.table-desc {
+    width: 100%;
+}
+
+.table-desc thead td {
+    margin-right: 6px;
+}
+
+.table-desc tbody td {
+    margin-right: 6px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    height: 40px;
+}
+
+.card-header[data-toggle="collapse"] {
+    cursor: pointer;
+}
+
+.card-header[data-toggle="collapse"] h5 {
+    user-select: none;
+}
+
+.card-header[data-toggle="collapse"]:hover .btn-link {
+    text-decoration: none;
+}
+
+.dualbox-node-name-input {
+    display: inline-block;
+    max-width: 270px;
+    border-radius: 4px;
+    padding: 4px 8px 4px 8px;
+    font-size: 20px;
+}
+
+
+
+.text-value, .number-value, .boolean-value {
+    max-width: 140px;
+}
+
+.event-if, .event-data {
+    max-width: 80px;
+}
+
+.select-event-target, .select-event-name, .event-if, .event-data {
+    font-size: 12px;
+}
+
+.edit-body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: calc(100% - 80px);
+}
+
+