Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

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