update
This commit is contained in:
gsinghpal
@@ -1,120 +1,96 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="fusion_clock.ClockFAB">
|
||||
<div t-if="state.isDisplayed" class="fclk-fab-wrapper">
|
||||
|
||||
<!-- Expanded Panel (above the button) -->
|
||||
<div t-if="state.expanded" class="fclk-fab-panel">
|
||||
<!-- Header -->
|
||||
<div class="fclk-fab-panel-header">
|
||||
<div class="fclk-fab-panel-title">
|
||||
<span t-attf-class="fclk-fab-status-dot {{ state.isCheckedIn ? 'active' : '' }}"/>
|
||||
<span t-if="state.isCheckedIn">Clocked In</span>
|
||||
<span t-else="">Ready</span>
|
||||
</div>
|
||||
<a href="/my/clock" class="fclk-fab-open-link" target="_blank" title="Open Full Clock">
|
||||
<i class="fa fa-external-link"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div t-if="state.isCheckedIn and state.locationName" class="fclk-fab-location">
|
||||
<i class="fa fa-map-marker"/>
|
||||
<span t-esc="state.locationName"/>
|
||||
</div>
|
||||
|
||||
<!-- Timer -->
|
||||
<div class="fclk-fab-timer" t-esc="state.timerDisplay"/>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="fclk-fab-stats">
|
||||
<div class="fclk-fab-stat">
|
||||
<span class="fclk-fab-stat-val"><t t-esc="state.todayHours"/>h</span>
|
||||
<span class="fclk-fab-stat-lbl">Today</span>
|
||||
</div>
|
||||
<div class="fclk-fab-stat-divider"/>
|
||||
<div class="fclk-fab-stat">
|
||||
<span class="fclk-fab-stat-val"><t t-esc="state.weekHours"/>h</span>
|
||||
<span class="fclk-fab-stat-lbl">Week</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clock Action Button -->
|
||||
<button t-attf-class="fclk-fab-action {{ state.isCheckedIn ? 'fclk-fab-action--out' : 'fclk-fab-action--in' }}"
|
||||
t-on-click="onClockAction"
|
||||
t-att-disabled="state.loading">
|
||||
<t t-if="state.loading">
|
||||
<i class="fa fa-circle-o-notch fa-spin"/> Working...
|
||||
</t>
|
||||
<t t-elif="state.isCheckedIn">
|
||||
<i class="fa fa-stop-circle-o"/> Clock Out
|
||||
</t>
|
||||
<t t-else="">
|
||||
<i class="fa fa-play-circle-o"/> Clock In
|
||||
</t>
|
||||
<t t-name="fusion_clock.ClockSystray">
|
||||
<t t-if="state.isDisplayed">
|
||||
<!-- Systray Dropdown -->
|
||||
<Dropdown position="'bottom-end'" state="dropdown"
|
||||
beforeOpen.bind="_fetchStatus"
|
||||
menuClass="'fclk-systray-dropdown p-0'">
|
||||
<button class="fclk-systray-btn">
|
||||
<span t-attf-class="fclk-systray-icon {{ state.isCheckedIn ? 'fclk-systray-icon--in' : 'fclk-systray-icon--out' }}">
|
||||
<i class="fa fa-clock-o"/>
|
||||
</span>
|
||||
</button>
|
||||
<t t-set-slot="content">
|
||||
<div class="fclk-systray-panel">
|
||||
<!-- Header -->
|
||||
<div class="fclk-systray-header">
|
||||
<i t-attf-class="fa fa-circle fclk-systray-header-dot {{ state.isCheckedIn ? 'text-success' : 'text-danger' }}"/>
|
||||
<span t-if="state.isCheckedIn" class="fclk-systray-header-text">Clocked In</span>
|
||||
<span t-else="" class="fclk-systray-header-text">Ready to Clock In</span>
|
||||
<a href="/my/clock" class="fclk-systray-link" target="_blank" title="Open Full Clock">
|
||||
<i class="fa fa-external-link"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div t-if="state.error" class="fclk-fab-error">
|
||||
<i class="fa fa-exclamation-triangle"/>
|
||||
<t t-esc="state.error"/>
|
||||
</div>
|
||||
<!-- Location -->
|
||||
<div t-if="state.isCheckedIn and state.locationName" class="fclk-systray-location">
|
||||
<i class="fa fa-map-marker"/> <t t-esc="state.locationName"/>
|
||||
</div>
|
||||
|
||||
<!-- Arrow pointing to button -->
|
||||
<div class="fclk-fab-panel-arrow"/>
|
||||
</div>
|
||||
<!-- Timer -->
|
||||
<div class="fclk-systray-timer" t-esc="state.timerDisplay"/>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<button t-attf-class="fclk-fab-btn {{ state.isCheckedIn ? 'fclk-fab-btn--active' : '' }} {{ state.expanded ? 'fclk-fab-btn--open' : '' }}"
|
||||
t-on-click="togglePanel">
|
||||
<span t-if="state.isCheckedIn" class="fclk-fab-ripple-ring fclk-fab-ripple-ring--1"/>
|
||||
<span t-if="state.isCheckedIn" class="fclk-fab-ripple-ring fclk-fab-ripple-ring--2"/>
|
||||
<span t-if="state.isCheckedIn" class="fclk-fab-ripple-ring fclk-fab-ripple-ring--3"/>
|
||||
<span class="fclk-fab-icon">
|
||||
<i t-if="!state.expanded" class="fa fa-clock-o"/>
|
||||
<i t-else="" class="fa fa-times"/>
|
||||
</span>
|
||||
<span t-if="state.isCheckedIn and !state.expanded" class="fclk-fab-badge">
|
||||
<t t-esc="state.timerDisplay"/>
|
||||
</span>
|
||||
</button>
|
||||
<!-- Stats -->
|
||||
<div class="fclk-systray-stats">
|
||||
<div class="fclk-systray-stat">
|
||||
<span class="fclk-systray-stat-val"><t t-esc="state.todayHours"/>h</span>
|
||||
<span class="fclk-systray-stat-lbl">Today</span>
|
||||
</div>
|
||||
<div class="fclk-systray-stat-sep"/>
|
||||
<div class="fclk-systray-stat">
|
||||
<span class="fclk-systray-stat-val"><t t-esc="state.weekHours"/>h</span>
|
||||
<span class="fclk-systray-stat-lbl">This Week</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Missed Clock-Out Reason Dialog -->
|
||||
<!-- Clock Action -->
|
||||
<button t-attf-class="fclk-systray-action {{ state.isCheckedIn ? 'fclk-systray-action--out' : 'fclk-systray-action--in' }}"
|
||||
t-on-click="onClockAction"
|
||||
t-att-disabled="state.loading">
|
||||
<t t-if="state.loading">
|
||||
<i class="fa fa-circle-o-notch fa-spin"/> Working...
|
||||
</t>
|
||||
<t t-elif="state.isCheckedIn">
|
||||
<i class="fa fa-stop-circle-o"/> Clock Out
|
||||
</t>
|
||||
<t t-else="">
|
||||
<i class="fa fa-play-circle-o"/> Clock In
|
||||
</t>
|
||||
</button>
|
||||
|
||||
<!-- Error -->
|
||||
<div t-if="state.error" class="fclk-systray-error">
|
||||
<i class="fa fa-exclamation-triangle"/> <t t-esc="state.error"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</Dropdown>
|
||||
|
||||
<!-- Missed Clock-Out Reason Dialog (outside dropdown) -->
|
||||
<div t-if="state.showReasonDialog" class="fclk-fab-dialog-overlay">
|
||||
<div class="fclk-fab-dialog-backdrop" t-on-click="cancelReason"/>
|
||||
<div class="fclk-fab-dialog">
|
||||
<div class="fclk-fab-dialog-header fclk-fab-dialog-header--warning">
|
||||
<div class="fclk-fab-dialog-icon">
|
||||
<i class="fa fa-exclamation-triangle"/>
|
||||
</div>
|
||||
<div class="fclk-fab-dialog-icon"><i class="fa fa-exclamation-triangle"/></div>
|
||||
<h4 class="fclk-fab-dialog-title">Missed Clock-Out</h4>
|
||||
<p class="fclk-fab-dialog-subtitle">You didn't clock out on your last shift. Please provide details before continuing.</p>
|
||||
</div>
|
||||
<div class="fclk-fab-dialog-body">
|
||||
<div class="fclk-fab-dialog-field">
|
||||
<label class="fclk-fab-dialog-label">
|
||||
<i class="fa fa-comment-o"/> Reason <span class="fclk-fab-dialog-required">*</span>
|
||||
</label>
|
||||
<textarea class="fclk-fab-dialog-input" rows="3"
|
||||
placeholder="Please explain why you didn't clock out..."
|
||||
t-on-input="onReasonTextInput"
|
||||
t-att-value="state.reasonText"/>
|
||||
<label class="fclk-fab-dialog-label"><i class="fa fa-comment-o"/> Reason <span class="fclk-fab-dialog-required">*</span></label>
|
||||
<textarea class="fclk-fab-dialog-input" rows="3" placeholder="Please explain why you didn't clock out..." t-on-input="onReasonTextInput" t-att-value="state.reasonText"/>
|
||||
</div>
|
||||
<div class="fclk-fab-dialog-field">
|
||||
<label class="fclk-fab-dialog-label">
|
||||
<i class="fa fa-clock-o"/> Departure Time
|
||||
</label>
|
||||
<input type="datetime-local" class="fclk-fab-dialog-input"
|
||||
t-on-input="onReasonTimeInput"
|
||||
t-att-value="state.reasonTime"/>
|
||||
<label class="fclk-fab-dialog-label"><i class="fa fa-clock-o"/> Departure Time</label>
|
||||
<input type="datetime-local" class="fclk-fab-dialog-input" t-on-input="onReasonTimeInput" t-att-value="state.reasonTime"/>
|
||||
<span class="fclk-fab-dialog-hint">When did you actually leave? (optional)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fclk-fab-dialog-footer">
|
||||
<button class="fclk-fab-dialog-btn fclk-fab-dialog-btn--cancel" t-on-click="cancelReason">Cancel</button>
|
||||
<button class="fclk-fab-dialog-btn fclk-fab-dialog-btn--submit" t-on-click="submitReason"
|
||||
t-att-disabled="state.reasonSubmitting">
|
||||
<button class="fclk-fab-dialog-btn fclk-fab-dialog-btn--submit" t-on-click="submitReason" t-att-disabled="state.reasonSubmitting">
|
||||
<t t-if="state.reasonSubmitting"><i class="fa fa-circle-o-notch fa-spin"/> Submitting...</t>
|
||||
<t t-else=""><i class="fa fa-check"/> Submit Reason</t>
|
||||
</button>
|
||||
@@ -122,14 +98,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clock-Out Confirmation Dialog -->
|
||||
<!-- Clock-Out Confirmation Dialog (outside dropdown) -->
|
||||
<div t-if="state.showClockoutConfirm" class="fclk-fab-dialog-overlay">
|
||||
<div class="fclk-fab-dialog-backdrop" t-on-click="cancelClockOut"/>
|
||||
<div class="fclk-fab-dialog fclk-fab-dialog--compact">
|
||||
<div class="fclk-fab-dialog-header fclk-fab-dialog-header--danger">
|
||||
<div class="fclk-fab-dialog-icon">
|
||||
<i class="fa fa-stop-circle"/>
|
||||
</div>
|
||||
<div class="fclk-fab-dialog-icon"><i class="fa fa-stop-circle"/></div>
|
||||
<h4 class="fclk-fab-dialog-title">Clock Out?</h4>
|
||||
<p class="fclk-fab-dialog-subtitle">Are you sure you want to end your current shift?</p>
|
||||
</div>
|
||||
@@ -153,7 +127,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
|
||||
Reference in New Issue
Block a user