mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
cleand up types
This commit is contained in:
parent
6f87398c11
commit
189eddaae1
42
README.md
42
README.md
@ -61,15 +61,9 @@ const places = [{
|
||||
"text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt. \r\n\r\nhttps://stadtgemuese-fulda.de",
|
||||
"position": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
9.632435,
|
||||
50.560342
|
||||
]
|
||||
"coordinates": [9.632435, 50.560342]
|
||||
},
|
||||
"tags": [
|
||||
9,
|
||||
13
|
||||
],
|
||||
"tags": [9,13],
|
||||
},
|
||||
{
|
||||
"id": 166,
|
||||
@ -77,47 +71,23 @@ const places = [{
|
||||
"text": "free camping",
|
||||
"position": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
9.438793,
|
||||
50.560112
|
||||
]
|
||||
"coordinates": [9.438793, 50.560112]
|
||||
},
|
||||
"tags": [
|
||||
10,
|
||||
11
|
||||
]
|
||||
"tags": [10,11]
|
||||
}];
|
||||
|
||||
const events = [
|
||||
{
|
||||
"id": "65bbc003-b6de-4904-b85c-8ab6c92fe0db",
|
||||
"date_created": "2022-03-14T10:20:11.534Z",
|
||||
"date_updated": "2022-04-05T08:58:38.790Z",
|
||||
"name": "Hackathon",
|
||||
"text": "still in progress",
|
||||
"position": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
9.5,
|
||||
50.62
|
||||
]
|
||||
"coordinates": [9.5, 50.62]
|
||||
},
|
||||
"start": "2022-03-25T12:00:00",
|
||||
"end": "2022-05-12T12:00:00",
|
||||
"tags": [
|
||||
{
|
||||
"Tags_id": {
|
||||
"color": "#75507B",
|
||||
"id": "Docutopia"
|
||||
}
|
||||
},
|
||||
{
|
||||
"Tags_id": {
|
||||
"color": "#3465A4",
|
||||
"id": "Coding"
|
||||
}
|
||||
}
|
||||
]
|
||||
"tags": [10]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
119
package-lock.json
generated
119
package-lock.json
generated
@ -1,24 +1,23 @@
|
||||
{
|
||||
"name": "utopia-ui",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "utopia-ui",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"leaflet": "^1.8.0",
|
||||
"react-leaflet": "^4.0.0",
|
||||
"react-leaflet-markercluster": "^3.0.0-rc1"
|
||||
"react-leaflet-cluster": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/leaflet": "^1.7.11",
|
||||
"@types/react": "^18.0.14",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
"@types/react-leaflet": "^2.8.2",
|
||||
"@types/react-leaflet-markercluster": "^3.0.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"react": "^17.0.2",
|
||||
@ -71,15 +70,6 @@
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/leaflet.markercluster": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.0.tgz",
|
||||
"integrity": "sha512-2Qje1CGibdaCZaeCtEycQ/TpX4fsiK81NTmkdHotn0dL/4M1QvmeXiiLAHLnv1GrZBn7DY6mzedBsHmq5REKHA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/leaflet": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
|
||||
@ -116,17 +106,6 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-leaflet-markercluster": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0.tgz",
|
||||
"integrity": "sha512-yJpaoo7sOexrnniD6McdOOJF8FXEzA5G6s+bBk8Ed7XzhqcLVb84MXCbY/3ed81xY2DYQG4PHTOaXhIEHOxXqg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/leaflet": "*",
|
||||
"@types/leaflet.markercluster": "*",
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
@ -994,43 +973,18 @@
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet-markercluster": {
|
||||
"version": "3.0.0-rc1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0-rc1.tgz",
|
||||
"integrity": "sha512-wr8ERtx73sY0uVoQAM1v1vsA5Vsbdgyqc88h+Eo2kYRwNdkVTEOoUTnAh3CgGuOyP0Y9QLd2dKGupGkufpwryQ==",
|
||||
"node_modules/react-leaflet-cluster": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.0.0.tgz",
|
||||
"integrity": "sha512-tREjHM3mlNwj7sJdV+i0QSYbrOeju3RtPThfe7ik0T2oH56OffgMCC+mAjLOR+OrQXLIPktJpFYHpNNZOEtyUA==",
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": "^1.0.2",
|
||||
"leaflet": "^1.6.0",
|
||||
"leaflet.markercluster": "^1.4.1",
|
||||
"react-leaflet": "^3.0.0"
|
||||
"leaflet.markercluster": "^1.5.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.6.0",
|
||||
"leaflet.markercluster": "^1.4.1",
|
||||
"react-leaflet": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet-markercluster/node_modules/@react-leaflet/core": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
|
||||
"integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.7.1",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet-markercluster/node_modules/react-leaflet": {
|
||||
"version": "3.2.5",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz",
|
||||
"integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==",
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": "^1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.7.1",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1"
|
||||
"leaflet": "^1.8.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-leaflet": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet/node_modules/@react-leaflet/core": {
|
||||
@ -1357,15 +1311,6 @@
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"@types/leaflet.markercluster": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.0.tgz",
|
||||
"integrity": "sha512-2Qje1CGibdaCZaeCtEycQ/TpX4fsiK81NTmkdHotn0dL/4M1QvmeXiiLAHLnv1GrZBn7DY6mzedBsHmq5REKHA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/leaflet": "*"
|
||||
}
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
|
||||
@ -1402,17 +1347,6 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-leaflet-markercluster": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0.tgz",
|
||||
"integrity": "sha512-yJpaoo7sOexrnniD6McdOOJF8FXEzA5G6s+bBk8Ed7XzhqcLVb84MXCbY/3ed81xY2DYQG4PHTOaXhIEHOxXqg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/leaflet": "*",
|
||||
"@types/leaflet.markercluster": "*",
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
@ -2108,31 +2042,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-leaflet-markercluster": {
|
||||
"version": "3.0.0-rc1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0-rc1.tgz",
|
||||
"integrity": "sha512-wr8ERtx73sY0uVoQAM1v1vsA5Vsbdgyqc88h+Eo2kYRwNdkVTEOoUTnAh3CgGuOyP0Y9QLd2dKGupGkufpwryQ==",
|
||||
"react-leaflet-cluster": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.0.0.tgz",
|
||||
"integrity": "sha512-tREjHM3mlNwj7sJdV+i0QSYbrOeju3RtPThfe7ik0T2oH56OffgMCC+mAjLOR+OrQXLIPktJpFYHpNNZOEtyUA==",
|
||||
"requires": {
|
||||
"@react-leaflet/core": "^1.0.2",
|
||||
"leaflet": "^1.6.0",
|
||||
"leaflet.markercluster": "^1.4.1",
|
||||
"react-leaflet": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
|
||||
"integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-leaflet": {
|
||||
"version": "3.2.5",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz",
|
||||
"integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==",
|
||||
"requires": {
|
||||
"@react-leaflet/core": "^1.1.1"
|
||||
}
|
||||
}
|
||||
"leaflet.markercluster": "^1.5.3"
|
||||
}
|
||||
},
|
||||
"readdirp": {
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
"@types/react": "^18.0.14",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
"@types/react-leaflet": "^2.8.2",
|
||||
"@types/react-leaflet-markercluster": "^3.0.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"react": "^17.0.2",
|
||||
@ -37,6 +36,6 @@
|
||||
"dependencies": {
|
||||
"leaflet": "^1.8.0",
|
||||
"react-leaflet": "^4.0.0",
|
||||
"react-leaflet-markercluster": "^3.0.0-rc1"
|
||||
"react-leaflet-cluster": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,39 +1,16 @@
|
||||
import * as React from 'react'
|
||||
import { Popup } from 'react-leaflet'
|
||||
import { Item, Tag } from '../../types'
|
||||
|
||||
export interface IMarkerPopupProps {
|
||||
item: IMapItem,
|
||||
tags: ITag[]
|
||||
export interface MarkerPopupProps {
|
||||
item: Item,
|
||||
tags: Tag[]
|
||||
}
|
||||
|
||||
export interface IMapItem {
|
||||
id?: string,
|
||||
date_created?: string,
|
||||
date_updated?: string | null,
|
||||
name: string,
|
||||
text: string,
|
||||
position: IGeometry,
|
||||
start?: string,
|
||||
end?: string,
|
||||
tags?: string[],
|
||||
[key: string]:any
|
||||
}
|
||||
const MarkerPopup = (props:MarkerPopupProps) => {
|
||||
const item:Item = props.item;
|
||||
const tags:Tag[] = props.tags;
|
||||
|
||||
export interface IGeometry {
|
||||
type: string;
|
||||
coordinates: number[];
|
||||
}
|
||||
|
||||
export interface ITag {
|
||||
|
||||
color: string;
|
||||
id: string;
|
||||
name: string;
|
||||
|
||||
}
|
||||
|
||||
const MarkerPopup = (props:IMarkerPopupProps) => {
|
||||
const item:IMapItem = props.item;
|
||||
|
||||
|
||||
return (
|
||||
@ -44,8 +21,8 @@ const MarkerPopup = (props:IMarkerPopupProps) => {
|
||||
|
||||
<p>{item.text}</p>
|
||||
{item.tags&&
|
||||
props.tags.map((tag:ITag) => (
|
||||
<span className="badge" style={{backgroundColor: tag.color,marginLeft: '.2rem', fontSize: "100%"}} key={tag.id}>#{tag.name}</span>
|
||||
tags.map((tag:Tag) => (
|
||||
<span className="badge" style={{backgroundColor: tag.color,margin: '.1rem', fontSize: "100%"}} key={tag.id}>#{tag.name}</span>
|
||||
))}
|
||||
</Popup>
|
||||
)
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
export const StringFormater = (message:string) => {
|
||||
if(!message) return "";
|
||||
|
||||
var urlRegex = /(^| )(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,10}(:[0-9]{1,10})?(\/.*)?$/gm;
|
||||
message = message.replace(urlRegex, function (url) {
|
||||
var hyperlink = url.replace(' ','');
|
||||
if (!hyperlink.match('^https?:\/\/')) {
|
||||
hyperlink = 'http://' + hyperlink;
|
||||
}
|
||||
return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>'
|
||||
});
|
||||
|
||||
var mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
|
||||
message = message.replace(mailRegex, function (mail) {
|
||||
return '<a href="mailto:' + mail + '">' + mail + '</a>'
|
||||
});
|
||||
|
||||
return message;
|
||||
}
|
||||
@ -2,25 +2,26 @@ import { TileLayer, MapContainer, Marker } from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import * as React from "react";
|
||||
import MarkerIconFactory from './Utils/MarkerIconFactory';
|
||||
import MarkerClusterGroup from 'react-leaflet-markercluster';
|
||||
import MarkerPopup, { IMapItem, ITag } from "./Components/Map/MarkerPopup";
|
||||
import MarkerPopup from "./Components/Map/MarkerPopup";
|
||||
import { Item, Tag } from "./types"
|
||||
import "./styles.scss"
|
||||
|
||||
export interface IMapProps {
|
||||
export interface MapProps {
|
||||
height: string,
|
||||
width: string,
|
||||
center: number[],
|
||||
zoom: number,
|
||||
places?: IMapItem[],
|
||||
events?: IMapItem[],
|
||||
tags?: ITag[],
|
||||
places?: Item[],
|
||||
events?: Item[],
|
||||
tags?: Tag[],
|
||||
}
|
||||
|
||||
const UtopiaMap = (props: IMapProps) => {
|
||||
|
||||
const UtopiaMap = (props: MapProps) => {
|
||||
let tagMap = new Map(props.tags?.map(key => [key.id, key]));
|
||||
|
||||
const getTags = (item: IMapItem) => {
|
||||
let tags: ITag[] = [];
|
||||
const getTags = (item: Item) => {
|
||||
let tags: Tag[] = [];
|
||||
item.tags && item.tags.forEach(element => {
|
||||
if (tagMap.has(element)) { tags.push(tagMap.get(element)!) };
|
||||
});
|
||||
@ -33,11 +34,10 @@ const UtopiaMap = (props: IMapProps) => {
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||||
|
||||
{props.places &&
|
||||
props.places.map((place: IMapItem) => {
|
||||
props.places.map((place: Item) => {
|
||||
let tags = getTags(place);
|
||||
let color1 = "#555";
|
||||
let color1 = "#666";
|
||||
let color2 = "RGBA(35, 31, 32, 0.2)";
|
||||
if (tags[0]) {
|
||||
color1 = tags[0].color;
|
||||
@ -45,30 +45,36 @@ const UtopiaMap = (props: IMapProps) => {
|
||||
if (tags[1]) {
|
||||
color2 = tags[1].color;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Marker icon={MarkerIconFactory('circle', color1, color2, 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
|
||||
<MarkerPopup item={place} tags={tags} />
|
||||
</Marker>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{props.events &&
|
||||
(props.events).map((event: IMapItem) => (
|
||||
<Marker icon={MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>
|
||||
<MarkerPopup item={event} tags={getTags(event)} />
|
||||
</Marker>
|
||||
))
|
||||
props.events.map((event: Item) => {
|
||||
let tags = getTags(event);
|
||||
let color1 = "#666";
|
||||
let color2 = "RGBA(35, 31, 32, 0.2)";
|
||||
if (tags[0]) {
|
||||
color1 = tags[0].color;
|
||||
}
|
||||
if (tags[1]) {
|
||||
color2 = tags[1].color;
|
||||
}
|
||||
return (
|
||||
<Marker icon={MarkerIconFactory('square', color1, color2, 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>
|
||||
<MarkerPopup item={event} tags={tags} />
|
||||
</Marker>
|
||||
)
|
||||
})
|
||||
}
|
||||
</MapContainer>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default UtopiaMap;
|
||||
export { UtopiaMap, Item, Tag };
|
||||
|
||||
|
||||
28
src/types.ts
Normal file
28
src/types.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { Component } from 'react' // Switch to 'react' if you use it
|
||||
import { MarkerClusterGroupOptions } from 'leaflet'
|
||||
|
||||
export interface Item {
|
||||
id: number,
|
||||
date_created?: string,
|
||||
date_updated?: string | null,
|
||||
name: string,
|
||||
text: string,
|
||||
position: Geometry,
|
||||
start?: string,
|
||||
end?: string,
|
||||
tags?: number[],
|
||||
[key: string]:any
|
||||
}
|
||||
|
||||
export interface Geometry {
|
||||
type: string;
|
||||
coordinates: number[];
|
||||
}
|
||||
|
||||
export interface Tag {
|
||||
|
||||
color: string;
|
||||
id: number;
|
||||
name: string;
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user