From 4d9dae5e3b297091784f5a4d5f79304bcf99d1cf Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Tue, 9 Nov 2021 18:51:08 +0100
Subject: [PATCH] Allow duration field to specify labels of sub-fields

---
 src/assets/views/design.svelte      | 10 +++++-----
 src/assets/views/utils/Field.svelte |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/assets/views/design.svelte b/src/assets/views/design.svelte
index dfa6afd..7986e35 100644
--- a/src/assets/views/design.svelte
+++ b/src/assets/views/design.svelte
@@ -65,11 +65,11 @@
                    hint="This is a hint" validation={{message: 'This is a validation error'}}/>
             <Field type="password" name="password" placeholder="Password field" icon="key"
                    hint="This is a hint" validation={{message: 'This is a validation error'}}/>
-            <Field type="duration" name="duration" placeholder="Duration field" icon="clock" extraData={[
-                'h',
-                'm',
-                's',
-            ]} hint="This is a hint" validation={{message: 'This is a validation error'}}/>
+            <Field type="duration" name="duration" placeholder="Duration field" icon="clock" extraData={{
+                h: 'Hours',
+                m: 'Minutes',
+                s: 'Seconds',
+            }} hint="This is a hint" validation={{message: 'This is a validation error'}}/>
             <Field type="select" name="select" placeholder="Select field" icon="list" extraData={[
                 'Option 1',
                 'Option 2',
diff --git a/src/assets/views/utils/Field.svelte b/src/assets/views/utils/Field.svelte
index cbf6804..2fba537 100644
--- a/src/assets/views/utils/Field.svelte
+++ b/src/assets/views/utils/Field.svelte
@@ -387,13 +387,13 @@
             {#if type === 'duration'}
                 <fieldset>
                     <legend>{placeholder}</legend>
-                    {#each extraData as f}
+                    {#each Object.keys(extraData) as f}
                         <div class="time-input">
                             <input type="number" name="{name}[{f}]" id="{fieldId}-{f}"
                                    value={durationValue(f)}
                                    min="0" max={(f === 's' || f === 'm') && '60' || undefined}
                                    {...$$restProps} on:click={e => e.stopPropagation()}>
-                            <label for="{fieldId}-{f}" on:click={e => e.stopPropagation()}>{f}</label>
+                            <label for="{fieldId}-{f}" on:click={e => e.stopPropagation()}>{extraData[f] || f}</label>
                         </div>
                     {/each}
                 </fieldset>