From 16c93809b6b06e65b6c0898a39cbca836508ffc1 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Sat, 20 Jul 2024 12:28:51 +0200 Subject: [PATCH 01/20] 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" From ffd93743904be40c3f98aa4cb1d56c599fc53410 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 24 Jul 2024 12:27:27 +0200 Subject: [PATCH 02/20] 3.0.0-alpha.204 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1b2c6887..90828451 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.203", + "version": "3.0.0-alpha.204", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.0-alpha.203", + "version": "3.0.0-alpha.204", "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index 031ee387..6fe22df1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.203", + "version": "3.0.0-alpha.204", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From c3b074f22c2e6b6600139ab02d4edc7c92788cf0 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Fri, 26 Jul 2024 13:05:44 +0200 Subject: [PATCH 03/20] attestation form and profile experiments --- package.json | 4 - .../Controls/GratitudeControl.tsx | 25 ++++ src/Components/Map/UtopiaMap.tsx | 10 +- src/Components/Profile/Templates/TabsForm.tsx | 95 -------------- src/Components/Profile/Templates/TabsView.tsx | 101 ++++++++++++++- src/Components/Templates/AttestationForm.tsx | 120 ++++++++++-------- src/Components/Templates/EmojiPicker.tsx | 95 ++++++++++++++ src/Components/Templates/SelectUser.tsx | 23 ++-- src/Components/Templates/index.tsx | 3 + src/index.css | 4 + src/index.tsx | 2 +- tailwind.config.js | 44 +++++-- 12 files changed, 340 insertions(+), 186 deletions(-) create mode 100644 src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx create mode 100644 src/Components/Templates/EmojiPicker.tsx diff --git a/package.json b/package.json index f41e1282..fd71a943 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,6 @@ { "name": "utopia-ui", -<<<<<<< HEAD - "version": "3.0.0-alpha.204", -======= "version": "3.0.0-alpha.215", ->>>>>>> 8dc8779fe58040fb5c2a763d6519e57ddffc7ab7 "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", diff --git a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx new file mode 100644 index 00000000..158b9619 --- /dev/null +++ b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx @@ -0,0 +1,25 @@ +import { useNavigate } from "react-router-dom" + +export const GratitudeControl = () => { + const navigate = useNavigate(); + return ( +
+ { + + +
{ + navigate("/select-user") + }}> + + + + + + +
+ + } + +
+ ) +} diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index 16a7f3eb..ec1b0d52 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -20,6 +20,7 @@ import {FilterControl} from "./Subcomponents/Controls/FilterControl"; import {LayerControl} from "./Subcomponents/Controls/LayerControl"; import { useLayers } from "./hooks/useLayers"; import { useAddVisibleLayer } from "./hooks/useFilter"; +import { GratitudeControl } from "./Subcomponents/Controls/GratitudeControl"; // for refreshing map on resize (needs to be implemented) const mapDivRef = React.createRef(); @@ -60,21 +61,13 @@ function UtopiaMap({ const selectNewItemPosition = useSelectPosition(); const setSelectNewItemPosition = useSetSelectPosition(); - const location = useLocation(); const setClusterRef = useSetClusterRef(); const clusterRef = useClusterRef(); const setMapClicked = useSetMapClicked(); const [itemFormPopup, setItemFormPopup] = useState(null); - const [embedded, setEmbedded] = useState(true) - useEffect(() => { - let params = new URLSearchParams(location.search); - let urlPosition = params.get("position"); - let embedded = params.get("embedded"); - embedded != "true" && setEmbedded(false) - }, [location]); const layers = useLayers(); @@ -110,6 +103,7 @@ function UtopiaMap({ {showFilterControl && } {/*todo: needed layer handling is located LayerControl*/} {showLayerControl && } + {} { let params = new URLSearchParams(location.search); @@ -89,51 +39,6 @@ export const TabsForm = ({ item, state, setState, updatePermission, linkItem, un text: v }))} containerStyle='tw-h-full' inputStyle='tw-h-full tw-border-t-0 tw-rounded-tl-none' />
- {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.offers_and_needs && <> updateActiveTab(3)} /> diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index 6f8d4c19..27f58e0c 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -41,11 +41,62 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa urlTab ? setActiveTab(Number(urlTab)) : setActiveTab(1); }, [location]) + 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" +}, +] + return (
updateActiveTab(1)} />
@@ -54,12 +105,56 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa }
+ {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.offers_and_needs && <> - updateActiveTab(3)} /> + updateActiveTab(3)} />
@@ -97,7 +192,7 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa {item.layer?.itemType.relations && <> - updateActiveTab(7)} /> + updateActiveTab(7)} />
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx index d8aeaec3..1dc7226d 100644 --- a/src/Components/Templates/AttestationForm.tsx +++ b/src/Components/Templates/AttestationForm.tsx @@ -1,65 +1,79 @@ -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' +import { EmojiPicker } from './EmojiPicker'; +import { Link } from 'react-router-dom'; +import { ColorPicker } from '../Profile/Subcomponents/ColorPicker'; +import { useRef, useState } from 'react'; +import { Item, UserItem } from '../../types'; +import { useEffect } from 'react'; -export const AttestationForm = ({ userType }: { userType: string }) => { +export const AttestationForm = () => { const items = useItems(); - const users = items.filter(i => i.layer?.itemType.name == userType) const assetsApi = useAssetApi(); + const [users, setUsers] = useState>(); + + useEffect(() => { + let params = new URLSearchParams(location.search); + let to_user_ids = params.get("to"); + setUsers(items.filter(i => to_user_ids?.includes(i.id))) + }, [items, location]) + + const [inputValue, setInputValue] = useState(''); + const inputRef = useRef(null); + + useEffect(() => { + if (inputRef.current) { + inputRef.current.style.width = 'auto'; + inputRef.current.style.width = `${inputRef.current.scrollWidth+20}px`; + } + }, [inputValue]); + + const handleChange = (event: React.ChangeEvent) => { + setInputValue(event.target.value); + }; + + + return ( - - -
Select User
- - - {/* Team Member list in table format loaded constant */} -
- - - { - users.map((l, k) => { - return ( - - - - - ) - }) - } - -
- - -
- {l.image ?
-
- Avatar -
-
: -
} -
-
{l.name}
-
-
-
+ +
Gratitude
+
to
+
+ {users && users.map((u, k) => ( +
+ {u.image ?
+
+ Avatar +
+
: +
} +
+
{u.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" }, - -] +} \ No newline at end of file diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx new file mode 100644 index 00000000..841a5779 --- /dev/null +++ b/src/Components/Templates/EmojiPicker.tsx @@ -0,0 +1,95 @@ +import { useState } from 'react'; + +export const EmojiPicker = () => { + const [selectedEmoji, setSelectedEmoji] = useState('select badge'); + const [selectedShape, setSelectedShape] = useState('circle'); + const [selectedColor, setSelectedColor] = useState('#fff0d6'); + + + const [isOpen, setIsOpen] = useState(false); + + const emojis = [ + '❤️', '🙏', '👍', '🌻',, '✨', '☀️', + '🔥', '🪵', '💧', '🎶', '🎨','🍄', + '📝', '✉️', '🧩','💡', '🎓', '💬', + '🛠', '💻', '🕹', '🖨', '🚐', '🛒', + '⚽️', '🧵', '👀', '🌱', + '🏕', '💪', '🎁', '🎉', + '🥕', '🥇', '🥈', '🥉']; + const shapes = ["squircle", "circle", "hexagon-2"]; + + const colors = ["#FF99C8", "#fff0d6", "#FCF6BD", "#D0F4DE", "#A9DEF9", "#E4C1F9", "#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2"] + + + const toggleDropdown = () => { + setIsOpen(!isOpen); + }; + + const selectEmoji = (emoji) => { + setSelectedEmoji(emoji); + setIsOpen(false); + }; + + const selectShape = (shape) => { + setSelectedShape(shape); + setIsOpen(false); + }; + + const selectColor = (color) => { + setSelectedColor(color); + setIsOpen(false); + }; + + + + return ( + <> +
+ {selectedEmoji} +
+ + {isOpen && ( +
+
+ {emojis.map((emoji) => ( + + ))} +
+
+
+ {shapes.map(shape => ( +
selectShape(shape)}> +
+
+ ))} +
+
+
+ {colors.map(color => ( +
selectColor(color)}> +
+
+ ))} +
+
+ + )} + + ); +}; + diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx index e585f240..802a046f 100644 --- a/src/Components/Templates/SelectUser.tsx +++ b/src/Components/Templates/SelectUser.tsx @@ -5,6 +5,7 @@ import { timeAgo } from '../../Utils/TimeAgo' import { MapOverlayPage } from './MapOverlayPage' import { useItems } from '../Map/hooks/useItems' import { useAssetApi } from '../AppShell/hooks/useAssets' +import { Link } from 'react-router-dom' export const SelectUser = ({ userType }: { userType: string }) => { @@ -12,33 +13,35 @@ export const SelectUser = ({ userType }: { userType: string }) => { const users = items.filter(i => i.layer?.itemType.name == userType) const assetsApi = useAssetApi(); - return ( - + const [selectedUsers, setSelectedUsers] = useState>([]); -
Select User
+ return ( + + +
Gratitude to ...
{/* Team Member list in table format loaded constant */} -
+
{ - users.map((l, k) => { + users.map((u, k) => { return ( @@ -49,7 +52,7 @@ export const SelectUser = ({ userType }: { userType: string }) => {
- + setSelectedUsers(prev => [...prev, u.id])} className="tw-checkbox tw-checkbox-sm" />
- {l.image ?
+ {u.image ?
- Avatar + Avatar
:
}
-
{l.name}
+
{u.name}
- +
u,",")}>
) } diff --git a/src/Components/Templates/index.tsx b/src/Components/Templates/index.tsx index 849a97bc..cbb8fd57 100644 --- a/src/Components/Templates/index.tsx +++ b/src/Components/Templates/index.tsx @@ -1,6 +1,9 @@ +import { AttestationForm } from './AttestationForm' + export {CardPage} from './CardPage' export {TitleCard} from './TitleCard' export {MapOverlayPage} from './MapOverlayPage' export {MoonCalendar} from './MoonCalendar' export {SelectUser} from "./SelectUser" export {OverlayItemsIndexPage} from "./OverlayItemsIndexPage" +export {AttestationForm} from "./AttestationForm" diff --git a/src/index.css b/src/index.css index 9fae544a..0790b43c 100644 --- a/src/index.css +++ b/src/index.css @@ -52,6 +52,10 @@ } +.placeholder-center::placeholder { + text-align: center; +} + .custom-file-upload { cursor: pointer; } diff --git a/src/index.tsx b/src/index.tsx index 0d260528..2137b4dc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,7 @@ export {AppShell, Content, SideBar, Sitemap } from "./Components/AppShell" export {AuthProvider, useAuth, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage} from "./Components/Auth" export {UserSettings, ProfileView, ProfileForm} from './Components/Profile' export {Quests, Modal} from './Components/Gaming' -export {TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, MoonCalendar, SelectUser } from './Components/Templates' +export {TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, MoonCalendar, SelectUser, AttestationForm } from './Components/Templates' export {TextInput, TextAreaInput, SelectBox} from './Components/Input' import "./index.css" diff --git a/tailwind.config.js b/tailwind.config.js index bb9428d9..a49dda38 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,25 @@ module.exports = { "./src/**/*.{js,jsx,ts,tsx}", "./node_modules/tw-elements/dist/js/**/*.js" ], + safelist: [ + 'tw-mask-squircle', + 'tw-mask-circle', + 'tw-mask-hexagon-2', + 'tw-mask-decagon', + 'tw-bg-[#FF99C8]', + 'tw-bg-[#fff0d6]', + 'tw-bg-[#FCF6BD]', + 'tw-bg-[#D0F4DE]', + 'tw-bg-[#A9DEF9]', + 'tw-bg-[#E4C1F9]', + 'tw-bg-[#de324c]', + 'tw-bg-[#f4895f]', + 'tw-bg-[#f8e16f]', + 'tw-bg-[#95cf92]', + 'tw-bg-[#369acc]', + 'tw-bg-[#9656a2]', + + ], theme: { extend: { zIndex: { @@ -31,7 +50,7 @@ module.exports = { 'sans': ["Helvetica", "sans-serif", 'Roboto'], }, fontSize: { - 'map': "13px" + 'map': "13px" }, lineHeight: { 'map': "1.4em" @@ -44,17 +63,18 @@ module.exports = { ], daisyui: { themes: ["light", "dark", "cupcake", "retro", "cyberpunk", "aqua", - { - docutopia: { - "primary": "#8e00ff", - "secondary": "#00bb7a", - "accent": "#006aff", - "neutral": "#231502", - "base-content": "#ffad6b", - "base-100": "#440844", - }, - },] + { + docutopia: { + "primary": "#8e00ff", + "secondary": "#00bb7a", + "accent": "#006aff", + "neutral": "#231502", + "base-content": "#ffad6b", + "base-100": "#440844", + }, + },] }, prefix: 'tw-', content: ['./src/**/*.{js,jsx,ts,tsx}'], -} + +} \ No newline at end of file From a5ccf7c6f19b5d24d2679fafc91b7c94579bf7f4 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Tue, 30 Jul 2024 18:14:59 +0200 Subject: [PATCH 04/20] removed unused imports --- src/Components/Templates/SelectUser.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx index 802a046f..c43d62bb 100644 --- a/src/Components/Templates/SelectUser.tsx +++ b/src/Components/Templates/SelectUser.tsx @@ -1,7 +1,4 @@ -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' @@ -55,14 +52,4 @@ export const SelectUser = ({ userType }: { userType: string }) => {
u,",")}>
) -} - -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" }, - -] +} \ No newline at end of file From 87f392e6e1c7bb2089a8cb12b16733bb3125ae35 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Tue, 30 Jul 2024 18:15:13 +0200 Subject: [PATCH 05/20] prepared attestation api --- src/Components/Templates/AttestationForm.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx index 1dc7226d..42f4b700 100644 --- a/src/Components/Templates/AttestationForm.tsx +++ b/src/Components/Templates/AttestationForm.tsx @@ -4,12 +4,11 @@ import { useItems } from '../Map/hooks/useItems' import { useAssetApi } from '../AppShell/hooks/useAssets' import { EmojiPicker } from './EmojiPicker'; import { Link } from 'react-router-dom'; -import { ColorPicker } from '../Profile/Subcomponents/ColorPicker'; import { useRef, useState } from 'react'; -import { Item, UserItem } from '../../types'; +import { Item, ItemsApi } from '../../types'; import { useEffect } from 'react'; -export const AttestationForm = () => { +export const AttestationForm = ({api}:{api:ItemsApi}) => { const items = useItems(); const assetsApi = useAssetApi(); @@ -35,6 +34,16 @@ export const AttestationForm = () => { setInputValue(event.target.value); }; + const sendAttestation = async () => { + api.createItem && api.createItem({ + text: inputValue, + symbol: "🔥", + color: "", + shape: "", + to: users + }) + } + From bc8b73451c6a1a760f721cdea6a8597994c3baf6 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 09:25:14 +0200 Subject: [PATCH 06/20] first working attestation prototype --- src/Components/Profile/ProfileView.tsx | 23 ++- src/Components/Profile/Templates/TabsView.tsx | 160 +++++++----------- src/Components/Templates/AttestationForm.tsx | 29 ++-- src/Components/Templates/EmojiPicker.tsx | 6 +- 4 files changed, 103 insertions(+), 115 deletions(-) diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx index dff33da6..36b369b7 100644 --- a/src/Components/Profile/ProfileView.tsx +++ b/src/Components/Profile/ProfileView.tsx @@ -2,7 +2,7 @@ import { MapOverlayPage } from '../Templates' import { useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems' import { useLocation, useNavigate } from 'react-router-dom' import { useEffect, useState } from 'react'; -import { Item, Tag } from '../../types'; +import { Item, ItemsApi, Tag } from '../../types'; import { useMap } from 'react-leaflet'; import { LatLng } from 'leaflet'; import { useHasUserPermission } from '../Map/hooks/usePermissions'; @@ -17,7 +17,7 @@ import { SimpleView } from './Templates/SimpleView'; import { handleDelete, linkItem, unlinkItem } from './itemFunctions'; import { useTags } from '../Map/hooks/useTags'; -export function ProfileView({ userType }: { userType: string }) { +export function ProfileView({ userType, attestationApi }: { userType: string , attestationApi?: ItemsApi}) { const [item, setItem] = useState({} as Item) const [updatePermission, setUpdatePermission] = useState(false); @@ -40,6 +40,23 @@ export function ProfileView({ userType }: { userType: string }) { const clusterRef = useClusterRef(); const leafletRefs = useLeafletRefs(); + const [attestations, setAttestations] = useState>([]); + + useEffect(() => { + if (attestationApi) { + attestationApi.getItems() + .then(value => { + console.log(value); + + setAttestations(value); + }) + .catch(error => { + console.error("Error fetching items:", error); + }); + } + }, [attestationApi]) + + useEffect(() => { const itemId = location.pathname.split("/")[2]; const item = items.find(i => i.id === itemId); @@ -140,7 +157,7 @@ export function ProfileView({ userType }: { userType: string }) { } {template == "tabs" && - linkItem(id, item, updateItem)} unlinkItem={(id) => unlinkItem(id, item, updateItem)}/> + linkItem(id, item, updateItem)} unlinkItem={(id) => unlinkItem(id, item, updateItem)}/> } diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index 3f939624..cea2ea31 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -6,8 +6,12 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { useAddFilterTag } from '../../Map/hooks/useFilter' import { Item, Tag } from 'utopia-ui/dist/types' import { useNavigate } from 'react-router-dom' +import { useItems } from '../../Map/hooks/useItems' +import { useAssetApi } from '../../AppShell/hooks/useAssets' +import { timeAgo } from '../../../Utils/TimeAgo' +import { useAuth } from '../../Auth' -export const TabsView = ({ item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem, setUrlParams }: { item: Item, offers: Array, needs: Array, relations: Array, updatePermission: boolean, loading: boolean, linkItem: (id: string) => Promise, unlinkItem: (id: string) => Promise , setUrlParams: any}) => { +export const TabsView = ({ attestations, userType, item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem, setUrlParams }: { attestations: Array, userType: string, item: Item, offers: Array, needs: Array, relations: Array, updatePermission: boolean, loading: boolean, linkItem: (id: string) => Promise, unlinkItem: (id: string) => Promise, setUrlParams: any }) => { const addFilterTag = useAddFilterTag(); const [activeTab, setActiveTab] = useState(); @@ -15,12 +19,20 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa const [addItemPopupType, setAddItemPopupType] = useState(""); + const items = useItems(); + const assetsApi = useAssetApi(); + const {user} = useAuth(); + + const getUserProfile = (id: string) => { + return items.find(i => i.user_created.id === id && i.layer?.itemType.name === userType) + } + useEffect(() => { - scroll(); + scroll(); }, [addItemPopupType]) - + function scroll() { - tabRef.current?.scrollIntoView(); + tabRef.current?.scrollIntoView(); } const tabRef = useRef(null); @@ -42,57 +54,6 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa setActiveTab(urlTab ? Number(urlTab) : 1); }, [location.search]); - 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" -}, -] - return (
- +
{item.layer?.itemType.questlog && - <> - updateActiveTab(2)} /> + <> + updateActiveTab(2)} /> -
- - - {attestations.map((a, i) => - - - - - - )} - -
-
{a.symbol}
- - 		-
{a.text}
- - 		-
-
-
- Avatar Tailwind CSS Component -
-
-
-
{a.from}
-
{a.date}
- -
-
-
+
+ + + {attestations.filter(a => a.to.some(t => t.directus_users_id == item.user_created.id)).map((a, i) => + + + + + + )} + +
+
+ {a.emoji}
- - } + + 		+
{a.text}
+ + 		+
+
+
+ Avatar Tailwind CSS Component +
+
+
+
{getUserProfile(a.user_created.id)?.name}
+
{timeAgo(a.date_created)}
+ +
+
+
+ +
+ + } {item.layer?.itemType.offers_and_needs && <> diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx index 42f4b700..3b080e58 100644 --- a/src/Components/Templates/AttestationForm.tsx +++ b/src/Components/Templates/AttestationForm.tsx @@ -3,16 +3,17 @@ import { MapOverlayPage } from './MapOverlayPage' import { useItems } from '../Map/hooks/useItems' import { useAssetApi } from '../AppShell/hooks/useAssets' import { EmojiPicker } from './EmojiPicker'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { useRef, useState } from 'react'; import { Item, ItemsApi } from '../../types'; import { useEffect } from 'react'; -export const AttestationForm = ({api}:{api:ItemsApi}) => { +export const AttestationForm = ({api}:{api?:ItemsApi}) => { const items = useItems(); const assetsApi = useAssetApi(); const [users, setUsers] = useState>(); + const navigate = useNavigate(); useEffect(() => { let params = new URLSearchParams(location.search); @@ -35,16 +36,22 @@ export const AttestationForm = ({api}:{api:ItemsApi}) => { }; const sendAttestation = async () => { - api.createItem && api.createItem({ + const to : Array = []; + users?.map(u => to.push({ directus_users_id: u.user_created.id })); + console.log(to); + + api?.createItem && api.createItem({ text: inputValue, - symbol: "🔥", - color: "", - shape: "", - to: users - }) + emoji: selectedEmoji, + color: selectedColor, + shape: selectedShape, + to: to + }).then(()=> navigate("/")) } - + const [selectedEmoji, setSelectedEmoji] = useState('select badge'); + const [selectedShape, setSelectedShape] = useState('circle'); + const [selectedColor, setSelectedColor] = useState('#fff0d6'); return ( @@ -70,7 +77,7 @@ export const AttestationForm = ({api}:{api:ItemsApi}) => {
- +
@@ -82,7 +89,7 @@ export const AttestationForm = ({api}:{api:ItemsApi}) => { className="tw-input tw-min-w-0 tw-w-fit tw-resize-none tw-overflow-hidden tw-text-center " />
-
+
) } \ No newline at end of file diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx index 841a5779..dcffc671 100644 --- a/src/Components/Templates/EmojiPicker.tsx +++ b/src/Components/Templates/EmojiPicker.tsx @@ -1,9 +1,7 @@ import { useState } from 'react'; -export const EmojiPicker = () => { - const [selectedEmoji, setSelectedEmoji] = useState('select badge'); - const [selectedShape, setSelectedShape] = useState('circle'); - const [selectedColor, setSelectedColor] = useState('#fff0d6'); +export const EmojiPicker = ({selectedEmoji, selectedColor, selectedShape, setSelectedEmoji, setSelectedColor, setSelectedShape}) => { + const [isOpen, setIsOpen] = useState(false); From 224b220b8bb5bb4dbe656157f1065f21767b2173 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 09:25:24 +0200 Subject: [PATCH 07/20] 3.0.0-alpha.250 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1d7b7e87..087204c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.249", + "version": "3.0.0-alpha.250", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.0-alpha.249", + "version": "3.0.0-alpha.250", "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index c0dc4869..03f15baf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.249", + "version": "3.0.0-alpha.250", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From 46a0361b929086da573b7c099db35d35b4d195b3 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 09:26:04 +0200 Subject: [PATCH 08/20] version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 03f15baf..66109cab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.250", + "version": "3.0.0-alpha.251", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From 1feb2dd1d5a5c3965e857aac102de7cb18069be8 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 09:26:06 +0200 Subject: [PATCH 09/20] 3.0.0-alpha.252 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 087204c6..98a868b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.250", + "version": "3.0.0-alpha.252", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.0-alpha.250", + "version": "3.0.0-alpha.252", "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index 66109cab..b5b9283b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.251", + "version": "3.0.0-alpha.252", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From 729a01c922d7524a2f03091de929eb0a7ab1233d Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 14:33:18 +0200 Subject: [PATCH 10/20] fix URL issue --- src/Components/Map/Layer.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index fed86283..f6b2d52d 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -81,7 +81,7 @@ export const Layer = ({ const isGroupTypeVisible = useIsGroupTypeVisible(); - const visibleGroupTypes = useVisibleGroupType(); + const visibleGroupTypes = useVisibleGroupType(); @@ -95,7 +95,9 @@ export const Layer = ({ const item = Object.entries(leafletRefs).find(r => r[1].popup == e.popup)?.[1].item; if (item?.layer?.name == name && window.location.pathname.split("/")[1] != item.id) { let params = new URLSearchParams(window.location.search); - window.history.pushState({}, "", `/${item.id}` + `${params.toString() !== "" ? `?${params}` : ""}`) + if (!location.pathname.includes("/item/")) { + window.history.pushState({}, "", `/${item.id}` + `${params.toString() !== "" ? `?${params}` : ""}`) + } let title = ""; if (item.name) title = item.name; else if (item.layer?.itemNameField) title = getValue(item, item.layer.itemNameField); @@ -151,7 +153,7 @@ export const Layer = ({ filter(item => filterTags.length == 0 ? item : filterTags.some(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?. filter(item => item.layer && isLayerVisible(item.layer)). - filter(item => item.group_type && isGroupTypeVisible(item.group_type)|| visibleGroupTypes.length == 0). + filter(item => item.group_type && isGroupTypeVisible(item.group_type) || visibleGroupTypes.length == 0). map((item: Item) => { if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) { @@ -186,7 +188,7 @@ export const Layer = ({ const longitude = itemLongitudeField && item ? getValue(item, itemLongitudeField) : undefined; let color1 = markerDefaultColor; - let color2 = markerDefaultColor2; + let color2 = markerDefaultColor2; if (itemColorField && getValue(item, itemColorField) != null) color1 = getValue(item, itemColorField); else if (itemTags && itemTags[0]) { color1 = itemTags[0].color; From f4b22f9361ccaafc0b9d49c8f23e58997176f88d Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 14:33:40 +0200 Subject: [PATCH 11/20] optimizing attestations --- .../Controls/GratitudeControl.tsx | 6 +- src/Components/Profile/Templates/TabsView.tsx | 76 +++++++++---------- src/Components/Templates/AttestationForm.tsx | 31 +++++--- src/Components/Templates/EmojiPicker.tsx | 2 +- 4 files changed, 66 insertions(+), 49 deletions(-) diff --git a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx index 158b9619..a8f7109b 100644 --- a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx @@ -1,8 +1,11 @@ import { useNavigate } from "react-router-dom" +import { useAuth } from "../../../Auth"; export const GratitudeControl = () => { const navigate = useNavigate(); - return ( + const {isAuthenticated} = useAuth(); + + if(isAuthenticated) return (
{ @@ -22,4 +25,5 @@ export const GratitudeControl = () => {
) + else return (<>); } diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index cea2ea31..accb7928 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -5,7 +5,7 @@ import { ActionButton } from '../Subcomponents/ActionsButton' import { useCallback, useEffect, useRef, useState } from 'react' import { useAddFilterTag } from '../../Map/hooks/useFilter' import { Item, Tag } from 'utopia-ui/dist/types' -import { useNavigate } from 'react-router-dom' +import { Link, useNavigate } from 'react-router-dom' import { useItems } from '../../Map/hooks/useItems' import { useAssetApi } from '../../AppShell/hooks/useAssets' import { timeAgo } from '../../../Utils/TimeAgo' @@ -21,7 +21,7 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation const items = useItems(); const assetsApi = useAssetApi(); - const {user} = useAuth(); + const { user } = useAuth(); const getUserProfile = (id: string) => { return items.find(i => i.user_created.id === id && i.layer?.itemType.name === userType) @@ -79,41 +79,41 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
- - {attestations.filter(a => a.to.some(t => t.directus_users_id == item.user_created.id)).map((a, i) => - - - - - - )} - + + {attestations + .filter(a => a.to.some(t => t.directus_users_id == item.user_created.id)) + .sort((a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime()) + .map((a, i) => ( + + + + + + ))} +
-
- {a.emoji} -
- - 		-
{a.text}
- - 		-
-
-
- Avatar Tailwind CSS Component -
-
-
-
{getUserProfile(a.user_created.id)?.name}
-
{timeAgo(a.date_created)}
- -
-
-
+
+ {a.emoji} +
+ 		+
{a.text}
+ 		+ +
+
+
+ Avatar Tailwind CSS Component +
+
+
+
{getUserProfile(a.user_created.id)?.name}
+
{timeAgo(a.date_created)}
+
+
+ +
@@ -123,7 +123,7 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation <> - updateActiveTab(3)} /> + updateActiveTab(3)} />
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx index 3b080e58..399eb9fc 100644 --- a/src/Components/Templates/AttestationForm.tsx +++ b/src/Components/Templates/AttestationForm.tsx @@ -7,6 +7,7 @@ import { Link, useNavigate } from 'react-router-dom'; import { useRef, useState } from 'react'; import { Item, ItemsApi } from '../../types'; import { useEffect } from 'react'; +import { toast } from 'react-toastify'; export const AttestationForm = ({api}:{api?:ItemsApi}) => { @@ -38,15 +39,27 @@ export const AttestationForm = ({api}:{api?:ItemsApi}) => { const sendAttestation = async () => { const to : Array = []; users?.map(u => to.push({ directus_users_id: u.user_created.id })); - console.log(to); - - api?.createItem && api.createItem({ - text: inputValue, - emoji: selectedEmoji, - color: selectedColor, - shape: selectedShape, - to: to - }).then(()=> navigate("/")) + + + api?.createItem && toast.promise( + api.createItem({ + text: inputValue, + emoji: selectedEmoji, + color: selectedColor, + shape: selectedShape, + to: to + }), { + pending: 'creating attestation ...', + success: 'Attestation created', + error: { + render({ data }) { + return `${data}` + }, + }, + }) + .then( () => navigate("/item/" + items.find(i => i.user_created.id===to[0].directus_users_id && i.layer?.itemType.name==="player")?.id+"?tab=2") + ) + } const [selectedEmoji, setSelectedEmoji] = useState('select badge'); diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx index dcffc671..4f7f7be5 100644 --- a/src/Components/Templates/EmojiPicker.tsx +++ b/src/Components/Templates/EmojiPicker.tsx @@ -12,7 +12,7 @@ export const EmojiPicker = ({selectedEmoji, selectedColor, selectedShape, setSel '📝', '✉️', '🧩','💡', '🎓', '💬', '🛠', '💻', '🕹', '🖨', '🚐', '🛒', '⚽️', '🧵', '👀', '🌱', - '🏕', '💪', '🎁', '🎉', + '🏕', '💪', '🎁', '🏹', '🥕', '🥇', '🥈', '🥉']; const shapes = ["squircle", "circle", "hexagon-2"]; From 13f016ea1692420b46e16be21cd93f26414aa0e2 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 14:34:00 +0200 Subject: [PATCH 12/20] 3.0.0-alpha.253 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 98a868b0..a9d10dc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.252", + "version": "3.0.0-alpha.253", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.0-alpha.252", + "version": "3.0.0-alpha.253", "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index b5b9283b..b893ca38 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.252", + "version": "3.0.0-alpha.253", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From ef74d60bfb28f2f9693c6465c7c6304dd4cd17ae Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 16:59:44 +0200 Subject: [PATCH 13/20] removed ununsed hook --- src/Components/Profile/Templates/TabsView.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index accb7928..0d36a064 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -21,8 +21,6 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation const items = useItems(); const assetsApi = useAssetApi(); - const { user } = useAuth(); - const getUserProfile = (id: string) => { return items.find(i => i.user_created.id === id && i.layer?.itemType.name === userType) } From 3372b30c57763d9fc573ca70e35e7cd9f8a16057 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 21:35:16 +0200 Subject: [PATCH 14/20] 3.0.0-alpha.258 --- package-lock.json | 5 ++--- package.json | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 25fd88d1..df7426d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,12 @@ { "name": "utopia-ui", - - "version": "3.0.0-alpha.257", + "version": "3.0.0-alpha.258", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.0-alpha.257", + "version": "3.0.0-alpha.258", "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index 46355494..e2ab14a0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.257", + "version": "3.0.0-alpha.258", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From 6e0775e1a2cb788d529be4bc074133f4489fbc23 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 21:51:30 +0200 Subject: [PATCH 15/20] fixed remove filter tag issue --- src/Components/Map/hooks/useFilter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Map/hooks/useFilter.tsx b/src/Components/Map/hooks/useFilter.tsx index 965c1efd..f70349ab 100644 --- a/src/Components/Map/hooks/useFilter.tsx +++ b/src/Components/Map/hooks/useFilter.tsx @@ -156,7 +156,7 @@ function useFilterManager(initialTags: Tag[]): { if(tags?.length==0 && urlTags?.length && urlTags?.length > 0) tags[0]=urlTags; tags?.map(urlTag => { if(!(urlTag.toLocaleLowerCase() === name.toLocaleLowerCase())) - newUrlTags = newUrlTags + `${newUrlTags===""? urlTag : `,${urlTag}`}` + newUrlTags = newUrlTags + `${newUrlTags===""? urlTag : `;${urlTag}`}` }); if(newUrlTags !== "") { params.set("tags", `${newUrlTags}`) From 280ab01515fcd3088c17121cdb9846a84c71ada1 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 21:51:34 +0200 Subject: [PATCH 16/20] 3.0.0-alpha.259 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index df7426d7..bc3db662 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.258", + "version": "3.0.0-alpha.259", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.0-alpha.258", + "version": "3.0.0-alpha.259", "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index e2ab14a0..caf2e19c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.258", + "version": "3.0.0-alpha.259", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From b98cc90983ecc4e89457f1d755a958ff32139d4f Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 21:53:47 +0200 Subject: [PATCH 17/20] added padding to search field --- src/Components/Map/Subcomponents/Controls/SearchControl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index f4d1e5d8..7c50a03f 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -98,7 +98,7 @@ export const SearchControl = () => {
{embedded && }
- setValue(e.target.value)} onFocus={() => { From db85f9574561e77d442a332a62fc4f2c3b931f6d Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Wed, 31 Jul 2024 21:54:07 +0200 Subject: [PATCH 18/20] 3.0.0-alpha.260 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc3db662..83992cbd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.259", + "version": "3.0.0-alpha.260", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.0-alpha.259", + "version": "3.0.0-alpha.260", "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index caf2e19c..8faf710d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.259", + "version": "3.0.0-alpha.260", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From 8228d4b9120dbd05ef6e11bd5bbdd04cc47dcf82 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Tue, 3 Sep 2024 15:40:52 +0200 Subject: [PATCH 19/20] 3.0.0-alpha.261 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 83992cbd..524c400b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.260", + "version": "3.0.0-alpha.261", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.0-alpha.260", + "version": "3.0.0-alpha.261", "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index 8faf710d..f939aba4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.0-alpha.260", + "version": "3.0.0-alpha.261", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", From 4de7b76ca8706d34ad268e4f5dc1edece8fd5d69 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Tue, 8 Oct 2024 08:27:49 +0200 Subject: [PATCH 20/20] removed unused imports --- src/Components/Map/UtopiaMap.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index 5f591346..016d4ba9 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -9,9 +9,8 @@ import AddButton from "./Subcomponents/AddButton"; import { useEffect, useState } from "react"; import { ItemFormPopupProps } from "./Subcomponents/ItemFormPopup"; import { SearchControl } from "./Subcomponents/Controls/SearchControl"; -// import { QuestControl } from "./Subcomponents/Controls/QuestControl"; import { Control } from "./Subcomponents/Controls/Control"; -import { Outlet, useLocation, useNavigate } from "react-router-dom"; +import { Outlet } from "react-router-dom"; import { TagsControl } from "./Subcomponents/Controls/TagsControl"; import { useSelectPosition, useSetMapClicked, useSetSelectPosition } from "./hooks/useSelectPosition"; import { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef";