ui: tape/TapeInventory: add 'Add Tape' button

by adapting and reusing the 'LabelMedia' window

shows a short notice about inserting the correct tape in the drive
and now allows to select a drive

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

www/tape/TapeInventory.js

@@ -29,6 +29,10 @@ Ext.define('PBS.TapeManagement.TapeInventory', {
     controller: {
 	xclass: 'Ext.app.ViewController',
 
+	addTape: function() {
+	    Ext.create('PBS.TapeManagement.LabelMediaWindow').show();
+	},
+
 	moveToVault: function() {
 	    let me = this;
 	    let view = me.getView();
@@ -92,6 +96,10 @@ Ext.define('PBS.TapeManagement.TapeInventory', {
 	    handler: 'reload',
 	},
 	'-',
+	{
+	    text: gettext('Add Tape'),
+	    handler: 'addTape',
+	},
 	{
 	    xtype: 'proxmoxButton',
 	    text: gettext('Set Tape Location'),

www/tape/window/LabelMedia.js

@@ -8,16 +8,41 @@ Ext.define('PBS.TapeManagement.LabelMediaWindow', {
     title: gettext('Label Media'),
     submitText: gettext('OK'),
 
+    url: '/api2/extjs/tape/drive/',
+
+    cbindData: function(config) {
+	let me = this;
+	return {
+	    driveid: config.driveid,
+	};
+    },
+
     method: 'POST',
 
     showProgress: true,
 
+    submitUrl: function(url, values) {
+	let driveid = encodeURIComponent(values.drive);
+	delete values.drive;
+	return `${url}/${driveid}/label-media`;
+    },
+
     items: [
 	{
 	    xtype: 'displayfield',
+	    cls: 'pmx-hint',
+	    value: gettext('Make sure that the correct tape is inserted the selected drive and type in the label written on the tape.'),
+	},
+	{
+	    xtype: 'pmxDisplayEditField',
 	    fieldLabel: gettext('Drive'),
+	    name: 'drive',
+	    editConfig: {
+		xtype: 'pbsDriveSelector',
+	    },
 	    cbind: {
 		value: '{driveid}',
+		editable: '{!driveid}',
 	    },
 	},
 	{
@@ -34,16 +59,5 @@ Ext.define('PBS.TapeManagement.LabelMediaWindow', {
 	    skipEmptyText: true,
 	},
     ],
-
-    initComponent: function() {
-	let me = this;
-	if (!me.driveid) {
-	    throw "no driveid given";
-	}
-
-	let driveid = encodeURIComponent(me.driveid);
-	me.url = `/api2/extjs/tape/drive/${driveid}/label-media`;
-	me.callParent();
-    },
 });