<!DOCTYPE html> <html lang=”en”> <head> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1” /> <meta charset=”utf-8” /> <title>New Workspace - BocaBaton Admin</title>

<!– bootstrap & fontawesome –> <link rel=”stylesheet” href=”assets/css/bootstrap.min.css” /> <link rel=”stylesheet” href=”assets/font-awesome/4.2.0/css/font-awesome.min.css” />

<!– page specific plugin styles –> <link rel=”stylesheet” href=”assets/css/select2.min.css” />

<!– text fonts –> <link rel=”stylesheet” href=”assets/fonts/fonts.googleapis.com.css” />

<!– ace styles –> <link rel=”stylesheet” href=”assets/css/ace.min.css” class=”ace-main-stylesheet” id=”main-ace-style” />

<!– jquery styles –> <link rel=”stylesheet” href=”assets/css/jquery-ui.min.css” />

<!– BPMN-JS styles –> <link rel=”stylesheet” href=”assets/js/bpmn-js/assets/diagram-js.css” /> <link rel=”stylesheet” href=”assets/js/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css” /> <link rel=”stylesheet” href=”assets/css/workspace.css” />

<!–[if lte IE 9]> <link rel=”stylesheet” href=”assets/css/ace-part2.min.css” class=”ace-main-stylesheet” /> <![endif]–>

<!–[if lte IE 9]> <link rel=”stylesheet” href=”assets/css/ace-ie.min.css” /> <![endif]–>

<!– inline styles related to this page –> <link href=”assets/css/1-col-portfolio.css” rel=”stylesheet”> <link rel=”stylesheet” href=”assets/csis/material-cards.css” />

<!– ace settings handler –> <script src=”assets/js/ace-extra.min.js”></script>

<!– HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries –>

<!–[if lte IE 8]> <script src=”assets/js/html5shiv.min.js”></script> <script src=”assets/js/respond.min.js”></script> <![endif]–> </head>

<body class=”no-skin”> <div id=”navbar” class=”navbar navbar-default”> <script type=”text/javascript”> try{ace.settings.check(‘navbar’ , ‘fixed’)}catch(e){} </script>

<div class=”navbar-container” id=”navbar-container”> <button type=”button” class=”navbar-toggle menu-toggler pull-left” id=”menu-toggler” data-target=”#sidebar”> <span class=”sr-only”>Toggle sidebar</span>

<div class=”navbar-header pull-left”> <a href=”index.html” class=”navbar-brand”> <small> <i class=”fa fa-leaf”></i> BocaBaton Admin </small> </a> </div>

<ul class=”dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close”> <li class=”dropdown-header”> <i class=”ace-icon fa fa-check”></i> 4 Tasks to complete </li>

<li class=”dropdown-content”> <ul class=”dropdown-menu dropdown-navbar”> <li> <a href=”#”> <div class=”clearfix”> <span class=”pull-left”>Software Update</span> <span class=”pull-right”>65%</span> </div>

<li> <a href=”#”> <div class=”clearfix”> <span class=”pull-left”>Hardware Upgrade</span> <span class=”pull-right”>35%</span> </div>

<li> <a href=”#”> <div class=”clearfix”> <span class=”pull-left”>Unit Testing</span> <span class=”pull-right”>15%</span> </div>

<li> <a href=”#”> <div class=”clearfix”> <span class=”pull-left”>Bug Fixes</span> <span class=”pull-right”>90%</span> </div>

<li class=”dropdown-footer”> <a href=”#”> See tasks with details <i class=”ace-icon fa fa-arrow-right”></i> </a> </li> </ul> </li>

<ul class=”dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close”> <li class=”dropdown-header”> <i class=”ace-icon fa fa-exclamation-triangle”></i> 8 Notifications </li>

<li class=”dropdown-content”> <ul class=”dropdown-menu dropdown-navbar navbar-pink”> <li> <a href=”#”> <div class=”clearfix”> <span class=”pull-left”> <i class=”btn btn-xs no-hover btn-pink fa fa-comment”></i> New Comments </span> <span class=”pull-right badge badge-info”>+12</span> </div> </a> </li>

<li> <a href=”#”> <i class=”btn btn-xs btn-primary fa fa-user”></i> Bob just signed up as an editor … </a> </li>

<li> <a href=”#”> <div class=”clearfix”> <span class=”pull-left”> <i class=”btn btn-xs no-hover btn-success fa fa-shopping-cart”></i> New Orders </span> <span class=”pull-right badge badge-success”>+8</span> </div> </a> </li>

<li> <a href=”#”> <div class=”clearfix”> <span class=”pull-left”> <i class=”btn btn-xs no-hover btn-info fa fa-twitter”></i> Followers </span> <span class=”pull-right badge badge-info”>+11</span> </div> </a> </li> </ul> </li>

<li class=”dropdown-footer”> <a href=”#”> See all notifications <i class=”ace-icon fa fa-arrow-right”></i> </a> </li> </ul> </li>

<ul class=”dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close”> <li class=”dropdown-header”> <i class=”ace-icon fa fa-envelope-o”></i> 5 Messages </li>

<li class=”dropdown-content”> <ul class=”dropdown-menu dropdown-navbar”> <li> <a href=”#” class=”clearfix”> <img src=”assets/avatars/avatar.png” class=”msg-photo” alt=”Alex’s Avatar” /> <span class=”msg-body”> <span class=”msg-title”> <span class=”blue”>Alex:</span> Ciao sociis natoque penatibus et auctor … </span>

<span class=”msg-time”> <i class=”ace-icon fa fa-clock-o”></i> <span>a moment ago</span> </span> </span> </a> </li>

<li> <a href=”#” class=”clearfix”> <img src=”assets/avatars/avatar3.png” class=”msg-photo” alt=”Susan’s Avatar” /> <span class=”msg-body”> <span class=”msg-title”> <span class=”blue”>Susan:</span> Vestibulum id ligula porta felis euismod … </span>

<span class=”msg-time”> <i class=”ace-icon fa fa-clock-o”></i> <span>20 minutes ago</span> </span> </span> </a> </li>

<li> <a href=”#” class=”clearfix”> <img src=”assets/avatars/avatar4.png” class=”msg-photo” alt=”Bob’s Avatar” /> <span class=”msg-body”> <span class=”msg-title”> <span class=”blue”>Bob:</span> Nullam quis risus eget urna mollis ornare … </span>

<li> <a href=”#” class=”clearfix”> <img src=”assets/avatars/avatar2.png” class=”msg-photo” alt=”Kate’s Avatar” /> <span class=”msg-body”> <span class=”msg-title”> <span class=”blue”>Kate:</span> Ciao sociis natoque eget urna mollis ornare … </span>

<li> <a href=”#” class=”clearfix”> <img src=”assets/avatars/avatar5.png” class=”msg-photo” alt=”Fred’s Avatar” /> <span class=”msg-body”> <span class=”msg-title”> <span class=”blue”>Fred:</span> Vestibulum id penatibus et auctor … </span>

<li class=”dropdown-footer”> <a href=”inbox.html”> See all messages <i class=”ace-icon fa fa-arrow-right”></i> </a> </li> </ul> </li>

<li class=”light-blue”> <a data-toggle=”dropdown” href=”#” class=”dropdown-toggle”> <img class=”nav-user-photo” src=”assets/avatars/user.jpg” alt=”Jason’s Photo” /> <span class=”user-info”> <small>Welcome,</small> <span id=”user-name”></span> </span>

<ul class=”user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close”> <li> <a href=”#”> <i class=”ace-icon fa fa-cog”></i> Settings </a> </li>

<li> <a href=”profile.html”> <i class=”ace-icon fa fa-user”></i> Profile </a> </li>

<li> <a href=”login.html?target=new_workspace.html” id=”logout”> <i class=”ace-icon fa fa-power-off”></i> Logout </a> </li> </ul> </li> </ul> </div> </div><!– /.navbar-container –> </div>

<div class=”main-container” id=”main-container”> <script type=”text/javascript”> try{ace.settings.check(‘main-container’ , ‘fixed’)}catch(e){} </script>

<div id=”sidebar” class=”sidebar responsive”> <script type=”text/javascript”> try{ace.settings.check(‘sidebar’ , ‘fixed’)}catch(e){} </script>

<ul class=”nav nav-list”> <li class=”“> <a href=”index.html”> <i class=”menu-icon fa fa-tachometer”></i> <span class=”menu-text”> Dashboard </span> </a>

<li class=”“> <a href=”#” class=”dropdown-toggle”> <i class=”menu-icon fa fa-desktop”></i> <span class=”menu-text”> Resources </span>

<li class=”“> <a href=”#”> <i class=”menu-icon fa fa-caret-right”></i> Framework </a>

<li class=”“> <a href=”mesos.html”> <i class=”menu-icon fa fa-caret-right”></i> Mesos </a>

<li class=”“> <a href=”compute.html”> <i class=”menu-icon fa fa-caret-right”></i> Compute </a>

<li class=”“> <a href=”resource_books.html”> <i class=”menu-icon fa fa-caret-right”></i> Guide Books </a>

</ul> </li>

<li class=”active open”> <a href=”#” class=”dropdown-toggle”> <i class=”menu-icon fa fa-list”></i> <span class=”menu-text”> Workspaces </span>

<ul class=”submenu”> <li class=”active”> <a href=”new_workspace.html”> <i class=”menu-icon fa fa-caret-right”></i> New Workspace </a>

<li class=”“> <a href=”workflow.html”> <i class=”menu-icon fa fa-caret-right”></i> Workflow </a>

</ul> </li>

<li class=”“> <a href=”#” class=”dropdown-toggle”> <i class=”menu-icon fa fa-pencil-square-o”></i> <span class=”menu-text”> Monitoring </span>

<ul class=”submenu”> <li class=”“> <a href=”monitoring_host.html”> <i class=”menu-icon fa fa-caret-right”></i> Hosts </a>

<li class=”“> <a href=”monitoring_container.html”> <i class=”menu-icon fa fa-caret-right”></i> Containers </a>

</ul><!– /.nav-list –>

<div class=”main-content”> <div class=”main-content-inner”> <div class=”breadcrumbs” id=”breadcrumbs”> <script type=”text/javascript”> try{ace.settings.check(‘breadcrumbs’ , ‘fixed’)}catch(e){} </script>

<li> <a href=”#”>Workspaces</a> </li> <li class=”active”>New Workspace</li> </ul><!– /.breadcrumb –>

<div class=”ace-settings-box clearfix” id=”ace-settings-box”> <div class=”pull-left width-50”> <div class=”ace-settings-item”> <div class=”pull-left”> <select id=”skin-colorpicker” class=”hide”> <option data-skin=”no-skin” value=”#438EB9”>#438EB9</option> <option data-skin=”skin-1” value=”#222A2D”>#222A2D</option> <option data-skin=”skin-2” value=”#C6487E”>#C6487E</option> <option data-skin=”skin-3” value=”#D0D0D0”>#D0D0D0</option> </select> </div> <span>  Choose Skin</span> </div>

<div class=”ace-settings-item”> <input type=”checkbox” class=”ace ace-checkbox-2” id=”ace-settings-navbar” /> <label class=”lbl” for=”ace-settings-navbar”> Fixed Navbar</label> </div>

<div class=”ace-settings-item”> <input type=”checkbox” class=”ace ace-checkbox-2” id=”ace-settings-sidebar” /> <label class=”lbl” for=”ace-settings-sidebar”> Fixed Sidebar</label> </div>

