prune-simulator: allow setting a custom date/time

With this, the prune simulator will be more flexible, which might clear
up questions such as these:
https://forum.proxmox.com/threads/pbs-prune-simulator-monthly-backups.115081

In order to have the configuration window not take up too much space,
I added another column and moved the border to the left.

Signed-off-by: Matthias Heiserer <m.heiserer@proxmox.com>
Tested-by: Fiona Ebner <f.ebner@proxmox.com>
Reviewed-by: Fiona Ebner <f.ebner@proxmox.com>

docs/prune-simulator/prune-simulator_source.js

@@ -2,7 +2,6 @@
 function gettext(val) { return val; };
 
 Ext.onReady(function() {
-    const NOW = new Date();
     const COLORS = {
 	'keep-last': 'orange',
 	'keep-hourly': 'purple',
@@ -180,7 +179,7 @@ Ext.onReady(function() {
 
 	    let html = '<table class="cal">';
 
-	    let now = new Date(NOW.getTime());
+	    let now = new Date(me.up().getViewModel().get('now'));
 	    let skip = 7 - parseInt(Ext.Date.format(now, 'N'), 10);
 	    let tableStartDate = Ext.Date.add(now, Ext.Date.DAY, skip);
 
@@ -295,6 +294,9 @@ Ext.onReady(function() {
 	alias: 'widget.prunesimulatorPanel',
 
 	viewModel: {
+	    data: {
+		now: new Date(),
+	    },
 	},
 
 	getValues: function() {
@@ -424,6 +426,8 @@ Ext.onReady(function() {
 
 	    // backups are sorted descending by date
 	    populateFromSchedule: function(weekdays, hours, minutes, weekCount) {
+		const me = this;
+
 		let weekdayFlags = [
 		    weekdays.includes('sun'),
 		    weekdays.includes('mon'),
@@ -434,7 +438,8 @@ Ext.onReady(function() {
 		    weekdays.includes('sat'),
 		];
 
-		let todaysDate = new Date(NOW.getTime());
+		const vmDate = me.getViewModel().get('now');
+		let todaysDate = new Date(vmDate);
 
 		let timesOnSingleDay = [];
 
@@ -456,9 +461,10 @@ Ext.onReady(function() {
 		    let weekday = parseInt(Ext.Date.format(daysDate, 'w'), 10);
 		    if (weekdayFlags[weekday]) {
 			timesOnSingleDay.forEach(function(time) {
-			    backups.push({
+			    const backuptime = Ext.Date.subtract(new Date(time), Ext.Date.DAY, i);
-				backuptime: Ext.Date.subtract(new Date(time), Ext.Date.DAY, i),
+			    if (backuptime <= vmDate) {
-			    });
+				backups.push({ backuptime: backuptime });
+			    }
 			});
 		    }
 		}
@@ -619,6 +625,7 @@ Ext.onReady(function() {
 
 	initComponent: function() {
 	    var me = this;
+	    const vm = me.getViewModel();
 
 	    me.pruneStore = Ext.create('Ext.data.Store', {
 		model: 'pbs-prune-list',
@@ -661,48 +668,108 @@ Ext.onReady(function() {
 			{ xtype: "panel", width: 1, border: 1 },
 			{
 			    xtype: 'form',
-			    layout: 'anchor',
+			    layout: 'hbox',
-			    flex: 1,
+			    flex: 2,
 			    border: false,
 			    title: 'Simulated Backup Schedule',
-			    defaults: {
-				labelWidth: 120,
-			    },
 			    bodyPadding: 10,
 			    items: [
 				{
-				    xtype: 'prunesimulatorDayOfWeekSelector',
+				    xtype: 'container',
-				    name: 'schedule-weekdays',
+				    layout: 'anchor',
-				    fieldLabel: 'Day of week',
+				    defaults: {
-				    value: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+					labelWidth: 120,
-				    allowBlank: false,
+				    },
-				    multiSelect: true,
+				    items: [
-				    padding: '0 0 0 10',
+					{
+					    xtype: 'prunesimulatorDayOfWeekSelector',
+					    name: 'schedule-weekdays',
+					    fieldLabel: 'Day of week',
+					    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',
+					    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: 'prunesimulatorCalendarEvent',
+				    xtype: 'container',
-				    name: 'schedule-time',
+				    layout: 'anchor',
-				    allowBlank: false,
+				    defaults: {
-				    value: '0/6:00',
+					labelWidth: 60,
-				    fieldLabel: 'Backup schedule',
+				    },
-				    padding: '0 0 0 10',
+				    items: [
-				},
+					{
-				{
+					    xtype: 'datefield',
-				    xtype: 'numberfield',
+					    name: 'currentDate',
-				    name: 'numberOfWeeks',
+					    fieldLabel: 'Date',
-				    allowBlank: false,
+					    allowBlank: false,
-				    fieldLabel: 'Number of weeks',
+					    padding: '0 0 0 10',
-				    minValue: 1,
+					    format: 'Y-m-d',
-				    value: 15,
+					    value: vm.get('now'),
-				    maxValue: 260, // five years
+					    listeners: {
-				    padding: '0 0 0 10',
+						change: function(self, newDate) {
-				},
+						    if (!self.isValid()) {
-				{
+							return;
-				    xtype: 'button',
+						    }
-				    name: 'schedule-button',
+						    const date = me.getViewModel().get('now');
-				    text: 'Update Schedule',
+						    date.setFullYear(
-				    formBind: true,
+							newDate.getFullYear(),
-				    handler: 'reloadFull',
+							newDate.getMonth(),
+							newDate.getDate(),
+						    );
+						},
+					    },
+					},
+					{
+					    xtype: 'timefield',
+					    name: 'currentTime',
+					    reference: 'currentTime',
+					    fieldLabel: 'Time',
+					    allowBlank: false,
+					    padding: '0 0 0 10',
+					    format: 'H:i',
+					    // cant bind value because ExtJS sets the year
+					    // to 2008 to protect against DST issues
+					    // and date picker zeroes hour/minute
+					    value: vm.get('now'),
+					    listeners: {
+						change: function(self, time) {
+						    if (!self.isValid()) {
+							return;
+						    }
+						    const date = me.getViewModel().get('now');
+						    date.setHours(time.getHours());
+						    date.setMinutes(time.getMinutes());
+						},
+					    },
+					},
+				    ],
 				},
 			    ],
 			},
@@ -734,7 +801,7 @@ Ext.onReady(function() {
 			    xtype: 'prunesimulatorPruneList',
 			    store: me.pruneStore,
 			    reference: 'pruneList',
-			    flex: 1,
+			    flex: 2,
 			},
 		    ],
 		},