Last active
September 21, 2016 12:54
-
-
Save ajberry/0ab2c0adca4f92855b26b63f929b108d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <title>Bare - Start Bootstrap Template</title> | |
| <!-- Bootstrap Core CSS --> | |
| <link href="css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <style> | |
| body { | |
| padding-top: 70px; | |
| /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ | |
| } | |
| #solution{ | |
| list-style:none; | |
| } | |
| .toolkititem{ | |
| width:100px; | |
| height:100px; | |
| display:block; | |
| margin:10px; | |
| } | |
| .red{ | |
| background-color:red; | |
| } | |
| .blue{ | |
| background-color:blue; | |
| } | |
| .panel-heading a:after { | |
| font-family:'Glyphicons Halflings'; | |
| content:"\e114"; | |
| float: right; | |
| color: grey; | |
| } | |
| .panel-heading a.collapsed:after { | |
| content:"\e080"; | |
| } | |
| connection { | |
| border: 10px solid #b51c29; | |
| border-radius: 31px; | |
| } | |
| .panel{ | |
| border:none!important; | |
| } | |
| .panel-default{ | |
| width:300px!important; | |
| } | |
| .panel-collapse{ | |
| border:1px solid #ddd; | |
| border-radius:5px; | |
| width:400px!important; | |
| } | |
| </style> | |
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | |
| <div class="container"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="#">Start Bootstrap</a> | |
| </div> | |
| <!-- Collect the nav links, forms, and other content for toggling --> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <ul class="nav navbar-nav"> | |
| <li> | |
| <a href="#">About</a> | |
| </li> | |
| <li> | |
| <a href="#">Services</a> | |
| </li> | |
| <li> | |
| <a href="#">Contact</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- /.navbar-collapse --> | |
| </div> | |
| <!-- /.container --> | |
| </nav> | |
| <!-- Page Content --> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-12 text-center"> | |
| <h1>A Bootstrap Starter Template</h1> | |
| <div class="row"> | |
| <div class="col-lg-4" id="toolbox"> | |
| <div class="toolkititem red" id="tool_displayui">Add UI Display</div> | |
| <div class="toolkititem blue" id="tool_scantofs">Scan to File Share</div> | |
| </div> | |
| <div class="col-lg-8" id="solutioncontainer" style="min-height:500px;"> | |
| <div id="solution" style="border: 1px black solid;min-height:300px;"> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /.row --> | |
| </div> | |
| <!-- /.container --> | |
| <!-- jQuery Version 1.11.1 --> | |
| <script src="js/jquery.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> | |
| <!-- Bootstrap Core JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="js/jquery.connections.js"></script> | |
| <script type="text/javascript"> | |
| $( init ); | |
| var rowNum = 0; | |
| function init() { | |
| $('.toolkititem').draggable({revert:true, revertDuration:0}); | |
| $('#solution').droppable( { | |
| drop: handleDropEvent | |
| //$( "#solution" ).sortable(); | |
| } ); | |
| } | |
| function handleDropEvent( event, ui ) { | |
| var rownum = $("#solution .panel-default").length; | |
| console.log(rownum); | |
| var draggable = ui.draggable; | |
| var mytype = draggable.attr('class'); | |
| if (!(mytype.includes("panel-default"))){ | |
| renderChildControls(draggable.attr('id'), rownum) | |
| $('.panel-default').draggable(); | |
| $('.panel-default').connections('update'); | |
| populateLinkDropDowns(rownum); | |
| } | |
| $('.panel-default').connections('update'); | |
| } | |
| function renderChildControls(type, rownum){ | |
| switch(type) { | |
| case "tool_displayui": | |
| $("#solution").append("<div id='listitem-" + rownum + "' data-number=" + rownum + " class='panel panel-default'><div class='panel-heading'><h3 class='panel-title'><a data-toggle='collapse' href='#collapse-" + rownum + "'>Display UI Information Screen</a></h3></div><div id='collapse-" + rownum + "' class='panel-collapse collapse'><div class='panel-body'><label for='label-displayui-title-" + rownum + "'>Title</label><input id='label-displayui-title-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-desc-" + rownum + "'>Description</label><input id='label-displayui-desc-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-message-" + rownum + "'>Message</label><textarea id='label-displayui-message-" + rownum + "' class='fld-value form-control' placeholder='Value' name='value'></textarea></div></div></div>"); | |
| break; | |
| case "tool_scantofs": | |
| $("#solution").append("<div id='listitem-" + rownum + "' data-number=" + rownum + " class='panel panel-default'><div class='panel-heading'><h3 class='panel-title'><a data-toggle='collapse' href='#collapse-" + rownum + "'>Scan to File Share</a></h3></div><div id='collapse-" + rownum + "' class='panel-collapse collapse'><div class='panel-body'><label for='label-displayui-host-" + rownum + "'>Host</label><input id='label-displayui-host-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-storedir-" + rownum + "'>Store Directory</label><input id='label-displayui-storedir-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-filename-" + rownum + "'>File Name</label><input id='label-displayui-filename-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-auth-" + rownum + "'>Authentication Method</label><input id='label-displayui-auth-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-user-" + rownum + "'>User</label><input id='label-displayui-user-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-pass-" + rownum + "'>Password</label><input id='label-displayui-pass-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-kerberos-" + rownum + "'>Kerberos Server</label><input id='label-displayui-kerberos-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><br /><div class='dropup'><button class='btn btn-default dropdown-toggle' type='button' id='dropdownMenu-" + rownum + "' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>Link To Other Task:<span class='caret'></span></button><ul class='dropdown-menu' id='dropdownlist-" + rownum + "' data-number='" + rownum + "' aria-labelledby='dropdownMenu1'></ul></div></div></div></div>"); | |
| //$("#solution").append("<div id='listitem-" + rownum + "' class='panel panel-default'><div class='panel-heading'><h3 class='panel-title'><a data-toggle='collapse' href='#collapse-" + rownum + "'>Scan to File Share</a></h3></div><div id='collapse-" + rownum + "' class='panel-collapse collapse'><div class='panel-body'><label for='label-displayui-host-" + rownum + "'>Host</label><input id='label-displayui-host-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-storedir-" + rownum + "'>Store Directory</label><input id='label-displayui-storedir-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-filename-" + rownum + "'>File Name</label><input id='label-displayui-filename-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-auth-" + rownum + "'>Authentication Method</label><input id='label-displayui-auth-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-user-" + rownum + "'>User</label><input id='label-displayui-user-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-pass-" + rownum + "'>Password</label><input id='label-displayui-pass-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><label for='label-displayui-kerberos-" + rownum + "'>Kerberos Server</label><input id='label-displayui-kerberos-" + rownum + "' class='fld-label form-control' type='text' placeholder='Label' name='label'><br /><button onclick='linkMe(" + rownum + ")'>Link to UI Task</button></div></div></div>"); | |
| break; | |
| default: | |
| $("#solution").append("<div id='listitem-" + rownum + "' data-number=" + rownum + " class='panel panel-default'><div class='panel-body'>Default</div></div>"); | |
| } | |
| } | |
| function populateLinkDropDowns(rownum){ | |
| //This adds the new item to all the other drop downs. Need to add all the items to the newly created item. | |
| $('.dropdown-menu').each(function(){ | |
| var addingTo = this.getAttribute("data-number"); | |
| if (rownum != addingTo){ | |
| $(this).append("<li><a href='#' onclick='createLink(this);' class='dropdownlinkitems' data-current=" + addingTo + " data-link='#listitem-" + rownum + "'>Link to ListItem " + rownum + "</a></li>"); | |
| } | |
| }); | |
| var newDD = '#dropdownlist-' + rownum; | |
| populateDropdown(newDD, rownum); | |
| } | |
| function populateDropdown(dd, current){ | |
| //Dont add self to dropdown | |
| $('.panel-default').each(function(){ | |
| var rownum = this.getAttribute("data-number"); | |
| $(dd).append("<li><a href='#' onclick='createLink(this);' class='dropdownlinkitems' data-current=" + current + " data-link='#listitem-" + rownum + "'>Link to ListItem " + rownum + "</a></li>"); | |
| }); | |
| } | |
| function linkMe(rownum, linkTo){ | |
| var currentItem = '#listitem-' + rownum.toString(); | |
| $(currentItem).connections({ | |
| to: linkTo, | |
| 'class': 'related', | |
| 'color': 'black' | |
| }); | |
| } | |
| function createLink(identifier){ | |
| var current = identifier.getAttribute("data-current"); | |
| var linkTo = identifier.getAttribute("data-link") | |
| linkMe(current, linkTo); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment