mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
init moos map
This commit is contained in:
parent
94965a161c
commit
03a502812b
@ -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.
|
||||
|
||||
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).
|
||||
The current development status is live @ [moos-map.de](https://moos-map.de).
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
12
index.html
12
index.html
@ -3,13 +3,13 @@
|
||||
|
||||
<head>
|
||||
<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="description" content="This is the Development Environment for Utopia Map">
|
||||
<title>Development</title>
|
||||
<meta property="og:title" content="Development" />
|
||||
<meta property="og:description" content="This is the Development Environment for Utopia Map" />
|
||||
<meta property="og:image" content="/3markers-globe_256.png" />
|
||||
<meta name="description" content="Check out the Map of the Moos Ecosystem">
|
||||
<title>Moos Ecosystem</title>
|
||||
<meta property="og:title" content="Moos Ecosystem" />
|
||||
<meta property="og:description" content="Check out the Map of the Moos Ecosystem" />
|
||||
<meta property="og:image" content="/cofi1.png" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
1588
package-lock.json
generated
1588
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,8 +18,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-rnd": "^10.4.1",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"utopia-ui": "^3.0.0-alpha.89"
|
||||
"react-router-dom": "^6.11.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.60",
|
||||
|
||||
BIN
public/cofi.jpg
Normal file
BIN
public/cofi.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
public/cofi.png
Normal file
BIN
public/cofi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
public/cofi1.png
Normal file
BIN
public/cofi1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
55
src/App.tsx
55
src/App.tsx
@ -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 { Route, Routes } from 'react-router-dom'
|
||||
import MapContainer from "./pages/MapContainer"
|
||||
import './App.css'
|
||||
import Concept from './pages/Concept'
|
||||
import { userApi } from './api/userApi'
|
||||
import { assetsApi } from './api/assetsApi'
|
||||
import { ModalContent } from './ModalContent'
|
||||
@ -11,16 +10,24 @@ import { Calendar } from './pages/Calendar'
|
||||
import { MoonCalendar } from 'utopia-ui'
|
||||
import { Landingpage } from './pages/Landingpage'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Project } from './api/directus'
|
||||
import { Place, Project } from './api/directus'
|
||||
import { itemsApi } from './api/itemsApi'
|
||||
import { permissionsApi } from './api/permissionsApi'
|
||||
import { Tag } from 'utopia-ui/dist/types'
|
||||
|
||||
|
||||
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(() => {
|
||||
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">
|
||||
|
||||
<AuthProvider userApi={new userApi}>
|
||||
<AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Development" nameWidth={220}>
|
||||
<Modal>
|
||||
<ModalContent/>
|
||||
</Modal>
|
||||
<SideBar routes={routes} bottomRoutes={bottomRoutes}/>
|
||||
<AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Moos Ecosystem" nameWidth={220}>
|
||||
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
|
||||
<Tags api={tagsApi}></Tags>
|
||||
<Modal>
|
||||
<ModalContent />
|
||||
</Modal>
|
||||
<SideBar routes={routes} bottomRoutes={bottomRoutes} />
|
||||
<Content>
|
||||
<Quests />
|
||||
<Quests />
|
||||
<Routes>
|
||||
<Route path="/*" element={<MapContainer />}>
|
||||
<Route path='login' element={<LoginPage />}/>
|
||||
<Route path='signup' element={<SignupPage />}/>
|
||||
<Route path='reset-password' element={<RequestPasswordPage reset_url="https://dev.utopia-lab.org/set-new-password/"/>}/>
|
||||
<Route path='set-new-password' element={<SetNewPasswordPage />}/>
|
||||
<Route path="profile/*" element={<OverlayProfile/>} />
|
||||
<Route path="profile-settings" element={<OverlayProfileSettings/>} />
|
||||
<Route path='login' element={<LoginPage />} />
|
||||
<Route path='signup' element={<SignupPage />} />
|
||||
<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="profile/*" element={<OverlayProfile />} />
|
||||
<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="calendar" element={<Calendar/>} />
|
||||
<Route path="moon-calendar" element={<MoonCalendar/>} />
|
||||
<Route path="landingpage" element={<Landingpage/>} />
|
||||
<Route path="calendar" element={<Calendar />} />
|
||||
<Route path="moon-calendar" element={<MoonCalendar />} />
|
||||
<Route path="landingpage" element={<Landingpage />} />
|
||||
</Route>
|
||||
<Route path="/concept" element={<Concept/>} />
|
||||
<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'}/>} />
|
||||
<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'}/>} />
|
||||
</Routes>
|
||||
</Content>
|
||||
</AppShell>
|
||||
|
||||
@ -8,18 +8,20 @@ type ChapterProps = {
|
||||
export function Welcome1({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="font-bold text-lg">Welcome, glad you are here!</h3>
|
||||
<img className="float-right w-32 m-2" src="/earth.svg"></img>
|
||||
<h3 className="font-bold text-lg">Welcome to the Collaboative Finance Map</h3>
|
||||
<img className="float-right w-32 m-2" src="/cofi1.png"></img>
|
||||
<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 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 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">
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
@ -101,7 +103,7 @@ export const ModalContent = () => {
|
||||
const ActiveChapter = () => {
|
||||
switch (chapter) {
|
||||
case 1:
|
||||
return <Welcome1 clickAction={() => { setChapter(2) }} />
|
||||
return <Welcome1 clickAction={() => { close(); }} />
|
||||
case 2:
|
||||
return <Welcome2 clickAction={() => { setChapter(3) }} />
|
||||
case 3:
|
||||
|
||||
@ -9,10 +9,11 @@ export class itemsApi<T> implements ItemsApi<T>{
|
||||
collectionName: string;
|
||||
filter: any;
|
||||
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;
|
||||
if(filter) this.filter = filter;
|
||||
else this.filter = {};
|
||||
@ -23,12 +24,13 @@ export class itemsApi<T> implements ItemsApi<T>{
|
||||
this.mapId = mapId;
|
||||
if(mapId) {
|
||||
this.filter = {... filter, ... { "map" : { "id": { "_eq": mapId }}}}
|
||||
}
|
||||
}
|
||||
if(customParameter) this.customParameter = customParameter;
|
||||
}
|
||||
|
||||
async getItems() {
|
||||
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) {
|
||||
console.log(error);
|
||||
if (error.errors[0]?.message)
|
||||
@ -50,7 +52,7 @@ export class itemsApi<T> implements ItemsApi<T>{
|
||||
|
||||
async createItem(item: T & { id?: string }) {
|
||||
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) {
|
||||
console.log(error);
|
||||
if (error.errors[0]?.message)
|
||||
|
||||
@ -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 { permissionsApi } from '../api/permissionsApi';
|
||||
import { Place, Event, Tag } from '../api/directus';
|
||||
import { Place, Event } from '../api/directus';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {CalendarDaysIcon, MapPinIcon, UserIcon} from '@heroicons/react/20/solid'
|
||||
import { refiBcnApi } from '../api/refiBcnApi';
|
||||
import { CalendarDaysIcon, MapPinIcon, UserIcon } from '@heroicons/react/20/solid'
|
||||
|
||||
function MapContainer() {
|
||||
|
||||
|
||||
const [placesApi, setPlacesApi] = useState<itemsApi<Place>>();
|
||||
const [eventsApi, setEventsApi] = useState<itemsApi<Event>>();
|
||||
const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>();
|
||||
const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>();
|
||||
const [updatesApiInstance, setUpdatesApiInstance] = useState<itemsApi<Place>>();
|
||||
const [refiApi, setRefiApi] = useState<refiBcnApi>();
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
setPlacesApi(new itemsApi<Place>('places',"e31de961-6709-4413-a27d-00e59ccfe472"));
|
||||
setEventsApi(new itemsApi<Event>('events', "1837e83e-07f1-44c0-88c0-8e9ea8e597db"));
|
||||
setUpdatesApiInstance(new itemsApi('updates',"b4dd8b6b-80e8-4173-9682-4a5755e7b9cb", undefined, {"latest":{"_eq": true}}));
|
||||
setTagsApi(new itemsApi<Tag>('tags', undefined, "8bf681a4-1b8d-44ba-afba-c6dbf79a769f"));
|
||||
setPermissionsApiInstance(new permissionsApi());
|
||||
setRefiApi(new refiBcnApi('refi'));
|
||||
setPlacesApi(new itemsApi<Place>('items', undefined, undefined, {"type":{"_eq":"project"}}, {type: "project"}));
|
||||
setEventsApi(new itemsApi<Event>('items', undefined, undefined, {"type":{"_eq":"event"}}, {type: "event"}));
|
||||
setUpdatesApiInstance(new itemsApi('updates', "d2e5c850-74db-4789-910b-79d6784ad265", undefined, { "latest": { "_eq": true } }));
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
@ -36,7 +29,7 @@ function MapContainer() {
|
||||
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
|
||||
name='Events'
|
||||
menuIcon={icon}
|
||||
@ -44,7 +37,8 @@ function MapContainer() {
|
||||
menuColor='#f9a825'
|
||||
markerIcon='calendar-days-solid'
|
||||
markerShape='square'
|
||||
markerDefaultColor='#818583'
|
||||
markerDefaultColor='#3D3846'
|
||||
itemAvatarField='image'
|
||||
// data={events}
|
||||
api={eventsApi}>
|
||||
<ItemForm>
|
||||
@ -58,15 +52,23 @@ function MapContainer() {
|
||||
</ItemView>
|
||||
</Layer>
|
||||
<Layer
|
||||
name='Places'
|
||||
name='Projects'
|
||||
menuIcon={MapPinIcon}
|
||||
menuText='add new place'
|
||||
menuColor='#2E7D32'
|
||||
markerIcon='circle-solid'
|
||||
markerShape='circle'
|
||||
markerDefaultColor='#818583'
|
||||
markerDefaultColor='#3D3846'
|
||||
itemAvatarField='image'
|
||||
itemColorField='color'
|
||||
itemOwnerField='user_created'
|
||||
// data={places}
|
||||
api={placesApi} />
|
||||
api={placesApi}>
|
||||
<ItemView>
|
||||
<PopupButton url={'/item'} parameterField={'id'} text={'Profile'} colorField={'color'} />
|
||||
<TextView truncate></TextView>
|
||||
</ItemView>
|
||||
</Layer>
|
||||
<Layer
|
||||
name='People'
|
||||
menuIcon={UserIcon}
|
||||
@ -92,14 +94,10 @@ function MapContainer() {
|
||||
</ItemView>
|
||||
<ItemForm title='Place yor Profile'>
|
||||
<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>
|
||||
</ItemForm>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
0
src/pages/setItemLocation.tsx
Normal file
0
src/pages/setItemLocation.tsx
Normal 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 submenuIconClasses = `h-5 w-5`
|
||||
@ -12,9 +13,9 @@ export const routes = [
|
||||
name: 'Map',
|
||||
},
|
||||
{
|
||||
path: '/quests', // url
|
||||
icon: <CheckBadgeIcon style={{width: 24 }}/>, // icon component
|
||||
name: 'Quests', // name that appear in Sidebar
|
||||
path: '/items', // url
|
||||
icon: <RectangleGroupIcon style={{width: 24 }}/>, // icon component
|
||||
name: 'Projects', // name that appear in Sidebar
|
||||
}/**
|
||||
{
|
||||
path: '/people', // url
|
||||
@ -55,12 +56,7 @@ export const bottomRoutes = [
|
||||
|
||||
|
||||
{
|
||||
path: '/concept', // url
|
||||
icon: <BookOpenIcon style={{width: 24 }}/>, // icon component
|
||||
name: 'Concept', // name that appear in Sidebar
|
||||
},
|
||||
{
|
||||
path: 'https://github.com/utopia-os/utopia-game', // url
|
||||
path: 'https://github.com/utopia-os/utopia-ui', // 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>,
|
||||
name: 'Github', // name that appear in Sidebar
|
||||
blank: true
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user