<div class=”ace-settings-item”> <input type=”checkbox” class=”ace ace-checkbox-2” id=”ace-settings-breadcrumbs” /> <label class=”lbl” for=”ace-settings-breadcrumbs”> Fixed Breadcrumbs</label> </div>

<div class=”ace-settings-item”> <input type=”checkbox” class=”ace ace-checkbox-2” id=”ace-settings-rtl” /> <label class=”lbl” for=”ace-settings-rtl”> Right To Left (rtl)</label> </div>

<div class=”ace-settings-item”> <input type=”checkbox” class=”ace ace-checkbox-2” id=”ace-settings-add-container” /> <label class=”lbl” for=”ace-settings-add-container”> Inside <b>.container</b> </label> </div> </div><!– /.pull-left –>

<div class=”pull-left width-50”> <div class=”ace-settings-item”> <input type=”checkbox” class=”ace ace-checkbox-2” id=”ace-settings-hover” /> <label class=”lbl” for=”ace-settings-hover”> Submenu on Hover</label> </div>

<div class=”ace-settings-item”> <input type=”checkbox” class=”ace ace-checkbox-2” id=”ace-settings-compact” /> <label class=”lbl” for=”ace-settings-compact”> Compact Sidebar</label> </div>

<div class=”ace-settings-item”> <input type=”checkbox” class=”ace ace-checkbox-2” id=”ace-settings-highlight” /> <label class=”lbl” for=”ace-settings-highlight”> Alt. Active Item</label> </div> </div><!– /.pull-left –> </div><!– /.ace-settings-box –> </div><!– /.ace-settings-container –>

<div class=”page-header”> <h1> Workspace <small> <i class=”ace-icon fa fa-angle-double-right”></i> New Workspace </small> </h1> </div><!– /.page-header –>

<div class=”widget-box”> <div class=”widget-header widget-header-blue widget-header-flat”> <h4 class=”widget-title lighter”>New Workspace Wizard</h4>

</div>

<div class=”widget-body”> <div class=”widget-main”> <div id=”fuelux-wizard-container”> <div> <ul class=”steps”> <li data-step=”1” class=”active”> <span class=”step”>1</span> <span class=”title”>Portfolio</span> </li>

<li data-step=”2”> <span class=”step”>2</span> <span class=”title”>Product</span> </li>

<li data-step=”3”> <span class=”step”>3</span> <span class=”title”>Package</span> </li>

<li data-step=”4”> <span class=”step”>4</span> <span class=”title”>Deploy</span> </li> </ul> </div>

<hr />

<!– Portfolios –> <div class=”row”> <div class=”col-xs-3”></div> <div class=”col-xs-6”> <div id=”myCarousel” class=”carousel slide” data-ride=”carousel” data-interval=”false”> <!– Indicators –> <ol class=”carousel-indicators” id=”carousel-indicators”> </ol>

<!– Wrapper for slides –> <div class=”carousel-inner” role=”listbox” id=”carousel-inner”> </div>

<!– Left and right controls –> <a class=”left carousel-control” href=”#myCarousel” role=”button” data-slide=”prev”> <span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span> <span class=”sr-only”>Previous</span> </a> <a class=”right carousel-control” href=”#myCarousel” role=”button” data-slide=”next”> <span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span> <span class=”sr-only”>Next</span> </a> </div> </div>

</div> <!– /.row –>

</div>

<!– Wrapper for slides –> <div class=”carousel-inner” role=”listbox” id=”carousel-inner-product”> </div>

<!– Left and right controls –> <a class=”left carousel-control” href=”#myProducts” role=”button” data-slide=”prev”> <span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”></span> <span class=”sr-only”>Previous</span> </a> <a class=”right carousel-control” href=”#myProducts” role=”button” data-slide=”next”> <span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span> <span class=”sr-only”>Next</span> </a> </div> </div>

