From 16c93809b6b06e65b6c0898a39cbca836508ffc1 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Sat, 20 Jul 2024 12:28:51 +0200 Subject: [PATCH] player profile and user select --- src/Components/Profile/OverlayItemProfile.tsx | 215 ++++++++++++++++-- src/Components/Templates/AttestationForm.tsx | 65 ++++++ src/Components/Templates/SelectUser.tsx | 65 ++++++ src/Components/Templates/index.tsx | 3 +- src/index.tsx | 2 +- 5 files changed, 335 insertions(+), 15 deletions(-) create mode 100644 src/Components/Templates/AttestationForm.tsx create mode 100644 src/Components/Templates/SelectUser.tsx diff --git a/src/Components/Profile/OverlayItemProfile.tsx b/src/Components/Profile/OverlayItemProfile.tsx index f0ad9d19..99897269 100644 --- a/src/Components/Profile/OverlayItemProfile.tsx +++ b/src/Components/Profile/OverlayItemProfile.tsx @@ -25,6 +25,9 @@ import { TagView } from '../Templates/TagView'; import RelationCard from "./RelationCard"; import ContactInfo from "./ContactInfo"; import ProfileSubHeader from "./ProfileSubHeader"; +import { symbol } from 'prop-types'; +import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; +import { add, eachDayOfInterval, endOfMonth, endOfWeek, format, getDay, isSameMonth, isToday, parse, startOfToday, startOfWeek } from 'date-fns'; export function OverlayItemProfile({ userType }: { userType: string }) { @@ -289,7 +292,92 @@ export function OverlayItemProfile({ userType }: { userType: string }) { setTemplate(item.layer?.itemType.template || userType); }, [userType, item]) + const attestations = [{ + from: "Timo", + avatar: "https://api.utopia-lab.org/assets/262117f8-feb6-444f-9bd2-e84087285760?width=80&heigth=80", + symbol: "🥇", + text: "1. Platz im Bogenschießen", + date: "21.06.2024", + }, + { + from: "Sebastian", + avatar: "https://api.utopia-lab.org/assets/7510a082-882b-41c3-aa7d-5a19f9502f25?width=80&heigth=80", + symbol: "🌱", + text: "danke fürs Rasen mähen", + date: "29.06.2024", + }, + { + from: "Yurij", + avatar: "https://api.utopia-lab.org/assets/abe62291-35ad-45de-b978-e5906d8a3eb6?width=80&heigth=80", + symbol: "🏆", + text: "bester Coder ever", + date: "04.07.2024", + }, + { + from: "Luca", + avatar: "https://api.utopia-lab.org/assets/e285e653-36e8-4211-a69d-00053c1f610e?width=80&heigth=80", + symbol: "🙏", + text: "Vielen Dank für deine Hilfe!!!", + date: "04.07.2024", + }, + { + from: "Lisa", + avatar: "https://i.pinimg.com/originals/c0/ed/08/c0ed088cd6532d4fd27396aefddac57c.jpg", + symbol: "❤️", + text: "Vielen Dank für deine Hilfe!!!", + date: "04.07.2024", + }, + { + from: "Timo", + avatar: "https://api.utopia-lab.org/assets/262117f8-feb6-444f-9bd2-e84087285760?width=80&heigth=80", + symbol: "🥈", + text: "2. Platz im Bogenschießen", + date: "21.06.2024", + }, + { + from: "Anton", + avatar: "https://api.utopia-lab.org/assets/007dc678-6073-4ad1-9b47-f2cfe1dca582?width=80&heigth=80", + symbol: "🌱", + text: "danke fürs Rasen mähen", + date: "29.06.2024" + }, + ] + const today = startOfToday(); + const days = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]; + const colStartClasses = [ + "", + "col-start-2", + "col-start-3", + "col-start-4", + "col-start-5", + "col-start-6", + "col-start-7", + ]; + + const [currMonth, setCurrMonth] = useState(() => format(today, "MMM-yyyy")); + let firstDayOfMonth = parse(currMonth, "MMM-yyyy", new Date()); + + const daysInMonth = eachDayOfInterval({ + start: startOfWeek(firstDayOfMonth), + end: endOfWeek(endOfMonth(firstDayOfMonth)), + }); + + const getPrevMonth = (event: React.MouseEvent) => { + event.preventDefault(); + const firstDayOfPrevMonth = add(firstDayOfMonth, { months: -1 }); + setCurrMonth(format(firstDayOfPrevMonth, "MMM-yyyy")); + }; + + const getNextMonth = (event: React.MouseEvent) => { + event.preventDefault(); + const firstDayOfNextMonth = add(firstDayOfMonth, { months: 1 }); + setCurrMonth(format(firstDayOfNextMonth, "MMM-yyyy")); + }; + + const capitalizeFirstLetter = (string: string) => { + return string + } return ( <> @@ -358,23 +446,124 @@ export function OverlayItemProfile({ userType }: { userType: string }) { {template == "tabs" &&
- updateActiveTab(1)} /> -
- {item.layer?.itemType.show_start_end && -
- } - -
+ {item.layer?.itemType.text && + <> + updateActiveTab(1)} /> +
+ {item.layer?.itemType.show_start_end && +
+ } + +
+ + } + {item.layer?.itemType.questlog && + <> + updateActiveTab(2)} /> + +
+ + + {attestations.map((a, i) => + + + + + + )} + +
+
{a.symbol}
+ + 		+
{a.text}
+ + 		+
+
+
+ Avatar Tailwind CSS Component +
+
+
+
{a.from}
+
{a.date}
+ +
+
+
+ +
+ + } + {item.layer?.itemType.text && + <> + updateActiveTab(4)} /> +
+
+

