private initializeGeneralTab()

in extensions/agent/src/dialogs/operatorDialog.ts [93:380]


	private initializeGeneralTab() {
		this.generalTab.registerContent(async view => {

			this.nameTextBox = view.modelBuilder.inputBox().withProps({
				ariaLabel: OperatorDialog.NameLabel,
				placeHolder: OperatorDialog.NameLabel
			}).component();
			this.nameTextBox.value = this.model.name;
			this.emailNameTextBox = view.modelBuilder.inputBox().withProps({
				ariaLabel: OperatorDialog.EmailNameTextLabel,
				placeHolder: OperatorDialog.EmailNameTextLabel
			}).component();
			this.emailNameTextBox.value = this.model.emailAddress;

			this.pagerEmailNameTextBox = view.modelBuilder.inputBox().withProps({
				ariaLabel: OperatorDialog.PagerEmailNameTextLabel,
				placeHolder: OperatorDialog.PagerEmailNameTextLabel
			}).component();
			this.pagerEmailNameTextBox.value = this.model.pagerAddress;

			this.enabledCheckBox = view.modelBuilder.checkBox()
				.withProps({
					label: OperatorDialog.EnabledCheckboxLabel
				}).component();
			this.enabledCheckBox.checked = this.model.enabled;

			this.pagerMondayCheckBox = view.modelBuilder.checkBox()
				.withProps({
					label: OperatorDialog.PagerMondayCheckBoxLabel
				}).component();

			this.pagerMondayCheckBox.onChanged(() => {
				if (this.pagerMondayCheckBox.checked) {
					this.weekdayPagerStartTimeInput.enabled = true;
					this.weekdayPagerEndTimeInput.enabled = true;
				} else {
					if (!this.pagerTuesdayCheckBox.checked && !this.pagerWednesdayCheckBox.checked &&
						!this.pagerThursdayCheckBox.checked && !this.pagerFridayCheckBox.checked) {
						this.weekdayPagerStartTimeInput.enabled = false;
						this.weekdayPagerEndTimeInput.enabled = false;
					}
				}
			});

			this.pagerTuesdayCheckBox = view.modelBuilder.checkBox()
				.withProps({
					label: OperatorDialog.PagerTuesdayCheckBoxLabel
				}).component();


			this.pagerTuesdayCheckBox.onChanged(() => {
				if (this.pagerTuesdayCheckBox.checked) {
					this.weekdayPagerStartTimeInput.enabled = true;
					this.weekdayPagerEndTimeInput.enabled = true;
				} else {
					if (!this.pagerMondayCheckBox.checked && !this.pagerWednesdayCheckBox.checked &&
						!this.pagerThursdayCheckBox.checked && !this.pagerFridayCheckBox.checked) {
						this.weekdayPagerStartTimeInput.enabled = false;
						this.weekdayPagerEndTimeInput.enabled = false;
					}
				}
			});

			this.pagerWednesdayCheckBox = view.modelBuilder.checkBox()
				.withProps({
					label: OperatorDialog.PagerWednesdayCheckBoxLabel
				}).component();

			this.pagerWednesdayCheckBox.onChanged(() => {
				if (this.pagerWednesdayCheckBox.checked) {
					this.weekdayPagerStartTimeInput.enabled = true;
					this.weekdayPagerEndTimeInput.enabled = true;
				} else {
					if (!this.pagerMondayCheckBox.checked && !this.pagerTuesdayCheckBox.checked &&
						!this.pagerThursdayCheckBox.checked && !this.pagerFridayCheckBox.checked) {
						this.weekdayPagerStartTimeInput.enabled = false;
						this.weekdayPagerEndTimeInput.enabled = false;
					}
				}
			});

			this.pagerThursdayCheckBox = view.modelBuilder.checkBox()
				.withProps({
					label: OperatorDialog.PagerThursdayCheckBoxLabel
				}).component();

			this.pagerThursdayCheckBox.onChanged(() => {
				if (this.pagerThursdayCheckBox.checked) {
					this.weekdayPagerStartTimeInput.enabled = true;
					this.weekdayPagerEndTimeInput.enabled = true;
				} else {
					if (!this.pagerMondayCheckBox.checked && !this.pagerWednesdayCheckBox.checked &&
						!this.pagerTuesdayCheckBox.checked && !this.pagerFridayCheckBox.checked) {
						this.weekdayPagerStartTimeInput.enabled = false;
						this.weekdayPagerEndTimeInput.enabled = false;
					}
				}
			});

			this.weekdayPagerStartTimeInput = view.modelBuilder.inputBox()
				.withProps({
					inputType: 'time',
					placeHolder: '08:00:00',
				}).component();
			this.weekdayPagerStartTimeInput.enabled = false;
			let weekdayStartInputContainer = view.modelBuilder.formContainer()
				.withFormItems([{
					component: this.weekdayPagerStartTimeInput,
					title: OperatorDialog.WorkdayBeginLabel
				}]).component();

			this.weekdayPagerEndTimeInput = view.modelBuilder.inputBox()
				.withProps({
					inputType: 'time',
					placeHolder: '06:00:00'
				}).component();
			this.weekdayPagerEndTimeInput.enabled = false;
			let weekdayEndInputContainer = view.modelBuilder.formContainer()
				.withFormItems([{
					component: this.weekdayPagerEndTimeInput,
					title: OperatorDialog.WorkdayEndLabel
				}]).component();

			this.pagerFridayCheckBox = view.modelBuilder.checkBox()
				.withProps({
					label: OperatorDialog.PagerFridayCheckBoxLabel
				}).component();
			this.pagerFridayCheckBox.onChanged(() => {
				if (this.pagerFridayCheckBox.checked) {
					this.weekdayPagerStartTimeInput.enabled = true;
					this.weekdayPagerEndTimeInput.enabled = true;
				} else {
					if (!this.pagerMondayCheckBox.checked && !this.pagerWednesdayCheckBox.checked &&
						!this.pagerThursdayCheckBox.checked && !this.pagerTuesdayCheckBox.checked) {
						this.weekdayPagerStartTimeInput.enabled = false;
						this.weekdayPagerEndTimeInput.enabled = false;
					}
				}
			});

			let pagerFridayCheckboxContainer = view.modelBuilder.flexContainer()
				.withLayout({
					flexFlow: 'row',
					alignItems: 'baseline',
					width: '100%'
				}).withItems([this.pagerFridayCheckBox, weekdayStartInputContainer, weekdayEndInputContainer])
				.component();

			this.pagerSaturdayCheckBox = view.modelBuilder.checkBox()
				.withProps({
					label: OperatorDialog.PagerSaturdayCheckBoxLabel
				}).component();

			this.pagerSaturdayCheckBox.onChanged(() => {
				if (this.pagerSaturdayCheckBox.checked) {
					this.saturdayPagerStartTimeInput.enabled = true;
					this.saturdayPagerEndTimeInput.enabled = true;
				} else {
					this.saturdayPagerStartTimeInput.enabled = false;
					this.saturdayPagerEndTimeInput.enabled = false;
				}
			});

			this.saturdayPagerStartTimeInput = view.modelBuilder.inputBox()
				.withProps({
					inputType: 'time',
					placeHolder: '08:00:00'
				}).component();
			this.saturdayPagerStartTimeInput.enabled = false;
			let saturdayStartInputContainer = view.modelBuilder.formContainer()
				.withFormItems([{
					component: this.saturdayPagerStartTimeInput,
					title: OperatorDialog.WorkdayBeginLabel
				}]).component();

			this.saturdayPagerEndTimeInput = view.modelBuilder.inputBox()
				.withProps({
					inputType: 'time',
					placeHolder: '06:00:00'
				}).component();
			this.saturdayPagerEndTimeInput.enabled = false;
			let saturdayEndInputContainer = view.modelBuilder.formContainer()
				.withFormItems([{
					component: this.saturdayPagerEndTimeInput,
					title: OperatorDialog.WorkdayEndLabel
				}]).component();

			let pagerSaturdayCheckboxContainer = view.modelBuilder.flexContainer()
				.withLayout({
					flexFlow: 'row',
					alignItems: 'baseline'
				}).withItems([this.pagerSaturdayCheckBox, saturdayStartInputContainer, saturdayEndInputContainer])
				.component();

			this.pagerSundayCheckBox = view.modelBuilder.checkBox()
				.withProps({
					label: OperatorDialog.PagerSundayCheckBoxLabel
				}).component();

			this.pagerSundayCheckBox.onChanged(() => {
				if (this.pagerSundayCheckBox.checked) {
					this.sundayPagerStartTimeInput.enabled = true;
					this.sundayPagerEndTimeInput.enabled = true;
				} else {
					this.sundayPagerStartTimeInput.enabled = false;
					this.sundayPagerEndTimeInput.enabled = false;
				}
			});

			this.sundayPagerStartTimeInput = view.modelBuilder.inputBox()
				.withProps({
					inputType: 'time',
					placeHolder: '08:00:00'
				}).component();
			this.sundayPagerStartTimeInput.enabled = false;
			let sundayStartInputContainer = view.modelBuilder.formContainer()
				.withFormItems([{
					component: this.sundayPagerStartTimeInput,
					title: OperatorDialog.WorkdayBeginLabel
				}]).component();

			this.sundayPagerEndTimeInput = view.modelBuilder.inputBox()
				.withProps({
					inputType: 'time',
					placeHolder: '06:00:00'
				}).component();
			this.sundayPagerEndTimeInput.enabled = false;
			let sundayEndInputContainer = view.modelBuilder.formContainer()
				.withFormItems([{
					component: this.sundayPagerEndTimeInput,
					title: OperatorDialog.WorkdayEndLabel
				}]).component();

			let pagerSundayCheckboxContainer = view.modelBuilder.flexContainer()
				.withLayout({
					flexFlow: 'row',
					alignItems: 'baseline'
				}).withItems([this.pagerSundayCheckBox, sundayStartInputContainer, sundayEndInputContainer])
				.component();

			let formModel = view.modelBuilder.formContainer()
				.withFormItems([{
					component: this.nameTextBox,
					title: OperatorDialog.NameLabel
				}, {
					component: this.enabledCheckBox,
					title: ''
				}, {
					component: this.emailNameTextBox,
					title: OperatorDialog.EmailNameTextLabel
				}, {
					component: this.pagerEmailNameTextBox,
					title: OperatorDialog.PagerEmailNameTextLabel
				}, {
					components: [{
						component: this.pagerMondayCheckBox,
						title: ''
					}, {
						component: this.pagerTuesdayCheckBox,
						title: ''
					}, {
						component: this.pagerWednesdayCheckBox,
						title: ''
					}, {
						component: this.pagerThursdayCheckBox,
						title: ''
					}],
					title: OperatorDialog.PagerDutyScheduleLabel
				}, {
					component: pagerFridayCheckboxContainer,
					title: ''
				}, {
					component: view.modelBuilder.separator().component(),
					title: ''
				}, {
					component: pagerSaturdayCheckboxContainer,
					title: ''
				}, {
					component: view.modelBuilder.separator().component(),
					title: ''
				}, {
					component: pagerSundayCheckboxContainer,
					title: ''
				}
				]).withLayout({ width: '100%' }).component();
			await view.initializeModel(formModel);
		});
	}