77 lines
5 KiB
HTML
77 lines
5 KiB
HTML
<div class="module-header">
|
|
<h2><i class="fas fa-phone-volume"></i> Pagers & Extensions</h2>
|
|
<p>Your personal directory of hospital phone extensions and pagers — searchable, edit-friendly, soft-delete</p>
|
|
</div>
|
|
|
|
<div class="card ext-toolbar">
|
|
<div style="display:flex;gap:10px;align-items:center;padding:12px 16px;flex-wrap:wrap;">
|
|
<div style="flex:1;min-width:220px;position:relative;">
|
|
<i class="fas fa-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--g400);font-size:13px;"></i>
|
|
<input type="search" id="ext-search" placeholder="Search by location, name, number..." autocomplete="off"
|
|
style="width:100%;padding:8px 10px 8px 32px;font-size:14px;border:1px solid var(--g300);border-radius:8px;">
|
|
</div>
|
|
<button id="ext-add-btn" class="btn-sm btn-primary"><i class="fas fa-plus"></i> Add</button>
|
|
<button id="ext-export-btn" class="btn-sm btn-ghost"><i class="fas fa-file-export"></i> Export</button>
|
|
<button id="ext-import-btn" class="btn-sm btn-ghost"><i class="fas fa-file-import"></i> Import</button>
|
|
<input type="file" id="ext-import-file" accept="application/zip,application/json,.zip,.json" class="hidden">
|
|
<button id="ext-trash-btn" class="btn-sm btn-ghost"><i class="fas fa-trash-can"></i> Trash <span id="ext-trash-count" style="color:var(--g500);font-size:11px;"></span></button>
|
|
</div>
|
|
|
|
<div id="ext-import-preview" class="hidden" style="margin:0 16px 14px;padding:12px;border:1px solid var(--g200);border-radius:10px;background:var(--g50);">
|
|
<div id="ext-import-preview-text" style="font-size:13px;color:var(--g700);line-height:1.5;margin-bottom:10px;"></div>
|
|
<label style="display:flex;gap:8px;align-items:center;font-size:12px;color:var(--g700);margin-bottom:6px;">
|
|
<input type="checkbox" id="ext-import-restore-trashed"> Restore exact matches currently in trash
|
|
</label>
|
|
<label style="display:flex;gap:8px;align-items:center;font-size:12px;color:var(--g700);margin-bottom:10px;">
|
|
<input type="checkbox" id="ext-import-possible"> Import possible duplicates instead of skipping them
|
|
</label>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
|
<button id="ext-import-confirm" class="btn-sm btn-primary"><i class="fas fa-file-import"></i> Import Selected</button>
|
|
<button id="ext-import-cancel" class="btn-sm btn-ghost">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ext-form-wrap" class="hidden" style="border-top:1px solid var(--g100);padding:14px 16px;background:var(--g50);">
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;">
|
|
<div class="demo-field">
|
|
<label>Location</label>
|
|
<input type="text" id="ext-location" list="ext-location-list" placeholder="e.g., Main Hospital" maxlength="120">
|
|
<datalist id="ext-location-list"></datalist>
|
|
</div>
|
|
<div class="demo-field">
|
|
<label>Name / Department</label>
|
|
<input type="text" id="ext-name" placeholder="e.g., Nursery, 5B, On-call" maxlength="120">
|
|
</div>
|
|
<div class="demo-field">
|
|
<label>Number</label>
|
|
<input type="text" id="ext-number" placeholder="e.g., 5866" maxlength="40">
|
|
</div>
|
|
<div class="demo-field">
|
|
<label>Type</label>
|
|
<select id="ext-type">
|
|
<option value="extension">Extension</option>
|
|
<option value="pager">Pager</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:8px;">
|
|
<div class="demo-field">
|
|
<label>Notes (optional)</label>
|
|
<input type="text" id="ext-notes" placeholder="e.g., After hours: 5867" maxlength="500">
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:10px;display:flex;gap:6px;">
|
|
<button id="ext-save-btn" class="btn-sm btn-primary"><i class="fas fa-floppy-disk"></i> Save</button>
|
|
<button id="ext-cancel-btn" class="btn-sm btn-ghost">Cancel</button>
|
|
<span id="ext-form-status" style="font-size:12px;margin-left:6px;color:var(--g500);align-self:center;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ext-mode-banner" class="hidden" style="margin:10px 0;padding:8px 12px;background:#fef3c7;border-left:4px solid #f59e0b;border-radius:6px;font-size:13px;color:#78350f;">
|
|
<i class="fas fa-trash-can"></i> Viewing trash. <button id="ext-back-active" class="btn-sm btn-ghost" style="margin-left:8px;">Back to active</button>
|
|
</div>
|
|
|
|
<div id="ext-list" style="margin-top:10px;">
|
|
<p style="text-align:center;color:#9ca3af;padding:40px;">Loading...</p>
|
|
</div>
|