49 lines
3.9 KiB
JavaScript
49 lines
3.9 KiB
JavaScript
import { useQuasar } from 'https://cdn.jsdelivr.net/npm/quasar@2.16.0/dist/quasar.umd.prod.js';
|
|
import { usePlannerState } from '../../services/planner-state-service.js';
|
|
|
|
export default {
|
|
name: 'PlannerSettingsDrawer',
|
|
props: { modelValue: Boolean },
|
|
emits: ['update:modelValue'],
|
|
setup(props, { emit }) {
|
|
const { state, methods } = usePlannerState();
|
|
const $q = useQuasar();
|
|
|
|
const simulateWssLock = () => methods.simulateWssLock($q);
|
|
|
|
return {
|
|
state,
|
|
resetToToday: () => {
|
|
methods.resetToToday();
|
|
emit('update:modelValue', false);
|
|
},
|
|
simulateWssLock,
|
|
};
|
|
},
|
|
template: `
|
|
<q-drawer :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" side="left" bordered :width="300" class="bg-white">
|
|
<q-scroll-area class="fit">
|
|
<div class="q-pa-lg">
|
|
<div class="text-h6 text-weight-bold q-mb-xs text-indigo-10">Workspace</div>
|
|
<div class="text-caption text-grey-6 q-mb-xl">Manage grid and picker preferences.</div>
|
|
<div class="column q-gutter-y-lg">
|
|
<div><div class="text-overline text-grey-6 q-mb-sm">Timeline Range</div><q-select v-model="state.viewScope" :options="[4, 8, 12]" outlined dense rounded emit-value map-options suffix=" Weeks" bg-color="white"></q-select></div>
|
|
<div><div class="text-overline text-grey-6 q-mb-sm">Date Picker Week Start</div><q-select v-model="state.pickerStartDay" :options="[{label: 'Sunday', value: 0}, {label: 'Monday', value: 1}]" outlined dense rounded emit-value map-options bg-color="white"></q-select></div>
|
|
<q-separator />
|
|
<div><div class="text-overline text-grey-6 q-mb-sm">Dev Tools</div><q-btn outline rounded color="purple-7" label="Simulate WSS Lock" class="full-width" icon="lock" @click="simulateWssLock"><q-tooltip>Simulate receiving a "Lock Cell" message from server</q-tooltip></q-btn></div>
|
|
<q-separator />
|
|
<div>
|
|
<div class="text-overline text-grey-6 q-mb-sm">Grid Visibility</div>
|
|
<q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Reading Crosshair</q-item-label><q-item-label caption>Dynamic highlight on hover</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.crosshairActive" color="indigo-8"></q-toggle></q-item-section></q-item>
|
|
<q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Show EOD Targets</q-item-label><q-item-label caption>Top row KPI</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.showEodTargets" color="pink-6"></q-toggle></q-item-section></q-item>
|
|
<q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Show Availability</q-item-label><q-item-label caption>Traffic light indicators</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.showAvailability" color="orange-6"></q-toggle></q-item-section></q-item>
|
|
</div>
|
|
<q-separator />
|
|
<q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Compact Grid</q-item-label><q-item-label caption>High density view</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.isCompact" color="indigo-8"></q-toggle></q-item-section></q-item>
|
|
<q-item tag="label" v-ripple class="q-px-none"><q-item-section><q-item-label class="text-weight-medium">Working Weekends</q-item-label><q-item-label caption>Enable Sat/Sun shifts</q-item-label></q-item-section><q-item-section side><q-toggle v-model="state.weekendsAreWorkingDays" color="indigo-8"></q-toggle></q-item-section></q-item>
|
|
<q-btn outline rounded color="indigo-8" label="Reset to Today" icon="today" class="full-width q-mt-md" @click="resetToToday"></q-btn>
|
|
</div>
|
|
</div>
|
|
</q-scroll-area>
|
|
</q-drawer>`
|
|
}; |