</div> <!– /.row –>

</div>

<div class=”step-pane” data-step=”3”> <div class=”center”> <h3 class=”blue lighter”>Summary for deployment</h3>

<table id=”simple-table” class=”table table-striped table-bordered table-hover”> <thead> <tr> <th class=”center”> <label class=”pos-rel”> <input type=”checkbox” class=”ace” /> <span class=”lbl”></span> </label> </th> <th>Image</th> <th>Name</th> <th class=”hidden-480”>CPU</th>

<th> <i class=”ace-icon fa fa-clock-o bigger-110 hidden-480”></i> Memory </th> <th class=”hidden-480”>Status</th>

</tr> </thead>

<td> <a href=”#”>jhyoo/gerrit-boca:latest</a> </td> <td>devops+gerrit</td> <td class=”hidden-480”>0.2</td> <td>512 MB</td>

<td class=”hidden-480”> <span class=”label label-sm label-success”>Public</span> </td> </tr>

<td> <a href=”#”>jhyoo/jenkins-boca:dev-0.5</a> </td> <td>devops+jenkins</td> <td class=”hidden-480”>0.2</td> <td>512 MB</td>

<td class=”hidden-480”> <span class=”label label-sm label-success”>Public</span> </td> </tr>

</tbody> </table>

</div> </div>

<div class=”step-pane” data-step=”4”> <div class=”center”> <h3 class=”green”>Congrats!</h3> Your product is ready to ship! Click finish to continue! </div> </div> </div> </div>

<!– PAGE CONTENT ENDS –> </div><!– /.col –> </div><!– /.row –> </div><!– /.page-content –> </div>

<!– POPUP service –> <div id=”draggable” class=”ui-widget-content” style=”position:absolute; top:100px; left:100px; z-index:1; visibility:hidden; background-color:white; “> <label id=”task_name”></label><br> <label> Cluster Name: </label> <input id=”id_input_text16” type=”text” placeholder=”Cluster Name”></input> <br> <label> containerInfo: </label> <br> <textarea id=”deploy” cols=”68” rows=”20”> { “deploy”: { “requestId”: “dragon fly”, “id”: “git”, “containerInfo”: { “type”: “DOCKER”, “docker”: { “network”: “BRIDGE”, “image”: “ubuntu:14.04”, “portMappings”: [ { “containerPortType”: “LITERAL”, “containerPort”: 9418, “hostPortType”: “FROM_OFFER”, “hostPort”: 0, “protocol”: “tcp” }, { “containerPortType”: “LITERAL”, “containerPort”: 80, “hostPortType”: “FROM_OFFER”, “hostPort”: 1, “protocol”: “tcp” } ] } }, “resources”: { “cpus”: 0.1, “memoryMb”: 128, “numPorts”: 2 }, “skipHealthchecksOnDeploy”: false, “healthcheckUri”: “/healthcheck” } } </textarea> <br> <button type=”submit” id=”updateTaskConfig”>Submit</button> <button type=”reset” id=”close”>Close</button> </div>

</div><!– /.main-content –>

<!– basic scripts –>

<!–[if !IE]> –> <script src=”assets/js/jquery.2.1.1.min.js”></script>

<!– <![endif]–>

<!–[if IE]> <script src=”assets/js/jquery.1.11.1.min.js”></script> <![endif]–>

<!–[if !IE]> –> <script type=”text/javascript”> window.jQuery || document.write(“<script src=’assets/js/jquery.min.js’>”~~“<”~~“/script>”); </script>

<!– <![endif]–>

<!–[if IE]> <script type=”text/javascript”> window.jQuery || document.write(“<script src=’assets/js/jquery1x.min.js’>”~~“<”~~“/script>”); </script> <![endif]–> <script type=”text/javascript”> if(‘ontouchstart’ in document.documentElement) document.write(“<script src=’assets/js/jquery.mobile.custom.min.js’>”~~“<”~~“/script>”); </script> <script src=”assets/js/bootstrap.min.js”></script>

