diff --git a/assets/js/components/Config/PropertyField.vue b/assets/js/components/Config/PropertyField.vue index 325aeb6d4..929bb99bb 100644 --- a/assets/js/components/Config/PropertyField.vue +++ b/assets/js/components/Config/PropertyField.vue @@ -93,10 +93,14 @@ import "@h2d2/shopicons/es/regular/minus"; import VehicleIcon from "../VehicleIcon"; import SelectGroup from "../SelectGroup.vue"; +import formatter from "../../mixins/formatter"; + +const NS_PER_SECOND = 1000000000; export default { name: "PropertyField", components: { VehicleIcon, SelectGroup }, + mixins: [formatter], props: { id: String, property: String, @@ -149,6 +153,9 @@ export default { if (this.property === "capacity") { return "kWh"; } + if (this.type === "Duration") { + return this.fmtSecondUnit(this.value); + } return null; }, icons() { @@ -203,6 +210,10 @@ export default { return Array.isArray(this.modelValue) ? this.modelValue.join("\n") : ""; } + if (this.type === "Duration" && typeof this.modelValue === "number") { + return this.modelValue / NS_PER_SECOND; + } + return this.modelValue; }, set(value) { @@ -216,6 +227,10 @@ export default { newValue = value ? value.split("\n") : []; } + if (this.type === "Duration" && typeof newValue === "number") { + newValue = newValue * NS_PER_SECOND; + } + this.$emit("update:modelValue", newValue); }, }, diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js index ca1588522..86396f49e 100644 --- a/assets/js/mixins/formatter.js +++ b/assets/js/mixins/formatter.js @@ -246,6 +246,15 @@ export default { day: "numeric", }).format(date); }, + fmtSecondUnit: function (seconds) { + return new Intl.NumberFormat(this.$i18n?.locale, { + style: "unit", + unit: "second", + unitDisplay: "long", + }) + .formatToParts(seconds) + .find((part) => part.type === "unit").value; + }, fmtMoney: function (amout = 0, currency = "EUR", decimals = true, withSymbol = false) { const currencyDisplay = withSymbol ? "narrowSymbol" : "code"; const result = new Intl.NumberFormat(this.$i18n?.locale, {