From 5ac8ee88cd93a883d3b21b836fa556e5ed5791de Mon Sep 17 00:00:00 2001 From: 1989ONCE Date: Tue, 8 Oct 2024 21:15:02 +0800 Subject: [PATCH 01/20] feat: dinner filter ui --- src/components/Common/Center.tsx | 9 ---- src/components/index.ts | 1 - src/components/pages/dinner/drink.tsx | 0 src/components/pages/dinner/filter.tsx | 49 +++++++++++++++++++ src/components/pages/dinner/meal.tsx | 0 src/components/pages/dinner/midnightSnack.tsx | 9 ++++ src/routes/__root.tsx | 4 +- src/routes/dinner/index.tsx | 3 +- src/routes/index.tsx | 10 +--- 9 files changed, 64 insertions(+), 21 deletions(-) delete mode 100644 src/components/Common/Center.tsx create mode 100644 src/components/pages/dinner/drink.tsx create mode 100644 src/components/pages/dinner/filter.tsx create mode 100644 src/components/pages/dinner/meal.tsx create mode 100644 src/components/pages/dinner/midnightSnack.tsx diff --git a/src/components/Common/Center.tsx b/src/components/Common/Center.tsx deleted file mode 100644 index 8cc4670..0000000 --- a/src/components/Common/Center.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import ChildrenProps from '../interface/ChildrenProps'; - -export const Center = ({ children }: ChildrenProps) => { - return ( -
- {children} -
- ); -}; diff --git a/src/components/index.ts b/src/components/index.ts index 685bf76..2ae526f 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,4 @@ // Common Components -export { Center } from './Common/Center'; export { Button } from './Common/customButton'; export { HStack } from './Common/HStack'; export { Image } from './Common/Image'; diff --git a/src/components/pages/dinner/drink.tsx b/src/components/pages/dinner/drink.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/pages/dinner/filter.tsx b/src/components/pages/dinner/filter.tsx new file mode 100644 index 0000000..542d6d2 --- /dev/null +++ b/src/components/pages/dinner/filter.tsx @@ -0,0 +1,49 @@ +import { VStack } from "../../../components"; + + +export const Filter = () => { + const streets = [ + '校内', '宵夜街', '後門', '奢侈巷' + ]; + + return ( + +
+

找正餐

+
+ { + streets.map((street) => ( + + )) + } +
+
+
+

找飲料

+
+ { + streets.map((street) => ( + + )) + } +
+
+
+

找宵夜