<!– page specific plugin scripts –> <script src=”assets/js/fuelux.wizard.min.js”></script> <script src=”assets/js/jquery.validate.min.js”></script> <script src=”assets/js/additional-methods.min.js”></script> <script src=”assets/js/bootbox.min.js”></script> <script src=”assets/js/jquery.maskedinput.min.js”></script> <script src=”assets/js/jquery-ui.min.js”></script> <script src=”assets/js/select2.min.js”></script>

<!– ace scripts –> <script src=”assets/js/ace-elements.min.js”></script> <script src=”assets/js/ace.min.js”></script>

<!– BPMN-JS scripts –> <script src=”assets/js/bpmn-js/bpmn-modeler.js”></script>

<!– notifiy scripts –> <script src=”assets/js/notify.js”></script>

<!– inline scripts related to this page –>

jQuery(function($) { $(“#draggable”).draggable(); $(“#close”).click(function() { console.log(“close”); var layer = document.getElementById(“draggable”); layer.style.visibility=”hidden”; });

$(‘[data-rel=tooltip]’).tooltip();

$(“.select2”).css(‘width’,’200px’).select2({allowClear:true}) .on(‘change’, function(){ $(this).closest(‘form’).validate().element($(this)); });

var workspace_id = false; var workflow_id = false; var $validation = false;

// Portfolio listing $.ajax({ url: api_server.concat(“/catalog/portfolios”), headers: {‘X-Auth-Token’:token}, contentType: “application/json”, type: “GET”, success: function(resultData) { console.log(resultData); for(i = 0; i < resultData.total_count; i++) { $(‘<div class=”item”><img class=”img-responsive” src=”http://placehold.it/700x300”>’ +’<div class=”carousel-caption”>’ +resultData.results[i].name + ‘</div>’

‘</div>’).appendTo(‘#carousel-inner’);

$(‘<li data-target=”#myCarousel” data-slide-to=”’i’”></li>’).appendTo(‘.carousel-indicators’) } $(“.carousel-indicators li:first”).addClass(“active”); $(“.carousel-inner .item:first”).addClass(“active”); $(‘.carousel’).carousel(); }, });

$(‘#fuelux-wizard-container’) .ace_wizard({ //step: 2 //optional argument. wizard will jump to step “2” at first //buttons: ‘.wizard-actions:eq(0)’ }) .on(‘actionclicked.fu.wizard’ , function(e, info){ if(info.step == 1) { console.log(“step 1”); $.ajax({ url: api_server.concat(“/catalog/products”), headers: {‘X-Auth-Token’:token}, contentType: “application/json”, type: “GET”, success: function(resultData) { console.log(resultData); for(i = 0; i < resultData.total_count; i++) { $(‘<div class=”item”><img class=”img-responsive” src=”http://placehold.it/700x300”>’ +’<div class=”carousel-caption”>’ +resultData.results[i].name + ‘</div>’

‘</div>’).appendTo(‘#carousel-inner-product’);

$(‘<li data-target=”#myProducts” data-slide-to=”’i’”></li>’).appendTo(‘#carousel-indicators-product’) } $(“#carousel-indicators-product li:first”).addClass(“active”); $(“#carousel-inner-product .item:first”).addClass(“active”); $(‘#myProducts’).carousel(); }, });

} else if(info.step == 2) { console.log(“step 2”);

} else if(info.step == 3) { console.log(“Step 3: POST /api/v1/workspace/{user_id}/{workspace_id}/workflows/{workflow_id}/deploy”); console.log(workflow_id); $.ajax({ type: “POST”, url: ”api/v1/workspace“.concat(user_id.value).concat(””).concat(workspace_id).concat(“/workflows”).concat(workflow_id).concat(“/deploy”), success: function(resultData2) { workflow_id = resultData2.workflow_id; $.notify(“Deploy Tasks”, “success”); }, contentType: “application/json” });

} }) .on(‘finished.fu.wizard’, function(e) { bootbox.dialog({ message: “Thank you! Workspace is successfully created!”, buttons: { “success” : { “label” : “OK”, “className” : “btn-sm btn-primary” } } }); }).on(‘stepclick.fu.wizard’, function(e){ //e.preventDefault();//this will prevent clicking and selecting steps });

//jump to a step /** var wizard = $(‘#fuelux-wizard-container’).data(‘fu.wizard’) wizard.currentStep = 3; wizard.setState(); */

//determine selected step //wizard.selectedItem().step

$(‘#modal-wizard-container’).ace_wizard(); $(‘#modal-wizard .wizard-actions .btn[data-dismiss=modal]’).removeAttr(‘disabled’);

/** $(‘#date’).datepicker({autoclose:true}).on(‘changeDate’, function(ev) { $(this).closest(‘form’).validate().element($(this)); });

$(‘#mychosen’).chosen().on(‘change’, function(ev) { $(this).closest(‘form’).validate().element($(this)); }); */

$(document).one(‘ajaxloadstart.page’, function(e) { //in ajax mode, remove remaining elements before leaving page $(‘[class*=select2]’).remove(); }); }) </script>

<!– page specific plugin scripts –> <script src=”assets/js/fuelux.tree.min.js”></script>

<!– ace scripts –> <script src=”assets/js/ace-elements.min.js”></script> <script src=”assets/js/ace.min.js”></script>

<!– inline scripts related to this page –> <script type=”text/javascript”>

jQuery(function($){ var sampleData = initiateDemoData();//see below

$(‘#tree1’).ace_tree({ dataSource: sampleData[‘dataSource1’], multiSelect: true, cacheItems: true, ‘open-icon’ : ‘ace-icon tree-minus’, ‘close-icon’ : ‘ace-icon tree-plus’, ‘selectable’ : true, ‘selected-icon’ : ‘ace-icon fa fa-check’, ‘unselected-icon’ : ‘ace-icon fa fa-times’, loadingHTML : ‘<div class=”tree-loading”><i class=”ace-icon fa fa-refresh fa-spin blue”></i></div>’ });

var BpmnJS = window.BpmnJS; var bpmnjs = new BpmnJS({ container: ‘#bpmn’ }); function success() { $(‘body’).addClass(‘success’); }

function fail(err) { $(‘body’).addClass(‘fail’);

console.error(‘something went wrong!’); console.error(err); } //please refer to docs for more info $(‘#tree1’) .on(‘loaded.fu.tree’, function(e) { }) .on(‘updated.fu.tree’, function(e, result) { console.log(result); }) .on(‘selected.fu.tree’, function(e) { console.log(“selected items: “, $(‘#tree1’).tree(‘selectedItems’)[0].text); $.get(‘/admin/assets/resources/devops.bpmn’, function(pizzaDiagram) { bpmnjs.importXML(pizzaDiagram, function(err) { if (err) { return fail(err); }

try { //bpmnjs.get(‘bpmn’).zoom(‘fit-viewport’); return success(); } catch (e) { return fail(e); } }); }, ‘text’); }) .on(‘deselected.fu.tree’, function(e) { }) .on(‘opened.fu.tree’, function(e) { }) .on(‘closed.fu.tree’, function(e) { });

if($data != null)//this setTimeout is only for mimicking some random delay setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);

//we have used static data here //but you can retrieve your data dynamically from a server using ajax call //checkout examples/treeview.html and examples/treeview.js for more info }

return {‘dataSource1’: dataSource1 } }

}); </script>

</body> </html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

new_workspace.html.org

new_workspace.html.org

Files

new_workspace.html.org

Latest commit

History

new_workspace.html.org

File metadata and controls