shaamilahmed
4c98dd93ad
- Added an enterprise-grade, request-scoped AuditLogger extractor in Axum. - Configured MongoDB persistence for structured, replayable audit logs (capturing timestamp, user, action, type, payload snapshot, client IP with proxy header support, and User-Agent). - Created a live Administrator console at /auth/audit to filter and inspect log events. - Re-architected documentation by moving Design Wiki pages out of /components into a dedicated /docs route. - Published logging architecture documentation at /docs/logging.
253 lines
16 KiB
HTML
253 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
{% import "components/macros.html" as ui %}
|
|
|
|
{% block title %}Date & Time Pickers - Design System Wiki{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
|
|
|
<!-- Left Navigation Sidebar -->
|
|
{% include "docs/sidebar.html" %}
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 space-y-8">
|
|
|
|
<!-- Header -->
|
|
<div class="pb-6 border-b border-border">
|
|
<span class="text-xs font-semibold text-indigo-400">Pickers</span>
|
|
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Date & Time Pickers</h1>
|
|
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
|
Custom popup calendars and hour/minute scroll menus constructed using DOM components to prevent relying on native browser-system calendar windows. Designed for optimal styling consistency.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Section Pickers -->
|
|
<section class="space-y-4">
|
|
<h2 class="text-lg font-bold text-slate-200">Date & Time Popovers</h2>
|
|
|
|
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
|
|
<!-- Tab Headers -->
|
|
<div class="flex border-b border-border/60 pb-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'picker-sandbox')">Interactive Demo</button>
|
|
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'picker-code')">HTML Markup</button>
|
|
</div>
|
|
|
|
<!-- Demo Viewport -->
|
|
<div id="picker-sandbox" class="wiki-pane grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-lg py-2">
|
|
<!-- Date Picker using macro -->
|
|
{{ ui::datepicker(id="wiki-datepicker", name="wiki_date", label="Date Picker", value="2026-05-30", display_text="May 30, 2026", data_year="2026", data_month="4") }}
|
|
|
|
<!-- Time Picker using macro -->
|
|
{{ ui::timepicker(id="wiki-timepicker", name="wiki_time", label="Time Picker", value="12:00 PM") }}
|
|
</div>
|
|
|
|
<!-- Code Snippet Area -->
|
|
<div id="picker-code" class="wiki-pane hidden space-y-4">
|
|
<!-- Date Picker Macro -->
|
|
<div class="space-y-2">
|
|
<span class="text-xs font-bold text-muted-foreground block">Date Picker Macro</span>
|
|
<div class="relative group">
|
|
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
|
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
|
Copy Date Picker Code
|
|
</button>
|
|
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
|
|
|
|
<!-- Custom Date Picker using macro -->
|
|
{{ "{{" }} ui::datepicker(id="my-datepicker", name="my_date", label="Date Picker", value="2026-05-30", display_text="May 30, 2026", data_year="2026", data_month="4") {{ "}}" }}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Picker Macro -->
|
|
<div class="space-y-2">
|
|
<span class="text-xs font-bold text-muted-foreground block">Time Picker Macro</span>
|
|
<div class="relative group">
|
|
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
|
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
|
Copy Time Picker Code
|
|
</button>
|
|
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
|
|
|
|
<!-- Custom Time Picker using macro -->
|
|
{{ "{{" }} ui::timepicker(id="my-timepicker", name="my_time", label="Time Picker", value="12:00 PM") {{ "}}" }}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Global JS Bindings Documentation -->
|
|
<section class="space-y-6 border-t border-border/60 pt-6">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-200">How the Global Date Picker JS Works</h2>
|
|
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
|
The custom date picker relies on the following classes and datasets to manage month navigation and update values:
|
|
</p>
|
|
</div>
|
|
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
|
<table class="w-full border-collapse text-left text-xs">
|
|
<thead>
|
|
<tr class="border-b border-border text-muted-foreground font-bold">
|
|
<th class="pb-2.5 w-1/3">Selector / Class</th>
|
|
<th class="pb-2.5 w-1/6">Type</th>
|
|
<th class="pb-2.5">Behavior & Purpose</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.custom-datepicker</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Wraps the date picker component. Must declare <code>data-year</code> (e.g. 2026) and <code>data-month</code> (0-indexed, 0 = Jan, 4 = May) to initialize the viewport.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-value</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Hidden input field (<code><input type="hidden"></code>) storing the ISO date value (YYYY-MM-DD) for form submission.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-trigger</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Button clicked by user to open or close the calendar popover dropdown.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-text</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Target text element updated dynamically to display the formatted selected date (e.g., "May 30, 2026").
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-popover</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Floating container containing the month navigation buttons and days grids. Starts as <code>hidden</code>.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-prev / .datepicker-next</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Navigational buttons to decrement or increment the active month.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-month-year</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Clickable header button. Toggles view grid modes between days selection, months selection, and years selection.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-days</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Calendar day grid container dynamically populated with clickable day buttons by the JS engine.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Time Picker JS Works</h2>
|
|
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
|
The custom time picker scopes dynamic lists of hours and minutes inside scrollable blocks using the following bindings:
|
|
</p>
|
|
</div>
|
|
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
|
<table class="w-full border-collapse text-left text-xs">
|
|
<thead>
|
|
<tr class="border-b border-border text-muted-foreground font-bold">
|
|
<th class="pb-2.5 w-1/3">Selector / Class</th>
|
|
<th class="pb-2.5 w-1/6">Type</th>
|
|
<th class="pb-2.5">Behavior & Purpose</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.custom-timepicker</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Wraps the time picker markup structure.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-value</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Hidden input field storing the active text time (e.g. "12:00 PM") for forms.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-trigger</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Clickable button to open the scroll dropdown.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-text</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Text node inside trigger displaying the formatted time.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-popover</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Dropdown overlay panel displaying columns for hour list, minute list, and AM/PM buttons.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-col-hours / .timepicker-col-minutes</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Containers populated automatically with hourly buttons (1-12) and minute buttons (00-55).
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-ampm-btn</td>
|
|
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
|
<td class="py-3 text-slate-400">
|
|
Buttons representing "AM" and "PM" choices toggled on click.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
|
|
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
|
|
<p class="text-slate-400 leading-normal">
|
|
You can customize the styling of the trigger buttons, chevrons, icons, popover cards, borders, shadows, backgrounds, and the active option buttons (which receive <code>.bg-indigo-600</code>). Ensure you preserve the classes and attributes listed above so the DOM-generation functions and trigger listeners in <code>components.js</code> execute without error.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleWikiTabs(btn, paneId) {
|
|
const card = btn.closest('.border-border');
|
|
if (!card) return;
|
|
card.querySelectorAll('button').forEach(b => {
|
|
b.classList.remove('border-sky-500', 'text-sky-400');
|
|
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
|
});
|
|
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
|
btn.classList.add('border-sky-500', 'text-sky-400');
|
|
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
|
const target = card.querySelector('#' + paneId);
|
|
if (target) target.classList.remove('hidden');
|
|
}
|
|
</script>
|
|
{% endblock %}
|