ecomp-sdk-app/src/main/webapp/WEB-INF/fusion/raptor/tree/testTree.jsp

   1 <%--
   2   ================================================================================
   3   eCOMP Portal SDK
   4   ================================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ================================================================================
  19   --%>
  20 <%@page import="org.openecomp.portalsdk.analytics.system.AppUtils" %>
  21
  22
  23 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  24 <html>
  25  <jsp:include page="header.jsp" flush="true" />
  26 <head>
  27         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  28         <title>Folder tree with Drag and Drop capabilities</title>
  29         <script>
  30                 var imgFolder = '<%=AppUtils.getImgFolderURL()%>';
  31         </script>
  32         <script type="text/javascript" src="<%= AppUtils.getBaseFolderURL() %>js/tree/ajax.js"></script>
  33         <script type="text/javascript" src="<%= AppUtils.getBaseFolderURL() %>js/tree/context-menu.js"></script>
  34         <script type="text/javascript" src="<%= AppUtils.getBaseFolderURL() %>js/tree/drag-drop-folder-tree.js">
  35
  36         /************************************************************************************************************
  37         (C) www.dhtmlgoodies.com, July 2006
  38
  39         Update log:
  40
  41
  42         This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
  43
  44         Terms of use:
  45         You are free to use this script as long as the copyright message is kept intact.
  46
  47         For more detailed license information, see http://www.dhtmlgoodies.com/index.html?page=termsOfUse
  48
  49         Thank you!
  50
  51         www.dhtmlgoodies.com
  52         Alf Magne Kalleland
  53
  54         ************************************************************************************************************/
  55         </script>
  56         <link rel="stylesheet" type="text/css" href="<%= AppUtils.getBaseFolderURL() %>css/raptor.css">
  57         <link rel="stylesheet" type="text/css" href="<%= AppUtils.getBaseFolderURL() %>css/tree/drag-drop-folder-tree.css">
  58         <link rel="stylesheet" type="text/css" href="<%= AppUtils.getBaseFolderURL() %>css/tree/context-menu.css">
  59
  60         <style type="text/css">
  61         /* CSS for the demo */
  62         img{
  63                 border:0px;
  64         }
  65         </style>
  66         <script type="text/javascript">
  67         //--------------------------------
  68         // Save functions
  69         //--------------------------------
  70         var ajaxObjects = new Array();
  71
  72         // Use something like this if you want to save data by Ajax.
  73         function saveMyTree()
  74         {
  75                         saveString = treeObj.getNodeOrders();
  76                         alert(saveString);
  77                         var ajaxIndex = ajaxObjects.length;
  78                         ajaxObjects[ajaxIndex] = new sack();
  79                         var url = 'tree';
  80                         //var url = 'tree';
  81                         ajaxObjects[ajaxIndex].requestFile = url;       // Specifying which file to get
  82                         ajaxObjects[ajaxIndex].onCompletion = function() { saveComplete(ajaxIndex); } ; // Specify function that will be executed after file has been found
  83                         ajaxObjects[ajaxIndex].runAJAX(url);            // Execute AJAX function
  84
  85         }
  86         function saveComplete(index)
  87         {
  88                 alert(ajaxObjects[index].response);
  89         }
  90
  91
  92         // Call this function if you want to save it by a form.
  93         function saveMyTree_byForm()
  94         {
  95                 document.myForm.elements['saveString'].value = treeObj.getNodeOrders();
  96                 document.myForm.elements['task'].value = 'save';
  97                 document.myForm.submit();
  98         }
  99
 100         function cancelMyTree_byForm(){
 101                 document.myForm.elements['task'].value = '';
 102                 document.myForm.submit();
 103         }
 104
 105         function deleteMyTree_byForm()
 106         {
 107                 document.myForm.elements['task'].value = 'delete';
 108                 document.myForm.submit();
 109         }
 110
 111         function addMyTree_byForm()
 112         {
 113                 document.myForm.elements['task'].value = 'new';
 114                 document.myForm.submit();
 115         }
 116
 117         function runReport()
 118         {
 119                 var id = JSTreeObj.selectedItem.parentNode.id.replace(/[^0-9]/gi,'');
 120                 alert("123" + id);
 121                 //document.myForm.action='<%=AppUtils.getReportExecuteActionURL()%>'+JSTreeObj.selectedItem;
 122                 document.myForm.action='dispatcher?action=raptor&r_action=report.run&c_master=' + id + '&PAGE_ID=HOME&refresh=Y';
 123
 124                 document.myForm.submit();
 125         }
 126
 127         function editReport()
 128         {
 129                 var id = JSTreeObj.selectedItem.parentNode.id.replace(/[^0-9]/gi,'');
 130                 alert("123" + id);
 131                 document.myForm.action='dispatcher?action=raptor&r_action=report.edit&c_master=' + id + '&PAGE_ID=HOME&refresh=Y';
 132                 document.myForm.submit();
 133         }
 134
 135         function expandTree(){
 136                 document.getElementById('expandedTree').style.display='block';
 137                 document.getElementById('expandedTreeHeader').style.display='block';
 138                 document.getElementById('collapsedTree').style.display='none';
 139         }
 140         function collapseTree(){
 141                 document.getElementById('expandedTree').style.display='none';
 142                 document.getElementById('expandedTreeHeader').style.display='none';
 143                 document.getElementById('collapsedTree').style.display='block';
 144         }
 145         </script>
 146
 147 </head>
 148 <body>
 149         <form name="reportForm" method="post">
 150         <table width="94%" border="0" cellspacing="1" align="center">
 151         <tr><td>
 152                 <div id="collapsedTree" style="position:absoulte;top:0;width:100%;height:25px;display:none;">
 153                 <table width="94%" border="0" cellspacing="1" align="left">
 154                         <tr>
 155                                 <td class=rtabletext align=left>
 156                                         <img border="0" src="<%= AppUtils.getImgFolderURL() %>tree/dhtmlgoodies_plus.gif" onClick="javascript:expandTree()" alt='Show Folder Tree'>
 157                                         Root Node
 158                                 </td>
 159                         </tr>
 160                 </table>
 161                 </div>
 162         </td></tr>
 163
 164
 165         <tr><td>
 166                 <div id="expandedTreeHeader" style="position:absoulte;top:0;width:100%;height:25px;display:block;">
 167                 <table width="94%" border="0" cellspacing="1" align="left">
 168                         <tr>
 169                                 <td class=rtabletext >
 170                                         <img border="0" src="<%= AppUtils.getImgFolderURL() %>tree/dhtmlgoodies_minus.gif" onClick="javascript:collapseTree()"  alt='Hide Folder Tree'>
 171                                         &nbsp;&nbsp;&nbsp;
 172                                         <!--<input type='button' class=rsmallbutton id='createFolder' value='Create Folder' onclick='javascript:JSTreeObj.addItem(JSTreeObj.selectedItem, JSTreeObj.selectedItem);'/>
 173                                         <input type='button' class=rsmallbutton id='createFolder' value='Run' onclick='javascript:JSTreeObj.addItem(JSTreeObj.selectedItem, JSTreeObj.selectedItem);'/>
 174                                         <input type='button' class=rsmallbutton id='createFolder' value='Edit' onclick='javascript:JSTreeObj.addItem(JSTreeObj.selectedItem, JSTreeObj.selectedItem);'/>-->
 175                                         <a href="#" onclick='javascript:JSTreeObj.addItem(JSTreeObj.selectedItem, JSTreeObj.selectedItem);'>Create Folder</a> |
 176                                         <a href="#" onclick='javascript:JSTreeObj.deleteItem(JSTreeObj.selectedItem, JSTreeObj.selectedItem);'>Delete Fodler</a> |
 177                                         <a href="#" onclick='javascript:runReport();'>Run Report</a> |
 178                                         <a href="#" onclick='javascript:editReport();'>Edit Report</a>
 179                                 </td>
 180                         </tr>
 181                 </table>
 182                 </div>
 183         </td></tr>
 184         <tr>
 185                 <td>
 186                         <div id="expandedTree" style="position:absoulte;top:0;width:100%;height:160px;display:block">
 187                         <table>
 188                                 <tr>
 189
 190                                 <td width="50%">
 191                                         <div id="scrollableTable" class="scrollableTable" style="position:absoulte;top:0;width:100%;height:150px;display:block">
 192                                                 <table width="94%" border="0" cellspacing="1" align="center">
 193                                                         <tr>
 194                                                                 <td >
 195                                                                         <%=request.getAttribute("folderList")%>
 196                                                                 </td>
 197                                                         </tr>
 198                                                 </table>
 199                                         </div>
 200                                 </td>
 201                                 <td width="50%" valign="bottom">
 202                                         <table>
 203                                                 <tr><td width="100%" class=rtabletext >
 204                                                         <a href="#" onclick="treeObj.collapseAll()">Collapse all</a> |
 205                                                         <a href="#" onclick="treeObj.expandAll()">Expand all</a>
 206                                                 </td></tr>
 207                                                 <tr><td width="100%">
 208                                                         <input type="button" class=rsmallbutton onclick="saveMyTree_byForm()" value="Save">
 209                                                         <input type="button" class=rsmallbutton onclick="cancelMyTree_byForm()" value="Cancel">
 210                                                 </td></tr>
 211                                         </table>
 212
 213                                 </td>
 214                                 </tr>
 215
 216                         </table>
 217                         </div>
 218                 </td>
 219         </tr>
 220         <tr><td colspan=2>
 221         <div class="scrollableTable" style="width:100%;height:400px;">
 222                 <iframe id="reportFrame" name="reportFrame" width="100%" height="100%">
 223
 224                 </iframe>
 225         </div>
 226         </td></tr>
 227         </table>
 228         </Form>
 229         <script type="text/javascript">
 230                 treeObj = new JSDragDropTree();
 231                 treeObj.setTreeId('reportFolderTree');
 232                 treeObj.setMaximumDepth(7);
 233                 treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
 234                 treeObj.initTree();
 235                 treeObj.expandAll();
 236
 237         </script>
 238
 239         <!-- Form - if you want to save it by form submission and not Ajax -->
 240         <form name="myForm" action="tree" method="post">
 241                 <input type="hidden" name="saveString">
 242                 <input type="hidden" name="task">
 243                 <input type="hidden" name="newName">
 244                 <input type="hidden" name="deleteIds">
 245         </form>
 246
 247 </body>
 248 </html>