1) 每日行程與pinia綁定

2) nav導向home
Isongzhe · Jun 18, 2024 · 8f8df08 · 8f8df08
1 parent 7e45167
commit 8f8df08
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 33 deletions.
diff --git a/src/api/mockGoogleMapList.ts b/src/api/mockGoogleMapList.ts
@@ -11,11 +11,7 @@ export function mockGoogleMapList() {
       "澀谷中心街",
       "Diver City東京廣場",
       "Torinoirukafe Yanaka Honten",
-      "Sofmap",
-      "Google日本六本木辦公室",
-      "OpenAI Japan合同会社",
       "仲見世商店街",
-      "Unatoto Unagi",
       "駿河屋 秋葉原車站前店",
       "澀谷PARCO",
       "鋼彈Base 東京",

diff --git a/src/components/Nav.vue b/src/components/Nav.vue
@@ -1,7 +1,9 @@
 <template>
     <nav>
         <div class="marker">
-            <h2>Traveler 旅行者</h2>
+            <router-link to="/" class="router-link-block">
+                <h2>Traveler 旅行者</h2>
+            </router-link>
             <p>簡單且快速的安排行程吧 !</p>
         </div>
     </nav>
@@ -18,7 +20,8 @@ export default defineComponent({
 </script>
 
 <script setup lang="ts">
-import { House } from '@element-plus/icons-vue';
+import { useRouter } from 'vue-router';
+const router = useRouter(); //使用 router
 </script>
 
 <style scoped>
@@ -33,6 +36,15 @@ nav {
     font-weight: 700;
 }
 
+/* 針對 <router-link> 元素設置 display: block */
+.router-link-block {
+    display: block;
+    text-decoration: none;
+    /* 移除默認下劃線 */
+    color: inherit;
+    /* 繼承父元素的文字顏色 */
+}
+
 .marker {
     display: flex;
     justify-content: flex-start;
@@ -57,12 +69,4 @@ nav {
     letter-spacing: normal;
 
 }
-
-.director a {
-    font-size: 24px;
-    text-decoration: none;
-    /* 移除下劃線 */
-    color: inherit;
-    /* 讓文字顏色繼承父元素的顏色 */
-}
 </style>
diff --git a/src/hooks/usePlaceInfo.ts b/src/hooks/usePlaceInfo.ts
@@ -24,7 +24,7 @@ export default function () {
   };
 
   // 真實API端口
-  const fetchPlacesAPI = async (placesName: string[]) => {
+  const fetchPlacesAPI = async (placesName: string[]): Promise<void> => {
     const rawData: object = {
       places_name: placesName,
     };

diff --git a/src/hooks/usePlaceNameList.ts b/src/hooks/usePlaceNameList.ts
@@ -1,8 +1,7 @@
 // hooks/usePlaceNameList.ts
 import { ref } from "vue";
 import { mockGoogleMapList } from "@/api/mockGoogleMapList";
-import type { GoogleMapListNameResponse } from "@/types";
-// import axios from "axios";
+import axios from "axios";
 
 export default function () {
   // 定義places_name變數
@@ -11,12 +10,30 @@ export default function () {
   // 假造API端口
   const fetchPlacesName = async () => {
     try {
-      const res = await new Promise<string[]>((resolve) => {
+      const response = await new Promise<string[]>((resolve) => {
         setTimeout(() => {
           resolve(mockGoogleMapList().places_name);
         }, 3000);
       });
-      places_name.value = res;
+      places_name.value = response;
+      console.log(places_name);
+    } catch (error) {
+      console.error("error", error);
+    }
+  };
+  // 真實API端口
+  const fetchPlacesNameAPI = async (url: string): Promise<void> => {
+    try {
+      const response = await axios.get(
+        "http://127.0.0.1:8000/api/crawl_google_map",
+        {
+          params: {
+            url: url,
+          },
+        }
+      );
+      // 假設API返回的數據結構與mockGoogleMapList一致
+      places_name.value = response.data.places_name;
       console.log(places_name);
     } catch (error) {
       console.error("error", error);
@@ -27,5 +44,6 @@ export default function () {
   return {
     places_name,
     fetchPlacesName,
+    fetchPlacesNameAPI,
   };
 }
diff --git a/src/views/FormPage.vue b/src/views/FormPage.vue
@@ -171,10 +171,10 @@ const formStore = useUserInfoStore(); // 初始化 useUserInfoStore
 // const googleMapStore = useGoogleMapStore(); // 初始化 useGoogleMapStore
 
 import usePlaceName from "@/hooks/usePlaceNameList"
-const { places_name, fetchPlacesName } = usePlaceName();
+const { places_name, fetchPlacesName, fetchPlacesNameAPI } = usePlaceName();
 
 import usePlaceList from "@/hooks/usePlaceInfo"
-const { places, fetchPlaces } = usePlaceList(); // 確保正確導入和使用
+const { places, fetchPlaces, fetchPlacesAPI } = usePlaceList(); // 確保正確導入和使用
 
 
 // 初始化頁面響應式數據，包括日期區間、時間區間、抵達機場、回程機場(為了表單)
@@ -247,20 +247,28 @@ const validateAndFetchPlaces = async () => {
         // 顯示發出請求的連結
         console.log('發出請求: ' + localFormData.googleMapURL);
         try {
-            await fetchPlacesName();
+            await fetchPlacesName(); //假造的API接口:內部更新places_name[]
+
+            //真實的API接口:給定Google地圖清單連結，內部更新places_name[]
+            // await fetchPlacesNameAPI(localFormData.googleMapURL); 
+
             // 顯示模擬數據
             console.log('模擬API返回的數據(place_name):', places_name.value);
             // 將模擬數據賦值給相應的變量
             formStore.updatePlaceNameList(places_name.value);
             console.log('更新後的Pinia數據(places_name):', formStore.userInfo.placesInfo.places_name);
 
-            await fetchPlaces();
+            await fetchPlaces(); //假造的API接口:內部更新places[]
+
+            //真實的API接口:給定places_name[]，內部更新places[]
+            // await fetchPlacesAPI(formStore.userInfo.placesInfo.places_name); 
+
             console.log('模擬API返回的數據(places):', places.value);
             formStore.updatePlaceList(places.value);
             console.log('更新後的Pinia數據(places):', formStore.userInfo.placesInfo.places);
 
             ElMessage({
-                message: 'Google地圖清單資訊已成功讀取',
+                message: 'Google地圖清單資訊已成功讀取並寫入',
                 type: 'success',
             })
         }

diff --git a/src/views/PlanView.vue b/src/views/PlanView.vue
@@ -82,6 +82,7 @@ import { useUserInfoStore } from '@/stores/useUserInfoStore'; // 引入使用者
 import { ElMessage, ElSelect } from 'element-plus';
 import { Delete } from '@element-plus/icons-vue';
 import type { Place } from "@/types";
+import { storeToRefs } from "pinia"
 
 // 設置時間選擇器的選項
 const timePickerOptions = {
@@ -90,36 +91,43 @@ const timePickerOptions = {
     end: '23:45',
 };
 const userInfoStore = useUserInfoStore();
-const { userInfo } = userInfoStore;
+const { userInfo, allDatePlacesList } = storeToRefs(userInfoStore);
+
+const allPlacesList = userInfo.value.placesInfo.places;
+const dateOptions = userInfo.value.formData.dateList;
 
-const allPlacesList = computed(() => userInfo.placesInfo.places);
-const dateOptions = computed(() => userInfo.formData.dateList);
-const allDatePlacesList = reactive(userInfoStore.allDatePlacesList);
 const selectedDate = ref<string>()
 const selectedList = ref<Place[]>([]);
 
 // 監視 selectedList 的變化，並將變化同步到 allDatePlacesList，以便於後續的操作
 watch(selectedList, (newList) => {
-    const datePlaces = allDatePlacesList.find(item => item.date === selectedDate.value);
+    const datePlaces = allDatePlacesList.value.find(item => item.date === selectedDate.value);
     if (datePlaces) {
         datePlaces.places = newList;
     }
 }, { deep: true });
 
 function onClone() {
-    console.log('clone')
-    console.log(`${selectedDate.value} selectedList`, selectedList.value)
-    console.log(`${selectedDate.value} allDatePlacesList`, allDatePlacesList)
+    console.log('clone');
 }
 
 function remove(list: Place[], index: number) {
+    console.log(`Remove ${list[index].name}`);
+    ElMessage({
+        message: `移除${list[index].name}`,
+        type: 'success',
+    });
     list.splice(index, 1)
 }
 
 watch(selectedDate, (newDate) => {
-    const datePlaces = allDatePlacesList.find(item => item.date === newDate);
+    const datePlaces = allDatePlacesList.value.find(item => item.date === newDate);
     selectedList.value = datePlaces ? datePlaces.places : [];
     console.log(`Selected date changed to ${newDate}`);
+    ElMessage({
+        message: `切換至${newDate} 行程列表`,
+        type: 'success',
+    });
 });
 
 import { Location, ForkSpoon, HomeFilled, CoffeeCup, Goods } from '@element-plus/icons-vue';
@@ -201,6 +209,18 @@ function getIconComponent(place: Place) {
     height: 20px;
 }
 
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.el-select--large {
+    margin-left: 30px;
+}
+
 .box-card {
     width: 100%;
 }