From a2bf67eb31487d8c8f20d63c87679abfe525aa70 Mon Sep 17 00:00:00 2001 From: Elaine Date: Sun, 24 Nov 2024 14:32:38 +0800 Subject: [PATCH 1/7] 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/7] 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/7] =?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 79c6b627f417f31aff974837120cec39b5c87292 Mon Sep 17 00:00:00 2001 From: nelsonkct Date: Tue, 3 Dec 2024 19:40:53 +0800 Subject: [PATCH 4/7] feat : add search bar at event index page --- src/routes/events/index.tsx | 87 ++++++++++++++++++++++++++----------- 1 file changed, 61 insertions(+), 26 deletions(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index b834045..2bc316f 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -1,51 +1,82 @@ import { createFileRoute } from '@tanstack/react-router'; -import { Clock } from "flowbite-react-icons/solid"; +import { Clock, Search } from "flowbite-react-icons/outline"; +import { useState } from 'react'; import { BellIcon, Header, PinIcon, PlusIcon } from '../../components'; import { AuthGuard } from '../../utils/auth'; import { supabase } from '../../utils/supabase'; + interface Event { - created_at: string; - description: string | null; - end_time: string | null; - fee: number | null; - id: number; - name: string | null; - start_time: string | null; - type: number | null; - user_id: string; - location: string | null; + created_at: string; + description: string | null; + end_time: string | null; + fee: number | null; + id: number; + name: string | null; + start_time: string | null; + type: number | null; + user_id: string; + location: string | null; } export const Route = createFileRoute('/events/')({ beforeLoad: AuthGuard, loader: async () => { - const { data, error } = await supabase - .from('events') - .select('*') + const { data, error } = await supabase.from('events').select('*'); if (error !== null) { - throw error + throw error; } - return { events: data } + return { events: data }; }, - component: EventIndex -}) + component: EventIndex, +}); function EventIndex() { - const { events } = Route.useLoaderData() + const { events } = Route.useLoaderData(); const navigate = Route.useNavigate(); - // console.log(events[0].start_time) + const [searchTerm, setSearchTerm] = useState(''); + const [isFocused, setIsFocused] = useState(false); + + const filteredEvents = events.filter( + (event) => + event.name && + event.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); return ( <>
+
+ setSearchTerm(e.target.value)} + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} + className="input input-bordered w-full pl-12 pr-12" + /> + {!searchTerm && !isFocused && ( +
+ + 搜尋 +
+ )} + {searchTerm && ( + + )} +
+

最新揪人

- {events.map((event) => ( + {filteredEvents.map((event) => ( ))}
@@ -54,7 +85,7 @@ function EventIndex() {

最新活動

- {events.map((event) => ( + {filteredEvents.map((event) => ( ))}
@@ -65,7 +96,9 @@ function EventIndex() { className="btn btn-circle fixed right-4 bottom-4" onClick={() => { if (document) { - (document.getElementById('my_modal_4') as HTMLFormElement).showModal(); + ( + document.getElementById('my_modal_4') as HTMLFormElement + ).showModal(); } }} > @@ -94,11 +127,13 @@ function EventIndex() {
- ) + ); } function EventCard({ event }: { event: Event }) { - const startTime = event.start_time ? new Date(event.start_time) : new Date(); + const startTime = event.start_time + ? new Date(event.start_time) + : new Date(); return (
@@ -120,4 +155,4 @@ function EventCard({ event }: { event: Event }) {
); -} +} \ 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 5/7] =?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 From c5b246081922afd0de6f1639a94d6daa03c0d79e Mon Sep 17 00:00:00 2001 From: Susan Chen <92381825+1989ONCE@users.noreply.github.com> Date: Thu, 12 Dec 2024 19:31:02 +0800 Subject: [PATCH 6/7] Create .env.exmaple --- .env.exmaple | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .env.exmaple diff --git a/.env.exmaple b/.env.exmaple new file mode 100644 index 0000000..2bb19b6 --- /dev/null +++ b/.env.exmaple @@ -0,0 +1,2 @@ +VITE_SUPABASE_URL=http://127.0.0.1:54321 +VITE_SUPABASE_ANON_KEY= From 1f45ef86aaf1b42e9ee02f1df01681306d8c8397 Mon Sep 17 00:00:00 2001 From: nelsonkct Date: Thu, 12 Dec 2024 21:43:20 +0800 Subject: [PATCH 7/7] feat : add events filter by type --- src/routes/events/index.tsx | 65 ++++++++++++++++++++++++++++--------- 1 file changed, 50 insertions(+), 15 deletions(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 2bc316f..33bb2b2 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -21,34 +21,45 @@ interface Event { export const Route = createFileRoute('/events/')({ beforeLoad: AuthGuard, loader: async () => { - const { data, error } = await supabase.from('events').select('*'); + const { data: events, error: eventsError } = await supabase.from('events').select('*'); + if (eventsError) throw eventsError; - if (error !== null) { - throw error; - } - return { events: data }; + const { data: eventTypesData, error: eventTypesError } = await supabase.from('event_type').select('*').order('type_id', { ascending: true }); + if (eventTypesError) throw eventTypesError; + console.log(eventTypesData); + return { events, eventTypes: eventTypesData }; }, component: EventIndex, }); function EventIndex() { - const { events } = Route.useLoaderData(); - const navigate = Route.useNavigate(); + const { events, eventTypes } = Route.useLoaderData() as { + events: Event[]; + eventTypes: { type_id: number; type_name: string }[]; + }; + const navigate = Route.useNavigate(); const [searchTerm, setSearchTerm] = useState(''); const [isFocused, setIsFocused] = useState(false); + const [selectedType, setSelectedType] = useState("All"); - const filteredEvents = events.filter( - (event) => - event.name && - event.name.toLowerCase().includes(searchTerm.toLowerCase()) - ); + const filteredEvents = events.filter((event) => { + const matchesSearch = event.name && event.name.toLowerCase().includes(searchTerm.toLowerCase()); + const matchesType = selectedType === "All" + ? true + : event.type === Number(selectedType); + return matchesSearch && matchesType; + }); + + const handleFilterSelect = (type: string) => { + setSelectedType(type); + }; return ( <>
-
+
setSearchTerm('')} - >清除 + > + 清除 + )}
+
+
+ + {eventTypes.map(({ type_id, type_name }) => ( + + ))} +
+
+

最新揪人

@@ -81,7 +116,6 @@ function EventIndex() { ))}
-

最新活動

@@ -125,6 +159,7 @@ function EventIndex() {
+
);