[pbs-devel] [PATCH proxmox-backup 3/7] ui: tape/ChangerStatus: rework EraseWindow

[Dominik Csapak <d.csapak@proxmox.com>]

to make it more like a 'dangerous' remove window
also works in the singleDrive logic to hide/show the driveselector

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
i am not completely happy with the code, but i did not want
to completely rewrite neither the editwindow nor the safedestroy window,
and i did not want to reimplement the editwindow functions...

if someone has a better idea/suggestions how to implement this
(especially the layout...), please do so

 www/tape/ChangerStatus.js |  2 +
 www/tape/window/Erase.js  | 90 +++++++++++++++++++++++++++++----------
 2 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/www/tape/ChangerStatus.js b/www/tape/ChangerStatus.js
index fb4ad1e3..dadb2a6e 100644
--- a/www/tape/ChangerStatus.js
+++ b/www/tape/ChangerStatus.js
@@ -144,9 +144,11 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 	    let label = record.data['label-text'];
 
 	    let changer = encodeURIComponent(view.changer);
+	    let singleDrive = me.drives.length === 1 ? me.drives[0] : undefined;
 	    Ext.create('PBS.TapeManagement.EraseWindow', {
 		label,
 		changer,
+		singleDrive,
 		listeners: {
 		    destroy: function() {
 			me.reload();
diff --git a/www/tape/window/Erase.js b/www/tape/window/Erase.js
index 1177dfeb..8b166d30 100644
--- a/www/tape/window/Erase.js
+++ b/www/tape/window/Erase.js
@@ -8,7 +8,11 @@ Ext.define('PBS.TapeManagement.EraseWindow', {
 
     cbindData: function(config) {
 	let me = this;
-	return {};
+	return {
+	    singleDrive: me.singleDrive,
+	    hasSingleDrive: !!me.singleDrive,
+	    warning: Ext.String.format(gettext("Are you sure you want to erase tape '{0}' ?"), me.label),
+	};
     },
 
     title: gettext('Format/Erase'),
@@ -20,32 +24,72 @@ Ext.define('PBS.TapeManagement.EraseWindow', {
 	return `${url}/${drive}/format-media`;
     },
 
+    layout: 'hbox',
+    width: 400,
     method: 'POST',
+    isCreate: true,
+    submitText: gettext('Ok'),
     items: [
 	{
-	    xtype: 'displayfield',
-	    cls: 'pmx-hint',
-	    value: gettext('Make sure to insert the tape into the selected drive.'),
-	    cbind: {
-		hidden: '{changer}',
-	    },
-	},
-	{
-	    xtype: 'displayfield',
-	    name: 'label-text',
-	    submitValue: true,
-	    fieldLabel: gettext('Media'),
-	    cbind: {
-		value: '{label}',
-	    },
-	},
-	{
-	    xtype: 'pbsDriveSelector',
-	    fieldLabel: gettext('Drive'),
-	    name: 'drive',
-	    cbind: {
-		changer: '{changer}',
+	    xtype: 'container',
+	    padding: 0,
+	    layout: {
+		type: 'hbox',
+		align: 'stretch',
 	    },
+	    items: [
+		{
+		    xtype: 'component',
+		    cls: [Ext.baseCSSPrefix + 'message-box-icon',
+			Ext.baseCSSPrefix + 'message-box-warning',
+			Ext.baseCSSPrefix + 'dlg-icon'],
+		},
+		{
+		    xtype: 'container',
+		    flex: 1,
+		    items: [
+			{
+			    xtype: 'displayfield',
+			    cbind: {
+				value: '{warning}',
+			    },
+			},
+			{
+			    xtype: 'displayfield',
+			    cls: 'pmx-hint',
+			    value: gettext('Make sure to insert the tape into the selected drive.'),
+			    cbind: {
+				hidden: '{changer}',
+			    },
+			},
+			{
+			    xtype: 'hidden',
+			    name: 'label-text',
+			    cbind: {
+				value: '{label}',
+			    },
+			},
+			{
+			    xtype: 'hidden',
+			    name: 'drive',
+			    cbind: {
+				disabled: '{!hasSingleDrive}',
+				value: '{singleDrive}',
+			    },
+			},
+			{
+			    xtype: 'pbsDriveSelector',
+			    fieldLabel: gettext('Drive'),
+			    name: 'drive',
+			    cbind: {
+				changer: '{changer}',
+				disabled: '{hasSingleDrive}',
+				hidden: '{hasSingleDrive}',
+			    },
+			},
+		    ],
+		},
+	    ],
 	},
     ],
 });
-- 
2.20.1