prune sim: make numberfields more similar to PBS's

by creating a new class that adds a clear trigger and also uses the
clear-trigger image. Code was taken from the one in PBS's prune window,
but we have default values here, so a bit of adapting was necessary. For
example, we don't want to reset to the original value (which might have
been one of the defaults) when clearing, but always to 'null'.

Signed-off-by: Fabian Ebner <f.ebner@proxmox.com>

docs/Makefile

@@ -17,6 +17,7 @@ MANUAL_PAGES := 			\
 PRUNE_SIMULATOR_FILES := 					\
 	prune-simulator/index.html				\
 	prune-simulator/documentation.html			\
+	prune-simulator/clear-trigger.png			\
 	prune-simulator/prune-simulator.js
 
 # Sphinx documentation setup

docs/prune-simulator/index.html

@@ -33,6 +33,9 @@
         .first-of-month {
             border-right: dashed black 4px;
         }
+        .clear-trigger {
+            background-image: url(./clear-trigger.png);
+        }
     </style>
 
     <script type="text/javascript" src="extjs/ext-all.js"></script>

docs/prune-simulator/prune-simulator.js

@@ -265,6 +265,34 @@ Ext.onReady(function() {
 	},
     });
 
+    Ext.define('PBS.PruneSimulatorKeepInput', {
+	extend: 'Ext.form.field.Number',
+	alias: 'widget.prunesimulatorKeepInput',
+
+	allowBlank: true,
+	fieldGroup: 'keep',
+	minValue: 1,
+
+	listeners: {
+	    afterrender: function(field) {
+		this.triggers.clear.setVisible(field.value !== null);
+	    },
+	    change: function(field, newValue, oldValue) {
+		this.triggers.clear.setVisible(newValue !== null);
+	    },
+	},
+	triggers: {
+	    clear: {
+		cls: 'clear-trigger',
+		weight: -1,
+		handler: function() {
+		    this.triggers.clear.setVisible(false);
+		    this.setValue(null);
+		},
+	    },
+	},
+    });
+
     Ext.define('PBS.PruneSimulatorPanel', {
 	extend: 'Ext.panel.Panel',
 	alias: 'widget.prunesimulatorPanel',
@@ -560,58 +588,37 @@ Ext.onReady(function() {
 
 	keepItems: [
 	    {
-		xtype: 'numberfield',
+		xtype: 'prunesimulatorKeepInput',
 		name: 'keep-last',
-		allowBlank: true,
 		fieldLabel: 'keep-last',
-		minValue: 0,
 		value: 4,
-		fieldGroup: 'keep',
 	    },
 	    {
-		xtype: 'numberfield',
+		xtype: 'prunesimulatorKeepInput',
 		name: 'keep-hourly',
-		allowBlank: true,
 		fieldLabel: 'keep-hourly',
-		minValue: 0,
-		value: 0,
-		fieldGroup: 'keep',
 	    },
 	    {
-		xtype: 'numberfield',
+		xtype: 'prunesimulatorKeepInput',
 		name: 'keep-daily',
-		allowBlank: true,
 		fieldLabel: 'keep-daily',
-		minValue: 0,
 		value: 5,
-		fieldGroup: 'keep',
 	    },
 	    {
-		xtype: 'numberfield',
+		xtype: 'prunesimulatorKeepInput',
 		name: 'keep-weekly',
-		allowBlank: true,
 		fieldLabel: 'keep-weekly',
-		minValue: 0,
 		value: 2,
-		fieldGroup: 'keep',
 	    },
 	    {
-		xtype: 'numberfield',
+		xtype: 'prunesimulatorKeepInput',
 		name: 'keep-monthly',
-		allowBlank: true,
 		fieldLabel: 'keep-monthly',
-		minValue: 0,
-		value: 0,
-		fieldGroup: 'keep',
 	    },
 	    {
-		xtype: 'numberfield',
+		xtype: 'prunesimulatorKeepInput',
 		name: 'keep-yearly',
-		allowBlank: true,
 		fieldLabel: 'keep-yearly',
-		minValue: 0,
-		value: 0,
-		fieldGroup: 'keep',
 	    },
 	],