z-bar-qt/Modules/Settings/Common/TimeInput.qml

import QtQuick
import QtQuick.Layouts
import ZShell.Components
import ZShell.Config
import qs.Components
import qs.Helpers
import qs.Services

ColumnLayout {
	id: root

	required property int start
	required property int end
	signal endEdit(time: int)
	signal startEdit(time: int)

	function convertHour(timeValue: int): int {
		return Math.floor(timeValue / 60);
	}

	function convertMinute(timeValue: int): int {
		return timeValue % 60;
	}

	function convertToMinutes(hour: int, minute: int): int {
		return hour * 60 + minute;
	}

	spacing: Tokens.spacing.medium

	RowLayout {
		CustomRect {
			id: startHourRect

			Layout.preferredHeight: 72
			Layout.preferredWidth: 96
			color: startHourField.focus ? Colors.palette.m3onPrimaryContainer : Colors.palette.m3surfaceContainerHighest
			implicitHeight: 72
			implicitWidth: 96
			radius: Tokens.rounding.small

			CustomRect {
				anchors.fill: parent
				border.color: startHourField.focus ? Colors.palette.m3primaryContainer : Colors.palette.m3surfaceContainerHighest
				border.width: startHourField.focus ? 2 : 0
				radius: parent.radius - border.width

				Behavior on border.width {
					Anim {}
				}
			}

			TextFieldBase {
				id: startHourField

				function setConfigText(): string {
					var val = root.convertHour(root.start);
					if (val === 0) {
						return "00";
					}
					return String(val);
				}

				anchors.left: parent.left
				anchors.right: parent.right
				anchors.verticalCenter: parent.verticalCenter
				clip: true
				color: focus ? Colors.palette.m3primaryContainer : Colors.palette.m3onSurface
				font.family: "Roboto"
				font.letterSpacing: -0.25
				font.pixelSize: 56
				font.weight: 400
				horizontalAlignment: TextInput.AlignHCenter
				text: setConfigText()
				verticalAlignment: TextInput.AlignVCenter

				Keys.onPressed: event => {
					if (event.key === Qt.Key_Backspace) {
						event.accepted = true;
						if (startHourField.text.length >= 2) {
							startHourField.text = "0" + startHourField.text[0];
						} else if (startHourField.text.length === 1) {
							startHourField.text = "0";
						}
						return;
					} else if (event.key === Qt.Key_Escape) {
						event.accepted = true;
						startHourField.text = setConfigText();
						startHourField.focus = false;
					} else if (event.key === Qt.Key_Return) {
						startHourField.focus = false;
						return;
					} else if (event.key === Qt.Key_Tab) {
						startMinuteField.focus = true;
					} else if (event.key === Qt.Key_Backtab) {
						endMinuteField.focus = true;
					}

					if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
						event.accepted = true;
						var digit = event.text;
						var textLen = startHourField.text.length;

						if (textLen >= 2 && startHourField.text[0] !== '0') {
							return;
						}

						var val = 0;
						if (textLen === 0) {
							val = parseInt(digit);
						} else if (textLen === 1) {
							val = parseInt(startHourField.text + digit);
						} else {
							val = parseInt(startHourField.text[1] + digit);
						}

						val = Math.max(0, Math.min(23, val));

						if (textLen >= 2 && val < 10) {
							startHourField.text = "0" + val;
						} else {
							startHourField.text = val.toString();
						}
					}

					event.accepted = true;
				}
				onCursorPositionChanged: cursorPosition = 2
				onTextChanged: {
					var mins = parseInt(startMinuteField.text);
					const hours = root.convertToMinutes(parseInt(startHourField.text));
					root.startEdit(hours + mins);
				}
			}
		}

		CustomText {
			id: startSeparator

			font.pointSize: Tokens.font.size.extraLarge
			text: ":"
		}

		CustomRect {
			id: startMinuteRect

			Layout.preferredHeight: 72
			Layout.preferredWidth: 96
			color: startMinuteField.focus ? Colors.palette.m3onPrimaryContainer : Colors.palette.m3surfaceContainerHighest
			implicitHeight: 72
			implicitWidth: 96
			radius: Tokens.rounding.small

			CustomRect {
				anchors.fill: parent
				border.color: startMinuteField.focus ? Colors.palette.m3primaryContainer : Colors.palette.m3surfaceContainerHighest
				border.width: startMinuteField.focus ? 2 : 0
				radius: parent.radius - border.width

				Behavior on border.width {
					Anim {}
				}
			}

			TextFieldBase {
				id: startMinuteField

				function setConfigText(): string {
					var val = root.convertMinute(root.start);
					if (val === 0) {
						return "00";
					}
					return String(val);
				}

				anchors.left: parent.left
				anchors.right: parent.right
				anchors.verticalCenter: parent.verticalCenter
				clip: true
				color: focus ? Colors.palette.m3primaryContainer : Colors.palette.m3onSurface
				font.family: "Roboto"
				font.letterSpacing: -0.25
				font.pixelSize: 56
				font.weight: 400
				horizontalAlignment: TextInput.AlignHCenter
				text: setConfigText()
				verticalAlignment: TextInput.AlignVCenter

				Keys.onPressed: event => {
					if (event.key === Qt.Key_Backspace) {
						event.accepted = true;
						if (startMinuteField.text.length >= 2) {
							startMinuteField.text = "0" + startMinuteField.text[0];
						} else if (startMinuteField.text.length === 1) {
							startMinuteField.text = "0";
						}
						return;
					} else if (event.key === Qt.Key_Escape) {
						event.accepted = true;
						startMinuteField.text = setConfigText();
						startMinuteField.focus = false;
					} else if (event.key === Qt.Key_Return) {
						startMinuteField.focus = false;
						return;
					} else if (event.key === Qt.Key_Tab) {
						endHourField.focus = true;
					} else if (event.key === Qt.Key_Backtab) {
						startHourField.focus = true;
					}

					if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
						event.accepted = true;
						var digit = event.text;
						var textLen = startMinuteField.text.length;

						if (textLen >= 2 && startMinuteField.text[0] !== '0') {
							return;
						}

						var val = 0;
						if (textLen === 0) {
							val = parseInt(digit);
						} else if (textLen === 1) {
							val = parseInt(startMinuteField.text + digit);
						} else {
							val = parseInt(startMinuteField.text[1] + digit);
						}

						val = Math.max(0, Math.min(59, val));

						if (textLen >= 2 && val < 10) {
							startMinuteField.text = "0" + val;
						} else {
							startMinuteField.text = val.toString();
						}
					}

					event.accepted = true;
				}
				onCursorPositionChanged: cursorPosition = 2
				onTextChanged: {
					var mins = parseInt(startMinuteField.text);
					const hours = root.convertToMinutes(parseInt(startHourField.text));
					root.startEdit(hours + mins);
				}
			}
		}

		Item {
			id: spacer

			Layout.preferredWidth: Tokens.spacing.largeIncreased
		}

		CustomRect {
			id: endHourRect

			Layout.preferredHeight: 72
			Layout.preferredWidth: 96
			color: endHourField.focus ? Colors.palette.m3onPrimaryContainer : Colors.palette.m3surfaceContainerHighest
			implicitHeight: 72
			implicitWidth: 96
			radius: Tokens.rounding.small

			CustomRect {
				anchors.fill: parent
				border.color: endHourField.focus ? Colors.palette.m3primaryContainer : Colors.palette.m3surfaceContainerHighest
				border.width: endHourField.focus ? 2 : 0
				radius: parent.radius - border.width

				Behavior on border.width {
					Anim {}
				}
			}

			TextFieldBase {
				id: endHourField

				function setConfigText(): string {
					var val = root.convertHour(root.end);
					if (val === 0) {
						return "00";
					}
					return String(val);
				}

				anchors.left: parent.left
				anchors.right: parent.right
				anchors.verticalCenter: parent.verticalCenter
				clip: true
				color: focus ? Colors.palette.m3primaryContainer : Colors.palette.m3onSurface
				font.family: "Roboto"
				font.letterSpacing: -0.25
				font.pixelSize: 56
				font.weight: 400
				horizontalAlignment: TextInput.AlignHCenter
				text: setConfigText()
				verticalAlignment: TextInput.AlignVCenter

				Keys.onPressed: event => {
					if (event.key === Qt.Key_Backspace) {
						event.accepted = true;
						if (endHourField.text.length >= 2) {
							endHourField.text = "0" + endHourField.text[0];
						} else if (endHourField.text.length === 1) {
							endHourField.text = "0";
						}
						return;
					} else if (event.key === Qt.Key_Escape) {
						event.accepted = true;
						endHourField.text = setConfigText();
						endHourField.focus = false;
					} else if (event.key === Qt.Key_Return) {
						endHourField.focus = false;
						return;
					} else if (event.key === Qt.Key_Tab) {
						endMinuteField.focus = true;
					} else if (event.key === Qt.Key_Backtab) {
						startMinuteField.focus = true;
					}

					if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
						event.accepted = true;
						var digit = event.text;
						var textLen = endHourField.text.length;

						if (textLen >= 2 && endHourField.text[0] !== '0') {
							return;
						}

						var val = 0;
						if (textLen === 0) {
							val = parseInt(digit);
						} else if (textLen === 1) {
							val = parseInt(endHourField.text + digit);
						} else {
							val = parseInt(endHourField.text[1] + digit);
						}

						val = Math.max(0, Math.min(23, val));

						if (textLen >= 2 && val < 10) {
							endHourField.text = "0" + val;
						} else {
							endHourField.text = val.toString();
						}
					}

					event.accepted = true;
				}
				onCursorPositionChanged: cursorPosition = 2
				onTextChanged: {
					var mins = parseInt(endMinuteField.text);
					const hours = root.convertToMinutes(parseInt(endHourField.text));
					root.endEdit(hours + mins);
				}
			}
		}

		CustomText {
			id: endSeparator

			font.pointSize: Tokens.font.size.extraLarge
			text: ":"
		}

		CustomRect {
			id: endMinuteRect

			Layout.preferredHeight: 72
			Layout.preferredWidth: 96
			color: endMinuteField.focus ? Colors.palette.m3onPrimaryContainer : Colors.palette.m3surfaceContainerHighest
			implicitHeight: 72
			implicitWidth: 96
			radius: Tokens.rounding.small

			CustomRect {
				anchors.fill: parent
				border.color: endMinuteField.focus ? Colors.palette.m3primaryContainer : Colors.palette.m3surfaceContainerHighest
				border.width: endMinuteField.focus ? 2 : 0
				radius: parent.radius - border.width

				Behavior on border.width {
					Anim {}
				}
			}

			TextFieldBase {
				id: endMinuteField

				function setConfigText(): string {
					var val = root.convertMinute(root.end);
					if (val === 0) {
						return "00";
					}
					return String(val);
				}

				anchors.left: parent.left
				anchors.right: parent.right
				anchors.verticalCenter: parent.verticalCenter
				clip: true
				color: focus ? Colors.palette.m3primaryContainer : Colors.palette.m3onSurface
				font.family: "Roboto"
				font.letterSpacing: -0.25
				font.pixelSize: 56
				font.weight: 400
				horizontalAlignment: TextInput.AlignHCenter
				text: setConfigText()
				verticalAlignment: TextInput.AlignVCenter

				Keys.onPressed: event => {
					if (event.key === Qt.Key_Backspace) {
						event.accepted = true;
						if (endMinuteField.text.length >= 2) {
							endMinuteField.text = "0" + endMinuteField.text[0];
						} else if (endMinuteField.text.length === 1) {
							endMinuteField.text = "0";
						}
						return;
					} else if (event.key === Qt.Key_Escape) {
						event.accepted = true;
						endMinuteField.text = setConfigText();
						endMinuteField.focus = false;
					} else if (event.key === Qt.Key_Return) {
						endMinuteField.focus = false;
						return;
					} else if (event.key === Qt.Key_Tab) {
						startHourField.focus = true;
					} else if (event.key === Qt.Key_Backtab) {
						endHourField.focus = true;
					}

					if (event.text.length === 1 && event.text >= "0" && event.text <= "9") {
						event.accepted = true;
						var digit = event.text;
						var textLen = endMinuteField.text.length;

						if (textLen >= 2 && endMinuteField.text[0] !== '0') {
							return;
						}

						var val = 0;
						if (textLen === 0) {
							val = parseInt(digit);
						} else if (textLen === 1) {
							val = parseInt(endMinuteField.text + digit);
						} else {
							val = parseInt(endMinuteField.text[1] + digit);
						}

						val = Math.max(0, Math.min(59, val));

						if (textLen >= 2 && val < 10) {
							endMinuteField.text = "0" + val;
						} else {
							endMinuteField.text = val.toString();
						}
					}

					event.accepted = true;
				}
				onCursorPositionChanged: cursorPosition = 2
				onTextChanged: {
					var mins = parseInt(endMinuteField.text);
					const hours = root.convertToMinutes(parseInt(endHourField.text));
					root.endEdit(hours + mins);
				}
			}
		}
	}

	RowLayout {
		CustomText {
			Layout.preferredWidth: spacer.x + spacer.width
			text: qsTr("Start")
		}

		CustomText {
			Layout.preferredWidth: endMinuteRect.width + endHourRect.width
			text: qsTr("End")
		}
	}
}