shift-shell/initialstart/modules/time/package/contents/ui/main.qml

// SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: GPL-2.0-or-later

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard 1.0 as FormCard
import org.kde.plasma.mobileinitialstart.time 1.0 as Time

import org.kde.plasma.mobileinitialstart.initialstart

InitialStartModule {
    name: i18n("Time and Date")
    contentItem: Item {
        id: root

        readonly property real cardWidth: Math.min(Kirigami.Units.gridUnit * 30, root.width - Kirigami.Units.gridUnit * 2)

        function selectedTimeZoneName() {
            const timeZone = Time.TimeUtil.currentTimeZone.replace(/_/g, " ");
            const parts = timeZone.split("/").filter(part => part.length > 0);
            if (parts.length <= 1) {
                return timeZone;
            }
            return i18nc("timezone city and region", "%1 (%2)", parts.slice(1).join(" / "), parts[0]);
        }

        ScrollView {
            anchors {
                fill: parent
                topMargin: Kirigami.Units.gridUnit
            }

            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
            contentWidth: -1

            ColumnLayout {
                width: root.width
                spacing: Kirigami.Units.gridUnit

                Label {
                    Layout.leftMargin: Kirigami.Units.gridUnit
                    Layout.rightMargin: Kirigami.Units.gridUnit
                    Layout.alignment: Qt.AlignTop
                    Layout.fillWidth: true

                    wrapMode: Text.Wrap
                    horizontalAlignment: Text.AlignHCenter
                    text: i18n("Select your time zone and preferred time format.")
                }

                FormCard.FormCard {
                    maximumWidth: root.cardWidth

                    Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                    Layout.fillWidth: true

                    FormCard.FormSwitchDelegate {
                        Layout.fillWidth: true
                        text: i18n("24-Hour Format")
                        checked: Time.TimeUtil.is24HourTime
                        onCheckedChanged: {
                            if (checked !== Time.TimeUtil.is24HourTime) {
                                Time.TimeUtil.is24HourTime = checked;
                            }
                        }
                    }

                }

                FormCard.FormCard {
                    maximumWidth: root.cardWidth

                    Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                    Layout.fillWidth: true

                    FormCard.FormTextDelegate {
                        text: i18n("Selected time zone")
                        description: root.selectedTimeZoneName()
                    }
                }

                FormCard.FormCard {
                    maximumWidth: root.cardWidth

                    Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                    Layout.fillWidth: true
                    Layout.preferredHeight: Math.max(Kirigami.Units.gridUnit * 14, root.height - Kirigami.Units.gridUnit * 18)

                    ListView {
                        id: listView

                        clip: true
                        anchors.fill: parent
                        model: Time.TimeUtil.timeZones
                        currentIndex: -1 // ensure focus is not on the listview

                        header: Control {
                            width: listView.width
                            leftPadding: Kirigami.Units.largeSpacing
                            rightPadding: Kirigami.Units.largeSpacing
                            topPadding: Kirigami.Units.largeSpacing
                            bottomPadding: Kirigami.Units.largeSpacing

                            contentItem: Kirigami.SearchField {
                                id: searchField

                                placeholderText: i18n("Search city or region")

                                onTextChanged: {
                                    Time.TimeUtil.timeZones.filterString = text;
                                }
                            }
                        }

                        delegate: FormCard.FormRadioDelegate {
                            required property string timeZoneId
                            required property string displayName

                            width: ListView.view.width
                            text: displayName
                            description: timeZoneId
                            onClicked: {
                                Time.TimeUtil.currentTimeZone = timeZoneId;
                            }

                            Binding on checked {
                                value: Time.TimeUtil.currentTimeZone === timeZoneId
                            }
                        }
                    }
                }

                Label {
                    visible: Time.TimeUtil.timeZoneStatus.length > 0
                    Layout.leftMargin: Kirigami.Units.gridUnit
                    Layout.rightMargin: Kirigami.Units.gridUnit
                    Layout.fillWidth: true
                    horizontalAlignment: Text.AlignHCenter
                    wrapMode: Text.Wrap
                    text: Time.TimeUtil.timeZoneStatus
                }
            }
        }
    }
}