Update: 2026-07-13 22:23:21

transit_dashboard/src/components/DayMaskPicker.vue

@@ -0,0 +1,46 @@
+<script setup>
+// قناع الأيام: bit0=أحد … bit6=سبت (62 = الأحد–الخميس)
+const props = defineProps({ modelValue: { type: Number, default: 62 } })
+const emit = defineEmits(['update:modelValue'])
+
+const days = [
+  { bit: 0, label: 'أحد' },
+  { bit: 1, label: 'اثنين' },
+  { bit: 2, label: 'ثلاثاء' },
+  { bit: 3, label: 'أربعاء' },
+  { bit: 4, label: 'خميس' },
+  { bit: 5, label: 'جمعة' },
+  { bit: 6, label: 'سبت' },
+]
+
+function isOn(bit) {
+  return ((props.modelValue >> bit) & 1) === 1
+}
+function toggle(bit) {
+  const next = isOn(bit) ? props.modelValue & ~(1 << bit) : props.modelValue | (1 << bit)
+  emit('update:modelValue', next)
+}
+</script>
+
+<template>
+  <div class="day-mask">
+    <button
+      v-for="d in days" :key="d.bit" type="button"
+      class="day-chip" :class="{ on: isOn(d.bit) }"
+      @click="toggle(d.bit)"
+    >
+      {{ d.label }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.day-mask { display: flex; gap: 6px; flex-wrap: wrap; }
+.day-chip {
+  font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px;
+  border-radius: 100px; border: 1px solid var(--line-strong); background: var(--surface);
+  color: var(--ink-soft); cursor: pointer; transition: all .15s ease;
+}
+.day-chip.on { background: var(--brand); border-color: var(--brand); color: white; }
+.day-chip:hover:not(.on) { background: var(--surface-2); }
+</style>