Explorar el Código

Replace native time input with hourly select for check-in/out

Native type=time renders separately-tabbable hour/minute/AM-PM
segments; we only need hourly resolution, so a single select of
24 hourly options avoids that entirely.
ZiB hace 3 meses
padre
commit
f07d2b6240
Se han modificado 1 ficheros con 16 adiciones y 15 borrados
  1. 16 15
      room_cal/vue/calendar.html

+ 16 - 15
room_cal/vue/calendar.html

@@ -1166,14 +1166,12 @@
               <span class="panel-label">Check-in</span>
               <span class="panel-value">
                 {{ fmtDateNoYear(selection.checkin_date) }} @
-                <input class="panel-input is-time" type="time"
+                <select class="panel-input is-time"
                   :value="editingCheckinTime ?? (selection.checkin_time || '')"
-                  @focus="editingCheckinTime = selection.checkin_time || ''"
-                  @input="editingCheckinTime = $event.target.value"
-                  @blur="commitResField('checkin_time')"
-                  @keydown.enter="$event.target.blur()"
-                  @keydown.escape="editingCheckinTime = null; $event.target.blur()"
-                />
+                  @change="editingCheckinTime = $event.target.value; commitResField('checkin_time')"
+                >
+                  <option v-for="opt in hourOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+                </select>
                 <span v-if="resCheckinTimeState==='saving'" class="row-spinner"></span>
                 <span v-else-if="resCheckinTimeState==='error'" class="row-err">Failed</span>
               </span>
@@ -1182,14 +1180,12 @@
               <span class="panel-label">Check-out</span>
               <span class="panel-value">
                 {{ fmtDateNoYear(selection.checkout_date) }} @
-                <input class="panel-input is-time" type="time"
+                <select class="panel-input is-time"
                   :value="editingCheckoutTime ?? (selection.checkout_time || '')"
-                  @focus="editingCheckoutTime = selection.checkout_time || ''"
-                  @input="editingCheckoutTime = $event.target.value"
-                  @blur="commitResField('checkout_time')"
-                  @keydown.enter="$event.target.blur()"
-                  @keydown.escape="editingCheckoutTime = null; $event.target.blur()"
-                />
+                  @change="editingCheckoutTime = $event.target.value; commitResField('checkout_time')"
+                >
+                  <option v-for="opt in hourOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+                </select>
                 <span v-if="resCheckoutTimeState==='saving'" class="row-spinner"></span>
                 <span v-else-if="resCheckoutTimeState==='error'" class="row-err">Failed</span>
               </span>
@@ -1398,6 +1394,11 @@ createApp({
     const resDoorState        = ref(null);
     const resCheckinTimeState  = ref(null);
     const resCheckoutTimeState = ref(null);
+    const hourOptions = Array.from({ length: 24 }, (_, h) => {
+      const period = h < 12 ? 'AM' : 'PM';
+      const h12 = h % 12 === 0 ? 12 : h % 12;
+      return { value: String(h).padStart(2, '0') + ':00', label: `${h12}:00 ${period}` };
+    });
     const pendingDiscountType = ref(null);
     const pendingClosed       = ref(null);
     const discountInputRef    = ref(null);
@@ -2513,7 +2514,7 @@ createApp({
       monthCats, fixMonth, fixMonthFeeds, fixMonthScripts, reloadCaches,
       toggleClosed, commitPrice, switchDiscountType, commitDiscount, commitResField,
       editingDoorCode, editingWifiKey, editingWifiSsid, editingCheckinTime, editingCheckoutTime,
-      resDoorState, resKeyState, resSsidState, resCheckinTimeState, resCheckoutTimeState,
+      resDoorState, resKeyState, resSsidState, resCheckinTimeState, resCheckoutTimeState, hourOptions,
       monthName, monthStatsLabel,
       todayKey, inMonth, isClosed,
       priceFor, discountFor, priceDataFor, dayServiceKeys, dayStatus,