From a2bf67eb31487d8c8f20d63c87679abfe525aa70 Mon Sep 17 00:00:00 2001 From: Elaine Date: Sun, 24 Nov 2024 14:32:38 +0800 Subject: [PATCH 1/4] event detail page draft --- src/routeTree.gen.ts | 18 ++++++--- src/routes/events/$eventId.tsx | 69 ++++++++++++++++++++++++++++++++-- 2 files changed, 79 insertions(+), 8 deletions(-) diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index e4b276f..9b92a22 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -1,12 +1,12 @@ -/* prettier-ignore-start */ - /* eslint-disable */ // @ts-nocheck // noinspection JSUnusedGlobalSymbols -// This file is auto-generated by TanStack Router +// This file was automatically generated by TanStack Router. +// You should NOT make any changes in this file as it will be overwritten. +// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. // Import Routes @@ -25,51 +25,61 @@ import { Route as EventsEventIdImport } from './routes/events/$eventId' // Create/Update Routes const LoginRoute = LoginImport.update({ + id: '/login', path: '/login', getParentRoute: () => rootRoute, } as any) const IndexRoute = IndexImport.update({ + id: '/', path: '/', getParentRoute: () => rootRoute, } as any) const SalesIndexRoute = SalesIndexImport.update({ + id: '/sales/', path: '/sales/', getParentRoute: () => rootRoute, } as any) const MapIndexRoute = MapIndexImport.update({ + id: '/map/', path: '/map/', getParentRoute: () => rootRoute, } as any) const EventsIndexRoute = EventsIndexImport.update({ + id: '/events/', path: '/events/', getParentRoute: () => rootRoute, } as any) const DinnerIndexRoute = DinnerIndexImport.update({ + id: '/dinner/', path: '/dinner/', getParentRoute: () => rootRoute, } as any) const CalendarIndexRoute = CalendarIndexImport.update({ + id: '/calendar/', path: '/calendar/', getParentRoute: () => rootRoute, } as any) const HomeInfoCardRoute = HomeInfoCardImport.update({ + id: '/home/infoCard', path: '/home/infoCard', getParentRoute: () => rootRoute, } as any) const EventsCreateRoute = EventsCreateImport.update({ + id: '/events/create', path: '/events/create', getParentRoute: () => rootRoute, } as any) const EventsEventIdRoute = EventsEventIdImport.update({ + id: '/events/$eventId', path: '/events/$eventId', getParentRoute: () => rootRoute, } as any) @@ -263,8 +273,6 @@ export const routeTree = rootRoute ._addFileChildren(rootRouteChildren) ._addFileTypes() -/* prettier-ignore-end */ - /* ROUTE_MANIFEST_START { "routes": { diff --git a/src/routes/events/$eventId.tsx b/src/routes/events/$eventId.tsx index 8a11757..893d25f 100644 --- a/src/routes/events/$eventId.tsx +++ b/src/routes/events/$eventId.tsx @@ -18,13 +18,76 @@ export const Route = createFileRoute('/events/$eventId')({ component: EventDetails }) +const styles = { + container:{ + flex: 1, + backgroundColor: '#FFFFFF' + }, + card:{ + borderRadius: "15px", + backgroundColor:'#7395AE', + margin: "0.5rem 1rem", + padding: "0.5rem" + } +} + function EventDetails() { const { event } = Route.useLoaderData() return (
-
Event ID: {event.id}
-
Event Name: {event.name}
-
Event Description: {event.description}
+
picture放這裡，要照照片大小還是給個固定高度?
+
+ +
+
+

{event.name}

+

收藏

+
+

時間還有點搞不定，他似乎會自動換算成其他時區

+

{event.start_time}~{event.end_time}

+

活動價格

+ +
+ + +
+

關於活動

+ +
+ 👤 +
+

辦理單位

+

Lorem, ipsum dolor.

+
+
+ +
+ ⭐ +
+

學生學習護照

+

實數類型 {event.fee} 小時

+
+
+ +
+ ✔️ +
+

條件限制

+
    +
  1. 開放期限{event.start_time}
    2. +
  2. 人數限制： {event.fee}
    3. +
  3. {event.user_id}
    4. +
+
+
+ +

+ +

活動說明

+

{event.description}