+
+ { + streets.slice(1, 3).map((street) => ( + + )) + } +
+
+ + ); +}; diff --git a/src/components/pages/dinner/meal.tsx b/src/components/pages/dinner/meal.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/pages/dinner/midnightSnack.tsx b/src/components/pages/dinner/midnightSnack.tsx new file mode 100644 index 0000000..a8fb42c --- /dev/null +++ b/src/components/pages/dinner/midnightSnack.tsx @@ -0,0 +1,9 @@ +import { VStack } from "../../../components"; + +export const MidnightSnack = () => { + return ( + + + + ); +}; diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 2925ffc..cac2874 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -6,8 +6,8 @@ export const Route = createRootRoute({ function RootComponent() { return ( - <> +
- +
) } diff --git a/src/routes/dinner/index.tsx b/src/routes/dinner/index.tsx index bc2512b..c4bd485 100644 --- a/src/routes/dinner/index.tsx +++ b/src/routes/dinner/index.tsx @@ -1,5 +1,6 @@ import { createFileRoute } from '@tanstack/react-router' import { Header } from '../../components' +import { Filter } from '../../components/pages/dinner/filter' import { AuthGuard } from '../../utils/auth' export const Route = createFileRoute('/dinner/')({ @@ -11,7 +12,7 @@ function DinnerIndex() { return ( <>
-
Hello /dinner/!
+ ) } \ No newline at end of file diff --git a/src/routes/index.tsx b/src/routes/index.tsx index c5b9bc5..bee5874 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -3,13 +3,6 @@ import { Header } from '../components'; import { AuthGuard } from '../utils/auth'; import { supabase } from '../utils/supabase'; -const styles = { - container: { - flex: 1, - backgroundColor: '#ffffff', - }, -}; - export const Route = createFileRoute('/')({ beforeLoad: AuthGuard, loader: async () => { @@ -37,7 +30,8 @@ function HomeIndex() { return ( <>
-
+ +

Name: {user[0].name}

From 647a34fe3f13b7e95c623c6a2f077fad02c6e76f Mon Sep 17 00:00:00 2001 From: 1989ONCE Date: Tue, 8 Oct 2024 21:18:29 +0800 Subject: [PATCH 02/20] delete unnecessary files --- src/components/pages/dinner/drink.tsx | 0 src/components/pages/dinner/meal.tsx | 0 src/components/pages/dinner/midnightSnack.tsx | 9 --------- 3 files changed, 9 deletions(-) delete mode 100644 src/components/pages/dinner/drink.tsx delete mode 100644 src/components/pages/dinner/meal.tsx delete mode 100644 src/components/pages/dinner/midnightSnack.tsx diff --git a/src/components/pages/dinner/drink.tsx b/src/components/pages/dinner/drink.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/pages/dinner/meal.tsx b/src/components/pages/dinner/meal.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/pages/dinner/midnightSnack.tsx b/src/components/pages/dinner/midnightSnack.tsx deleted file mode 100644 index a8fb42c..0000000 --- a/src/components/pages/dinner/midnightSnack.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { VStack } from "../../../components"; - -export const MidnightSnack = () => { - return ( - - - - ); -}; From 572294f35a2e7432e993e5ed3a8a0cda7a285602 Mon Sep 17 00:00:00 2001 From: nelsonkct Date: Thu, 17 Oct 2024 20:23:34 +0800 Subject: [PATCH 03/20] feat : add "hold new events" button --- src/components/icons/BellIcon.tsx | 12 +++++++++ src/components/icons/PlusIcon.tsx | 11 +++++++++ src/components/index.ts | 2 ++ src/routes/events/index.tsx | 41 +++++++++++++++++++++++-------- 4 files changed, 56 insertions(+), 10 deletions(-) create mode 100644 src/components/icons/BellIcon.tsx create mode 100644 src/components/icons/PlusIcon.tsx diff --git a/src/components/icons/BellIcon.tsx b/src/components/icons/BellIcon.tsx new file mode 100644 index 0000000..f20930d --- /dev/null +++ b/src/components/icons/BellIcon.tsx @@ -0,0 +1,12 @@ + +import React from 'react'; +import IconProps from '../interface/IconProps'; +import { BasicIcon } from './BasicIcon'; + +export const BellIcon: React.FC = ({ fill, stroke, size }) => ( + + + +); + +export default BellIcon; \ No newline at end of file diff --git a/src/components/icons/PlusIcon.tsx b/src/components/icons/PlusIcon.tsx new file mode 100644 index 0000000..e5b8d4f --- /dev/null +++ b/src/components/icons/PlusIcon.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import IconProps from '../interface/IconProps'; +import { BasicIcon } from './BasicIcon'; + +export const PlusIcon: React.FC = ({ fill, stroke, size }) => ( + + + +); + +export default PlusIcon; \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index 2ae526f..44eef03 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -5,8 +5,10 @@ export { Image } from './Common/Image'; export { VStack } from './Common/VStack'; export { Header } from './Header'; // Icons +export { BellIcon } from './icons/BellIcon'; export { CalendarIcon } from './icons/CalendarIcon'; export { LogoutIcon } from './icons/LogoutIcon'; +export { PlusIcon } from './icons/PlusIcon'; export { SidebarArrowDownIcon } from './icons/SidebarArrowDownIcon'; export { SidebarArrowRightIcon } from './icons/SidebarArrowRightIcon'; diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 3f70e4a..957099b 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -1,5 +1,5 @@ import { createFileRoute, Link } from '@tanstack/react-router'; -import { Header } from '../../components'; +import { BellIcon, Header, PlusIcon } from '../../components'; import { AuthGuard } from '../../utils/auth'; import { supabase } from '../../utils/supabase'; @@ -9,7 +9,6 @@ const styles = { backgroundColor: '#333333', }, }; - export const Route = createFileRoute('/events/')({ beforeLoad: AuthGuard, loader: async () => { @@ -28,16 +27,38 @@ export const Route = createFileRoute('/events/')({ function EventIndex() { const { events } = Route.useLoaderData() + const navigate = Route.useNavigate(); return ( <> -
-
-

活動列表

- { - events.map((event) => ( - {event.name} - )) - } +
+
+
+

活動列表

+ { + events.map((event) => ( + {event.name} + )) + } +
+ +
+ {/* This button will close the dialog */} + +
+
+
+ +
) From ebb03cfc7a1146b751965c352a443b9da489e53e Mon Sep 17 00:00:00 2001 From: nelsonkct Date: Thu, 17 Oct 2024 20:36:52 +0800 Subject: [PATCH 04/20] fix : meet code style and type check --- src/routes/events/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 957099b..6909804 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -40,7 +40,11 @@ function EventIndex() { )) }
- -
+
+ setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> +
+ {/* The style of the checkbox is refered from https://www.material-tailwind.com/docs/html/checkbox */} + + +
+ { + isError + ? ( + + {isError ? Labels.wrongAccountOrPassword : ''} + + ) + : <> + } + +
) +} + +class Labels { + private constructor() { } + static readonly account = '信箱或手機號碼'; + static readonly password = '密碼'; + static readonly remember = '保持我的登入狀態'; + static readonly login = '登入'; + static readonly wrongAccountOrPassword = '帳號或密碼錯誤'; } From 7476ae4145a10b58f3cda8e14dc800972c2a54e4 Mon Sep 17 00:00:00 2001 From: 1989ONCE Date: Thu, 14 Nov 2024 22:05:20 +0800 Subject: [PATCH 07/20] add package: heroicons, flowbite icon --- package-lock.json | 18 ++++++++++++++++++ package.json | 2 ++ src/components/DrawerOption.tsx | 7 ++++--- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 70e1702..8d88769 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "@supabase/supabase-js": "^2.45.3", "@tanstack/react-router": "^1.56.2", + "flowbite-react-icons": "^1.1.0", + "heroicons": "^2.1.5", "react": "^18.3.1", "react-dom": "^18.3.1", "supabase": "^1.200.3" @@ -5192,6 +5194,16 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/flowbite-react-icons": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/flowbite-react-icons/-/flowbite-react-icons-1.1.0.tgz", + "integrity": "sha512-wCBIStVygQ+CQlErY7s28vbXBRz3d6iqaSEdkSjtZb66lrV0uDs2NfUA2mWuIVhHUEC/CDktyUL0DG3J2gt/WQ==", + "license": "MIT", + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -5590,6 +5602,12 @@ "node": ">= 0.4" } }, + "node_modules/heroicons": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-2.1.5.tgz", + "integrity": "sha512-XLq3m45bJphmWdR6im52alaYajp0/fluJa2+7xh3x7CgItumbLsjhKYe+mCf0lErXLy7ZyiEgKIty2gFNxhoyA==", + "license": "MIT" + }, "node_modules/https-proxy-agent": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz", diff --git a/package.json b/package.json index 1afabaf..7e5695e 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "dependencies": { "@supabase/supabase-js": "^2.45.3", "@tanstack/react-router": "^1.56.2", + "flowbite-react-icons": "^1.1.0", + "heroicons": "^2.1.5", "react": "^18.3.1", "react-dom": "^18.3.1", "supabase": "^1.200.3" diff --git a/src/components/DrawerOption.tsx b/src/components/DrawerOption.tsx index a3c6fe1..0fbb027 100644 --- a/src/components/DrawerOption.tsx +++ b/src/components/DrawerOption.tsx @@ -1,6 +1,7 @@ import { Link } from "@tanstack/react-router"; +import { CaretDown, CaretRight } from "flowbite-react-icons/solid"; import { useState } from "react"; -import { HStack, SidebarArrowDownIcon, SidebarArrowRightIcon, VStack } from "../components"; +import { HStack, VStack } from "../components"; const options = [ { name: "首頁", engName: "Home", pageNav: "/" }, @@ -29,9 +30,9 @@ export const DrawerOption = () => {
toggleOption(option.name)}> {openOptions[option.name] ? ( - + ) : ( - + )}
From 75057fc58fb4024a86f0652640bfbbdb3ce61577 Mon Sep 17 00:00:00 2001 From: nelsonkct Date: Thu, 14 Nov 2024 22:17:47 +0800 Subject: [PATCH 08/20] feat : complete event index page --- .env.example | 2 - src/components/icons/ClockIcon.tsx | 12 +++ src/components/icons/PinIcon.tsx | 12 +++ src/components/index.ts | 2 + src/routes/events/create.tsx | 15 ++++ src/routes/events/index.tsx | 74 ++++++++++++++----- src/utils/database.types.ts | 3 + .../20241114141253_remote_schema.sql | 3 + 8 files changed, 104 insertions(+), 19 deletions(-) delete mode 100644 .env.example create mode 100644 src/components/icons/ClockIcon.tsx create mode 100644 src/components/icons/PinIcon.tsx create mode 100644 supabase/migrations/20241114141253_remote_schema.sql diff --git a/.env.example b/.env.example deleted file mode 100644 index 2bb19b6..0000000 --- a/.env.example +++ /dev/null @@ -1,2 +0,0 @@ -VITE_SUPABASE_URL=http://127.0.0.1:54321 -VITE_SUPABASE_ANON_KEY= diff --git a/src/components/icons/ClockIcon.tsx b/src/components/icons/ClockIcon.tsx new file mode 100644 index 0000000..feb0e0a --- /dev/null +++ b/src/components/icons/ClockIcon.tsx @@ -0,0 +1,12 @@ + +import React from 'react'; +import IconProps from '../interface/IconProps'; +import { BasicIcon } from './BasicIcon'; + +export const ClockIcon: React.FC = ({ fill, stroke, size }) => ( + + + +); + +export default ClockIcon; diff --git a/src/components/icons/PinIcon.tsx b/src/components/icons/PinIcon.tsx new file mode 100644 index 0000000..4fdd14c --- /dev/null +++ b/src/components/icons/PinIcon.tsx @@ -0,0 +1,12 @@ + +import React from 'react'; +import IconProps from '../interface/IconProps'; +import { BasicIcon } from './BasicIcon'; + +export const PinIcon: React.FC = ({ fill, stroke, size }) => ( + + + +); + +export default PinIcon; diff --git a/src/components/index.ts b/src/components/index.ts index 44eef03..0391eae 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,7 +7,9 @@ export { Header } from './Header'; // Icons export { BellIcon } from './icons/BellIcon'; export { CalendarIcon } from './icons/CalendarIcon'; +export { ClockIcon } from './icons/ClockIcon'; export { LogoutIcon } from './icons/LogoutIcon'; +export { PinIcon } from './icons/PinIcon'; export { PlusIcon } from './icons/PlusIcon'; export { SidebarArrowDownIcon } from './icons/SidebarArrowDownIcon'; export { SidebarArrowRightIcon } from './icons/SidebarArrowRightIcon'; diff --git a/src/routes/events/create.tsx b/src/routes/events/create.tsx index 0fa6ae3..7eced56 100644 --- a/src/routes/events/create.tsx +++ b/src/routes/events/create.tsx @@ -35,6 +35,11 @@ function CreateEventScreen() { const [preview, setPreview] = useState() const [inputs, setInputs] = useState({ name: '', + start_time: '', + end_time: '', + location: '', + fee: 0, + description: '' }) // create a preview as a side effect, whenever selected file is changed @@ -106,6 +111,8 @@ function CreateEventScreen() { type="datetime-local" id="start-time" name="start-time" + value={inputs.start_time} + onChange={(text) => { setInputs({ ...inputs, start_time: text.target.value }) }} />
@@ -114,6 +121,8 @@ function CreateEventScreen() { type="datetime-local" id="end-time" name="end-time" + value={inputs.end_time} + onChange={(text) => { setInputs({ ...inputs, end_time: text.target.value }) }} />

活動地點

@@ -121,18 +130,24 @@ function CreateEventScreen() { style={styles.input} className="rounded" placeholder="請輸入活動地點" + value={inputs.location} + onChange={(text) => { setInputs({ ...inputs, location: text.target.value }) }} />

參加費用

{ setInputs({ ...inputs, fee: Number(text.target.value) }) }} />

活動介紹

{ setInputs({ ...inputs, description: text.target.value }) }} />
diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 6909804..01515be 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -1,14 +1,20 @@ -import { createFileRoute, Link } from '@tanstack/react-router'; -import { BellIcon, Header, PlusIcon } from '../../components'; +import { createFileRoute } from '@tanstack/react-router'; +import { BellIcon, ClockIcon, 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; +} -const styles = { - container: { - flex: 1, - backgroundColor: '#333333', - }, -}; export const Route = createFileRoute('/events/')({ beforeLoad: AuthGuard, loader: async () => { @@ -19,7 +25,6 @@ export const Route = createFileRoute('/events/')({ if (error !== null) { throw error } - return { events: data } }, component: EventIndex @@ -28,18 +33,28 @@ export const Route = createFileRoute('/events/')({ function EventIndex() { const { events } = Route.useLoaderData() const navigate = Route.useNavigate(); + + // console.log(events[0].start_time) + return ( <>
-
-

活動列表

- { - events.map((event) => ( - {event.name} - )) - } -
+
+

最新揪人

+
+ {events.map((event) => ( + + ))} +
+ +

最新活動

+
+ {events.map((event) => ( + + ))} +
+
+ + +
{/* This button will close the dialog */} @@ -86,12 +100,12 @@ function EventIndex() { function EventCard({ event }: { event: Event }) { const startTime = event.start_time ? new Date(event.start_time) : new Date(); return ( -
+

{event.name}

- + {startTime.toLocaleString('zh-TW', { month: '2-digit', day: '2-digit', From a2bf67eb31487d8c8f20d63c87679abfe525aa70 Mon Sep 17 00:00:00 2001 From: Elaine Date: Sun, 24 Nov 2024 14:32:38 +0800 Subject: [PATCH 10/20] 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 11/20] 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 b9317a17e447041d03d274ac2b884a57513eed73 Mon Sep 17 00:00:00 2001 From: Susan Chen <92381825+1989ONCE@users.noreply.github.com> Date: Wed, 27 Nov 2024 14:37:55 +0800 Subject: [PATCH 12/20] Update src/routes/login.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/routes/login.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/login.tsx b/src/routes/login.tsx index d9b7567..e108cc5 100644 --- a/src/routes/login.tsx +++ b/src/routes/login.tsx @@ -61,8 +61,8 @@ function LoginPage() { onChange={(e) => setIsRemember(e.target.checked)} /> - - + From ceabeb141cdb7d2af836399fa50ca37c78119b72 Mon Sep 17 00:00:00 2001 From: Susan Chen <92381825+1989ONCE@users.noreply.github.com> Date: Wed, 27 Nov 2024 14:48:37 +0800 Subject: [PATCH 13/20] Update src/routes/events/index.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/routes/events/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 3c22c7d..f05a003 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -98,7 +98,7 @@ 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) : null; return (
    From f8128789c14e748740c8a601b1fbb3d9d04cf3a7 Mon Sep 17 00:00:00 2001 From: Susan Chen <92381825+1989ONCE@users.noreply.github.com> Date: Wed, 27 Nov 2024 14:49:34 +0800 Subject: [PATCH 14/20] Update src/routes/events/index.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/routes/events/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index f05a003..251b3fb 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -115,7 +115,7 @@ function EventCard({ event }: { event: Event }) {

    - {event.location} + {event.location || '位置未提供'}

    From 2281b077be98959274a71342d292d057b6ef7f25 Mon Sep 17 00:00:00 2001 From: Susan Chen <92381825+1989ONCE@users.noreply.github.com> Date: Wed, 27 Nov 2024 15:37:08 +0800 Subject: [PATCH 15/20] Update index.tsx --- src/routes/events/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx index 251b3fb..b834045 100644 --- a/src/routes/events/index.tsx +++ b/src/routes/events/index.tsx @@ -98,7 +98,7 @@ function EventIndex() { } function EventCard({ event }: { event: Event }) { - const startTime = event.start_time ? new Date(event.start_time) : null; + const startTime = event.start_time ? new Date(event.start_time) : new Date(); return (
    From cda97ba8634a37e825cd251d0f13331911e06256 Mon Sep 17 00:00:00 2001 From: Elaine Date: Wed, 27 Nov 2024 20:13:37 +0800 Subject: [PATCH 16/20] =?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 5532e1276ebcf768dca29a9c936a68e83ac393ed Mon Sep 17 00:00:00 2001 From: 1989ONCE Date: Mon, 2 Dec 2024 12:34:15 +0800 Subject: [PATCH 17/20] change package: heroicon for react --- package-lock.json | 17 ++++++++++------- package.json | 2 +- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8d88769..2d3665e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,10 @@ "name": "ncu-app", "version": "0.0.0", "dependencies": { + "@heroicons/react": "^2.1.5", "@supabase/supabase-js": "^2.45.3", "@tanstack/react-router": "^1.56.2", "flowbite-react-icons": "^1.1.0", - "heroicons": "^2.1.5", "react": "^18.3.1", "react-dom": "^18.3.1", "supabase": "^1.200.3" @@ -2330,6 +2330,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@heroicons/react": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz", + "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -5602,12 +5611,6 @@ "node": ">= 0.4" } }, - "node_modules/heroicons": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-2.1.5.tgz", - "integrity": "sha512-XLq3m45bJphmWdR6im52alaYajp0/fluJa2+7xh3x7CgItumbLsjhKYe+mCf0lErXLy7ZyiEgKIty2gFNxhoyA==", - "license": "MIT" - }, "node_modules/https-proxy-agent": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz", diff --git a/package.json b/package.json index 7e5695e..6333b0e 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,10 @@ "test": "playwright test" }, "dependencies": { + "@heroicons/react": "^2.1.5", "@supabase/supabase-js": "^2.45.3", "@tanstack/react-router": "^1.56.2", "flowbite-react-icons": "^1.1.0", - "heroicons": "^2.1.5", "react": "^18.3.1", "react-dom": "^18.3.1", "supabase": "^1.200.3" From 9982363647f2df0331a52c2a7a594dc3dd6f17c2 Mon Sep 17 00:00:00 2001 From: 1989ONCE Date: Mon, 2 Dec 2024 12:34:30 +0800 Subject: [PATCH 18/20] upgrade package: supabase --- package-lock.json | 68 +++++++++++++++++++++++++++-------------------- package.json | 2 +- 2 files changed, 40 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2d3665e..e60b13e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "flowbite-react-icons": "^1.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "supabase": "^1.200.3" + "supabase": "^1.223.10" }, "devDependencies": { "@playwright/test": "^1.47.0", @@ -3815,18 +3815,19 @@ ] }, "node_modules/bin-links": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/bin-links/-/bin-links-4.0.4.tgz", - "integrity": "sha512-cMtq4W5ZsEwcutJrVId+a/tjt8GSbS+h0oNkdl6+6rBuEv8Ot33Bevj5KPm40t309zuhVic8NjpuL42QCiJWWA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/bin-links/-/bin-links-5.0.0.tgz", + "integrity": "sha512-sdleLVfCjBtgO5cNjA2HVRvWBJAHs4zwenaCPMNJAJU0yNxpzj80IpjOIimkpkr+mhlA+how5poQtt53PygbHA==", "license": "ISC", "dependencies": { - "cmd-shim": "^6.0.0", - "npm-normalize-package-bin": "^3.0.0", - "read-cmd-shim": "^4.0.0", - "write-file-atomic": "^5.0.0" + "cmd-shim": "^7.0.0", + "npm-normalize-package-bin": "^4.0.0", + "proc-log": "^5.0.0", + "read-cmd-shim": "^5.0.0", + "write-file-atomic": "^6.0.0" }, "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + "node": "^18.17.0 || >=20.5.0" } }, "node_modules/binary-extensions": { @@ -4069,12 +4070,12 @@ "dev": true }, "node_modules/cmd-shim": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.3.tgz", - "integrity": "sha512-FMabTRlc5t5zjdenF6mS0MBeFZm0XqHqeOkcskKFb/LYCcRQ5fVgLOHVc4Lq9CqABd9zhjwPjMBCJvMCziSVtA==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-7.0.0.tgz", + "integrity": "sha512-rtpaCbr164TPPh+zFdkWpCyZuKkjpAzODfaZCf/SVJZzJN+4bHQb/LP3Jzq5/+84um3XXY8r548XiWKSborwVw==", "license": "ISC", "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + "node": "^18.17.0 || >=20.5.0" } }, "node_modules/color": { @@ -6662,12 +6663,12 @@ } }, "node_modules/npm-normalize-package-bin": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz", - "integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-4.0.0.tgz", + "integrity": "sha512-TZKxPvItzai9kN9H/TkmCtx/ZN/hvr3vUycjlfmH0ootY9yFBzNOpiXAdIn1Iteqsvk4lQn6B5PTrt+n6h8k/w==", "license": "ISC", "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + "node": "^18.17.0 || >=20.5.0" } }, "node_modules/object-assign": { @@ -7194,6 +7195,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/proc-log": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz", + "integrity": "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==", + "license": "ISC", + "engines": { + "node": "^18.17.0 || >=20.5.0" + } + }, "node_modules/pump": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", @@ -7314,12 +7324,12 @@ } }, "node_modules/read-cmd-shim": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz", - "integrity": "sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-5.0.0.tgz", + "integrity": "sha512-SEbJV7tohp3DAAILbEMPXavBjAnMN0tVnh4+9G8ihV4Pq3HYF9h8QNez9zkJ1ILkv9G2BjdzwctznGZXgu/HGw==", "license": "ISC", "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + "node": "^18.17.0 || >=20.5.0" } }, "node_modules/readable-stream": { @@ -8147,13 +8157,13 @@ } }, "node_modules/supabase": { - "version": "1.200.3", - "resolved": "https://registry.npmjs.org/supabase/-/supabase-1.200.3.tgz", - "integrity": "sha512-3NdhqBkfPVlm+rAhWQoVcyr54kykuAlHav/GWaAoQEHBDbbYI1lhbDzugk8ryQg92vSLwr3pWz0s4Hjdte8WyQ==", + "version": "1.223.10", + "resolved": "https://registry.npmjs.org/supabase/-/supabase-1.223.10.tgz", + "integrity": "sha512-a5Wi562n0eiV3w359qiCjewyVad688Z3+JHdvLybdlITrwvNIcR6QYqRR6EzjKY5V/sNCqC+5sNf40wDYAYcHg==", "hasInstallScript": true, "license": "MIT", "dependencies": { - "bin-links": "^4.0.3", + "bin-links": "^5.0.0", "https-proxy-agent": "^7.0.2", "node-fetch": "^3.3.2", "tar": "7.4.3" @@ -9800,16 +9810,16 @@ "dev": true }, "node_modules/write-file-atomic": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", - "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-6.0.0.tgz", + "integrity": "sha512-GmqrO8WJ1NuzJ2DrziEI2o57jKAVIQNf8a18W3nCYU3H7PNWqCCVTeH6/NQE93CIllIgQS98rrmVkYgTX9fFJQ==", "license": "ISC", "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" }, "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + "node": "^18.17.0 || >=20.5.0" } }, "node_modules/ws": { diff --git a/package.json b/package.json index 6333b0e..bd824cf 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "flowbite-react-icons": "^1.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "supabase": "^1.200.3" + "supabase": "^1.223.10" }, "devDependencies": { "@playwright/test": "^1.47.0", From 79c6b627f417f31aff974837120cec39b5c87292 Mon Sep 17 00:00:00 2001 From: nelsonkct Date: Tue, 3 Dec 2024 19:40:53 +0800 Subject: [PATCH 19/20] 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 20/20] =?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