|
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