Enabling more formats to input hours and minutes in preferences

src/preferences.html

@@ -46,15 +46,15 @@
             </div>
             <div class="flex-box">
                 <p data-i18n="$Preferences.hoursPerDay">Hours per day</p>
-                <input data-i18n="[placeholder]$Preferences.hours-per-day;[oninvalid]$Generic.hours-on-invalid" type="text" name="hours-per-day" id="hours-per-day" maxlength=5 pattern="^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$" value="08:00" size=5 required oninput="this.setCustomValidity('');this.reportValidity()" onblur="this.value = this.checkValidity() ? this.value : '08:00';this.setCustomValidity('')">
+                <input data-i18n="[placeholder]$Preferences.hours-per-day;[oninvalid]$Generic.hours-on-invalid" type="text" name="hours-per-day" id="hours-per-day" maxlength=5 pattern="^((0|1)?[0-9]|2[0-3])(\.[0-9][0-9]?|:[0-5][0-9])?$" value="08:00" size=5 required oninput="this.setCustomValidity('');this.reportValidity()" onblur="this.value = this.checkValidity() ? this.value : '08:00';this.setCustomValidity('')">
             </div>
             <div class="flex-box">
                 <p><i class="fas fa-utensils"></i><span data-i18n="$Preferences.enablePrefillBreakTime">Enable prefilling of break time</span></p>
                 <label class="switch"><input type="checkbox" id='enable-prefill-break-time' name="enable-prefill-break-time"><span class="slider round"></span></label>
             </div>
             <div class="flex-box">
                 <p data-i18n="$Preferences.breakTimeInterval">Break time interval</p>
-                <input data-i18n="[placeholder]$Preferences.hours-per-day" type="text" name="break-time-interval" id="break-time-interval" maxlength=5 pattern="^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$" value="00:30" size=5 required oninput="this.reportValidity()" onblur="this.value = this.checkValidity() ? this.value : '00:30'">
+                <input data-i18n="[placeholder]$Preferences.hours-per-day" type="text" name="break-time-interval" id="break-time-interval" maxlength=5 pattern="^((0|1)?[0-9]|2[0-3])(\.[0-9][0-9]?|:[0-5][0-9])?$" value="00:30" size=5 required oninput="this.reportValidity()" onblur="this.value = this.checkValidity() ? this.value : '00:30'">
             </div>
 
         </section>

src/preferences.js

@@ -101,7 +101,46 @@
         /* istanbul ignore else */
         if (this.checkValidity() === true)
         {
-            changeValue(this.name, this.value);
+            let entry = this.value;
+            const colonIdx = entry.indexOf(':');
+            const periodIdx = entry.indexOf('.');
+            if (colonIdx !== -1)
+            {
+                // contains :
+                /* istanbul ignore else */
+                if (colonIdx <= 1)
+                {
+                    // only 1 digit before :
+                    entry = '0'.concat(entry);
+                }
+            }
+            else if (periodIdx !== -1)
+            {
+                // contains .
+                let n = parseFloat('0'.concat(entry.substring(periodIdx)));
+                n *= 60;
+                n = Math.floor(n).toString();
+                n = n.length < 2 ? '0'.concat(n) : n.substring(0, 2);
+                entry = entry.substring(0, periodIdx).concat(':').concat(n);
+                /* istanbul ignore else */
+                if (periodIdx <= 1)
+                {
+                    // only 1 digit before .
+                    entry = '0'.concat(entry);
+                }
+            }
+            else
+            {
+                // no . or :
+                /* istanbul ignore else */
+                if (entry.length < 2)
+                {
+                    entry = '0'.concat(entry);
+                }
+                entry = entry.concat(':00');
+            }
+            this.value = entry;
+            changeValue(this.name, entry);
         }
     });