Use Local Time

Always local time first

Tracking Times at Start or Stop:

Q5tz1

Timestamp is displayed in local time (17:23), TimeZone is +02:00 and it’s DST (sommertime) – visualized by the little sun.

… an easy-to-understand Page.

More Info on TimeZone

ca_world

Tapping on the World Icon more details become visible:

Q5tz2

Now details from current TimeZone are visible: Timezone is ‘Europe/Amsterdam‘, Offset is 2 hours from GMT: +02:00 and we can check that GMT is 15:23, where local time is 17:23

Tapping again on the World Icon hides the TimeZone – it’s a toggle.

Here’s the code from QML how this was done:

Container {
  id: tzToggleContainer
  property bool showTimeZone: false
  onShowTimeZoneChanged: {
      startTimeZoneData.visible = showTimeZone
  }
  layout: DockLayout {
  }
  ImageView {
      imageSource: "asset:///images/ca_world.png"
      scalingMethod: ScalingMethod.AspectFit
      horizontalAlignment: HorizontalAlignment.Right
      verticalAlignment: VerticalAlignment.Top
      gestureHandlers: [
          TapHandler {
              onTapped: {
                  tzToggleContainer.showTimeZone = ! tzToggleContainer.showTimeZone
              }
          }
      ]
  }
}

To get the ‘TAP’ on the Image a TapHandler was attached to the ImageView. In onTapped() the value of a custom property (bool showTimeZone) was toggled between true and false. This property is bound to the visible property of another Container: startTimeZoneData

QML makes it easy to connect Objects. This can be done by default properties (visible) or by adding custom properties (showTimeZone).

onShowTimeZoneChanged {} is automatically ‘generated’ by QML and I’m using this to set the visibility of another Container.

Hint: I’m not always using the ‘shortest’ way  to make the code easier to understand. In this case I could have done:

Container {
  id: startTimeZoneData
  visible: tzToggleContainer.showTimeZone
}

Now the knowledge what happenstapping on the ImageView isn’t immediately visible.

Change TimeZone

There can be situations where user has to change the TimeZone: perhaps he/she forgots to start tracking at beginning of travel or smartphone is not set to automatically use the TimeZone from current location.

To change the TimeZone simply tap on the Name (Europe/Amsterdam) and a list of Countries will be pushed on top.

First entry is the Current TimeZone detected from the Phone:

Q5tz3

Tap on a Country and the Timezone will be changed. All re-calculations of Date and Time are done under-the-hood. More details on TimeZone Support see Menu below.

Change Day and Time

If user has the permission to change the Time he/she simply taps on the Start Time and a new Page will be pushed on top allowing to change the Day and / or Time:

Q5tz4

You see: all is simple and easy for default workflow, complexity is hidden, but if there must be something changed it’s also easy to do.

More infos::