portal/templates/workflow_b.html

   1 {% extends "layout-unfold1.html" %}\r
   2 \r
   3 {% block head %}\r
   4 {{ wizard.form.media }}\r
   5 {% endblock %}\r
   6 \r
   7 {% block unfold_main %}\r
   8 \r
   9 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/onelab.css" />\r
  10 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/fed4fire.css" />\r
  11 <!-- unbound Specific -->\r
  12 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/bootstrap.css">\r
  13         <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/workflow.css">\r
  14         \r
  15         <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">\r
  16         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>\r
  17         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>\r
  18         <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/dhtmlxform.css"/>\r
  19         <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/rmenu_styles.css"/>\r
  20 <style>\r
  21                 div.dhxform_item_label_left.button_save div.dhxform_btn_txt {\r
  22                         background-image: url(../common/imgs/save.gif);\r
  23                         background-repeat: no-repeat;\r
  24                         background-position: 0px 3px;\r
  25                         padding-left: 22px;\r
  26                         margin: 0px 15px 0px 12px;\r
  27                 }\r
  28                 div.dhxform_item_label_left.button_cancel div.dhxform_btn_txt {\r
  29                         background-image: url(../common/imgs/cancel.gif);\r
  30                         background-repeat: no-repeat;\r
  31                         background-position: 0px 3px;\r
  32                         padding-left: 22px;\r
  33                         margin: 0px 15px 0px 12px;\r
  34                 }\r
  35         </style>\r
  36 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/dhtmlx.css"/>\r
  37         <script src="{{STATIC_URL}}unbound_reservation_static/lib/jsBezier-0.6.js"></script>     \r
  38     <script src="{{STATIC_URL}}unbound_reservation_static/lib/jsplumb-geom-0.1.js"></script>\r
  39         <script src="{{STATIC_URL}}unbound_reservation_static/src/util.js"></script>\r
  40         <script src="{{STATIC_URL}}unbound_reservation_static/src/dom-adapter.js"></script>        \r
  41         <script src="{{STATIC_URL}}unbound_reservation_static/src/jsPlumb.js"></script>\r
  42         <script src="{{STATIC_URL}}unbound_reservation_static/src/endpoint.js"></script>                \r
  43         <script src="{{STATIC_URL}}unbound_reservation_static/src/connection.js"></script>\r
  44         <script src="{{STATIC_URL}}unbound_reservation_static/src/anchors.js"></script>        \r
  45         <script src="{{STATIC_URL}}unbound_reservation_static/src/defaults.js"></script>\r
  46     <script src="{{STATIC_URL}}unbound_reservation_static/src/connectors-bezier.js"></script>\r
  47         <script src="{{STATIC_URL}}unbound_reservation_static/src/connectors-statemachine.js"></script>\r
  48         <script src="{{STATIC_URL}}unbound_reservation_static/src/connectors-flowchart.js"></script>\r
  49     <script src="{{STATIC_URL}}unbound_reservation_static/src/connector-editors.js"></script>\r
  50         <script src="{{STATIC_URL}}unbound_reservation_static/src/renderers-svg.js"></script>\r
  51         <script src="{{STATIC_URL}}unbound_reservation_static/src/renderers-canvas.js"></script>\r
  52         <script src="{{STATIC_URL}}unbound_reservation_static/src/renderers-vml.js"></script>\r
  53         <script src="{{STATIC_URL}}unbound_reservation_static/src/jquery.jsPlumb.js"></script>\r
  54 \r
  55 \r
  56         <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/main.js"></script>\r
  57         <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/bootstrap.min.js"></script>\r
  58     <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/createpost.js"></script>\r
  59         <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/script.js"></script>\r
  60         <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/contextmenu/contextMenu.js"></script>\r
  61         <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/contextmenu/contextMenu.min.js"></script>\r
  62         <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/js/contextmenu/contextMenu.css">\r
  63 \r
  64         <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/menu/jquery.contextMenu.js"></script>\r
  65         <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/menu/jquery.ui.position.js"></script>\r
  66         <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/js/menu/jquery.contextMenu.css">\r
  67         \r
  68         <script src="{{STATIC_URL}}unbound_reservation_static/lib/dhtmlx.js"></script>\r
  69         \r
  70 \r
  71         <script> \r
  72         s=myslice.user().slices;\r
  73         console.log(s);\r
  74         //console.log(myslice.user.slices);\r
  75         $('input').bind('input', function() {\r
  76     alert($(this).value);\r
  77 });\r
  78         var myForm, myForm2, formData,str;\r
  79 var columns = {};\r
  80 var columns_unsaved = {};\r
  81 var myAcc;\r
  82 var myCalendar;\r
  83 \r
  84 \r
  85 document.body.onload = function(){\r
  86 \r
  87      var d = new Date();\r
  88                 \r
  89                 myCalendar1 = new dhtmlXCalendarObject(["fromdate"]);\r
  90                 myCalendar2 = new dhtmlXCalendarObject(["todate"]);\r
  91                 if (d.getDate()<10) {\r
  92                 var ndate="0"+(d.getDate()).toString();\r
  93                 }\r
  94                 else {\r
  95                 var ndate=(d.getDate()).toString();\r
  96                 }\r
  97                 if (d.getMonth()+1<10) {\r
  98                 var n=(d.getMonth()+1).toString();\r
  99                 var nmonth="0"+n;\r
 100                 } else {\r
 101                 var nmonth=(d.getMonth()+1).toString();\r
 102                 }\r
 103                 var today=d.getFullYear()+"-"+nmonth+"-"+ndate;\r
 104                 //console.log("today:"+today);\r
 105                 myCalendar1.setSensitiveRange( today, null);\r
 106                 myCalendar1.setDateFormat("%D %M %j %H:%i:%s EET %Y");\r
 107                 myCalendar2.setSensitiveRange(today, null);\r
 108                 myCalendar2.setDateFormat("%D %M %j %H:%i:%s EET %Y");\r
 109                 \r
 110                 d.setDate(d.getDate());\r
 111                 d.setHours(d.getHours());\r
 112                 d.setMinutes(d.getMinutes());\r
 113                 \r
 114                 document.getElementById("fromdate").value = myCalendar1.getFormatedDate(null,d);\r
 115                 \r
 116                 //d.setDate(14);\r
 117                 //d.setHours(10);\r
 118                 //d.setMinutes(0);\r
 119                 document.getElementById("todate").value = myCalendar2.getFormatedDate(null,d);\r
 120                 \r
 121                 doOnLoad();\r
 122                 \r
 123   }\r
 124 \r
 125 \r
 126 \r
 127         \r
 128         function setSens(inputId,mezh){\r
 129         var d1 = new Date();\r
 130                 //if(mezh=="min"){\r
 131                 //myCalendar1.setSensitiveRange(null,d1.getDate());\r
 132                         //\r
 133                 //}else{\r
 134                 //myCalendar.setSensitiveRange(null,"2015-04-14");\r
 135                         \r
 136                 //}\r
 137         }\r
 138         \r
 139 \r
 140                 \r
 141                 function doOnLoad() {\r
 142                 //myAcc = new dhtmlXAccordion({\r
 143                 //              parent: "accObj",\r
 144                 //              items: [\r
 145                 //                      {id: "a1", text: "General"},\r
 146                         //              {id: "a2", text: "ExoGeni"},\r
 147                         //              {id: "a3", text: "c"}\r
 148                         //      ]\r
 149                         //});\r
 150                         \r
 151                         var sel = document.getElementById('user_slices');\r
 152 for(var i = 0; i < s.length; i++) {\r
 153     var opt = document.createElement('option');\r
 154     opt.innerHTML = s[i];\r
 155     opt.value = s[i];\r
 156     sel.appendChild(opt);\r
 157 }\r
 158                 \r
 159                 \r
 160                 \r
 161                         formData = [\r
 162                                 \r
 163                                 \r
 164                                 {type: "combo", name:"testbed", label: "Select testbed", name: "testbed", options:[\r
 165                                         {text: "Netmode",  value: "Netmode", selected: true},\r
 166                                         {text: "Nitos",  value: "Nitos"},\r
 167                                         {text: "Wilabt", value: "wilabt"}\r
 168                                         \r
 169                                 ]}];\r
 170 formData1 = [\r
 171                                 {type: "combo", name:"exogeni", label: "ExoGeni Resource Type", name: "exogeni", options:[\r
 172                                         {text: "xo.small", value: "xo.small", selected: true},\r
 173                                         {text: "xo.medium", value: "xo.medium"},\r
 174                                         {text: "xo.large", value: "xo.large"},\r
 175                                         {text: "xo.xlarge", value: "xo.xlarge"},\r
 176                                         {text: "exogeni-m4", value: "exogeni-m4"}\r
 177                                 ]},\r
 178                                 {type: "combo", name:"wftestbeds", label: "Select testbed", comboType: "checkbox", name: "wftestbeds", options:[\r
 179                                         {text: "iMinds WiLab 2", value: "iMinds WiLab 2", selected: true},\r
 180                                         {text: "clab", value: "clab"}\r
 181                                 ]}];\r
 182         str = [                 \r
 183 \r
 184     {type: "button", name: "form_button_3", value: "Save changes"}\r
 185                         ];\r
 186 \r
 187 //renderForm();\r
 188                 //      myForm = new dhtmlXForm("myForm", formData);\r
 189                         \r
 190                         //document.getElementsByName("form_button_3").addEventListener('click', getItemsList);\r
 191                 \r
 192                         \r
 193                 }\r
 194 \r
 195 function nodeid(sour,target,id) {\r
 196 \r
 197 document.getElementById("elemid").value=id;\r
 198 //document.disableItem("elemid");\r
 199 \r
 200 \r
 201 }\r
 202 function renderForm() {\r
 203 //myForm = myAcc.cells("a1").attachForm();\r
 204         //              myForm.loadStruct(formData);\r
 205 //myForm2 = myAcc.cells("a2").attachForm();\r
 206 //myForm2.loadStruct(formData1);\r
 207 myForm = new dhtmlXForm("myForm", formData);\r
 208 myForm.disableItem("elemid");\r
 209     for (var i in str) {\r
 210         var element_spec = str[i];\r
 211         var form_wrapper = document.getElementById('myForm');\r
 212         renderElement(form_wrapper, element_spec);\r
 213                 \r
 214     }\r
 215 }\r
 216 \r
 217 function renderElement(container, spec) {\r
 218 \r
 219   switch (spec.type) {\r
 220         case 'fieldset1':\r
 221             renderFieldset(container, spec);\r
 222             break;\r
 223         default:\r
 224             renderInputElement(container, spec);\r
 225             break;\r
 226     }\r
 227 \r
 228 }\r
 229 \r
 230 function renderInputElement(container, spec) {\r
 231     if (spec.label) {\r
 232         renderInputLabel(container, spec.label);\r
 233     }\r
 234     \r
 235     var input_element = document.createElement('input');\r
 236     \r
 237     if (spec.type === 'input') {\r
 238         var input_type = 'text';\r
 239     } else {\r
 240         var input_type = spec.type;\r
 241     }\r
 242     \r
 243     input_element.setAttribute('type', input_type);\r
 244     input_element.setAttribute('name', spec.name);\r
 245     \r
 246     if (spec.value) {\r
 247         input_element.setAttribute('value', spec.value);\r
 248     }\r
 249     \r
 250     container.appendChild(input_element);\r
 251     \r
 252     attachAnyEventHandlers(input_element);\r
 253 }\r
 254 \r
 255 function renderInputLabel(container, labelText) {\r
 256     var label =  document.createElement('label');\r
 257     var labelText = document.createTextNode(labelText);\r
 258     \r
 259     container.appendChild(label);\r
 260     label.appendChild(labelText);\r
 261 }\r
 262 \r
 263 function renderFieldset(container, spec) {\r
 264     var fieldset = document.createElement('fieldset');\r
 265     var label = document.createElement('legend');\r
 266     var labelText = document.createTextNode(spec.label);\r
 267     \r
 268     fieldset.setAttribute('name', spec.name);\r
 269     \r
 270     if (spec.list) {\r
 271         for (var j in spec.list) {\r
 272             renderElement(fieldset, spec.list[j]);\r
 273         }\r
 274     }\r
 275     \r
 276     container.appendChild(fieldset);\r
 277     fieldset.appendChild(label);\r
 278     label.appendChild(labelText);\r
 279 }\r
 280 \r
 281 function attachAnyEventHandlers(element) {\r
 282     switch(element.getAttribute('name')) {\r
 283         case 'form_button_1':\r
 284             element.addEventListener('click', addFieldset);\r
 285             break;\r
 286         case 'form_button_2':\r
 287             element.addEventListener('click', resetForm);\r
 288             break;\r
 289         case 'form_button_3':\r
 290           //  element.addEventListener('click', getItemsList(document.getElementById('elemid').value));\r
 291             break;\r
 292         case 'form_button_4':\r
 293             element.addEventListener('click', getItemsString);\r
 294             break;\r
 295     }\r
 296 }\r
 297 \r
 298 function addFieldset() {\r
 299     var itemData = {\r
 300         type:"fieldset",\r
 301         name:"form_fieldset_" + k,\r
 302         label:"Fieldset" + k,\r
 303         list:[\r
 304             {type:"input", name:"form_input_" + k + "_1", label:"Input"},\r
 305             {type:"input", name:"form_input_" + k + "_2", label:"Input"}\r
 306         ]\r
 307     };\r
 308     \r
 309     str.splice(k, 0, itemData);\r
 310     k++;\r
 311     \r
 312     resetForm();\r
 313 }\r
 314 \r
 315 function removeFieldset() {\r
 316     if (k === 1) { // Don't delete buttons\r
 317         return;\r
 318     }\r
 319     \r
 320     k--;\r
 321     str.splice(k, 1);\r
 322     \r
 323     resetForm();\r
 324 }\r
 325 \r
 326 function resetForm(k,colid) {\r
 327 //var elemid=document.getElementByName('elemid').value;\r
 328 //console.log(columns)\r
 329 var a=[];\r
 330 if (colid){\r
 331 console.log('1'+jsondata);\r
 332 delete columns[colid];\r
 333 console.log('2'+jsondata);\r
 334 }\r
 335 for(var m in columns) {\r
 336     var value = columns[m];\r
 337         var test = value.data;\r
 338 //alert(value.valid_from+" " +value.valid_until + " " + test);\r
 339 //a[m]="{valid_from:"+value.valid_from+"{," +value.valid_until + " " +value.type;\r
 340 var myEvent =JSON.stringify(test);\r
 341 //myEvent=myEvent.substring(2);\r
 342 myEvent=myEvent.replace("}}","}");\r
 343 a.push(myEvent);\r
 344 //console.log("*****************"+myEvent);\r
 345 //console.log( a.toString() );\r
 346 \r
 347 }\r
 348 var jsondata="{\"resources\":["+a.toString()+"]}";\r
 349 console.log(jsondata);\r
 350 document.getElementById("jsondata").value=jsondata;\r
 351 \r
 352 var myEvent2 =JSON.stringify(a);\r
 353 //var myEvent =JSON.stringify(value.data);\r
 354 //console.log(myEvent2);\r
 355 var myEvent1 = {"resources":[{"type": "Node"},{"type": "Node"}]};\r
 356 \r
 357   //create_post();\r
 358  }\r
 359 \r
 360 function emptyForm(id) {\r
 361 console.log('empty'+id);\r
 362 delete columns[id];\r
 363 for(var m in columns) {\r
 364     var value = columns[m];\r
 365         var test = value.data;\r
 366 \r
 367 \r
 368 }\r
 369         \r
 370 \r
 371   \r
 372 }\r
 373 function readItemsList(id) {\r
 374 var value = columns[id];\r
 375 if (value.domain) {\r
 376 \r
 377 var testbed_value = "<li data-action = 'first'><a href='#' class='selector'><span>"+value.domain+"</span></a></li>";\r
 378 } else {\r
 379 var testbed_value = "<li data-action = 'first'><a href='#' class='selector'><span>ANY</span></a></li>";\r
 380 \r
 381 }\r
 382 var html_memu="<ul><li class='active'><span>Properties</span></li><li class='has-sub'><a href='#'><span>Testbed</span></a><ul>"+testbed_value+"<li data-action = 'first'><a href='#'><span>ANY</span></a></li><li data-action = 'second' ><a href='#' ><span>Netmode</span></a></li><li data-action = 'third'><a href='#'><span>Nitos</span></a></li><li class='last' data-action = 'forth'><a href='#'><span>Wilabt</span></a></li></ul></li><li class='last'><a href='#'><span>kati allo</span></a></li></ul>";\r
 383 //      $('#cssmenu').empty().append(html_memu);\r
 384         console.log("testbed"+testbed_value);\r
 385 \r
 386 }\r
 387 function getItemsList(id,nodetype,testbed) {\r
 388 console.log(s);\r
 389 console.log(s.length);\r
 390 \r
 391 if (testbed){\r
 392 document.getElementById('testbet').value=testbed;\r
 393 }\r
 394     var items = document.querySelectorAll('[type=text]');\r
 395   \r
 396 var key = id;\r
 397 from=document.getElementById("fromdate").value;\r
 398 to=document.getElementById("todate").value ;\r
 399 console.log("nikos"+id+$( "#testbet option:selected" ).text + from+to);\r
 400 domaintyp=document.getElementById('testbet').value;\r
 401 if (id){\r
 402 if (domaintyp){\r
 403  columns_unsaved[key] = {\r
 404  type:'Node',\r
 405  name:id,\r
 406  exclusive:nodetype,\r
 407  valid_from:from,\r
 408                 valid_until:to,\r
 409                  domain:document.getElementById('testbet').value\r
 410                 }\r
 411                 } else {\r
 412                 columns_unsaved[key] = {\r
 413  type:'Node',\r
 414  name:id,\r
 415  exclusive:nodetype,\r
 416  valid_from:from,\r
 417                 valid_until:to\r
 418                 }\r
 419                 } \r
 420     columns[key] = {\r
 421         valid_from:from,\r
 422                 valid_until:to,\r
 423                 type:'Node',\r
 424         domain:document.getElementById('testbet').value,\r
 425         exclusive: nodetype,\r
 426                 saved:true,\r
 427                 data: columns_unsaved[key]\r
 428     };\r
 429 \r
 430 resetForm(columns);\r
 431 }\r
 432 }\r
 433 \r
 434 function getItemsString() {\r
 435 var serv_response = jQuery.parseJSON('{{ responsejson }}');\r
 436     alert('{{ responsejson }}' + "****" +serv_response );\r
 437 //test[document.getElementByName('elemid')]=JSON.stringify(formData);\r
 438 }\r
 439         </script>\r
 440 \r
 441 <div class="container">\r
 442         <div class="row clearfix top-header">\r
 443                 <div class="col-md-12 column">\r
 444                         \r
 445                         \r
 446                 </div>\r
 447         </div>\r
 448         <div class="row border-editor content-editor">\r
 449                 <div class="col-md-2 column heigh-editor border-right-editor">\r
 450                          <span class="label label-info top-label">Select Node Type</span>\r
 451                          <ul class="tool-panel" id="sortable-element">\r
 452                                 <li attr-type="actor"> <img src="{{STATIC_URL}}unbound_reservation_static/img/workflow/vm_icon.png">Virtual machine</li>\r
 453                                 <li attr-type="wireless"> <img src="{{STATIC_URL}}unbound_reservation_static/img/workflow/wireless_icon.png">Wireless</li>\r
 454                                 <!--<li attr-type="openflow"> <img src="{{STATIC_URL}}unbound_reservation_static/img/workflow/open_flow_icon.png">Open Flow</li>-->\r
 455                          </ul>\r
 456                 \r
 457 \r
 458                 </div>\r
 459                 <div class="col-md-7 column heigh-editor">\r
 460                          <span class="label label-danger top-label">Slice Editor</span>\r
 461                          <div class="css-editor" id="editor"><ul id="menu" style="position: relative; top: 0px; left: 0px;"></ul> <ul class='custom-menu'>\r
 462   <li data-action = "first">ANY</li>\r
 463   <li data-action = "second">Netmode</li>\r
 464   <li data-action = "third">Third thing</li>\r
 465 </ul>\r
 466 <div id='cssmenu'>\r
 467 <ul>\r
 468    <li class='active'><span>Properties</span></li>\r
 469    <li class='has-sub'><a href='#'><span>Testbed</span></a>\r
 470       <ul>\r
 471          <li data-action = "first"><a href='#'><span>ANY</span></a></li>\r
 472                  <!--<li data-action = "second" class='selector'><a href='#' ><span>Netmode</span></a></li>-->\r
 473          <li data-action = "second" ><a href='#' ><span>Netmode</span></a></li>\r
 474          <li  class='last' data-action = "third"><a href='#'><span>Nitos</span></a></li>\r
 475                  <!--<li  class='last' data-action = "fifth"><a href='#'><span>PLE</span></a></li> -->\r
 476                 <!-- <li class='last' data-action = "forth"><a href='#'><span>Wilabt</span></a></li> -->\r
 477       </ul>\r
 478    </li>\r
 479    \r
 480   <!--    <li class='last'><a href='#'><span>kati allo</span></a></li> -->\r
 481 </ul>\r
 482 </div>\r
 483 <div id='cssmenu_'>\r
 484 <ul>\r
 485    <li class='active'><span>Properties</span></li>\r
 486    <li class='has-sub'><a href='#'><span>Testbed</span></a>\r
 487       <ul>\r
 488          \r
 489                  <li  class='last' data-action = "fifth"><a href='#'><span>PLE</span></a></li>\r
 490                 <!-- <li class='last' data-action = "forth"><a href='#'><span>Wilabt</span></a></li> -->\r
 491    </ul>\r
 492   </li>\r
 493    \r
 494  <!--    <li class='last'><a href='#'><span>kati allo</span></a></li> -->\r
 495 </ul>\r
 496 </div>\r
 497 </div>\r
 498                 </div>\r
 499                 <div class="col-md-3 column heigh-editor">\r
 500                          <span class="label label-danger top-label">Node Properties</span>\r
 501 \r
 502                          <div class="css-editor" id="editor"><br><br><div  align="center"><button type="button" id="b1" name="b1" class="btn btn-warning">Send request</button><br><br><button type="button" id="b2" name="b2" class="btn btn-warning" style="display:none;">Reserve request</button><div id="but"></div></div><br><br>\r
 503                         <div style="position:relative;margin-bottom:30px;"><input type="hidden" name="jsondata" id="jsondata" value="">\r
 504         <label style="position:absolute;top:5px;left:5px; for="fromdate">from:</label><input style="position:absolute;top:5px;left:45px;width:180px;font-size:12px;text-align:center;"  onclick="setSens('todate','max')" value="" id="fromdate" readonly>\r
 505         <br><label  style="position:absolute;top:45px;left:5px; for="todate">to:</label><input style="position:absolute;top:45px;left:45px;width:180px;font-size:12px;text-align:center;" onchange="getItemsList(document.getElementById('elemid').value)" onclick="setSens('fromdate','min')" value="" id="todate" readonly>\r
 506         <div style="display: none;><br><label  style="position:absolute;top:85px; for="elemid">NodeId</label><input type="hidden" style="position:absolute;top:85px;left:45px;width:180px;font-size:12px;text-align:center; value="" id="elemid" name="elemid" readonly>\r
 507 <br><select style="position:absolute;top:160px;width:180px;"  id="testbet" class="form-control input-sm col-md-1" type="hidden">\r
 508     <option value="">ANY</option>\r
 509         <option value="omf:netmode">Netmode</option>\r
 510     <option value="omf:nitos.outdoor">Nitos</option>\r
 511     <option value="ple">PLE</option>\r
 512     \r
 513 </select><br></div>\r
 514 \r
 515 <label  style="position:absolute;top:130px;left:65px;"> Select Slice</label>\r
 516 <select style="position:absolute;top:150px;width:180px;" id="user_slices" name="user_slices_list"></select>\r
 517 <!--<select style="position:absolute;top:150px;width:180px;" id="user_slices" name="user_slices_list" >\r
 518 \r
 519 {% for user_slices in slice %}\r
 520    <option value="{{user_slices}}"\r
 521        {% if user_slices == current_org %}selected="selected"{% endif %}>\r
 522        {{user_slices|capfirst}}\r
 523    </option>\r
 524 {% endfor %}\r
 525 \r
 526 </select>-->\r
 527 </div>\r
 528                 <span></span><br><br>\r
 529         <div id="form_wrapper"><table>\r
 530                 \r
 531                 <tr>\r
 532                         <td valign="top"><div id="myForm" style="height:200px;"></div></td>\r
 533                         \r
 534                 </tr>\r
 535         </table></div> </div>\r
 536                 </div>\r
 537         </div>\r
 538 </div>\r
 539 \r
 540 \r
 541 <!-- END of Reputation Specific -->\r
 542 \r
 543 {% endblock %}