src/controls.6/TimePicker.qml

0001 import QtQuick
0002 import QtQuick.Layouts
0003 import QtQuick.Controls
0004
0005 import org.mauikit.controls 1.3 as Maui
0006 import org.mauikit.calendar 1.0 as Kalendar
0007
0008 /**
0009  * @inherit QtQuick.Controls.Page
0010  * @brief A control for picking a time in the format of hour and minutes.
0011  *
0012  * @image html timepicker.png
0013  *
0014  * @code
0015  *  MC.TimePicker
0016  * {
0017  *    id: _view
0018  *    anchors.fill: parent
0019  *    onAccepted: (time) => console.log("Time Picked, ", time)
0020  * }
0021  * @endcode
0022  */
0023 Page
0024 {
0025     id:  control
0026
0027     /**
0028      * @brief
0029      */
0030     readonly property date startTime : new Date()
0031
0032     /**
0033      * @brief
0034      */
0035     property int selectedMinute: selectedTime.getMinutes()
0036
0037     /**
0038      * @brief
0039      */
0040     property int selectedHour: selectedTime.getHours()
0041
0042     /**
0043      * @brief
0044      */
0045     property int timeZoneOffset : 0
0046
0047     /**
0048      * @brief
0049      */
0050     property date selectedTime : startTime
0051
0052     /**
0053      * @brief
0054      */
0055     property string format: control.selectedHour < 12 ? "AM" : "PM"
0056
0057     /**
0058      * @brief
0059      * @param time
0060      */
0061     signal accepted(var time)
0062
0063     background: null
0064
0065     header: ToolBar
0066     {
0067         width: parent.width
0068         background: null
0069
0070         contentItem: RowLayout
0071         {
0072             spacing: 0
0073
0074             Maui.ToolActions
0075             {
0076                 id: _dateGroup
0077                 autoExclusive: true
0078
0079                 Action
0080                 {
0081                     text: i18n("AM")
0082                     checked: control.format === text
0083                     onTriggered: control.format = text
0084                 }
0085
0086                 Action
0087                 {
0088                     text: i18n("PM")
0089                     checked: control.format === text
0090
0091                     onTriggered: control.format = text
0092                 }
0093             }
0094
0095             Item {Layout.fillWidth: true}
0096
0097             Button
0098             {
0099                 text: i18n("Done")
0100                 onClicked:
0101                 {
0102                     control.updateSelectedTime(minutesTumbler.currentIndex, hoursTumbler.currentIndex, control.format)
0103                     control.accepted(control.selectedTime)
0104                 }
0105             }
0106         }
0107     }
0108
0109     contentItem: Item
0110     {
0111         Row
0112         {
0113             id: row
0114             height: parent.height
0115             anchors.horizontalCenter: parent.horizontalCenter
0116
0117             spacing: Maui.Style.space.medium
0118
0119             Tumbler
0120             {
0121                 id: hoursTumbler
0122                 spacing: Maui.Style.space.medium
0123
0124                 model: 12
0125                 currentIndex: formatUTCHour(control.selectedHour)
0126
0127                 delegate:  Button
0128                 {
0129                     font.bold: checked
0130
0131                     checked : index === Tumbler.tumbler.currentIndex
0132                     text: formatText(Tumbler.tumbler.count, modelData)
0133                     opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
0134
0135                     onClicked:
0136                     {
0137                         Tumbler.tumbler.currentIndex = modelData
0138                         control.updateSelectedTime(minutesTumbler.currentIndex, hoursTumbler.currentIndex)
0139                     }
0140
0141                     background: Rectangle
0142                     {
0143                         visible: checked
0144                         color: checked ? Maui.Theme.highlightColor : hovered ? Maui.Theme.focusColor : "transparent"
0145                         radius: Maui.Style.radiusV
0146                     }
0147                 }
0148
0149             }
0150
0151             Tumbler
0152             {
0153                 id: minutesTumbler
0154                 model: 60
0155                 spacing: Maui.Style.space.medium
0156
0157                 currentIndex: control.selectedMinute
0158
0159                 delegate:  Button
0160                 {
0161                     font.bold: checked
0162                     checked : index === Tumbler.tumbler.currentIndex
0163                     text: formatText(Tumbler.tumbler.count, modelData)
0164                     opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
0165
0166                     onClicked:
0167                     {
0168                         Tumbler.tumbler.currentIndex = modelData
0169                         control.updateSelectedTime(minutesTumbler.currentIndex, hoursTumbler.currentIndex)
0170                     }
0171
0172                     background: Rectangle
0173                     {
0174                         visible: checked
0175                         color: checked ? Maui.Theme.highlightColor : hovered ? Maui.Theme.focusColor : "transparent"
0176                         radius: Maui.Style.radiusV
0177                     }
0178                 }
0179             }
0180         }
0181     }
0182
0183     /**
0184      * @brief
0185      * @param hour
0186      */
0187     function formatUTCHour(hour : int)
0188     {
0189         if(hour > 12)
0190         {
0191             return hour - 12;
0192         }
0193
0194         return hour
0195     }
0196
0197     /**
0198      * @brief
0199      * @param hour
0200      * @param format
0201      */
0202     function formatHourToUTC(hour, format)
0203     {
0204         if(format == "AM")
0205         {
0206             if(hour >= 11)
0207             {
0208                 return 0;
0209             }
0210
0211             return hour + 1
0212         }
0213
0214
0215         if(hour >= 11)
0216         {
0217             return 23
0218         }
0219
0220         return 12 + hour +1;
0221     }
0222
0223     /**
0224      * @brief
0225      * @param count
0226      * @param modeldata
0227      */
0228     function formatText(count : int, modelData : int)
0229     {
0230         var data = count === 12 ? modelData + 1 : modelData;
0231         return data.toString().length < 2 ? "0" + data : data;
0232     }
0233
0234     /**
0235      * @brief
0236      * @param minute
0237      * @param hour
0238      * @param format
0239      */
0240     function updateSelectedTime(minute, hour, format = control.format)
0241     {
0242         control.selectedMinute = minute
0243         control.selectedHour = formatHourToUTC(hour, format)
0244
0245         var newdate = new Date()
0246
0247         newdate.setHours(control.selectedHour)
0248         newdate.setMinutes(control.selectedMinute)
0249
0250         control.selectedTime = newdate
0251
0252         console.log("UPDATING TIMEW", control.selectedTime.getHours(), control.selectedTime.getMinutes(), hour, minute, format, control.selectedTime.toLocaleTimeString())
0253     }
0254
0255 }