|
|
@@ -3,6 +3,16 @@
|
|
|
v-if="visibleItems.length > 0"
|
|
|
class="q-mx-md q-mb-md"
|
|
|
>
|
|
|
+ <div class="row items-center no-wrap q-mb-sm">
|
|
|
+ <span class="font16 fontbold gradient-diarista">
|
|
|
+ {{ $t('provider.dashboard.today_services.title') }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div class="attention-badge q-ml-sm">
|
|
|
+ {{ $t('provider.dashboard.today_services.attention_badge') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="scroll-wrapper">
|
|
|
<div
|
|
|
class="scroll-track"
|
|
|
@@ -47,6 +57,14 @@
|
|
|
{{ ' ' + $t('provider.dashboard.today_services.finished_suffix') }}
|
|
|
</template>
|
|
|
|
|
|
+ <template v-else-if="cardState(item) === 'not_started'">
|
|
|
+ {{ $t('provider.dashboard.today_services.not_started_label') }}
|
|
|
+
|
|
|
+ <span class="fontbold">
|
|
|
+ {{ ' ' + (getFirstName(item.client_name) || '—') }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
<template v-else>
|
|
|
{{ $t('provider.dashboard.today_services.start_label') }}
|
|
|
|
|
|
@@ -122,6 +140,21 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div
|
|
|
+ v-else-if="cardState(item) === 'not_started'"
|
|
|
+ class="col-12 text-center q-mb-xs"
|
|
|
+ >
|
|
|
+ <div class="column items-center">
|
|
|
+ <div class="clock-badge">
|
|
|
+ <q-icon
|
|
|
+ color="white"
|
|
|
+ name="mdi-clock-outline"
|
|
|
+ size="15px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div v-else class="">
|
|
|
<div
|
|
|
v-if="item.provider_reviewed"
|
|
|
@@ -168,25 +201,7 @@
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
- <template v-if="cardState(item) === 'in_progress'">
|
|
|
- <div class="row items-center no-wrap">
|
|
|
- <q-icon
|
|
|
- class="q-mr-xs flex-shrink-0 gradient-diarista"
|
|
|
- name="mdi-clock-outline"
|
|
|
- size="13px"
|
|
|
- />
|
|
|
-
|
|
|
- <span class="text-grey-6 text-right text-no-wrap font9 fontmedium">
|
|
|
- {{ $t('provider.dashboard.today_services.end_time_label') }}
|
|
|
-
|
|
|
- <span class="gradient-diarista">
|
|
|
- {{ calculateTimeUntilEnd(item.end_time) }}
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-else-if="cardState(item) === 'awaiting_code'">
|
|
|
+ <template v-if="cardState(item) === 'not_started'">
|
|
|
<div class="address-row">
|
|
|
<q-icon
|
|
|
class="flex-shrink-0"
|
|
|
@@ -194,10 +209,10 @@
|
|
|
name="mdi-map-marker-outline"
|
|
|
size="13px"
|
|
|
/>
|
|
|
-
|
|
|
+
|
|
|
<span class="text-grey-6 address-text text-right font9 fontmedium">
|
|
|
{{ [item.address?.address, item.address?.number, item.address?.district].filter(Boolean).join(', ') || '—' }}
|
|
|
-
|
|
|
+
|
|
|
</span>
|
|
|
<q-icon
|
|
|
class="flex-shrink-0 q-ml-sm"
|
|
|
@@ -209,7 +224,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
- <div class="row items-center no-wrap">
|
|
|
+ <div class="row items-center no-wrap justify-between">
|
|
|
<q-btn
|
|
|
class="flex-shrink-0"
|
|
|
color="primary"
|
|
|
@@ -218,6 +233,23 @@
|
|
|
:label="$t('provider.dashboard.today_services.help')"
|
|
|
@click.stop="openHelp"
|
|
|
/>
|
|
|
+
|
|
|
+ <span
|
|
|
+ v-if="cardState(item) === 'awaiting_code' || cardState(item) === 'in_progress'"
|
|
|
+ class="row items-center no-wrap text-grey-6 text-right text-no-wrap font9 fontmedium"
|
|
|
+ >
|
|
|
+ <q-icon
|
|
|
+ class="q-mr-xs flex-shrink-0 gradient-diarista"
|
|
|
+ name="mdi-clock-outline"
|
|
|
+ size="13px"
|
|
|
+ />
|
|
|
+
|
|
|
+ {{ $t('provider.dashboard.today_services.end_time_label') }}
|
|
|
+
|
|
|
+ <span class="gradient-diarista q-ml-xs">
|
|
|
+ {{ calculateTimeUntilEnd(item.end_time) }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</q-card-section>
|
|
|
</q-card>
|
|
|
@@ -362,6 +394,14 @@ const calculateTimeUntilEnd = (endTimeStr) => {
|
|
|
}
|
|
|
|
|
|
const cardState = (item) => {
|
|
|
+ const [sh, sm] = (item.start_time || '00:00').slice(0, 5).split(':').map(Number)
|
|
|
+
|
|
|
+ const startTime = new Date()
|
|
|
+
|
|
|
+ startTime.setHours(sh, sm, 0, 0)
|
|
|
+
|
|
|
+ if (now.value < startTime.getTime()) return 'not_started'
|
|
|
+
|
|
|
const verified = item.code_verified || !!localVerified[item.id]
|
|
|
|
|
|
if (!verified) return 'awaiting_code'
|
|
|
@@ -394,6 +434,7 @@ const copyAddress = (address) => {
|
|
|
const progressByState = (item) => {
|
|
|
const state = cardState(item)
|
|
|
|
|
|
+ if (state === 'not_started') return 0
|
|
|
if (state === 'awaiting_code') return 50
|
|
|
if (state === 'finished') return 100
|
|
|
|
|
|
@@ -421,6 +462,26 @@ const openHelp = () => {
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.attention-badge {
|
|
|
+ background: #22c55e;
|
|
|
+ color: white;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 700;
|
|
|
+ border-radius: 999px;
|
|
|
+ padding: 1px 8px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.clock-badge {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(135deg, #8B5CF6, #EC4899);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
.scroll-wrapper { overflow: hidden; }
|
|
|
.scroll-track {
|
|
|
display: flex;
|