--- /dev/null
+{% extends "layout-unfold1.html" %}\r
+\r
+{% block head %}\r
+{{ wizard.form.media }}\r
+{% endblock %}\r
+\r
+{% block unfold_main %}\r
+\r
+<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/onelab.css" />\r
+<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/fed4fire.css" />\r
+<!-- unbound Specific -->\r
+<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/bootstrap.css">\r
+ <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/workflow.css">\r
+ \r
+ <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">\r
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>\r
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>\r
+ <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/dhtmlxform.css"/>\r
+ <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/rmenu_styles.css"/>\r
+<style>\r
+ div.dhxform_item_label_left.button_save div.dhxform_btn_txt {\r
+ background-image: url(../common/imgs/save.gif);\r
+ background-repeat: no-repeat;\r
+ background-position: 0px 3px;\r
+ padding-left: 22px;\r
+ margin: 0px 15px 0px 12px;\r
+ }\r
+ div.dhxform_item_label_left.button_cancel div.dhxform_btn_txt {\r
+ background-image: url(../common/imgs/cancel.gif);\r
+ background-repeat: no-repeat;\r
+ background-position: 0px 3px;\r
+ padding-left: 22px;\r
+ margin: 0px 15px 0px 12px;\r
+ }\r
+ </style>\r
+<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/css/dhtmlx.css"/>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/lib/jsBezier-0.6.js"></script> \r
+ <script src="{{STATIC_URL}}unbound_reservation_static/lib/jsplumb-geom-0.1.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/util.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/dom-adapter.js"></script> \r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/jsPlumb.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/endpoint.js"></script> \r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/connection.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/anchors.js"></script> \r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/defaults.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/connectors-bezier.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/connectors-statemachine.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/connectors-flowchart.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/connector-editors.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/renderers-svg.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/renderers-canvas.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/renderers-vml.js"></script>\r
+ <script src="{{STATIC_URL}}unbound_reservation_static/src/jquery.jsPlumb.js"></script>\r
+\r
+\r
+ <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/main.js"></script>\r
+ <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/bootstrap.min.js"></script>\r
+ <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/createpost.js"></script>\r
+ <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/script.js"></script>\r
+ <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/contextmenu/contextMenu.js"></script>\r
+ <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/contextmenu/contextMenu.min.js"></script>\r
+ <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/js/contextmenu/contextMenu.css">\r
+\r
+ <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/menu/jquery.contextMenu.js"></script>\r
+ <script type="text/javascript" src="{{STATIC_URL}}unbound_reservation_static/js/menu/jquery.ui.position.js"></script>\r
+ <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}unbound_reservation_static/js/menu/jquery.contextMenu.css">\r
+ \r
+ <script src="{{STATIC_URL}}unbound_reservation_static/lib/dhtmlx.js"></script>\r
+ \r
+\r
+ <script> \r
+ s=myslice.user().slices;\r
+ console.log(s);\r
+ //console.log(myslice.user.slices);\r
+ $('input').bind('input', function() {\r
+ alert($(this).value);\r
+});\r
+ var myForm, myForm2, formData,str;\r
+var columns = {};\r
+var columns_unsaved = {};\r
+var myAcc;\r
+var myCalendar;\r
+\r
+\r
+document.body.onload = function(){\r
+\r
+ var d = new Date();\r
+ \r
+ myCalendar1 = new dhtmlXCalendarObject(["fromdate"]);\r
+ myCalendar2 = new dhtmlXCalendarObject(["todate"]);\r
+ if (d.getDate()<10) {\r
+ var ndate="0"+(d.getDate()).toString();\r
+ }\r
+ else {\r
+ var ndate=(d.getDate()).toString();\r
+ }\r
+ if (d.getMonth()+1<10) {\r
+ var n=(d.getMonth()+1).toString();\r
+ var nmonth="0"+n;\r
+ } else {\r
+ var nmonth=(d.getMonth()+1).toString();\r
+ }\r
+ var today=d.getFullYear()+"-"+nmonth+"-"+ndate;\r
+ //console.log("today:"+today);\r
+ myCalendar1.setSensitiveRange( today, null);\r
+ myCalendar1.setDateFormat("%D %M %j %H:%i:%s EET %Y");\r
+ myCalendar2.setSensitiveRange(today, null);\r
+ myCalendar2.setDateFormat("%D %M %j %H:%i:%s EET %Y");\r
+ \r
+ d.setDate(d.getDate());\r
+ d.setHours(d.getHours());\r
+ d.setMinutes(d.getMinutes());\r
+ \r
+ document.getElementById("fromdate").value = myCalendar1.getFormatedDate(null,d);\r
+ \r
+ //d.setDate(14);\r
+ //d.setHours(10);\r
+ //d.setMinutes(0);\r
+ document.getElementById("todate").value = myCalendar2.getFormatedDate(null,d);\r
+ \r
+ doOnLoad();\r
+ \r
+ }\r
+\r
+\r
+\r
+ \r
+ function setSens(inputId,mezh){\r
+ var d1 = new Date();\r
+ //if(mezh=="min"){\r
+ //myCalendar1.setSensitiveRange(null,d1.getDate());\r
+ //\r
+ //}else{\r
+ //myCalendar.setSensitiveRange(null,"2015-04-14");\r
+ \r
+ //}\r
+ }\r
+ \r
+\r
+ \r
+ function doOnLoad() {\r
+ //myAcc = new dhtmlXAccordion({\r
+ // parent: "accObj",\r
+ // items: [\r
+ // {id: "a1", text: "General"},\r
+ // {id: "a2", text: "ExoGeni"},\r
+ // {id: "a3", text: "c"}\r
+ // ]\r
+ //});\r
+ \r
+ var sel = document.getElementById('user_slices');\r
+for(var i = 0; i < s.length; i++) {\r
+ var opt = document.createElement('option');\r
+ opt.innerHTML = s[i];\r
+ opt.value = s[i];\r
+ sel.appendChild(opt);\r
+}\r
+ \r
+ \r
+ \r
+ formData = [\r
+ \r
+ \r
+ {type: "combo", name:"testbed", label: "Select testbed", name: "testbed", options:[\r
+ {text: "Netmode", value: "Netmode", selected: true},\r
+ {text: "Nitos", value: "Nitos"},\r
+ {text: "Wilabt", value: "wilabt"}\r
+ \r
+ ]}];\r
+formData1 = [\r
+ {type: "combo", name:"exogeni", label: "ExoGeni Resource Type", name: "exogeni", options:[\r
+ {text: "xo.small", value: "xo.small", selected: true},\r
+ {text: "xo.medium", value: "xo.medium"},\r
+ {text: "xo.large", value: "xo.large"},\r
+ {text: "xo.xlarge", value: "xo.xlarge"},\r
+ {text: "exogeni-m4", value: "exogeni-m4"}\r
+ ]},\r
+ {type: "combo", name:"wftestbeds", label: "Select testbed", comboType: "checkbox", name: "wftestbeds", options:[\r
+ {text: "iMinds WiLab 2", value: "iMinds WiLab 2", selected: true},\r
+ {text: "clab", value: "clab"}\r
+ ]}];\r
+ str = [ \r
+\r
+ {type: "button", name: "form_button_3", value: "Save changes"}\r
+ ];\r
+\r
+//renderForm();\r
+ // myForm = new dhtmlXForm("myForm", formData);\r
+ \r
+ //document.getElementsByName("form_button_3").addEventListener('click', getItemsList);\r
+ \r
+ \r
+ }\r
+\r
+function nodeid(sour,target,id) {\r
+\r
+document.getElementById("elemid").value=id;\r
+//document.disableItem("elemid");\r
+\r
+\r
+}\r
+function renderForm() {\r
+//myForm = myAcc.cells("a1").attachForm();\r
+ // myForm.loadStruct(formData);\r
+//myForm2 = myAcc.cells("a2").attachForm();\r
+//myForm2.loadStruct(formData1);\r
+myForm = new dhtmlXForm("myForm", formData);\r
+myForm.disableItem("elemid");\r
+ for (var i in str) {\r
+ var element_spec = str[i];\r
+ var form_wrapper = document.getElementById('myForm');\r
+ renderElement(form_wrapper, element_spec);\r
+ \r
+ }\r
+}\r
+\r
+function renderElement(container, spec) {\r
+\r
+ switch (spec.type) {\r
+ case 'fieldset1':\r
+ renderFieldset(container, spec);\r
+ break;\r
+ default:\r
+ renderInputElement(container, spec);\r
+ break;\r
+ }\r
+\r
+}\r
+\r
+function renderInputElement(container, spec) {\r
+ if (spec.label) {\r
+ renderInputLabel(container, spec.label);\r
+ }\r
+ \r
+ var input_element = document.createElement('input');\r
+ \r
+ if (spec.type === 'input') {\r
+ var input_type = 'text';\r
+ } else {\r
+ var input_type = spec.type;\r
+ }\r
+ \r
+ input_element.setAttribute('type', input_type);\r
+ input_element.setAttribute('name', spec.name);\r
+ \r
+ if (spec.value) {\r
+ input_element.setAttribute('value', spec.value);\r
+ }\r
+ \r
+ container.appendChild(input_element);\r
+ \r
+ attachAnyEventHandlers(input_element);\r
+}\r
+\r
+function renderInputLabel(container, labelText) {\r
+ var label = document.createElement('label');\r
+ var labelText = document.createTextNode(labelText);\r
+ \r
+ container.appendChild(label);\r
+ label.appendChild(labelText);\r
+}\r
+\r
+function renderFieldset(container, spec) {\r
+ var fieldset = document.createElement('fieldset');\r
+ var label = document.createElement('legend');\r
+ var labelText = document.createTextNode(spec.label);\r
+ \r
+ fieldset.setAttribute('name', spec.name);\r
+ \r
+ if (spec.list) {\r
+ for (var j in spec.list) {\r
+ renderElement(fieldset, spec.list[j]);\r
+ }\r
+ }\r
+ \r
+ container.appendChild(fieldset);\r
+ fieldset.appendChild(label);\r
+ label.appendChild(labelText);\r
+}\r
+\r
+function attachAnyEventHandlers(element) {\r
+ switch(element.getAttribute('name')) {\r
+ case 'form_button_1':\r
+ element.addEventListener('click', addFieldset);\r
+ break;\r
+ case 'form_button_2':\r
+ element.addEventListener('click', resetForm);\r
+ break;\r
+ case 'form_button_3':\r
+ // element.addEventListener('click', getItemsList(document.getElementById('elemid').value));\r
+ break;\r
+ case 'form_button_4':\r
+ element.addEventListener('click', getItemsString);\r
+ break;\r
+ }\r
+}\r
+\r
+function addFieldset() {\r
+ var itemData = {\r
+ type:"fieldset",\r
+ name:"form_fieldset_" + k,\r
+ label:"Fieldset" + k,\r
+ list:[\r
+ {type:"input", name:"form_input_" + k + "_1", label:"Input"},\r
+ {type:"input", name:"form_input_" + k + "_2", label:"Input"}\r
+ ]\r
+ };\r
+ \r
+ str.splice(k, 0, itemData);\r
+ k++;\r
+ \r
+ resetForm();\r
+}\r
+\r
+function removeFieldset() {\r
+ if (k === 1) { // Don't delete buttons\r
+ return;\r
+ }\r
+ \r
+ k--;\r
+ str.splice(k, 1);\r
+ \r
+ resetForm();\r
+}\r
+\r
+function resetForm(k,colid) {\r
+//var elemid=document.getElementByName('elemid').value;\r
+//console.log(columns)\r
+var a=[];\r
+if (colid){\r
+console.log('1'+jsondata);\r
+delete columns[colid];\r
+console.log('2'+jsondata);\r
+}\r
+for(var m in columns) {\r
+ var value = columns[m];\r
+ var test = value.data;\r
+//alert(value.valid_from+" " +value.valid_until + " " + test);\r
+//a[m]="{valid_from:"+value.valid_from+"{," +value.valid_until + " " +value.type;\r
+var myEvent =JSON.stringify(test);\r
+//myEvent=myEvent.substring(2);\r
+myEvent=myEvent.replace("}}","}");\r
+a.push(myEvent);\r
+//console.log("*****************"+myEvent);\r
+//console.log( a.toString() );\r
+\r
+}\r
+var jsondata="{\"resources\":["+a.toString()+"]}";\r
+console.log(jsondata);\r
+document.getElementById("jsondata").value=jsondata;\r
+\r
+var myEvent2 =JSON.stringify(a);\r
+//var myEvent =JSON.stringify(value.data);\r
+//console.log(myEvent2);\r
+var myEvent1 = {"resources":[{"type": "Node"},{"type": "Node"}]};\r
+\r
+ //create_post();\r
+ }\r
+\r
+function emptyForm(id) {\r
+console.log('empty'+id);\r
+delete columns[id];\r
+for(var m in columns) {\r
+ var value = columns[m];\r
+ var test = value.data;\r
+\r
+\r
+}\r
+ \r
+\r
+ \r
+}\r
+function readItemsList(id) {\r
+var value = columns[id];\r
+if (value.domain) {\r
+\r
+var testbed_value = "<li data-action = 'first'><a href='#' class='selector'><span>"+value.domain+"</span></a></li>";\r
+} else {\r
+var testbed_value = "<li data-action = 'first'><a href='#' class='selector'><span>ANY</span></a></li>";\r
+\r
+}\r
+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
+// $('#cssmenu').empty().append(html_memu);\r
+ console.log("testbed"+testbed_value);\r
+\r
+}\r
+function getItemsList(id,nodetype,testbed) {\r
+console.log(s);\r
+console.log(s.length);\r
+\r
+if (testbed){\r
+document.getElementById('testbet').value=testbed;\r
+}\r
+ var items = document.querySelectorAll('[type=text]');\r
+ \r
+var key = id;\r
+from=document.getElementById("fromdate").value;\r
+to=document.getElementById("todate").value ;\r
+console.log("nikos"+id+$( "#testbet option:selected" ).text + from+to);\r
+domaintyp=document.getElementById('testbet').value;\r
+if (id){\r
+if (domaintyp){\r
+ columns_unsaved[key] = {\r
+ type:'Node',\r
+ name:id,\r
+ exclusive:nodetype,\r
+ valid_from:from,\r
+ valid_until:to,\r
+ domain:document.getElementById('testbet').value\r
+ }\r
+ } else {\r
+ columns_unsaved[key] = {\r
+ type:'Node',\r
+ name:id,\r
+ exclusive:nodetype,\r
+ valid_from:from,\r
+ valid_until:to\r
+ }\r
+ } \r
+ columns[key] = {\r
+ valid_from:from,\r
+ valid_until:to,\r
+ type:'Node',\r
+ domain:document.getElementById('testbet').value,\r
+ exclusive: nodetype,\r
+ saved:true,\r
+ data: columns_unsaved[key]\r
+ };\r
+\r
+resetForm(columns);\r
+}\r
+}\r
+\r
+function getItemsString() {\r
+var serv_response = jQuery.parseJSON('{{ responsejson }}');\r
+ alert('{{ responsejson }}' + "****" +serv_response );\r
+//test[document.getElementByName('elemid')]=JSON.stringify(formData);\r
+}\r
+ </script>\r
+\r
+<div class="container">\r
+ <div class="row clearfix top-header">\r
+ <div class="col-md-12 column">\r
+ \r
+ \r
+ </div>\r
+ </div>\r
+ <div class="row border-editor content-editor">\r
+ <div class="col-md-2 column heigh-editor border-right-editor">\r
+ <span class="label label-info top-label">Select Node Type</span>\r
+ <ul class="tool-panel" id="sortable-element">\r
+ <li attr-type="actor"> <img src="{{STATIC_URL}}unbound_reservation_static/img/workflow/vm_icon.png">Virtual machine</li>\r
+ <li attr-type="wireless"> <img src="{{STATIC_URL}}unbound_reservation_static/img/workflow/wireless_icon.png">Wireless</li>\r
+ <!--<li attr-type="openflow"> <img src="{{STATIC_URL}}unbound_reservation_static/img/workflow/open_flow_icon.png">Open Flow</li>-->\r
+ </ul>\r
+ \r
+\r
+ </div>\r
+ <div class="col-md-7 column heigh-editor">\r
+ <span class="label label-danger top-label">Slice Editor</span>\r
+ <div class="css-editor" id="editor"><ul id="menu" style="position: relative; top: 0px; left: 0px;"></ul> <ul class='custom-menu'>\r
+ <li data-action = "first">ANY</li>\r
+ <li data-action = "second">Netmode</li>\r
+ <li data-action = "third">Third thing</li>\r
+</ul>\r
+<div id='cssmenu'>\r
+<ul>\r
+ <li class='active'><span>Properties</span></li>\r
+ <li class='has-sub'><a href='#'><span>Testbed</span></a>\r
+ <ul>\r
+ <li data-action = "first"><a href='#'><span>ANY</span></a></li>\r
+ <!--<li data-action = "second" class='selector'><a href='#' ><span>Netmode</span></a></li>-->\r
+ <li data-action = "second" ><a href='#' ><span>Netmode</span></a></li>\r
+ <li class='last' data-action = "third"><a href='#'><span>Nitos</span></a></li>\r
+ <!--<li class='last' data-action = "fifth"><a href='#'><span>PLE</span></a></li> -->\r
+ <!-- <li class='last' data-action = "forth"><a href='#'><span>Wilabt</span></a></li> -->\r
+ </ul>\r
+ </li>\r
+ \r
+ <!-- <li class='last'><a href='#'><span>kati allo</span></a></li> -->\r
+</ul>\r
+</div>\r
+<div id='cssmenu_'>\r
+<ul>\r
+ <li class='active'><span>Properties</span></li>\r
+ <li class='has-sub'><a href='#'><span>Testbed</span></a>\r
+ <ul>\r
+ \r
+ <li class='last' data-action = "fifth"><a href='#'><span>PLE</span></a></li>\r
+ <!-- <li class='last' data-action = "forth"><a href='#'><span>Wilabt</span></a></li> -->\r
+ </ul>\r
+ </li>\r
+ \r
+ <!-- <li class='last'><a href='#'><span>kati allo</span></a></li> -->\r
+</ul>\r
+</div>\r
+</div>\r
+ </div>\r
+ <div class="col-md-3 column heigh-editor">\r
+ <span class="label label-danger top-label">Node Properties</span>\r
+\r
+ <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
+ <div style="position:relative;margin-bottom:30px;"><input type="hidden" name="jsondata" id="jsondata" value="">\r
+ <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
+ <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
+ <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
+<br><select style="position:absolute;top:160px;width:180px;" id="testbet" class="form-control input-sm col-md-1" type="hidden">\r
+ <option value="">ANY</option>\r
+ <option value="omf:netmode">Netmode</option>\r
+ <option value="omf:nitos.outdoor">Nitos</option>\r
+ <option value="ple">PLE</option>\r
+ \r
+</select><br></div>\r
+\r
+<label style="position:absolute;top:130px;left:65px;"> Select Slice</label>\r
+<select style="position:absolute;top:150px;width:180px;" id="user_slices" name="user_slices_list"></select>\r
+<!--<select style="position:absolute;top:150px;width:180px;" id="user_slices" name="user_slices_list" >\r
+\r
+{% for user_slices in slice %}\r
+ <option value="{{user_slices}}"\r
+ {% if user_slices == current_org %}selected="selected"{% endif %}>\r
+ {{user_slices|capfirst}}\r
+ </option>\r
+{% endfor %}\r
+\r
+</select>-->\r
+</div>\r
+ <span></span><br><br>\r
+ <div id="form_wrapper"><table>\r
+ \r
+ <tr>\r
+ <td valign="top"><div id="myForm" style="height:200px;"></div></td>\r
+ \r
+ </tr>\r
+ </table></div> </div>\r
+ </div>\r
+ </div>\r
+</div>\r
+\r
+\r
+<!-- END of Reputation Specific -->\r
+\r
+{% endblock %}
\ No newline at end of file
git://git.onelab.eu / unfold.git / blobdiff