antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

init moos map

Browse Source
This commit is contained in:
Anton Tranelis 2024-03-23 13:16:05 +01:00
parent 94965a161c
commit 03a502812b
13 changed files with 173 additions and 1583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -1,10 +1,6 @@
*Cooperative Real Life Manifestation Game* This map is showing the moos ecosystem using the [Utopia-UI](https://github.com/utopia-os/utopia-ui) Components.
Its mission is to provide a transformative game. To connect with ourselves, with each other and with our dreams, to manifest them together. The current development status is live @ [moos-map.de](https://moos-map.de).
Utopia Game is using the [Utopia-UI](https://github.com/utopia-os/utopia-ui) Components.
The current development status is live @ [utopia-game.org](https://utopia-game.org).
## Getting Started ## Getting Started

12
index.html
View File

@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/utopia-dev.svg" /> <link rel="icon" type="image/png" href="/cofi1.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual" />
<meta name="description" content="This is the Development Environment for Utopia Map"> <meta name="description" content="Check out the Map of the Moos Ecosystem">
<title>Development</title> <title>Moos Ecosystem</title>
<meta property="og:title" content="Development" /> <meta property="og:title" content="Moos Ecosystem" />
<meta property="og:description" content="This is the Development Environment for Utopia Map" /> <meta property="og:description" content="Check out the Map of the Moos Ecosystem" />
<meta property="og:image" content="/3markers-globe_256.png" /> <meta property="og:image" content="/cofi1.png" />
</head> </head>
<body> <body>

1588
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -18,8 +18,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-rnd": "^10.4.1", "react-rnd": "^10.4.1",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2"
"utopia-ui": "^3.0.0-alpha.89"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.60", "@types/react": "^18.2.60",

BIN
public/cofi.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
public/cofi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
public/cofi1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

53
src/App.tsx
View File

@ -1,9 +1,8 @@
import { AppShell, SideBar, Content, AuthProvider, Modal, LoginPage, SignupPage, Quests, RequestPasswordPage, SetNewPasswordPage, OverlayProfile, OverlayProfileSettings, OverlayUserSettings, ItemsIndexPage, ItemViewPage } from 'utopia-ui' import { AppShell, SideBar, Content, AuthProvider, Modal, LoginPage, SignupPage, Quests, RequestPasswordPage, SetNewPasswordPage, OverlayProfile, OverlayProfileSettings, OverlayUserSettings, ItemsIndexPage, OverlayItemProfile, OverlayItemProfileSettings, Permissions, Tags } from 'utopia-ui'
import { bottomRoutes, routes } from './routes/sidebar' import { bottomRoutes, routes } from './routes/sidebar'
import { Route, Routes } from 'react-router-dom' import { Route, Routes } from 'react-router-dom'
import MapContainer from "./pages/MapContainer" import MapContainer from "./pages/MapContainer"
import './App.css' import './App.css'
import Concept from './pages/Concept'
import { userApi } from './api/userApi' import { userApi } from './api/userApi'
import { assetsApi } from './api/assetsApi' import { assetsApi } from './api/assetsApi'
import { ModalContent } from './ModalContent' import { ModalContent } from './ModalContent'
@ -11,16 +10,24 @@ import { Calendar } from './pages/Calendar'
import { MoonCalendar } from 'utopia-ui' import { MoonCalendar } from 'utopia-ui'
import { Landingpage } from './pages/Landingpage' import { Landingpage } from './pages/Landingpage'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Project } from './api/directus' import { Place, Project } from './api/directus'
import { itemsApi } from './api/itemsApi' import { itemsApi } from './api/itemsApi'
import { permissionsApi } from './api/permissionsApi'
import { Tag } from 'utopia-ui/dist/types'
function App() { function App() {
const [questsApi, setQuestsApi] = useState<itemsApi<Project>>(); const [projectsApi, setProjectsApi] = useState<itemsApi<Project>>();
const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>();
const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>();
useEffect(() => { useEffect(() => {
setQuestsApi(new itemsApi<Project>('quests',undefined, undefined, {"status":{"_eq": "published"}})); setProjectsApi(new itemsApi<Place>('items', undefined, undefined, { "type": { "_eq": "project" } }, { type: "project" }));
setPermissionsApiInstance(new permissionsApi());
setTagsApi(new itemsApi<Tag>('tags', undefined, "36fc9ba7-1a6b-4fc2-9db1-39d67aaf6918"));
}, []) }, [])
@ -29,29 +36,31 @@ function App() {
<div className="App overflow-x-hidden"> <div className="App overflow-x-hidden">
<AuthProvider userApi={new userApi}> <AuthProvider userApi={new userApi}>
<AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Development" nameWidth={220}> <AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Moos Ecosystem" nameWidth={220}>
<Modal> <Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
<ModalContent/> <Tags api={tagsApi}></Tags>
</Modal> <Modal>
<SideBar routes={routes} bottomRoutes={bottomRoutes}/> <ModalContent />
</Modal>
<SideBar routes={routes} bottomRoutes={bottomRoutes} />
<Content> <Content>
<Quests /> <Quests />
<Routes> <Routes>
<Route path="/*" element={<MapContainer />}> <Route path="/*" element={<MapContainer />}>
<Route path='login' element={<LoginPage />}/> <Route path='login' element={<LoginPage />} />
<Route path='signup' element={<SignupPage />}/> <Route path='signup' element={<SignupPage />} />
<Route path='reset-password' element={<RequestPasswordPage reset_url="https://dev.utopia-lab.org/set-new-password/"/>}/> <Route path='reset-password' element={<RequestPasswordPage reset_url="https://map.collaborative-finance.org/set-new-password/" />} />
<Route path='set-new-password' element={<SetNewPasswordPage />}/> <Route path='set-new-password' element={<SetNewPasswordPage />} />
<Route path="profile/*" element={<OverlayProfile/>} /> <Route path="profile/*" element={<OverlayProfile />} />
<Route path="profile-settings" element={<OverlayProfileSettings/>} /> <Route path="item/*" element={<OverlayItemProfile />} />
<Route path="edit-item/*" element={<OverlayItemProfileSettings />} />
<Route path="profile-settings" element={<OverlayProfileSettings />} />
<Route path="user-settings" element={<OverlayUserSettings />} /> <Route path="user-settings" element={<OverlayUserSettings />} />
<Route path="calendar" element={<Calendar/>} /> <Route path="calendar" element={<Calendar />} />
<Route path="moon-calendar" element={<MoonCalendar/>} /> <Route path="moon-calendar" element={<MoonCalendar />} />
<Route path="landingpage" element={<Landingpage/>} /> <Route path="landingpage" element={<Landingpage />} />
</Route> </Route>
<Route path="/concept" element={<Concept/>} /> <Route path="items" element={<ItemsIndexPage api={projectsApi!} breadcrumbs={[{ name: "Home", path: "/" }, { name: "Projects", path: "/items/" }]} itemNameField={'name'} itemTextField={'text'} itemImageField={'image'} url={'/item/'} parameterField={'id'} itemSymbolField={'symbol'}/>} />
<Route path="/quests" element={<ItemsIndexPage api={questsApi!} breadcrumbs={[{ name: "Home", path: "/" }, { name: "Quests", path: "/quests/" }]} itemNameField={'name'} itemTextField={'text'} itemImageField={'image'} url={'/quests/'} parameterField={'id'} itemSymbolField={'symbol'}/>} />
<Route path="/quests/*" element={<ItemViewPage api={questsApi!} parents={[{ name: "Quests", path: "/quests/" }]} itemNameField={'name'} itemTextField={'text'} itemImageField={'image'} itemSymbolField={'symbol'}/>} />
</Routes> </Routes>
</Content> </Content>
</AppShell> </AppShell>

16
src/ModalContent.tsx
View File

@ -8,18 +8,20 @@ type ChapterProps = {
export function Welcome1({ clickAction }: ChapterProps) { export function Welcome1({ clickAction }: ChapterProps) {
return ( return (
<> <>
<h3 className="font-bold text-lg">Welcome, glad you are here!</h3> <h3 className="font-bold text-lg">Welcome to the Collaboative Finance Map</h3>
<img className="float-right w-32 m-2" src="/earth.svg"></img> <img className="float-right w-32 m-2" src="/cofi1.png"></img>
<p className="py-3"> <p className="py-3">
In the 21st century, humanity is at a special point in its history. This map is a tool for connecting the movement and making projects, local initiatives, people and events visible.
</p> </p>
<p className="py-1"> <p className="py-1">
On the one hand, the people of Planet Earth are facing a multitude of fundamental crises. Help fill this map by adding projects and events to the map.
</p> </p>
<p className="py-1"> <p className="py-1">
On the other hand, we have all the knowledge and technology to heal the planet and live in harmony with Mother Earth. </p>
Sign up to create your personal profile and add it to the map.
</p>
<div className="grid"> <div className="grid">
<label className="btn place-self-end mt-4" onClick={() => clickAction!()}>Next</label> <label className="btn place-self-end mt-4" onClick={() => clickAction!()}>Close</label>
</div> </div>
</> </>
) )
@ -101,7 +103,7 @@ export const ModalContent = () => {
const ActiveChapter = () => { const ActiveChapter = () => {
switch (chapter) { switch (chapter) {
case 1: case 1:
return <Welcome1 clickAction={() => { setChapter(2) }} /> return <Welcome1 clickAction={() => { close(); }} />
case 2: case 2:
return <Welcome2 clickAction={() => { setChapter(3) }} /> return <Welcome2 clickAction={() => { setChapter(3) }} />
case 3: case 3:

10
src/api/itemsApi.ts
View File

@ -9,10 +9,11 @@ export class itemsApi<T> implements ItemsApi<T>{
collectionName: string; collectionName: string;
filter: any; filter: any;
layerId: string | undefined; layerId: string | undefined;
mapId: string | undefined; mapId: string | undefined;
customParameter: any
constructor(collectionName: string, layerId?: string | undefined, mapId?: string | undefined, filter?: any, ) { constructor(collectionName: string, layerId?: string | undefined, mapId?: string | undefined, filter?: any, customParameter?:any ) {
this.collectionName = collectionName; this.collectionName = collectionName;
if(filter) this.filter = filter; if(filter) this.filter = filter;
else this.filter = {}; else this.filter = {};
@ -24,11 +25,12 @@ export class itemsApi<T> implements ItemsApi<T>{
if(mapId) { if(mapId) {
this.filter = {... filter, ... { "map" : { "id": { "_eq": mapId }}}} this.filter = {... filter, ... { "map" : { "id": { "_eq": mapId }}}}
} }
if(customParameter) this.customParameter = customParameter;
} }
async getItems() { async getItems() {
try { try {
return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', { user_created: ['*', {offers: ['*'], needs: ['*']}] }], filter: this.filter, limit: 500 })); return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', "relations.*", { user_created: ['*', {offers: ['*'], needs: ['*']}] }], filter: this.filter, limit: 500 }));
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
if (error.errors[0]?.message) if (error.errors[0]?.message)
@ -50,7 +52,7 @@ export class itemsApi<T> implements ItemsApi<T>{
async createItem(item: T & { id?: string }) { async createItem(item: T & { id?: string }) {
try { try {
return await directusClient.request(createItem(this.collectionName as keyof MyCollections, {...item, ...(this.layerId && {layer: this.layerId}), ...(this.layerId && {layer: this.layerId}), ...(this.mapId && {map: this.mapId})})) return await directusClient.request(createItem(this.collectionName as keyof MyCollections, {...item, ...(this.customParameter && this.customParameter), ...(this.layerId && {layer: this.layerId}), ...(this.layerId && {layer: this.layerId}), ...(this.mapId && {map: this.mapId})}))
} catch (error: any) { } catch (error: any) {
console.log(error); console.log(error);
if (error.errors[0]?.message) if (error.errors[0]?.message)

46
src/pages/MapContainer.tsx
View File

@ -1,32 +1,25 @@
import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupTextInput, PopupStartEndInput, TextView, StartEndView, Permissions, PopupButton } from 'utopia-ui' import { UtopiaMap, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupTextInput, PopupStartEndInput, TextView, StartEndView, PopupButton } from 'utopia-ui'
import { itemsApi } from '../api/itemsApi'; import { itemsApi } from '../api/itemsApi';
import { permissionsApi } from '../api/permissionsApi'; import { Place, Event } from '../api/directus';
import { Place, Event, Tag } from '../api/directus';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import {CalendarDaysIcon, MapPinIcon, UserIcon} from '@heroicons/react/20/solid' import { CalendarDaysIcon, MapPinIcon, UserIcon } from '@heroicons/react/20/solid'
import { refiBcnApi } from '../api/refiBcnApi';
function MapContainer() { function MapContainer() {
const [placesApi, setPlacesApi] = useState<itemsApi<Place>>(); const [placesApi, setPlacesApi] = useState<itemsApi<Place>>();
const [eventsApi, setEventsApi] = useState<itemsApi<Event>>(); const [eventsApi, setEventsApi] = useState<itemsApi<Event>>();
const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>();
const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>();
const [updatesApiInstance, setUpdatesApiInstance] = useState<itemsApi<Place>>(); const [updatesApiInstance, setUpdatesApiInstance] = useState<itemsApi<Place>>();
const [refiApi, setRefiApi] = useState<refiBcnApi>();
useEffect(() => { useEffect(() => {
setPlacesApi(new itemsApi<Place>('places',"e31de961-6709-4413-a27d-00e59ccfe472")); setPlacesApi(new itemsApi<Place>('items', undefined, undefined, {"type":{"_eq":"project"}}, {type: "project"}));
setEventsApi(new itemsApi<Event>('events', "1837e83e-07f1-44c0-88c0-8e9ea8e597db")); setEventsApi(new itemsApi<Event>('items', undefined, undefined, {"type":{"_eq":"event"}}, {type: "event"}));
setUpdatesApiInstance(new itemsApi('updates',"b4dd8b6b-80e8-4173-9682-4a5755e7b9cb", undefined, {"latest":{"_eq": true}})); setUpdatesApiInstance(new itemsApi('updates', "d2e5c850-74db-4789-910b-79d6784ad265", undefined, { "latest": { "_eq": true } }));
setTagsApi(new itemsApi<Tag>('tags', undefined, "8bf681a4-1b8d-44ba-afba-c6dbf79a769f"));
setPermissionsApiInstance(new permissionsApi());
setRefiApi(new refiBcnApi('refi'));
}, []); }, []);
@ -36,7 +29,7 @@ function MapContainer() {
return ( return (
<UtopiaMap zoom={5} height='calc(100dvh - 64px)' width="100%"> <UtopiaMap zoom={12} height='calc(100dvh - 64px)' width="100%" center={[52.49, 13.46]}>
<Layer <Layer
name='Events' name='Events'
menuIcon={icon} menuIcon={icon}
@ -44,7 +37,8 @@ function MapContainer() {
menuColor='#f9a825' menuColor='#f9a825'
markerIcon='calendar-days-solid' markerIcon='calendar-days-solid'
markerShape='square' markerShape='square'
markerDefaultColor='#818583' markerDefaultColor='#3D3846'
itemAvatarField='image'
// data={events} // data={events}
api={eventsApi}> api={eventsApi}>
<ItemForm> <ItemForm>
@ -58,15 +52,23 @@ function MapContainer() {
</ItemView> </ItemView>
</Layer> </Layer>
<Layer <Layer
name='Places' name='Projects'
menuIcon={MapPinIcon} menuIcon={MapPinIcon}
menuText='add new place' menuText='add new place'
menuColor='#2E7D32' menuColor='#2E7D32'
markerIcon='circle-solid' markerIcon='circle-solid'
markerShape='circle' markerShape='circle'
markerDefaultColor='#818583' markerDefaultColor='#3D3846'
itemAvatarField='image'
itemColorField='color'
itemOwnerField='user_created'
// data={places} // data={places}
api={placesApi} /> api={placesApi}>
<ItemView>
<PopupButton url={'/item'} parameterField={'id'} text={'Profile'} colorField={'color'} />
<TextView truncate></TextView>
</ItemView>
</Layer>
<Layer <Layer
name='People' name='People'
menuIcon={UserIcon} menuIcon={UserIcon}
@ -92,14 +94,10 @@ function MapContainer() {
</ItemView> </ItemView>
<ItemForm title='Place yor Profile'> <ItemForm title='Place yor Profile'>
<div className='flex justify-center'> <div className='flex justify-center'>
<p>Press Save to place your Profile to the Map</p> <p>Press Save to place your Profile to the Map</p>
</div> </div>
</ItemForm> </ItemForm>
</Layer> </Layer>
<Layer name='ReFi-BCN' menuIcon={MapPinIcon} menuText='add new place' menuColor='#2E7D32' markerIcon='circle-solid' markerShape='circle' markerDefaultColor='#818583' itemTextField='description' itemLatitudeField='geolocation.lat' itemLongitudeField='geolocation.lon' api={refiApi}> </Layer>
<Tags api={tagsApi}></Tags>
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
</UtopiaMap> </UtopiaMap>
) )
} }

0
src/pages/setItemLocation.tsx Normal file
View File

16
src/routes/sidebar.tsx
View File

@ -1,5 +1,6 @@
import { BookOpenIcon, CheckBadgeIcon, MapIcon } from '@heroicons/react/24/outline' import { RectangleGroupIcon } from '@heroicons/react/24/outline'
import { MapIcon } from '@heroicons/react/24/outline'
//const iconClasses = `h-6 w-6` //const iconClasses = `h-6 w-6`
//const submenuIconClasses = `h-5 w-5` //const submenuIconClasses = `h-5 w-5`
@ -12,9 +13,9 @@ export const routes = [
name: 'Map', name: 'Map',
}, },
{ {
path: '/quests', // url path: '/items', // url
icon: <CheckBadgeIcon style={{width: 24 }}/>, // icon component icon: <RectangleGroupIcon style={{width: 24 }}/>, // icon component
name: 'Quests', // name that appear in Sidebar name: 'Projects', // name that appear in Sidebar
}/** }/**
{ {
path: '/people', // url path: '/people', // url
@ -55,12 +56,7 @@ export const bottomRoutes = [
{ {
path: '/concept', // url path: 'https://github.com/utopia-os/utopia-ui', // url
icon: <BookOpenIcon style={{width: 24 }}/>, // icon component
name: 'Concept', // name that appear in Sidebar
},
{
path: 'https://github.com/utopia-os/utopia-game', // url
icon: <svg viewBox="0 0 24 24" aria-hidden="true" className="tw-h-6 tw-w-6" stroke="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"></path></svg>, icon: <svg viewBox="0 0 24 24" aria-hidden="true" className="tw-h-6 tw-w-6" stroke="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"></path></svg>,
name: 'Github', // name that appear in Sidebar name: 'Github', // name that appear in Sidebar
blank: true blank: true