mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
various changes and update to utopia-ui@3.0.0-alpha.39
This commit is contained in:
parent
dcfe3dfd0d
commit
9bc18f830c
@ -9,6 +9,7 @@
|
||||
<title>Utopia Game</title>
|
||||
<meta property="og:title" content="Utopia Game" />
|
||||
<meta property="og:description" content="Utopia is a cooperative real life manifestation game" />
|
||||
<meta property="og:image" content="/3markers-globe.svg" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
132
package-lock.json
generated
132
package-lock.json
generated
@ -8,13 +8,13 @@
|
||||
"name": "utopia-game",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@directus/sdk": "^11.0.3",
|
||||
"@directus/sdk": "^12.0.1",
|
||||
"@heroicons/react": "^2.0.17",
|
||||
"@types/geojson": "^7946.0.10",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"utopia-ui": "^3.0.0-alpha.27"
|
||||
"utopia-ui": "^3.0.0-alpha.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
@ -121,12 +121,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/generator": {
|
||||
"version": "7.21.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.5.tgz",
|
||||
"integrity": "sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==",
|
||||
"version": "7.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
|
||||
"integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.21.5",
|
||||
"@babel/types": "^7.23.0",
|
||||
"@jridgewell/gen-mapping": "^0.3.2",
|
||||
"@jridgewell/trace-mapping": "^0.3.17",
|
||||
"jsesc": "^2.5.1"
|
||||
@ -259,22 +259,22 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-environment-visitor": {
|
||||
"version": "7.22.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
|
||||
"integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
|
||||
"version": "7.22.20",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
|
||||
"integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-function-name": {
|
||||
"version": "7.22.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
|
||||
"integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
|
||||
"version": "7.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
|
||||
"integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/template": "^7.22.5",
|
||||
"@babel/types": "^7.22.5"
|
||||
"@babel/template": "^7.22.15",
|
||||
"@babel/types": "^7.23.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@ -436,9 +436,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-validator-identifier": {
|
||||
"version": "7.22.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
|
||||
"integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
|
||||
"version": "7.22.20",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
|
||||
"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@ -496,9 +496,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.22.14",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.14.tgz",
|
||||
"integrity": "sha512-1KucTHgOvaw/LzCVrEOAyXkr9rQlp0A1HiHRYnSUE9dmb8PvPW7o5sscg+5169r54n3vGlbx6GevTE/Iw/P3AQ==",
|
||||
"version": "7.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
|
||||
"integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
@ -1724,33 +1724,33 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/template": {
|
||||
"version": "7.22.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
|
||||
"integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
|
||||
"version": "7.22.15",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
|
||||
"integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.22.5",
|
||||
"@babel/parser": "^7.22.5",
|
||||
"@babel/types": "^7.22.5"
|
||||
"@babel/code-frame": "^7.22.13",
|
||||
"@babel/parser": "^7.22.15",
|
||||
"@babel/types": "^7.22.15"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/traverse": {
|
||||
"version": "7.21.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.5.tgz",
|
||||
"integrity": "sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==",
|
||||
"version": "7.23.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
|
||||
"integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.21.4",
|
||||
"@babel/generator": "^7.21.5",
|
||||
"@babel/helper-environment-visitor": "^7.21.5",
|
||||
"@babel/helper-function-name": "^7.21.0",
|
||||
"@babel/helper-hoist-variables": "^7.18.6",
|
||||
"@babel/helper-split-export-declaration": "^7.18.6",
|
||||
"@babel/parser": "^7.21.5",
|
||||
"@babel/types": "^7.21.5",
|
||||
"@babel/code-frame": "^7.22.13",
|
||||
"@babel/generator": "^7.23.0",
|
||||
"@babel/helper-environment-visitor": "^7.22.20",
|
||||
"@babel/helper-function-name": "^7.23.0",
|
||||
"@babel/helper-hoist-variables": "^7.22.5",
|
||||
"@babel/helper-split-export-declaration": "^7.22.6",
|
||||
"@babel/parser": "^7.23.0",
|
||||
"@babel/types": "^7.23.0",
|
||||
"debug": "^4.1.0",
|
||||
"globals": "^11.1.0"
|
||||
},
|
||||
@ -1759,13 +1759,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.22.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.11.tgz",
|
||||
"integrity": "sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==",
|
||||
"version": "7.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
|
||||
"integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.22.5",
|
||||
"@babel/helper-validator-identifier": "^7.22.5",
|
||||
"@babel/helper-validator-identifier": "^7.22.20",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
@ -1773,9 +1773,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@directus/sdk": {
|
||||
"version": "11.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@directus/sdk/-/sdk-11.0.3.tgz",
|
||||
"integrity": "sha512-fHvHFcDhl8AY5quRP4cgLMHTU6F4c4ynmMpXRsi8dnSd38mIvciFyYmOVOh34Wp2N+a1YNYpXPU+NsHkfIheHw==",
|
||||
"version": "12.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@directus/sdk/-/sdk-12.0.1.tgz",
|
||||
"integrity": "sha512-AOTOfoJpnaWxQnSRwZeyNZPju7AJgoifZ3jKNqKmZHdJHdKLrx9BTL5KXIL5vBUEpRsHGxecarsk2OH9L3pnlw==",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
@ -2400,9 +2400,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/offscreencanvas": {
|
||||
"version": "2019.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz",
|
||||
"integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ=="
|
||||
"version": "2019.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
|
||||
"integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.5",
|
||||
@ -5470,6 +5470,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-colorful": {
|
||||
"version": "5.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
|
||||
"integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
@ -5747,9 +5756,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.26.3",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz",
|
||||
"integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==",
|
||||
"version": "3.29.4",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
|
||||
"integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
@ -6336,9 +6345,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tw-elements": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0.tgz",
|
||||
"integrity": "sha512-pD2bA1bTGzvigU79dz4pGvO207CCOpzhwlxzb7hswx40SMMkJISOkoDxU2ot3OQ7LTZM5GwuLDkZ+dquK0wdYQ==",
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.1.0.tgz",
|
||||
"integrity": "sha512-IUr9YW2l99oTVZxuVjQg6rpuCpo6VZqbaKGYmZUNVVsoSVU/ljPpkJAY2Pn/morlXwKPhP9MTPNQMlWosqHL4w==",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.6.0",
|
||||
"chart.js": "^3.7.1",
|
||||
@ -6698,14 +6707,15 @@
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
|
||||
},
|
||||
"node_modules/utopia-ui": {
|
||||
"version": "3.0.0-alpha.27",
|
||||
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.27.tgz",
|
||||
"integrity": "sha512-RpCPXgGt55MTvwiqcnqU/r0KTcvnT74s86ziIxOHWrn/2BgXmgS9ikdjj2q1KAa+/9cFubWkibWhDSQoZL60zg==",
|
||||
"version": "3.0.0-alpha.39",
|
||||
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.39.tgz",
|
||||
"integrity": "sha512-O/uO/qGPjuFOL5VCzeeDyo09SXezAGZMtEP9XXHNSOwNxJcY0z7bjN0ECuhyjHgIKsEBo8lJ6y6VKWKEvpsu/Q==",
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.0.17",
|
||||
"@types/offscreencanvas": "^2019.7.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-image-crop": "^10.1.8",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-leaflet-cluster": "^2.1.0",
|
||||
@ -6721,14 +6731,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.4.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.4.tgz",
|
||||
"integrity": "sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==",
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
|
||||
"integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.18.10",
|
||||
"postcss": "^8.4.25",
|
||||
"rollup": "^3.25.2"
|
||||
"postcss": "^8.4.27",
|
||||
"rollup": "^3.27.1"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
|
||||
@ -10,13 +10,13 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@directus/sdk": "^11.0.3",
|
||||
"@directus/sdk": "^12.0.1",
|
||||
"@heroicons/react": "^2.0.17",
|
||||
"@types/geojson": "^7946.0.10",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"utopia-ui": "^3.0.0-alpha.27"
|
||||
"utopia-ui": "^3.0.0-alpha.39"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
|
||||
@ -8,6 +8,7 @@ import { userApi } from './api/userApi'
|
||||
import Projects from './pages/Projects'
|
||||
import { ProjectView } from './pages/ProjectView'
|
||||
import { assetsApi } from './api/assetsApi'
|
||||
import { ModalContent } from './ModalContent'
|
||||
|
||||
|
||||
|
||||
@ -19,7 +20,9 @@ function App() {
|
||||
|
||||
<AuthProvider userApi={new userApi}>
|
||||
<AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName="Utopia Game">
|
||||
<Modal/>
|
||||
<Modal>
|
||||
<ModalContent/>
|
||||
</Modal>
|
||||
<SideBar routes={routes} bottomRoutes={bottomRoutes}/>
|
||||
<Content>
|
||||
<Quests />
|
||||
|
||||
125
src/ModalContent.tsx
Normal file
125
src/ModalContent.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
type ChapterProps = {
|
||||
clickAction?: () => void
|
||||
}
|
||||
|
||||
|
||||
export function Welcome1({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg">Welcome, glad you are here!</h3>
|
||||
<img className="tw-float-right tw-w-32 tw-m-2" src="/earth.svg"></img>
|
||||
<p className="tw-py-3">
|
||||
In the 21st century, humanity is at a special point in its history.
|
||||
</p>
|
||||
<p className="tw-py-1">
|
||||
On the one hand, the people of Planet Earth are facing a multitude of fundamental crises.
|
||||
</p>
|
||||
<p className="tw-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>
|
||||
<div className="tw-modal-action">
|
||||
<label className="tw-btn" onClick={() => clickAction!()}>Next</label>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function Welcome2({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg"> Hypnosis and Disillusion </h3>
|
||||
|
||||
<p className="tw-py-3">
|
||||
Most people are still stuck in old ways of thinking and living. </p>
|
||||
<img className="tw-float-right tw-w-32 tw-mx-4 tw-my-2" src="/fear2.svg"></img>
|
||||
|
||||
<p className="tw-py-1">
|
||||
Hypnotised, they sit in front of screens in concrete blocks, flooded and disillusioned by irrelevant information.
|
||||
</p>
|
||||
|
||||
<p className="tw-py-1">
|
||||
From an early age, they are trained to do alienated work and consume unhealthy and meaningless products.
|
||||
</p>
|
||||
<div className="tw-modal-action">
|
||||
<label className="tw-btn" onClick={() => clickAction!()}>next</label>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function Welcome3({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg">But Consciousness is rising </h3>
|
||||
<p className="tw-py-3">
|
||||
More and more people are waking up to what's really happening. </p>
|
||||
<p className="tw-py-1">
|
||||
They are in the process of understanding the potential that is within themselves and within the whole mankind.
|
||||
</p>
|
||||
<img className="tw-float-left tw-w-32 tw-mx-4" src="/camp3.svg"></img>
|
||||
|
||||
<p className="tw-py-1">
|
||||
Starting to reconnect with our Mother Earth and beginning to question things that long times have been taken for granted.
|
||||
</p>
|
||||
<div className="tw-modal-action">
|
||||
<label className="tw-btn" onClick={() => clickAction!()}>next</label>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function Welcome4({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg"> Gemeinsam erschaffen wir Strukturen </h3>
|
||||
<ul className='tw-flex-row tw-pl-4 tw-mt-4'>
|
||||
<li>🥕 Essen & Trinken</li>
|
||||
<li>🏡 Wohn- & Lebensraum</li>
|
||||
<li>💬 Kommunikation</li>
|
||||
<li>💡 Energie</li>
|
||||
<li>🚐 Mobilität</li>
|
||||
</ul>
|
||||
<div className="tw-modal-action">
|
||||
<button className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Ich mach mit</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
window.my_modal_3.close();
|
||||
}
|
||||
|
||||
export const ModalContent = () => {
|
||||
|
||||
const [chapter, setChapter] = useState<number>(1);
|
||||
//const setQuestsOpen = useSetQuestOpen()
|
||||
|
||||
|
||||
|
||||
const ActiveChapter = () => {
|
||||
switch (chapter) {
|
||||
case 1:
|
||||
return <Welcome1 clickAction={() => { setChapter(2) }} />
|
||||
case 2:
|
||||
return <Welcome2 clickAction={() => { setChapter(3) }} />
|
||||
case 3:
|
||||
return <Welcome3 clickAction={() => {
|
||||
|
||||
close();
|
||||
setTimeout(() => {
|
||||
// setQuestsOpen(true);
|
||||
setChapter(1);
|
||||
}, 1000);
|
||||
|
||||
}} />
|
||||
default: return <></>
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<ActiveChapter/>
|
||||
)
|
||||
}
|
||||
@ -1,8 +1,6 @@
|
||||
import { createDirectus, rest, authentication, AuthenticationData, AuthenticationStorage } from '@directus/sdk';
|
||||
import { Point } from 'geojson'
|
||||
|
||||
|
||||
|
||||
export type Place = {
|
||||
id: string;
|
||||
name: string;
|
||||
@ -33,9 +31,27 @@ export type Place = {
|
||||
end: Date;
|
||||
};
|
||||
|
||||
export type Update = {
|
||||
id: string;
|
||||
text: string;
|
||||
position?: Point;
|
||||
user_created: string;
|
||||
date_created: string;
|
||||
}
|
||||
|
||||
type CustomUserFields = {
|
||||
position: Point;
|
||||
};
|
||||
|
||||
|
||||
export type MyCollections = {
|
||||
places: Place;
|
||||
events: Event;
|
||||
places: Place[];
|
||||
events: Event[];
|
||||
updates: Update[];
|
||||
tags: Tag[];
|
||||
projects: Project[];
|
||||
directus_users: CustomUserFields[];
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -64,7 +80,6 @@ export type Place = {
|
||||
}
|
||||
|
||||
export const directusClient = createDirectus<MyCollections>("https://api.utopia-lab.org/")
|
||||
.with(authentication())
|
||||
.with(rest())
|
||||
.with(authentication('json', { // add this if you want to use authentication, json is important, it's type of your authentication usage, here JWT
|
||||
storage: authLocalStorage(), // here set the storage previously created
|
||||
|
||||
@ -14,7 +14,7 @@ export class itemsApi<T> implements ItemsApi<T>{
|
||||
|
||||
async getItems() {
|
||||
try {
|
||||
return await directusClient.request(readItems(this.collectionName as never, { limit: 500 }));
|
||||
return await directusClient.request(readItems(this.collectionName as never, { fields: ['*', { user_created: ['*'] }], limit: 500 }));
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
if (error.errors[0]?.message)
|
||||
|
||||
53
src/api/updatesApi.ts
Normal file
53
src/api/updatesApi.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import { readItems,updateItem} from '@directus/sdk';
|
||||
import { directusClient } from './directus';
|
||||
import { Point } from 'geojson';
|
||||
|
||||
|
||||
export class updatesApi<T>{
|
||||
|
||||
collectionName: string;
|
||||
|
||||
constructor(collectionName: string) {
|
||||
this.collectionName = collectionName;
|
||||
}
|
||||
|
||||
async getItems() {
|
||||
try {
|
||||
return await directusClient.request(readItems("updates",{
|
||||
fields: ['*', { user_created: ['*'] }],
|
||||
}));
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
if (error.errors[0]?.message)
|
||||
throw error.errors[0].message;
|
||||
else throw error;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//setting geoposition
|
||||
async createItem(item: T & { id?: string, position?: Point }) {
|
||||
try {
|
||||
return await directusClient.request(updateItem("updates",item.id!,{position: item.position}))
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
if (error.errors[0]?.message)
|
||||
throw error.errors[0].message;
|
||||
else throw error;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//setting geoposition to null
|
||||
async deleteItem(id: string) {
|
||||
try {
|
||||
return await directusClient.request(updateItem("updates",id,{position: undefined}))
|
||||
} catch (error: any) {
|
||||
console.log(error);
|
||||
if (error.errors[0].message)
|
||||
throw error.errors[0].message;
|
||||
else throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, TextView, StartEndView, Permissions } from 'utopia-ui'
|
||||
import { itemsApi } from '../api/itemsApi'
|
||||
import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupTextInput, PopupStartEndInput, TextView, StartEndView, Permissions } from 'utopia-ui'
|
||||
import { itemsApi } from '../api/itemsApi';
|
||||
import { permissionsApi } from '../api/permissionsApi';
|
||||
import { Place, Event, Tag } from '../api/directus';
|
||||
import { useEffect, useState } from 'react';
|
||||
@ -11,6 +11,7 @@ function MapContainer() {
|
||||
const [eventsApi, setEventsApi] = useState<itemsApi<Event>>();
|
||||
const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>();
|
||||
const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>();
|
||||
const [updatesApiInstance, setUpdatesApiInstance] = useState<itemsApi<Place>>();
|
||||
|
||||
|
||||
|
||||
@ -21,15 +22,9 @@ function MapContainer() {
|
||||
setEventsApi(new itemsApi<Event>('events'));
|
||||
setTagsApi(new itemsApi<Tag>('tags'));
|
||||
setPermissionsApiInstance(new permissionsApi());
|
||||
|
||||
|
||||
|
||||
setUpdatesApiInstance(new itemsApi('updates'));
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<UtopiaMap zoom={5} height='calc(100dvh - 64px)' width="100%">
|
||||
@ -42,9 +37,9 @@ function MapContainer() {
|
||||
markerShape='square'
|
||||
markerDefaultColor='#777'
|
||||
// data={events}
|
||||
api={eventsApi}
|
||||
>
|
||||
api={eventsApi}>
|
||||
<ItemForm>
|
||||
<PopupTextInput dataField='name' placeholder='Name'></PopupTextInput>
|
||||
<PopupStartEndInput></PopupStartEndInput>
|
||||
<PopupTextAreaInput dataField='text' placeholder={'Test'} style="tw-h-40"></PopupTextAreaInput>
|
||||
</ItemForm>
|
||||
@ -52,7 +47,6 @@ function MapContainer() {
|
||||
<StartEndView></StartEndView>
|
||||
<TextView></TextView>
|
||||
</ItemView>
|
||||
|
||||
</Layer>
|
||||
<Layer
|
||||
name='places'
|
||||
@ -63,8 +57,27 @@ function MapContainer() {
|
||||
markerShape='circle'
|
||||
markerDefaultColor='#777'
|
||||
// data={places}
|
||||
api={placesApi}
|
||||
/>
|
||||
api={placesApi} />
|
||||
<Layer
|
||||
name='people'
|
||||
menuIcon='UserIcon'
|
||||
menuText='place your profile on the map'
|
||||
menuColor='#C62828'
|
||||
markerIcon='user'
|
||||
markerShape='square'
|
||||
markerDefaultColor='#777'
|
||||
itemTitleField='user_created.first_name'
|
||||
itemAvatarField='user_created.avatar'
|
||||
itemColorField='user_created.color'
|
||||
// data={places}
|
||||
api={updatesApiInstance}>
|
||||
<ItemView>
|
||||
<TextView></TextView>
|
||||
</ItemView>
|
||||
<ItemForm>
|
||||
<PopupTextAreaInput dataField='text' placeholder={'Test'} style="tw-h-40"></PopupTextAreaInput>
|
||||
</ItemForm>
|
||||
</Layer>
|
||||
<Tags api={tagsApi}></Tags>
|
||||
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
|
||||
</UtopiaMap>
|
||||
|
||||
42
src/pages/ProfileView.tsx
Normal file
42
src/pages/ProfileView.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { itemsApi } from "../api/itemsApi";
|
||||
import { Project } from '../api/directus'
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { CardPage } from "utopia-ui";
|
||||
|
||||
export const ProjectView = () => {
|
||||
|
||||
const [projectsApi, setProjectsApi] = useState<itemsApi<Project>>();
|
||||
const [project, setProject] = useState<Project>();
|
||||
|
||||
let location = useLocation();
|
||||
|
||||
|
||||
const loadProject = async () => {
|
||||
const project: unknown = await projectsApi?.getItem(location.pathname.split("/")[2]);
|
||||
setProject(project as Project);
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setProjectsApi(new itemsApi<Project>('projects'));
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadProject();
|
||||
}, [projectsApi])
|
||||
|
||||
return (
|
||||
<CardPage title={project?.name || ""} parent={{name: 'Projects',url: "/projects"}}>
|
||||
{project &&
|
||||
<>
|
||||
<img className='h-36' src={`https://api.utopia-lab.org/assets/${project?.picture} : ''}`}></img>
|
||||
<p className='font-bold text-sm mb-2 mt-2'>{project?.subname}</p>
|
||||
<p className='text-sm mb-2'>{project?.text}</p>
|
||||
</>
|
||||
|
||||
}
|
||||
|
||||
</CardPage>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { TitleCard, useAuth } from 'utopia-ui'
|
||||
import { TitleCard } from 'utopia-ui'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { itemsApi } from '../api/itemsApi'
|
||||
@ -16,7 +16,6 @@ export default function Projects() {
|
||||
const loadProjects = async () => {
|
||||
const projects = await projectsApi?.getItems();
|
||||
setProjects(projects as Project[]);
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@ -28,8 +27,6 @@ export default function Projects() {
|
||||
loadProjects();
|
||||
}, [projectsApi])
|
||||
|
||||
const {token,isAuthenticated} = useAuth();
|
||||
|
||||
return (
|
||||
<main className="flex-1 overflow-y-auto pt-2 px-6 bg-base-200 min-w-80 flex justify-center" >
|
||||
<div className=' w-full xl:max-w-6xl'>
|
||||
@ -56,7 +53,7 @@ const {token,isAuthenticated} = useAuth();
|
||||
return (
|
||||
<Link key={k} to={'/projects/' + i.id}>
|
||||
<TitleCard className={"!h-96"} title={i.name} topMargin={"mt-2"}>
|
||||
<img className='h-36' src={`https://api.utopia-lab.org/assets/${i.picture}${isAuthenticated ? `?access_token=${token}` : ''}`}></img>
|
||||
<img className='h-36' src={`https://api.utopia-lab.org/assets/${i.picture}`}></img>
|
||||
<p className='font-bold text-sm mb-2 mt-2'>{i.subname}</p>
|
||||
|
||||
<p className='text-sm mb-2'>{i.text}</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user