calendar: size door/wifi inputs correctly; add reservation PATCH to dev.html

Door code fixed at 4ch; wifi key and SSID grow to fill the row.
dev.html reservation section now supports PATCH /reservation/:uid.

room_cal/vue/calendar.html

@@ -373,6 +373,9 @@
     }
     .panel-input:focus { border-bottom-color: var(--accent, #6366f1); }
     .panel-input.is-sm { width: 2.5ch; }
+    .panel-input.is-door { width: 4ch; }
+    .panel-value.is-grow { flex: 1; min-width: 0; }
+    .panel-value.is-grow .panel-input { width: 100%; }
     .type-switch { display: inline-flex; align-items: baseline; gap: 2px; margin-left: 4px; font-size: 10.5px; }
     .type-switch-sep { color: var(--text-muted); opacity: 0.35; }
     .type-switch-opt { cursor: pointer; font-weight: 600; color: var(--text-muted); opacity: 0.5; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; text-decoration-thickness: 1px; }
@@ -1272,7 +1275,7 @@
             <div class="panel-row" :class="{ 'is-saving': resDoorState==='saving', 'is-error': resDoorState==='error' }">
               <span class="panel-label">Door</span>
               <span class="panel-value">
-                <input class="panel-input" type="text"
+                <input class="panel-input is-door" type="text"
                   :value="editingDoorCode ?? (selection.door_code || '')"
                   @focus="editingDoorCode = selection.door_code || ''"
                   @input="editingDoorCode = $event.target.value"
@@ -1286,7 +1289,7 @@
             </div>
             <div class="panel-row" :class="{ 'is-saving': resKeyState==='saving', 'is-error': resKeyState==='error' }">
               <span class="panel-label">WiFi key</span>
-              <span class="panel-value">
+              <span class="panel-value is-grow">
                 <input class="panel-input" type="text"
                   :value="editingWifiKey ?? (selection.wifi_key || '')"
                   @focus="editingWifiKey = selection.wifi_key || ''"
@@ -1301,7 +1304,7 @@
             </div>
             <div class="panel-row" :class="{ 'is-saving': resSsidState==='saving', 'is-error': resSsidState==='error' }">
               <span class="panel-label">WiFi SSID</span>
-              <span class="panel-value">
+              <span class="panel-value is-grow">
                 <input class="panel-input" type="text"
                   :value="editingWifiSsid ?? (selection.wifi_ssid || '')"
                   @focus="editingWifiSsid = selection.wifi_ssid || ''"

room_cal/vue/dev.html

@@ -111,13 +111,38 @@
   <div class="result" id="res-prices"></div>
 
   <!-- ── RESERVATIONS ───────────────────────────────── -->
-  <h2>Reservations <span class="section-note">(read-only)</span></h2>
+  <h2>Reservations</h2>
   <div class="row">
     <label class="lbl">date</label>
     <input id="rsv-d1" type="date">
     <span class="dash">–</span>
     <input id="rsv-d2" type="date" title="end date for range">
     <button onclick="doGetReservation()">GET</button>
+    <span class="section-note">GET uses date range</span>
+  </div>
+  <div class="row">
+    <label class="lbl">uid</label>
+    <input id="rsv-uid" type="text" placeholder="reservation uid">
+  </div>
+  <div class="row">
+    <label class="lbl">checkin_date</label>
+    <input id="rsv-checkin" type="date" title="required for PATCH">
+  </div>
+  <div class="row">
+    <label class="lbl">door_code</label>
+    <input id="rsv-door-code" type="text" placeholder="4-digit code">
+  </div>
+  <div class="row">
+    <label class="lbl">wifi_key</label>
+    <input id="rsv-wifi-key" type="text" placeholder="wifi password">
+  </div>
+  <div class="row">
+    <label class="lbl">wifi_ssid</label>
+    <input id="rsv-wifi-ssid" type="text" placeholder="network name">
+  </div>
+  <div class="row">
+    <button onclick="doPatchReservation()">PATCH /reservation/:uid</button>
+    <span class="section-note">only non-empty fields are sent</span>
   </div>
   <div class="result" id="res-reservations"></div>
 
@@ -453,6 +478,22 @@
       show('res-reservations', await api('GET', `/reservation/${range}`));
     }
 
+    async function doPatchReservation() {
+      const uid = document.getElementById('rsv-uid').value.trim();
+      if (!uid) return;
+      const checkin_date = document.getElementById('rsv-checkin').value;
+      if (!checkin_date) return;
+      const body = { checkin_date };
+      const door_code  = document.getElementById('rsv-door-code').value.trim();
+      const wifi_key   = document.getElementById('rsv-wifi-key').value.trim();
+      const wifi_ssid  = document.getElementById('rsv-wifi-ssid').value.trim();
+      if (door_code)  body.door_code  = door_code;
+      if (wifi_key)   body.wifi_key   = wifi_key;
+      if (wifi_ssid)  body.wifi_ssid  = wifi_ssid;
+      pending('res-reservations');
+      show('res-reservations', await api('PATCH', `/reservation/${uid}`, body));
+    }
+
     // ── closed ──
     async function doGetClosed() {
       const range = dateArg('cls-d1', 'cls-d2');