+ {format(firstDayOfMonth, "MMMM yyyy")} +

+
+ + +
+
+
+
+ {days.map((day, idx) => { + return ( +
+ {capitalizeFirstLetter(day)} +
+ ); + })} +
+
+ {daysInMonth.map((day, idx) => { + return ( +
+

+ {format(day, "d")} +

+
+ ); + })} +
+
+ + } + {item.layer?.itemType.offers_and_needs && <> - updateActiveTab(3)} /> + updateActiveTab(3)} />
@@ -412,7 +601,7 @@ export function OverlayItemProfile({ userType }: { userType: string }) { {item.layer?.itemType.relations && <> - updateActiveTab(7)} /> + updateActiveTab(7)} />
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx new file mode 100644 index 00000000..d8aeaec3 --- /dev/null +++ b/src/Components/Templates/AttestationForm.tsx @@ -0,0 +1,65 @@ +import * as react from 'react' +import { useState } from 'react' +import { TitleCard } from './TitleCard' +import { timeAgo } from '../../Utils/TimeAgo' +import { MapOverlayPage } from './MapOverlayPage' +import { useItems } from '../Map/hooks/useItems' +import { useAssetApi } from '../AppShell/hooks/useAssets' + +export const AttestationForm = ({ userType }: { userType: string }) => { + + const items = useItems(); + const users = items.filter(i => i.layer?.itemType.name == userType) + const assetsApi = useAssetApi(); + + return ( + + +
Select User
+ + + {/* Team Member list in table format loaded constant */} +
+ + + { + users.map((l, k) => { + return ( + + + + + ) + }) + } + +
+ + +
+ {l.image ?
+
+ Avatar +
+
: +
} +
+
{l.name}
+
+
+
+
+ + + ) +} + +const TEAM_MEMBERS = [ + { name: "Alex", avatar: "https://reqres.in/img/faces/1-image.jpg", email: "alex@dashwind.com", role: "Owner", joinedOn: timeAgo(new Date()), lastActive: "5 hr ago" }, + { name: "Ereena", avatar: "https://reqres.in/img/faces/2-image.jpg", email: "ereena@dashwind.com", role: "Admin", joinedOn: timeAgo(new Date()), lastActive: "15 min ago" }, + { name: "John", avatar: "https://reqres.in/img/faces/3-image.jpg", email: "jhon@dashwind.com", role: "Admin", joinedOn: timeAgo(new Date()), lastActive: "20 hr ago" }, + { name: "Matrix", avatar: "https://reqres.in/img/faces/4-image.jpg", email: "matrix@dashwind.com", role: "Manager", joinedOn: timeAgo(new Date()), lastActive: "1 hr ago" }, + { name: "Virat", avatar: "https://reqres.in/img/faces/5-image.jpg", email: "virat@dashwind.com", role: "Support", joinedOn: timeAgo(new Date()), lastActive: "40 min ago" }, + { name: "Miya", avatar: "https://reqres.in/img/faces/6-image.jpg", email: "miya@dashwind.com", role: "Support", joinedOn: timeAgo(new Date()), lastActive: "5 hr ago" }, + +] diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx new file mode 100644 index 00000000..e585f240 --- /dev/null +++ b/src/Components/Templates/SelectUser.tsx @@ -0,0 +1,65 @@ +import * as react from 'react' +import { useState } from 'react' +import { TitleCard } from './TitleCard' +import { timeAgo } from '../../Utils/TimeAgo' +import { MapOverlayPage } from './MapOverlayPage' +import { useItems } from '../Map/hooks/useItems' +import { useAssetApi } from '../AppShell/hooks/useAssets' + +export const SelectUser = ({ userType }: { userType: string }) => { + + const items = useItems(); + const users = items.filter(i => i.layer?.itemType.name == userType) + const assetsApi = useAssetApi(); + + return ( + + +
Select User
+ + + {/* Team Member list in table format loaded constant */} +
+ + + { + users.map((l, k) => { + return ( + + + + + ) + }) + } + +
+ + +
+ {l.image ?
+
+ Avatar +
+
: +
} +
+
{l.name}
+
+
+
+
+ + + ) +} + +const TEAM_MEMBERS = [ + { name: "Alex", avatar: "https://reqres.in/img/faces/1-image.jpg", email: "alex@dashwind.com", role: "Owner", joinedOn: timeAgo(new Date()), lastActive: "5 hr ago" }, + { name: "Ereena", avatar: "https://reqres.in/img/faces/2-image.jpg", email: "ereena@dashwind.com", role: "Admin", joinedOn: timeAgo(new Date()), lastActive: "15 min ago" }, + { name: "John", avatar: "https://reqres.in/img/faces/3-image.jpg", email: "jhon@dashwind.com", role: "Admin", joinedOn: timeAgo(new Date()), lastActive: "20 hr ago" }, + { name: "Matrix", avatar: "https://reqres.in/img/faces/4-image.jpg", email: "matrix@dashwind.com", role: "Manager", joinedOn: timeAgo(new Date()), lastActive: "1 hr ago" }, + { name: "Virat", avatar: "https://reqres.in/img/faces/5-image.jpg", email: "virat@dashwind.com", role: "Support", joinedOn: timeAgo(new Date()), lastActive: "40 min ago" }, + { name: "Miya", avatar: "https://reqres.in/img/faces/6-image.jpg", email: "miya@dashwind.com", role: "Support", joinedOn: timeAgo(new Date()), lastActive: "5 hr ago" }, + +] diff --git a/src/Components/Templates/index.tsx b/src/Components/Templates/index.tsx index 97537a89..c610bd5d 100644 --- a/src/Components/Templates/index.tsx +++ b/src/Components/Templates/index.tsx @@ -5,4 +5,5 @@ export {CircleLayout} from './CircleLayout' export {MoonCalendar} from './MoonCalendar' export {ItemsIndexPage} from "./ItemsIndexPage" export {ItemViewPage} from "./ItemViewPage" -export {OverlayItemsIndexPage} from "./OverlayItemsIndexPage" \ No newline at end of file +export {OverlayItemsIndexPage} from "./OverlayItemsIndexPage" +export {SelectUser} from "./SelectUser" \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index f474dc83..a9231a3e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,7 @@ export {AppShell, Content, SideBar} from "./Components/AppShell" export {AuthProvider, useAuth, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage} from "./Components/Auth" export {UserSettings, ProfileSettings, OverlayProfile, OverlayProfileSettings, OverlayUserSettings, OverlayItemProfile, OverlayItemProfileSettings} from './Components/Profile' export {Quests, Modal} from './Components/Gaming' -export {TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, CircleLayout, MoonCalendar, ItemsIndexPage, ItemViewPage} from './Components/Templates' +export {TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, CircleLayout, MoonCalendar, ItemsIndexPage, ItemViewPage, SelectUser} from './Components/Templates' export {TextInput, TextAreaInput, SelectBox} from './Components/Input' import "./index.css"