<div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-gray"> <span class="info-box-icon"><i class="fa fa-list-ol"></i></span> <div class="info-box-content"> <span class="custom-info-box-text-header">Req Monthly Count</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="custom-progress-description"> 요구사항 조회 <i class="fa fa-arrow-circle-right"></i> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-green"> <span class="info-box-icon"><i class="fa fa-plus-square-o"></i></span> <div class="info-box-content"> <span class="custom-info-box-text-header">Monthly Regist Req.</span> <span class="info-box-number">3,130</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="custom-progress-description"> 요구사항 등록/변경 <i class="fa fa-arrow-circle-right"></i> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-gray"> <span class="info-box-icon"><i class="fa fa-comments-o"></i></span> <div class="info-box-content"> <span class="custom-info-box-text-header">Monthly Accept Req</span> <span class="info-box-number">13,931</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="custom-progress-description"> 요구사항 리뷰/승인 <i class="fa fa-arrow-circle-right"></i> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-gray"> <span class="info-box-icon"><i class="fa fa-bar-chart"></i></span> <div class="info-box-content"> <span class="custom-info-box-text-header">Monthly Sync Req.</span> <span class="info-box-number">130,463</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="custom-progress-description"> 요구사항 연동/분석 <i class="fa fa-arrow-circle-right"></i> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> </div> <div class="row font13"> <div class="col-md-3"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title"><span class="font13">서비스 & 제품 선택</span></h3> <div class="box-tools"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> </div> </div> <div class="box-body no-padding"> <ul class="nav nav-pills nav-stacked font13"> <div class="font12"> <div id="mmenu"> <!-- <button type="button" id="add_folder"> <i class="fa fa-plus"></i> add folder </button> <button type="button" id="add_default"> <i class="fa fa-plus"></i> add file </button> <button type="button" id="rename"> <i class="fa fa-eraser"></i> rename </button> <button type="button" id="remove"> <i class="fa fa-minus"></i> remove </button> <button type="button" id="cut"> <i class="fa fa-cut"></i> cut </button> <button type="button" id="copy"> <i class="fa fa-copy"></i> copy </button> <button type="button" id="paste"> <i class="fa fa-paste"></i> paste </button> <button type="button" id="refresh" title="refresh" onclick="$('#demo').jstree('refresh',-1);"> <i class="fa fa-search"></i> refresh </button> --> <input type="text" id="text" placeholder="찾을 노드 이름 입력" data-tooltip="Press Enter To Node To Search" /> <button type="button" id="search" title="Search"> <i class="fa fa-search"></i> Search </button> </div> <div id="demo"></div> </div> </ul> <br> <a href="ARMS-req-regist.html" class="btn btn-primary btn-block margin-bottom font13">제품 & 서비스 선택완료</a> </div> <!-- /.box-body --> </div> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title"><span class="font13">서비스 & 제품 버전 선택</h3> <div class="box-tools"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> </button> </div> </div> <div class="box-body no-padding"> <ul class="control-sidebar-menu"> <li> <a href="javascript:void(0)"> <h4 class="custom-control-sidebar-subheading"> SK Hynix aRMS 1.0.1-RELEASE <span class="label label-danger pull-right">70%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-danger" style="width: 70%"></div> </div> </a> </li> <li> <a href="javascript:void(0)"> <h4 class="custom-control-sidebar-subheading"> Samsung SDS aRMS 1.0.3-RELEASE <span class="label label-success pull-right">95%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-success" style="width: 95%"></div> </div> </a> </li> <li> <a href="javascript:void(0)"> <h4 class="custom-control-sidebar-subheading"> aRMS Core 1.0.7-SNAPSHOT <span class="label label-warning pull-right">50%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-warning" style="width: 50%"></div> </div> </a> </li> <li> <a href="javascript:void(0)"> <h4 class="custom-control-sidebar-subheading"> aRMS Atlassian Sell 3.1.3-SNAPSHOT <span class="label label-primary pull-right">68%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" style="width: 68%"></div> </div> </a> </li> </ul> </div> <!-- /.box-body --> </div> <!-- /. box --> <!-- /. box --> </div> <script type="text/javascript"> function jsTreeBuild(){ console.log("href: "+$(location).attr('href')); console.log("protocol: "+$(location).attr('protocol')); console.log("host: "+$(location).attr('host')); console.log("pathname: "+$(location).attr('pathname')); console.log("search: "+$(location).attr('search')); console.log("hostname: "+$(location).attr('hostname')); console.log("port: "+$(location).attr('port')); var isDevelopingToRoute = ""; //operation enviorment setup and local development configuration if($(location).attr('port') == 9999){ console.log("csrf 우회 because local development"); isDevelopingToRoute = "http://localhost:8082" }else{ $.ajax({ async: false, type: 'GET', url: "/api/jsTreeServiceFramework/security/csrf.do", success: function(r) { var token = r._csrf_token; var header = r._csrf_headerName; $(document).ajaxSend(function(e, xhr, options) { xhr.setRequestHeader(header, token); }); } }); } $("#demo").bind( "before.jstree", function(e, data) { $("#alog").append(data.func + "<br />"); $("li:not([rel='drive']).jstree-open > a > .jstree-icon").css('background-image', 'url(../dist/js/jstree-v.pre1.0/themes/toolbar_open.png)'); $("li:not([rel='drive']).jstree-closed > a > .jstree-icon").css('background-image', 'url(../dist/js/jstree-v.pre1.0/themes/ic_explorer.png)'); }).jstree({ // List of active plugins "plugins": ["themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu", "checkbox"], //contextmenu "contextmenu": { items: { // Could be a function that should return an object like this one "create": { "separator_before": true, "separator_after": true, "label": "Create", "action": false, "submenu": { "create_file": { "seperator_before": false, "seperator_after": false, "label": "File", action: function(obj) { this.create(obj, "last", { "attr": { "rel": "default" } }); } }, "create_folder": { "seperator_before": false, "seperator_after": false, "label": "Folder", action: function(obj) { this.create(obj, "last", { "attr": { "rel": "folder" } }); } } } }, "ccp": { "separator_before": false, "separator_after": true, "label": "Edit", "action": false, "submenu": { "cut": { "seperator_before": false, "seperator_after": false, "label": "Cut", action: function(obj) { this.cut(obj, "last", { "attr": { "rel": "default" } }); } }, "paste": { "seperator_before": false, "seperator_after": false, "label": "Paste", action: function(obj) { this.paste(obj, "last", { "attr": { "rel": "folder" } }); } }, "changeType": { "seperator_before": false, "seperator_after": false, "label": "Change Type", "submenu": { "toFile": { "seperator_before": false, "seperator_after": false, "label": "toFile", action: function(obj) { this.set_type("default"); } }, "toFolder": { "seperator_before": false, "seperator_after": false, "label": "toFolder", action: function(obj) { this.set_type("folder"); } } } } } } } }, // I usually configure the plugin that handles the data first // This example uses JSON as it is most common "json_data": { // This tree is ajax enabled - as this is most common, and maybe a bit more complex // All the options are almost the same as jQuery's AJAX (read the docs) "ajax": { // the URL to fetch the data "url": isDevelopingToRoute + "/com/ext/jstree/springiBatis/core/getChildNode.do", // the `data` function is executed in the instance's scope // the parameter is the node being loaded // (may be -1, 0, or undefined when loading the root nodes) "data": function(n) { // the result is fed to the AJAX request `data` option return { "c_id": n.attr ? n.attr("id").replace("node_", "").replace("copy_", "") : 1 }; }, "success": function(n) { jSuccess('access good'); } } }, // Configuring the search plugin "search": { // As this has been a common question - async search // Same as above - the `ajax` config option is actually jQuery's AJAX object "ajax": { "url": isDevelopingToRoute + "/com/ext/jstree/springiBatis/core/searchNode.do", // You get the search string as a parameter "data": function(str) { return { "searchString": str }; }, "success": function(n) { jSuccess('search data complete'); } } }, // Using types - most of the time this is an overkill // read the docs carefully to decide whether you need types "types": { // I set both options to -2, as I do not need depth and children count checking // Those two checks may slow jstree a lot, so use only when needed "max_depth": -2, "max_children": -2, // I want only `drive` nodes to be root nodes // This will prevent moving or creating any other type as a root node "valid_children": ["drive"], "types": { // The default type "default": { // I want this type to have no children (so only leaf nodes) // In my case - those are files "valid_children": "none", // If we specify an icon for the default type it WILL OVERRIDE the theme icons "icon": { "image": "../dist/js/jstree-v.pre1.0/themes/attibutes.png" } }, // The `folder` type "folder": { // can have files and other folders inside of it, but NOT `drive` nodes "valid_children": ["default", "folder"], "icon": { "image": "../dist/js/jstree-v.pre1.0/themes/ic_explorer.png" } }, // The `drive` nodes "drive": { // can have files and folders inside, but NOT other `drive` nodes "valid_children": ["default", "folder"], "icon": { "image": "../dist/js/jstree-v.pre1.0/themes/home.png" }, // those prevent the functions with the same name to be used on `drive` nodes // internally the `before` event is used "start_drag": false, "move_node": false, "delete_node": false, "remove": false } } }, // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin // the UI plugin - it handles selecting/deselecting/hovering nodes "ui": { // this makes the node with ID node_4 selected onload "initially_select": ["node_4"] }, // the core plugin - not many options here "core": { // just open those two nodes up // as this is an AJAX enabled tree, both will be downloaded from the server "initially_open": ["node_2", "node_3"] } }).bind("create.jstree", function(e, data) { $.post("/com/ext/jstree/springiBatis/core/addNode.do", { "ref": data.rslt.parent.attr("id").replace("node_", "").replace("copy_", ""), "c_position": data.rslt.position, "c_title": data.rslt.name, "c_type": data.rslt.obj.attr("rel") }, function(r) { if (r.status) { $(data.rslt.obj).attr("id", "node_" + r.id); jNotify('Notification : <strong>Add Node</strong>, Complete !'); } else { $.jstree.rollback(data.rlbk); } if (typeof Chat != "undefined"){ Chat.sendMessage("노드를 추가했습니다. 추가된 노드의 아이디는 " + r.id , function(data) { console.log(data); }); } jstreeDataTableReload(); jsTreeBuild(); }); }).bind("remove.jstree", function(e, data) { data.rslt.obj.each(function() { $.ajax({ async: false, type: 'POST', url: "/com/ext/jstree/springiBatis/core/removeNode.do", data: { "c_id": this.id.replace("node_", "").replace("copy_", "") }, success: function(r) { jNotify('Notification : <strong>Remove Node</strong>, Complete !'); if (typeof Chat != "undefined"){ Chat.sendMessage("노드를 삭제했습니다. 삭제된 노드의 아이디는 " + r.c_id , function(data) { console.log(data); }); } jstreeDataTableReload(); jsTreeBuild(); } }); }); }).bind("rename.jstree", function(e, data) { $.post("/com/ext/jstree/springiBatis/core/alterNode.do", { "c_id": data.rslt.obj.attr("id").replace("node_", "").replace("copy_", ""), "c_title": data.rslt.new_name, "c_type": data.rslt.obj.attr("rel") }, function(r) { if (!r.status) { $.jstree.rollback(data.rlbk); } jSuccess('Rename Node Complete'); if (typeof Chat != "undefined"){ Chat.sendMessage("노드를 변경했습니다. 변경된 노드의 아이디는 " + r.c_id , function(data) { console.log(data); }); } jstreeDataTableReload(); jsTreeBuild(); }); }).bind("set_type.jstree", function(e, data) { $.post("/com/ext/jstree/springiBatis/core/alterNodeType.do", { "c_id": data.rslt.obj.attr("id").replace("node_", "").replace("copy_", ""), "c_title": data.rslt.new_name, "c_type": data.rslt.obj.attr("rel") }, function(r) { jSuccess('Node Type Change'); if (typeof Chat != "undefined"){ Chat.sendMessage("노드를 변경했습니다. 변경된 노드의 아이디는 " + r.c_id , function(data) { console.log(data); }); } jstreeDataTableReload(); jsTreeBuild(); }); }).bind("move_node.jstree", function(e, data) { data.rslt.o.each(function(i) { $.ajax({ async: false, type: 'POST', url: "/com/ext/jstree/springiBatis/core/moveNode.do", data: { "c_id": $(this).attr("id").replace("node_", "").replace("copy_", ""), "ref": data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_", "").replace("copy_", ""), "c_position": data.rslt.cp + i, "c_title": data.rslt.name, "copy": data.rslt.cy ? 1 : 0, "multiCounter": i }, success: function(r) { if (r.status) { $.jstree.rollback(data.rlbk); } else { $(data.rslt.oc).attr("id", "node_" + r.id); if (data.rslt.cy && $(data.rslt.oc).children("UL").length) { data.inst.refresh(data.inst._get_parent(data.rslt.oc)); } } jNotify('Notification : <strong>Move Node</strong> Complete !'); if (typeof Chat != "undefined"){ Chat.sendMessage("노드가 이동되었습니다. 이동된 노드의 아이디는 " + r.c_id , function(data) { console.log(data); }); } jstreeDataTableReload(); jsTreeBuild(); } }); }); }).bind("select_node.jstree", function (event, data) { // `data.rslt.obj` is the jquery extended node that was clicked if ($.isFunction(jsTreeClick)) { console.log(data.rslt.obj); jsTreeClick(data.rslt.obj.attr("id")); } }); $("#mmenu input, #mmenu button").click(function() { switch (this.id) { case "add_default": case "add_folder": $("#demo").jstree("create", null, "last", { "attr": { "rel": this.id.toString().replace("add_", "") } }); break; case "search": $("#demo").jstree("search", document.getElementById("text").value); //$("#jstreeTable_filter").find('input[type="search"]').val(); $('#jstreeTable').DataTable().column(6).search(document.getElementById("text").value).draw(); break; case "text": break; default: $("#demo").jstree(this.id); break; } }); } $(function() { jsTreeBuild(); }); // Code for the menu buttons </script> <!-- /.col --> <div class="col-md-9"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title font13">New Requirement</h3> </div> <!-- /.box-header --> <div class="box-body"> <div class="form-group"> <input class="form-control font13" placeholder="적용할 제품(서비스): 직접 입력 금지"> </div> <div class="form-group"> <input class="form-control font13" placeholder="적용할 제품(서비스) 버전 정보: 직접 입력 금지"> </div> <div class="form-group"> <input class="form-control font13" placeholder="요구사항 제목:"> </div> <div class="form-group"> <ul class="wysihtml5-toolbar" style=""><li class="dropdown"> <a class="btn btn-default dropdown-toggle " data-toggle="dropdown"> <span class="glyphicon glyphicon-font"></span> <span class="current-font">Normal text</span> <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="p" tabindex="-1" href="javascript:;" unselectable="on">Normal text</a></li> <li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" tabindex="-1" href="javascript:;" unselectable="on">Heading 1</a></li> <li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" tabindex="-1" href="javascript:;" unselectable="on">Heading 2</a></li> <li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h3" tabindex="-1" href="javascript:;" unselectable="on">Heading 3</a></li> <li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h4" tabindex="-1" href="javascript:;" unselectable="on">Heading 4</a></li> <li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h5" tabindex="-1" href="javascript:;" unselectable="on">Heading 5</a></li> <li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h6" tabindex="-1" href="javascript:;" unselectable="on">Heading 6</a></li> </ul> </li> <li> <div class="btn-group"> <a class="btn btn-default" data-wysihtml5-command="bold" title="CTRL+B" tabindex="-1" href="javascript:;" unselectable="on">Bold</a> <a class="btn btn-default" data-wysihtml5-command="italic" title="CTRL+I" tabindex="-1" href="javascript:;" unselectable="on">Italic</a> <a class="btn btn-default" data-wysihtml5-command="underline" title="CTRL+U" tabindex="-1" href="javascript:;" unselectable="on">Underline</a> <a class="btn btn-default" data-wysihtml5-command="small" title="CTRL+S" tabindex="-1" href="javascript:;" unselectable="on">Small</a> </div> </li> <li> <a class="btn btn-default" data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="blockquote" data-wysihtml5-display-format-name="false" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-quote"></span> </a> </li> <li> <div class="btn-group"> <a class="btn btn-default" data-wysihtml5-command="insertUnorderedList" title="Unordered list" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-list"></span> </a> <a class="btn btn-default" data-wysihtml5-command="insertOrderedList" title="Ordered list" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-th-list"></span> </a> <a class="btn btn-default" data-wysihtml5-command="Outdent" title="Outdent" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-indent-right"></span> </a> <a class="btn btn-default" data-wysihtml5-command="Indent" title="Indent" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-indent-left"></span> </a> </div> </li> <li> <div class="bootstrap-wysihtml5-insert-link-modal modal fade" data-wysihtml5-dialog="createLink"> <div class="modal-dialog "> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Insert link</h3> </div> <div class="modal-body"> <div class="form-group"> <input value="http://" class="bootstrap-wysihtml5-insert-link-url form-control" data-wysihtml5-dialog-field="href"> </div> <div class="checkbox"> <label> <input type="checkbox" class="bootstrap-wysihtml5-insert-link-target" checked="">Open link in new window </label> </div> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal" data-wysihtml5-dialog-action="cancel" href="#">Cancel</a> <a href="#" class="btn btn-primary" data-dismiss="modal" data-wysihtml5-dialog-action="save">Insert link</a> </div> </div> </div> </div> <a class="btn btn-default" data-wysihtml5-command="createLink" title="Insert link" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-share"></span> </a> </li> <li> <div class="bootstrap-wysihtml5-insert-image-modal modal fade" data-wysihtml5-dialog="insertImage"> <div class="modal-dialog "> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Insert image</h3> </div> <div class="modal-body"> <div class="form-group"> <input value="http://" class="bootstrap-wysihtml5-insert-image-url form-control" data-wysihtml5-dialog-field="src"> </div> </div> <div class="modal-footer"> <a class="btn btn-default" data-dismiss="modal" data-wysihtml5-dialog-action="cancel" href="#">Cancel</a> <a class="btn btn-primary" data-dismiss="modal" data-wysihtml5-dialog-action="save" href="#">Insert image</a> </div> </div> </div> </div> <a class="btn btn-default" data-wysihtml5-command="insertImage" title="Insert image" tabindex="-1" href="javascript:;" unselectable="on"> <span class="glyphicon glyphicon-picture"></span> </a> </li> </ul><textarea id="compose-textarea" class="form-control" style="height: 300px; display: none;"> <h1><u>Heading Of Message</u></h1> <h4>Subheading</h4> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>List item four</li> </ul> <p>Thank you,</p> <p>John Doe</p> </textarea><iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="display: block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(210, 214, 222); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px; outline: rgb(85, 85, 85) none 0px; outline-offset: 0px; padding: 6px 12px; position: static; inset: auto; z-index: auto; vertical-align: baseline; text-align: start; box-sizing: border-box; box-shadow: none; border-radius: 0px; width: 100%; height: 300px;"></iframe> </div> <div class="form-group"> <div class="btn btn-default btn-file font13"> <i class="fa fa-paperclip"></i> Attachment <input type="file" name="attachment"> </div> <p class="help-block">Max. 512MB</p> </div> </div> <!-- /.box-body --> <div class="box-footer"> <div class="pull-right"> <button type="button" class="btn btn-default font13"><i class="fa fa-pencil"></i> Draft</button> <button type="submit" class="btn btn-primary font13"><i class="fa fa-envelope-o"></i> Send</button> </div> <button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Discard</button> </div> <!-- /.box-footer --> </div> <!-- /. box --> </div> <!-- /.col --> </div> <!-- /.row -->