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

Merge pull request #1 from utopia-os/wuerdekompass

Browse Source 
Wuerdekompass
This commit is contained in:
antontranelis 2024-07-16 14:56:58 +02:00 committed by GitHub
commit b8e1a56fa8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
package-lock.json generated
View File

@ -17,7 +17,7 @@
"react-dom": "^18.2.0",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.23.0",
"utopia-ui": "^3.0.0-alpha.178"
"utopia-ui": "^3.0.0-alpha.196"
},
"devDependencies": {
"@types/react": "^18.2.79",
@ -1969,20 +1969,20 @@
}
},
"node_modules/@tanstack/query-core": {
"version": "5.45.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.45.0.tgz",
"integrity": "sha512-RVfIZQmFUTdjhSAAblvueimfngYyfN6HlwaJUPK71PKd7yi43Vs1S/rdimmZedPWX/WGppcq/U1HOj7O7FwYxw==",
"version": "5.51.1",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.1.tgz",
"integrity": "sha512-fJBMQMpo8/KSsWW5ratJR5+IFr7YNJ3K2kfP9l5XObYHsgfVy1w3FJUWU4FT2fj7+JMaEg33zOcNDBo0LMwHnw==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/react-query": {
"version": "5.45.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.45.1.tgz",
"integrity": "sha512-mYYfJujKg2kxmkRRjA6nn4YKG3ITsKuH22f1kteJ5IuVQqgKUgbaSQfYwVP0gBS05mhwxO03HVpD0t7BMN7WOA==",
"version": "5.51.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.1.tgz",
"integrity": "sha512-s47HKFnQ4HOJAHoIiXcpna/roMMPZJPy6fJ6p4ZNVn8+/onlLBEDd1+xc8OnDuwgvecqkZD7Z2mnSRbcWefrKw==",
"dependencies": {
"@tanstack/query-core": "5.45.0"
"@tanstack/query-core": "5.51.1"
},
"funding": {
"type": "github",
@ -2646,7 +2646,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001540",
"version": "1.0.30001640",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
"integrity": "sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==",
"dev": true,
"funding": [
{
@ -2661,8 +2663,7 @@
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "CC-BY-4.0"
]
},
"node_modules/ccount": {
"version": "2.0.1",
@ -7086,9 +7087,9 @@
}
},
"node_modules/unified": {
"version": "11.0.4",
"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
"integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
"integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
"dependencies": {
"@types/unist": "^3.0.0",
"bail": "^2.0.0",
@ -7249,9 +7250,9 @@
"license": "MIT"
},
"node_modules/utopia-ui": {
"version": "3.0.0-alpha.178",
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.178.tgz",
"integrity": "sha512-Xn4ESlLiarr9vEUVdgY+G6DyaeKYbcygDo6bicYQBg59qhRVJrU1GQnsUOogNgKZAVTzAtuWULL+rtUnBlzwkQ==",
"version": "3.0.0-alpha.196",
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.196.tgz",
"integrity": "sha512-uge0s81XXqEJX7QMuCuyAYyMjVaihCJF3EM3AhqzaYTmoTxYjmrH17n2jUciWyqHjkfjyn+5EMl7fOT2LdatUA==",
"dependencies": {
"@heroicons/react": "^2.0.17",
"@tanstack/react-query": "^5.17.8",
@ -7279,9 +7280,9 @@
}
},
"node_modules/vfile": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
"integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.2.tgz",
"integrity": "sha512-zND7NlS8rJYb/sPqkb13ZvbbUoExdbi4w3SfRrMq6R3FvnLQmmfpajJNITuuYm6AZ5uao9vy4BAos3EXBPf2rg==",
"dependencies": {
"@types/unist": "^3.0.0",
"unist-util-stringify-position": "^4.0.0",

2
package.json
View File

@ -19,7 +19,7 @@
"react-dom": "^18.2.0",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.23.0",
"utopia-ui": "^3.0.0-alpha.178"
"utopia-ui": "^3.0.0-alpha.196"
},
"devDependencies": {
"@types/react": "^18.2.79",

18
src/App.tsx
View File

@ -1,5 +1,5 @@
import { AppShell, SideBar, Content, AuthProvider, Modal, LoginPage, SignupPage, Quests, RequestPasswordPage, SetNewPasswordPage, OverlayProfile, OverlayProfileSettings, OverlayUserSettings, OverlayItemsIndexPage, OverlayItemProfile, OverlayItemProfileSettings, Permissions, Tags } from 'utopia-ui'
import { bottomRoutes, routes } from './routes/sidebar'
import { AppShell, SideBar, Content, AuthProvider, Modal, LoginPage, SignupPage, Quests, RequestPasswordPage, SetNewPasswordPage, OverlayUserSettings, OverlayItemsIndexPage, OverlayItemProfile, OverlayItemProfileSettings, Permissions, Tags } from 'utopia-ui'
import { getBottomRoutes, routes } from './routes/sidebar'
import { Route, Routes } from 'react-router-dom'
import MapContainer from "./pages/MapContainer"
import './App.css'
@ -15,7 +15,6 @@ import { Tag } from 'utopia-ui/dist/types'
import { mapApi } from './api/mapApi'
import { layersApi } from './api/layersApi'
function App() {
@ -54,7 +53,7 @@ function App() {
const getLayers = async () => {
const layers = await layersApiInstance?.getItems();
layers && setLayers(layers);
setLayerPageRoutes(layers?.map((l: any) => ({
setLayerPageRoutes(layers?.filter((l: any) => l.listed).map((l: any) => ({
path: '/' + l.name, // url
icon: <img src={"https://api.utopia-lab.org/assets/" + l.indexIcon}></img>,
name: l.name, // name that appear in Sidebar
@ -80,14 +79,15 @@ function App() {
}, [map])
const currentUrl = window.location.href;
const bottomRoutes = getBottomRoutes(currentUrl);
if (map && layers) return (
<div className="App overflow-x-hidden">
<AuthProvider userApi={new userApi}>
<AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName={map.name}>
<AppShell assetsApi={new assetsApi("https://api.utopia-lab.org/assets/")} appName={map.name} userType={map.user_type.name}>
<Permissions api={permissionsApiInstance} adminRole='8ed0b24e-3320-48cd-8444-bc152304e580'></Permissions>
{tagsApi && <Tags api={tagsApi}></Tags>}
<Modal>
@ -102,10 +102,8 @@ function App() {
<Route path='signup' element={<SignupPage />} />
<Route path='reset-password' element={<RequestPasswordPage reset_url={map.url + "/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="item/*" element={<OverlayItemProfile userType={map.user_type.name} />} />
<Route path="edit-item/*" element={<OverlayItemProfileSettings userType={map.user_type.name}/>} />
<Route path="user-settings" element={<OverlayUserSettings />} />
<Route path="moon-calendar" element={<MoonCalendar />} />
<Route path="landingpage" element={<Landingpage />} />

2
src/api/mapApi.ts
View File

@ -12,7 +12,7 @@ export class mapApi {
async getItems() {
try {
const map = await directusClient.request(readItems("maps" as any, { fields: ['*'], filter: { "url": { "_eq": this.url } } as any, limit: 500 }));
const map = await directusClient.request(readItems("maps" as any, { fields: ['*', {user_type : ['name']}], filter: { "url": { "_eq": this.url } } as any, limit: 500 }));
if(map[0]) return map[0];
else return "null";
} catch (error: any) {

5
src/pages/MapContainer.tsx
View File

@ -37,7 +37,7 @@ function MapContainer({ layers, map }: { layers: Array<LayerProps>, map: any })
return (
<UtopiaMap geo={map.geo} zoom={map.zoom || 5} center={map.center ? [map.center?.coordinates[1], map.center?.coordinates[0]] : [50.6, 9.5]} height='100%' width="100%" >
<UtopiaMap geo={map.geo} zoom={map.zoom || 5} center={map.center ? [map.center?.coordinates[1], map.center?.coordinates[0]] : [50.6, 9.5]} height='100%' width="100%" showFilterControl={map.show_filter_control} showLayerControl={map.show_layer_control} >
{layers && apis &&
layers.map(layer =>
<Layer
@ -50,6 +50,7 @@ function MapContainer({ layers, map }: { layers: Array<LayerProps>, map: any })
markerShape={layer.markerShape}
onlyOnePerOwner={layer.onlyOnePerOwner}
markerDefaultColor={layer.menuColor}
markerDefaultColor2={layer.markerDefaultColor2 ? layer.markerDefaultColor2 : "RGBA(35, 31, 32, 0.2)"}
itemType={layer.itemType}
itemNameField='name'
itemTextField='text'
@ -62,6 +63,7 @@ function MapContainer({ layers, map }: { layers: Array<LayerProps>, map: any })
customEditLink='/edit-item'
customEditParameter='id'
public_edit_items={layer.public_edit_items}
listed={layer.listed}
api={apis?.find(api => api.id === layer.id)?.api}>
<ItemView>
{layer.itemType.show_start_end &&
@ -83,6 +85,7 @@ function MapContainer({ layers, map }: { layers: Array<LayerProps>, map: any })
{layer.itemType.custom_text && <div className='flex justify-center'>
<p>Press Save to place your Profile to the Map</p>
</div>}
{layer.item_presets && Object.entries(layer.item_presets).map((ip : any) => <input key={ip[0]} type="hidden" id={ip[0]} name={ip[0]} value={ip[1]} />)}
</ItemForm>
</Layer>)
}

23
src/routes/sidebar.tsx
View File

@ -1,4 +1,3 @@
import { MapIcon } from '@heroicons/react/24/outline'
@ -44,14 +43,22 @@ export const routes = [
*/
]
export const bottomRoutes = [
export const getBottomRoutes = (currentUrl: string) => {
const url = new URL(currentUrl);
const isEmbedded = url.searchParams.get('embedded') === 'true';
const bottomRoutes = [
// Other routes can be added here
];
{
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
if (!isEmbedded) {
bottomRoutes.push({
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
});
}
]
return bottomRoutes;
};

3
vite.config.ts
View File

@ -6,6 +6,9 @@ import { VitePWA } from 'vite-plugin-pwa'
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 5174
},
plugins: [
react()
]