prune sim: rework simulation options layout

move the two columns to a field set each, one for the backup job
config, containing weekdays and schedule, and one for the simulation
time, which contains the end date/time and the duration, which got
moved over, as it better fits along the new date/time.

Note that I used end instead of start as its the later point in time,
so hopefully less confusing, but one could argue either.

Flex and width of the fields got adapted such that they now better
work on smaller resolutions (< 1500px total width) and look better
on both, low and high resolutions/width.

The button got moved into the docked area  mostly due to me being to
lazy to add yet another container indirection for having the hbox
nested inside a vbox, but also as it makes sense to have it big and
centered available.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

docs/prune-simulator/prune-simulator_source.js

@@ -639,7 +639,7 @@ Ext.onReady(function() {
 		    border: false,
 		    items: [
 			{
-			    title: 'View',
+			    title: 'View Options',
 			    layout: 'anchor',
 			    flex: 1,
 			    border: false,
@@ -668,14 +668,28 @@ Ext.onReady(function() {
 			    layout: 'hbox',
 			    flex: 2,
 			    border: false,
-			    title: 'Simulated Backup Schedule',
+			    title: 'Backup Job Simulation',
-			    bodyPadding: 10,
+			    dockedItems: [{
+				xtype: 'button',
+				text: 'Update Simulation',
+				handler: 'reloadFull',
+				formBind: true,
+				dock: 'bottom',
+				margin: '1 15',
+			    }],
+			    bodyPadding: 3,
 			    items: [
 				{
-				    xtype: 'container',
+				    xtype: 'fieldset',
+				    title: 'Backup Job',
 				    layout: 'anchor',
+				    flex: 4,
+				    height: 110,
 				    defaults: {
-					labelWidth: 120,
+					labelWidth: 90,
+					padding: '0 0 0 10',
+					width: '95%',
+					minWidth: 150,
 				    },
 				    items: [
 					{
@@ -685,48 +699,35 @@ Ext.onReady(function() {
 					    value: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
 					    allowBlank: false,
 					    multiSelect: true,
-					    padding: '0 0 0 10',
 					},
 					{
 					    xtype: 'prunesimulatorCalendarEvent',
 					    name: 'schedule-time',
 					    allowBlank: false,
 					    value: '0/6:00',
-					    fieldLabel: 'Backup schedule',
+					    fieldLabel: 'Schedule',
-					    padding: '0 0 0 10',
-					},
-					{
-					    xtype: 'numberfield',
-					    name: 'numberOfWeeks',
-					    allowBlank: false,
-					    fieldLabel: 'Number of weeks',
-					    minValue: 1,
-					    value: 15,
-					    maxValue: 260, // five years
-					    padding: '0 0 0 10',
-					},
-					{
-					    xtype: 'button',
-					    name: 'schedule-button',
-					    text: 'Update Schedule',
-					    formBind: true,
-					    handler: 'reloadFull',
 					},
 				    ],
 				},
 				{
-				    xtype: 'container',
+				    xtype: 'fieldset',
+				    title: 'Simulation Time Range',
 				    layout: 'anchor',
+				    flex: 3,
+				    height: 110,
 				    defaults: {
-					labelWidth: 60,
+					labelWidth: 70,
+					width: 220,
+					padding: '0 0 0 10',
+					width: '95%',
+					minWidth: 150,
 				    },
 				    items: [
 					{
 					    xtype: 'datefield',
 					    name: 'currentDate',
-					    fieldLabel: 'Date',
+					    fieldLabel: 'End Date',
 					    allowBlank: false,
-					    padding: '0 0 0 10',
 					    format: 'Y-m-d',
 					    value: vm.get('now'),
 					    listeners: {
@@ -747,13 +748,11 @@ Ext.onReady(function() {
 					    xtype: 'timefield',
 					    name: 'currentTime',
 					    reference: 'currentTime',
-					    fieldLabel: 'Time',
+					    fieldLabel: 'End Time',
 					    allowBlank: false,
-					    padding: '0 0 0 10',
 					    format: 'H:i',
-					    // cant bind value because ExtJS sets the year
+					    // cant bind value because ExtJS sets the year to 2008 to
-					    // to 2008 to protect against DST issues
+					    // protect against DST issues and date picker zeroes hour/minute
-					    // and date picker zeroes hour/minute
 					    value: vm.get('now'),
 					    listeners: {
 						change: function(self, time) {
@@ -766,6 +765,28 @@ Ext.onReady(function() {
 						},
 					    },
 					},
+					{
+					    xtype: 'fieldcontainer',
+					    fieldLabel: 'Duration',
+					    layout: 'hbox',
+					    items: [{
+						xtype: 'numberfield',
+						name: 'numberOfWeeks',
+						hideLabel: true,
+						allowBlank: false,
+						minValue: 1,
+						value: 15,
+						maxValue: 260, // five years
+						flex: 1,
+					    }, {
+						xtype: 'displayfield',
+						value: 'Weeks',
+						submitValue: false,
+						hideLabel: true,
+						padding: '0 0 0 5',
+						width: 40,
+					    }],
+					},
 				    ],
 				},
 			    ],