+
+ +
) } From a7702c550bc9e2ea067b77252bf8d66b7a03e44c Mon Sep 17 00:00:00 2001 From: Elaine Date: Mon, 25 Nov 2024 10:12:09 +0800 Subject: [PATCH 2/4] eventPage_picture and carousel --- src/routes/events/$eventId.tsx | 97 +++++++++++++++++++++++++++++----- 1 file changed, 84 insertions(+), 13 deletions(-) diff --git a/src/routes/events/$eventId.tsx b/src/routes/events/$eventId.tsx index 893d25f..b9451ce 100644 --- a/src/routes/events/$eventId.tsx +++ b/src/routes/events/$eventId.tsx @@ -19,42 +19,107 @@ export const Route = createFileRoute('/events/$eventId')({ }) const styles = { + body:{ + backgroundColor:'#3E3E3E' + }, container:{ flex: 1, backgroundColor: '#FFFFFF' }, card:{ borderRadius: "15px", - backgroundColor:'#7395AE', + backgroundColor:'#FFFFFF', margin: "0.5rem 1rem", padding: "0.5rem" + }, + icon:{ + margin:"0.5rem" } } function EventDetails() { const { event } = Route.useLoaderData() return ( -
-
picture放這裡，要照照片大小還是給個固定高度?
-
+
+ {/* 圖片 */} +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ {/* 換頁點點-要根據使用者提供的張數更改個數 */} +
+ 1 + 2 + 3 + 4 +
+
+ +
+ {/* 活動資訊 */}
-
+ {/* 活動名稱 */} +

{event.name}

-

收藏

-

時間還有點搞不定，他似乎會自動換算成其他時區

-

{event.start_time}~{event.end_time}

-

活動價格

+ {/* 收藏 */} +
+ +
+ {/* 時間 */} +
+ +

{event.start_time}~{event.end_time}

+
+ {/* 活動地點 */} +
+ +
+ {/* 活動價格 */} +
+ +

活動價格

+
+
- + {/* 關於活動 */}

關於活動

- 👤 + +

辦理單位

Lorem, ipsum dolor.

@@ -62,7 +127,10 @@ function EventDetails() {
- ⭐ + +

學生學習護照

實數類型 {event.fee} 小時

@@ -70,7 +138,10 @@ function EventDetails() {
- ✔️ + +

條件限制

    From cda97ba8634a37e825cd251d0f13331911e06256 Mon Sep 17 00:00:00 2001 From: Elaine Date: Wed, 27 Nov 2024 20:13:37 +0800 Subject: [PATCH 3/4] =?UTF-8?q?event=20page=20picture=20&=20=E5=BC=84?= =?UTF-8?q?=E5=A5=BD=E7=9C=8B=E4=B8=80=E9=BB=9E=E9=BB=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/events/$eventId.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/events/$eventId.tsx b/src/routes/events/$eventId.tsx index b9451ce..47ecdb0 100644 --- a/src/routes/events/$eventId.tsx +++ b/src/routes/events/$eventId.tsx @@ -161,4 +161,4 @@ function EventDetails() {
) -} +} \ No newline at end of file From f4f914ded62a43e72a243ab3e0c2685d20cb0325 Mon Sep 17 00:00:00 2001 From: Elaine Date: Sat, 7 Dec 2024 20:23:15 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E6=B4=BB=E5=8B=95=E5=A0=B1=E5=90=8D?= =?UTF-8?q?=E6=8C=89=E9=88=95=20/=20header=E9=81=B8=E5=96=AE=E7=84=A1?= =?UTF-8?q?=E6=B3=95=E6=AD=A3=E5=B8=B8=E9=A1=AF=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/events/$eventId.tsx | 323 ++++++++++++++++++++++----------- 1 file changed, 217 insertions(+), 106 deletions(-) diff --git a/src/routes/events/$eventId.tsx b/src/routes/events/$eventId.tsx index 47ecdb0..70b442c 100644 --- a/src/routes/events/$eventId.tsx +++ b/src/routes/events/$eventId.tsx @@ -1,4 +1,6 @@ import { createFileRoute } from '@tanstack/react-router'; +import { useState } from 'react'; +import { Header } from '../../components'; import { supabase } from '../../utils/supabase'; export const Route = createFileRoute('/events/$eventId')({ @@ -29,136 +31,245 @@ const styles = { card:{ borderRadius: "15px", backgroundColor:'#FFFFFF', - margin: "0.5rem 1rem", - padding: "0.5rem" + margin: "1rem 1.5rem", + padding: "1rem" }, icon:{ margin:"0.5rem" - } + }, } function EventDetails() { const { event } = Route.useLoaderData() + const [join, setJoin] = useState(false) return ( -
- {/* 圖片 */} -
-
-
- -
-
- -
-
- + //
+
+
+
+ {/* 不確定why不設置position就會蓋住header */} + + {/* 圖片 */} + {/* 之後改用map */} +
+
+
+ +
+
+ +
+
+ +
+
+ +
-
- + {/* 換頁點點-要根據使用者提供的張數更改個數 */} +
+ 1 + 2 + 3 + 4
- {/* 換頁點點-要根據使用者提供的張數更改個數 */} -
- 1 - 2 - 3 - 4 -
-
+
-
- {/* 活動資訊 */} -
- {/* 活動名稱 */} -
-

{event.name}

-
- {/* 收藏 */} -
-
+
) -} \ No newline at end of file +} + +// In progress: + +// supabase 時區顯示問題 +// carousel 的顯示鈕 +// 收藏的函式 +// header無法正常顯示 \ No newline at end of file