|
2 | 2 | <section class="cab-panel"> |
3 | 3 | <Default> |
4 | 4 | <template #title> |
5 | | - <template v-if="appStore.tab.assistant === 1">{{ $t('cab.assistant.procedure') }}</template> |
6 | | - <template v-if="appStore.tab.assistant === 2"> |
7 | | - {{ $t('cab.assistant.recommendations') }} |
8 | | - </template> |
| 5 | + {{ $t('cab.assistant.recommendations') }} |
9 | 6 | </template> |
10 | | - <Procedure |
11 | | - v-if="appStore.tab.assistant === 1 && procedure && appStore.card('ATM')" |
12 | | - :procedure /> |
13 | 7 | <Recommendations |
14 | | - v-if="appStore.tab.assistant === 2 && appStore.card('ATM')" |
| 8 | + v-if="appStore.tab.assistant === 1 && appStore.card('ATM')" |
15 | 9 | v-model:recommendations="recommendations" |
16 | 10 | :buttons="[ |
17 | 11 | $t('recommendations.button1'), |
|
34 | 28 | </Default> |
35 | 29 | </section> |
36 | 30 | </template> |
| 31 | + |
37 | 32 | <script setup lang="ts"> |
38 | 33 | import { ref, watch } from 'vue' |
39 | | -
|
40 | 34 | import { update } from '@/api/cards' |
41 | | -import { getProcedure } from '@/api/services' |
42 | | -import Default from '@/components/organisms/CAB/Assistant.vue' |
43 | | -import Procedure from '@/components/organisms/CAB/Assistant/Procedure.vue' |
44 | 35 | import Recommendations from '@/components/organisms/CAB/Assistant/Recommendations.vue' |
45 | 36 | import { useAppStore } from '@/stores/app' |
46 | 37 | import { useMapStore } from '@/stores/components/map' |
47 | 38 | import { useServicesStore } from '@/stores/services' |
48 | 39 | import type { Recommendation } from '@/types/services' |
49 | | -
|
50 | 40 | import { applyRecommendation } from '../api' |
51 | 41 |
|
52 | 42 | const servicesStore = useServicesStore() |
53 | 43 | const mapStore = useMapStore() |
54 | 44 | const appStore = useAppStore() |
55 | 45 |
|
56 | | -const procedure = ref() |
57 | 46 | const recommendations = ref<Recommendation<'ATM'>[]>([]) |
58 | 47 |
|
59 | | -watch( |
60 | | - () => appStore._card, |
61 | | - async () => { |
62 | | - if (appStore.card('ATM')?.data.criticality !== 'HIGH') return |
63 | | - appStore.tab.assistant = 1 |
64 | | - procedure.value = ( |
65 | | - await getProcedure(appStore.card('ATM')!.data.metadata.event_type) |
66 | | - ).data.procedure |
67 | | - procedure.value[0].tasks[0].state = 'doing' |
68 | | - } |
69 | | -) |
70 | | -
|
71 | | -watch( |
72 | | - procedure, |
73 | | - (value) => { |
74 | | - if (value.at(-1)?.tasks.at(-1)?.state === 'done') |
75 | | - update({ |
76 | | - title: appStore.card('ATM')?.titleTranslated, |
77 | | - description: appStore.card('ATM')?.summaryTranslated, |
78 | | - data: appStore.card('ATM')?.data.metadata, |
79 | | - use_case: 'ATM', |
80 | | - criticality: 'ND' |
81 | | - }) |
82 | | - }, |
83 | | - { deep: true } |
84 | | -) |
85 | | -
|
| 48 | +// Update the assistant tab watcher to handle recommendations with index 1. |
86 | 49 | watch( |
87 | 50 | () => appStore.tab.assistant, |
88 | 51 | async (index) => { |
89 | | - switch (index) { |
90 | | - case 1: |
91 | | - if (!appStore.card('ATM')) break |
92 | | - procedure.value = ( |
93 | | - await getProcedure(appStore.card('ATM')!.data.metadata.event_type) |
94 | | - ).data.procedure |
95 | | - procedure.value[0].tasks[0].state = 'doing' |
96 | | - break |
97 | | - case 2: |
98 | | - if (!appStore.card('ATM')) break |
99 | | - await servicesStore.getRecommendation(appStore.card('ATM')!) |
100 | | - recommendations.value = servicesStore.recommendations('ATM') |
101 | | - for (const recommendation of recommendations.value) |
102 | | - for (const action of recommendation.actions) { |
103 | | - for (const { wplat, wplon, wpid } of action.waypoints) |
104 | | - mapStore.addWaypoint({ |
105 | | - lat: wplat, |
106 | | - lng: wplon, |
107 | | - id: wpid, |
108 | | - category: 'RECOMMENDATION', |
109 | | - options: { color: 'var(--color-primary)' } |
110 | | - }) |
| 52 | + if (index === 1) { |
| 53 | + if (!appStore.card('ATM')) return |
| 54 | + await servicesStore.getRecommendation(appStore.card('ATM')!) |
| 55 | + recommendations.value = servicesStore.recommendations('ATM') |
| 56 | + for (const recommendation of recommendations.value) |
| 57 | + for (const action of recommendation.actions) { |
| 58 | + for (const { wplat, wplon, wpid } of action.waypoints) |
111 | 59 | mapStore.addWaypoint({ |
112 | | - lat: action.airport_destination.latitude, |
113 | | - lng: action.airport_destination.longitude, |
114 | | - id: action.airport_destination.apname, |
| 60 | + lat: wplat, |
| 61 | + lng: wplon, |
| 62 | + id: wpid, |
115 | 63 | category: 'RECOMMENDATION', |
116 | | - permanentTooltip: true, |
117 | 64 | options: { color: 'var(--color-primary)' } |
118 | 65 | }) |
119 | | - mapStore.addPolyline({ |
120 | | - id: recommendation.title, |
121 | | - options: { color: 'var(--color-success)' }, |
122 | | - waypoints: [ |
123 | | - ...action.waypoints.map((waypoint: any) => ({ |
124 | | - lat: waypoint.wplat, |
125 | | - lng: waypoint.wplon, |
126 | | - id: waypoint.wpid |
127 | | - })), |
128 | | - { |
129 | | - lat: action.airport_destination.latitude, |
130 | | - lng: action.airport_destination.longitude, |
131 | | - id: action.airport_destination.apname |
132 | | - } |
133 | | - ] |
134 | | - }) |
135 | | - } |
| 66 | + mapStore.addWaypoint({ |
| 67 | + lat: action.airport_destination.latitude, |
| 68 | + lng: action.airport_destination.longitude, |
| 69 | + id: action.airport_destination.apname, |
| 70 | + category: 'RECOMMENDATION', |
| 71 | + permanentTooltip: true, |
| 72 | + options: { color: 'var(--color-primary)' } |
| 73 | + }) |
| 74 | + mapStore.addPolyline({ |
| 75 | + id: recommendation.title, |
| 76 | + options: { color: 'var(--color-success)' }, |
| 77 | + waypoints: [ |
| 78 | + ...action.waypoints.map((waypoint: any) => ({ |
| 79 | + lat: waypoint.wplat, |
| 80 | + lng: waypoint.wplon, |
| 81 | + id: waypoint.wpid |
| 82 | + })), |
| 83 | + { |
| 84 | + lat: action.airport_destination.latitude, |
| 85 | + lng: action.airport_destination.longitude, |
| 86 | + id: action.airport_destination.apname |
| 87 | + } |
| 88 | + ] |
| 89 | + }) |
| 90 | + } |
136 | 91 | } |
137 | 92 | } |
138 | 93 | ) |
@@ -180,9 +135,11 @@ function onSelection(recommendation: Recommendation<'ATM'>) { |
180 | 135 | applyRecommendation(recommendation.actions[0]) |
181 | 136 | mapStore.resetPolylines() |
182 | 137 | mapStore.resetWaypoints() |
| 138 | + // Optionally, change the tab value to close the assistant. |
183 | 139 | appStore.tab.assistant = 0 |
184 | 140 | } |
185 | 141 | </script> |
| 142 | + |
186 | 143 | <style lang="scss" scoped> |
187 | 144 | .cab-assistant main { |
188 | 145 | scroll-snap-type: y mandatory; |
|
0 commit comments