Add timezone handling

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-10-10 16:25:50 +02:00
parent eba3c70c9b
commit d58ca5743d
49 changed files with 1218 additions and 429 deletions
--- a/js/src/components/Address/AddressInfo.vue
+++ b/js/src/components/Address/AddressInfo.vue
@@ -0,0 +1,124 @@
+<template>
+  <address>
+    <b-icon
+      v-if="showIcon"
+      :icon="address.poiInfos.poiIcon.icon"
+      size="is-medium"
+      class="icon"
+    />
+    <p>
+      <span
+        class="addressDescription"
+        :title="address.poiInfos.name"
+        v-if="address.poiInfos.name"
+      >
+        {{ address.poiInfos.name }}
+      </span>
+      <br v-if="address.poiInfos.name" />
+      <span class="has-text-grey-dark">
+        {{ address.poiInfos.alternativeName }}
+      </span>
+      <br />
+      <small
+        v-if="
+          userTimezoneDifferent &&
+          longShortTimezoneNamesDifferent &&
+          timezoneLongNameValid
+        "
+        class="has-text-grey-dark"
+      >
+        🌐
+        {{
+          $t("{timezoneLongName} ({timezoneShortName})", {
+            timezoneLongName,
+            timezoneShortName,
+          })
+        }}
+      </small>
+      <small v-else-if="userTimezoneDifferent" class="has-text-grey-dark">
+        🌐 {{ timezoneShortName }}
+      </small>
+    </p>
+  </address>
+</template>
+<script lang="ts">
+import { IAddress } from "@/types/address.model";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class AddressInfo extends Vue {
+  @Prop({ required: true, type: Object as PropType<IAddress> })
+  address!: IAddress;
+
+  @Prop({ required: false, default: false, type: Boolean }) showIcon!: boolean;
+  @Prop({ required: false, default: false, type: Boolean })
+  showTimezone!: boolean;
+  @Prop({ required: false, type: String }) userTimezone!: string;
+
+  get userTimezoneDifferent(): boolean {
+    return (
+      this.userTimezone != undefined &&
+      this.address.timezone != undefined &&
+      this.userTimezone !== this.address.timezone
+    );
+  }
+
+  get longShortTimezoneNamesDifferent(): boolean {
+    return (
+      this.timezoneLongName != undefined &&
+      this.timezoneShortName != undefined &&
+      this.timezoneLongName !== this.timezoneShortName
+    );
+  }
+
+  get timezoneLongName(): string | undefined {
+    return this.timezoneName("long");
+  }
+
+  get timezoneShortName(): string | undefined {
+    return this.timezoneName("short");
+  }
+
+  get timezoneLongNameValid(): boolean {
+    return (
+      this.timezoneLongName != undefined && !this.timezoneLongName.match(/UTC/)
+    );
+  }
+
+  private timezoneName(format: "long" | "short"): string | undefined {
+    return this.extractTimezone(
+      new Intl.DateTimeFormat(undefined, {
+        timeZoneName: format,
+        timeZone: this.address.timezone,
+      }).formatToParts()
+    );
+  }
+
+  private extractTimezone(
+    parts: Intl.DateTimeFormatPart[]
+  ): string | undefined {
+    return parts.find((part) => part.type === "timeZoneName")?.value;
+  }
+}
+</script>
+<style lang="scss" scoped>
+address {
+  font-style: normal;
+  display: flex;
+  justify-content: flex-start;
+
+  span.addressDescription {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 0 auto;
+    min-width: 100%;
+    max-width: 4rem;
+    overflow: hidden;
+  }
+
+  span.icon {
+    padding-right: 1rem;
+  }
+}
+</style>