You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

wizardExportApplianceAdvanced.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. <!--
  2. Advanced export appliance wizard panes. Logic in vboxWizard() class
  3. Copyright (C) 2010-2015 Ian Moore (imoore76 at yahoo dot com)
  4. $Id: wizardExportApplianceAdvanced.html 595 2015-04-17 09:50:36Z imoore76 $
  5. -->
  6. <!-- Step 1 -->
  7. <div id='wizardExportApplianceStep1' style='display: none;'>
  8. <table class='vboxInvisible' style='border: 0px solid transparent; border-spacing: 4px; height: 100%;'>
  9. <tr style='vertical-align: top'>
  10. <td style='width: 50%'>
  11. <span class='translate vboxTableLabel'>Virtual machines to export</span>
  12. <hr style='width: 100%; margin: 0px; margin-bottom: 6px; display: block' class='vboxSeparatorLine'/>
  13. <div id='vboxExportAppVMListContainer' style='overflow:auto;padding:0px;margin:0px;' class='vboxBordered'>
  14. <ul style='width: 100%;margin:0px;' id='vboxExportAppVMList' class='vboxList'>
  15. <li><img src='images/spinner.gif' /></li>
  16. </ul>
  17. </div>
  18. </td>
  19. <td>
  20. <span class='translate vboxTableLabel'>Appliance settings</span>
  21. <hr style='width: 100%; margin: 0px; margin-bottom: 6px; display: block' class='vboxSeparatorLine'/>
  22. <div class='vboxBordered' id='vboxExportPropsContainer' style='overflow: auto' style='width: 100%'>
  23. <table class='vboxHorizontal' style='width: 100%; font-size: 0.9em'>
  24. <tbody id='vboxExportProps'>
  25. </tbody>
  26. </table>
  27. </div>
  28. </td>
  29. </tr>
  30. <tr style='vertical-align: top; height: 1%;'>
  31. <td colspan='2'>
  32. <table style='width: 100%;' class='vboxOptions'>
  33. <tr>
  34. <th width='1%'><span class='translate'>File:</span></th>
  35. <td class='vboxFileFolderInput'>
  36. <input type='text' class='vboxText' name='wizardExportApplianceLocation' />
  37. <input type="button" class="vboxImgButton" style="background-image: url(images/vbox/select_file_16px.png)" onClick="wizardExportApplianceBrowseLocation()" />
  38. </td>
  39. </tr>
  40. <tr>
  41. <th width='1%'><span class='translate'>Format:</span></th>
  42. <td>
  43. <select name='wizardExportApplianceFormat'>
  44. <option value="ovf-0.9">OVF 0.9</option>
  45. <option value="ovf-1.0" selected>OVF 1.0</option>
  46. <option value="ovf-2.0">OVF 2.0</option>
  47. </select>
  48. </td>
  49. </tr>
  50. <tr>
  51. <td colspan='2'>
  52. <label><input type='checkbox' class='vboxCheckbox' name='wizardExportApplianceManifest'/>
  53. <span class='translate'>Write Manifest file</span></label>
  54. </td>
  55. </tr>
  56. </table>
  57. </td>
  58. </tr>
  59. </table>
  60. </div>
  61. <script type='text/javascript'>
  62. //Add format options
  63. $(document.forms['frmwizardExportAppliance'].wizardExportApplianceFormat).find('option').html(function(i,h){return trans(h,'UIWizardExportApp');});
  64. // Load list of exportable machines
  65. var l = new vboxLoader();
  66. l.add('vboxGetExportableMachines',function(d){$('#wizardExportApplianceStep1').data('vms',d.responseData);});
  67. l.onLoad = function() {
  68. var vms = $('#wizardExportApplianceStep1').data('vms');
  69. var vmlist = $('#vboxExportAppVMList');
  70. $(vmlist).children().remove();
  71. vms.sort(function(a,b){return strnatcasecmp(a.name,b.name);});
  72. for(var i in vms) {
  73. var li = $('<li />').data({'vm':vms[i]});
  74. if(vboxVMStates.isPaused(vms[i]) || vboxVMStates.isRunning(vms[i])) {
  75. $(li).addClass('vboxDisabled disabled');
  76. } else {
  77. /* Exportable appliance clicked */
  78. $(li).click(function(){
  79. $(this).toggleClass('vboxListItemSelected');
  80. vboxWizardExportApplianceUpdateList();
  81. vboxWizardExportApplianceOVFName();
  82. }).addClass('vboxListItem');
  83. if(vboxChooser.isVMSelected(vms[i].id))
  84. $(li).addClass('vboxListItemSelected');
  85. }
  86. $(li).html("<img style='width: 16px; height: 16px;' src='images/vbox/" + vboxGuestOSTypeIcon(vms[i].OSTypeId) + "' /> " + vms[i].name);
  87. $(vmlist).append(li);
  88. }
  89. vboxColorRows(vmlist);
  90. vboxWizardExportApplianceUpdateList();
  91. vboxWizardExportApplianceOVFName();
  92. };
  93. l.run();
  94. // Resize panes function
  95. function wizardExportApplianceStepResizeList() {
  96. $('#wizardExportApplianceStep1').hide();
  97. $('#vboxExportAppVMListContainer').hide();
  98. $('#vboxExportPropsContainer').hide();
  99. $('#wizardExportApplianceStep1').css({'height':($('#wizardExportApplianceStep1').parent().height()-8)+'px'}).show();
  100. $('#vboxExportAppVMListContainer').css({'height':($('#vboxExportAppVMListContainer').parent().height()-16)+'px'}).show();
  101. $('#vboxExportPropsContainer').css({'height':$('#vboxExportAppVMListContainer').css('height'),
  102. 'width':$('#vboxExportAppVMListContainer').parent().width()}).show();
  103. }
  104. // Resize panes when wizard is resized
  105. $('#wizardExportApplianceDialog').on('dialogresizestop',wizardExportApplianceStepResizeList);
  106. //Resize panes after this div is shown
  107. $('#wizardExportApplianceStep1').on('show', wizardExportApplianceStepResizeList);
  108. /*
  109. *
  110. * VM Properties to edit / export
  111. *
  112. */
  113. var vboxApplianceProps = {
  114. 'name' : {'label':'Name','icon':'name'},
  115. 'product' : {'label':'Product','icon':'description'},
  116. 'product-url' : {'label':'Product-URL','icon':'description'},
  117. 'vendor' : {'label':'Vendor','icon':'description'},
  118. 'vendor-url' : {'label':'Vendor-URL','icon':'description'},
  119. 'version' : {'label':'Version','icon':'description'},
  120. 'description' : {'label':'Description','icon':'description','textarea':true},
  121. 'license' : {'label':'License','icon':'description','textarea':true}
  122. };
  123. /* Browse for export location */
  124. function wizardExportApplianceBrowseLocation() {
  125. var dsepRegEx = $('#vboxPane').data('vboxConfig').DSEP;
  126. if(dsepRegEx == '\\') dsepRegEx += '\\';
  127. // Get current location
  128. var loc = document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation.value;
  129. if(loc.indexOf($('#vboxPane').data('vboxConfig').DSEP) > -1) {
  130. var r = new RegExp(dsepRegEx+'([^'+dsepRegEx+']*)?$');
  131. loc = loc.replace(r,'');
  132. } else {
  133. // no path set
  134. loc = vboxDirname($('#vboxPane').data('vboxConfig').version.settingsFilePath) + $('#vboxPane').data('vboxConfig').DSEP;
  135. }
  136. vboxFileBrowser(loc,function(f){
  137. if(!f) return;
  138. // get file name
  139. var r = new RegExp('.*'+dsepRegEx);
  140. file = $(document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation).val().replace(r,'');
  141. document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation.value = f+($('#vboxPane').data('vboxConfig').DSEP)+file;
  142. },true,trans('Select a file to export into','UIWizardExportAppPage3'));
  143. }
  144. /* Determine default OVF name */
  145. function vboxWizardExportApplianceOVFName() {
  146. // Keep track of where we were
  147. var vmSel = $('#vboxExportAppVMList').children('li.vboxListItemSelected');
  148. /* When going to step3, make sure vms are selected */
  149. if(!vmSel.length) {
  150. $('#vboxExportAppVMListContainer').addClass('vboxRequired');
  151. return;
  152. }
  153. $('#vboxExportAppVMListContainer').removeClass('vboxRequired');
  154. if(jQuery.trim($(document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation).val()) && $(document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation).data('userChanged'))
  155. return;
  156. $(document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation).data('userChanged', false);
  157. var name = '';
  158. if(vmSel.length > 1) {
  159. name = 'Appliance';
  160. } else {
  161. name = jQuery.trim($(vmSel[0]).text());
  162. }
  163. // If there is already a folder chosen, don't change it
  164. if(jQuery.trim($(document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation).val())) {
  165. name = vboxDirname(jQuery.trim($(document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation).val())) + $('#vboxPane').data('vboxConfig').DSEP + name + '.ova';
  166. } else {
  167. name = vboxDirname($('#vboxPane').data('vboxConfig').version.settingsFilePath) + $('#vboxPane').data('vboxConfig').DSEP + name + '.ova';
  168. }
  169. $(document.forms['frmwizardExportAppliance'].elements.wizardExportApplianceLocation).val(name);
  170. };
  171. function vboxWizardExportApplianceUpdateList() {
  172. var vms = $('#vboxExportAppVMList').children('li');
  173. var tbl = $('#vboxExportProps');
  174. for(var i = 0; i < vms.length; i++) {
  175. var vmid = $(vms[i]).data('vm').id;
  176. // Selected ?
  177. if($(vms[i]).hasClass('vboxListItemSelected')) {
  178. if($('#vboxAppliance-'+vmid).attr('id')) continue;
  179. } else {
  180. $(tbl).children('tr.vboxAppliance-'+vmid).remove();
  181. continue;
  182. }
  183. // VM header row
  184. var trparent = $('<tr />').attr({'id':'vboxAppliance-'+vmid}).addClass('vboxAppliance-'+vmid + ' vboxTableParent');
  185. var td = $('<td />').attr({'colspan':'2','class':'vboxApplianceHeader'}).append(
  186. $('<div />').css({'font-weight':'bold','padding-left':'6px'}).append(
  187. $('<input />').attr({'type':'button','class':'vboxImgButton','style':'background-image: url(images/downArrow.png); margin:0px;margin-right:4px;padding:0px;vspace:0px;hspace:0px;width: 12px; height: 12px;'}).click(function(){
  188. if(!$(this).data('toggleClicked')) {
  189. $(this).data('toggleClicked', true);
  190. $(this).css({'background-image':'url(images/rightArrow.png)'});
  191. var tr = $(this).closest('tr');
  192. $(tr).siblings('tr.vboxChildOf'+$(tr).data('vboxOrder')).hide();
  193. } else {
  194. $(this).data('toggleClicked', false);
  195. $(this).css({'background-image':'url(images/downArrow.png)'});
  196. var tr = $(this).closest('tr');
  197. $(tr).siblings('tr.vboxChildOf'+$(tr).data('vboxOrder')).show();
  198. }
  199. })
  200. ).append(
  201. //trans('Virtual System X').replace('%s',(i+1))
  202. $('<div />').text($(vms[i]).data('vm').name).html()
  203. )
  204. ).disableSelection();
  205. $(trparent).append(td).data({'vm':$(vms[i]).data('vm'),'vboxOrder':i}).appendTo(tbl);
  206. // VM properties
  207. for(var p in vboxApplianceProps) {
  208. var tr = $('<tr />').attr({'class':'vboxAppliance-'+vmid+' vboxChildOf' + i}).data({'vmprop':p});
  209. $('<td />').css({'padding-left':'18px','white-space':'nowrap','width':'1%'}).html('<img src="images/vbox/'+vboxApplianceProps[p].icon+'_16px.png" /> ' + trans(vboxApplianceProps[p].label,'UIApplianceEditorWidget')).appendTo(tr);
  210. $('<td />').attr({'class':'vboxHideOverflow vboxAppProp'+p}).css({'width':'100%','padding-left':'10px','padding-right':'2px'}).html('<div>'+$('<div />').text(($(trparent).data('vm')[p]||'')).html()+'</div>').dblclick((vboxApplianceProps[p].textarea ? vboxExportAppliancePropEditArea : vboxExportAppliancePropEdit )).appendTo(tr);
  211. $(tbl).append(tr);
  212. }
  213. }
  214. vboxColorRows(tbl,false,'vboxTableParent');
  215. };
  216. /* Edit property that has a text area */
  217. function vboxExportAppliancePropEditArea(evt,elm) {
  218. vboxExportAppliancePropEditDialog(evt.target, $('<span />').html($(evt.target).html()).text());
  219. }
  220. /* Edit property dialog */
  221. function vboxExportAppliancePropEditDialog(elm, defaults) {
  222. var d = $('<div />').css({'display':'none'});
  223. var frm = $('<form />').attr({'onSubmit':'return false;'}).css({'margin':'0px','border':'0px','padding':'0px','width':'100%','height':'100%'});
  224. $('<textarea />').attr({'id':'vboxExportAppliancePropTextarea'}).css({'height':'99%','width':'99%'}).val(defaults).appendTo(frm);
  225. $(d).append(frm);
  226. var buttons = {};
  227. buttons[trans('OK','QIMessageBox')] = function(){
  228. var d = vboxDivOverflowHidden(elm);
  229. $(d).html($('<div />').text($('#vboxExportAppliancePropTextarea').val()).html());
  230. $(elm).html('').append(d);
  231. $(this).empty().remove();
  232. };
  233. buttons[trans('Cancel','QIMessageBox')] = function(){
  234. $(this).empty().remove();
  235. };
  236. $(d).dialog({'height':300,'width':300,'closeOnEscape':false,'modal':true,'resizable':true,'dialogClass':'vboxDialogContent','draggable':true,'buttons':buttons,'title':$(elm).parent().siblings().first().html()});
  237. }
  238. /* Edit property that has a text box */
  239. function vboxExportAppliancePropEdit(evt,elm) {
  240. var input = $('<input />').attr({'type':'text','class':'vboxText'}).css({'width':($(this).innerWidth()-12)+'px','margin':'0px'}).val($('<div />').html($(this).children().first().html()).text()).blur(function(){
  241. var v = $(this).val();
  242. var p = $(this).parent();
  243. var d = vboxDivOverflowHidden(p);
  244. $(this).remove();
  245. $(d).html($('<div />').text(v).html());
  246. $(p).html('').append(d);
  247. }).keydown(function(e){if(e.keyCode == 13) $(this).trigger('blur');});
  248. $(this).html('').append(input).children().first().focus();
  249. }
  250. </script>