utopia-ui 3.0.0-alpha.155 → 3.0.0-alpha.157
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import "leaflet/dist/leaflet.css";
|
|
2
|
-
import
|
|
3
|
-
import { Item, LayerProps, UtopiaMapProps } from "../../types";
|
|
2
|
+
import { UtopiaMapProps } from "../../types";
|
|
4
3
|
import "./UtopiaMap.css";
|
|
5
|
-
export interface MapEventListenerProps {
|
|
6
|
-
selectNewItemPosition: LayerProps | Item | null;
|
|
7
|
-
setSelectNewItemPosition: React.Dispatch<any>;
|
|
8
|
-
setItemFormPopup: React.Dispatch<React.SetStateAction<any>>;
|
|
9
|
-
}
|
|
10
4
|
declare function UtopiaMap({ height, width, center, zoom, children, geo }: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;
|
|
11
5
|
export { UtopiaMap };
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Item, LayerProps } from '../../../types';
|
|
3
|
+
import { LatLng } from "leaflet";
|
|
4
|
+
import { ItemFormPopupProps } from "../Subcomponents/ItemFormPopup";
|
|
5
|
+
declare type PolygonClickedProps = {
|
|
6
|
+
position: LatLng;
|
|
7
|
+
setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>;
|
|
8
|
+
};
|
|
3
9
|
declare type UseSelectPositionManagerResult = ReturnType<typeof useSelectPositionManager>;
|
|
4
10
|
declare function useSelectPositionManager(): {
|
|
5
11
|
selectPosition: Item | LayerProps | null;
|
|
6
12
|
setSelectPosition: React.Dispatch<React.SetStateAction<Item | LayerProps | null>>;
|
|
7
13
|
setMarkerClicked: React.Dispatch<React.SetStateAction<Item>>;
|
|
14
|
+
setMapClicked: React.Dispatch<React.SetStateAction<PolygonClickedProps | undefined>>;
|
|
8
15
|
};
|
|
9
16
|
export declare const SelectPositionProvider: React.FunctionComponent<{
|
|
10
17
|
children?: React.ReactNode;
|
|
@@ -12,4 +19,5 @@ export declare const SelectPositionProvider: React.FunctionComponent<{
|
|
|
12
19
|
export declare const useSelectPosition: () => Item | LayerProps | null;
|
|
13
20
|
export declare const useSetSelectPosition: () => UseSelectPositionManagerResult["setSelectPosition"];
|
|
14
21
|
export declare const useSetMarkerClicked: () => UseSelectPositionManagerResult["setMarkerClicked"];
|
|
22
|
+
export declare const useSetMapClicked: () => UseSelectPositionManagerResult["setMapClicked"];
|
|
15
23
|
export {};
|
package/dist/index.js
CHANGED
|
@@ -113,14 +113,6 @@ function __spreadArray(to, from, pack) {
|
|
|
113
113
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
var Geometry = /** @class */ (function () {
|
|
117
|
-
function Geometry(lng, lat) {
|
|
118
|
-
this.coordinates = [lng, lat];
|
|
119
|
-
this.type = "Point";
|
|
120
|
-
}
|
|
121
|
-
return Geometry;
|
|
122
|
-
}());
|
|
123
|
-
|
|
124
116
|
function styleInject(css, ref) {
|
|
125
117
|
if ( ref === void 0 ) ref = {};
|
|
126
118
|
var insertAt = ref.insertAt;
|
|
@@ -148,7 +140,7 @@ function styleInject(css, ref) {
|
|
|
148
140
|
}
|
|
149
141
|
}
|
|
150
142
|
|
|
151
|
-
var css_248z$2 = ".leaflet-container {\n text-align: left;\n background-image: url(\"data:image/svg+xml,%3Csvg width='
|
|
143
|
+
var css_248z$2 = ".leaflet-container {\n text-align: left;\n background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n background-repeat: no-repeat;\n background-attachment: fixed;\n background-position: 50% 80%; \n }\n \n input {\n box-sizing: border-box;\n }\n \n textarea {\n box-sizing: border-box;\n }\n \n .leaflet-control-attribution {\n display: none;\n }\n \n .leaflet-control-locate {\n display: none;\n }\n\n .leaflet-data-marker {\n \n background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;\n background-position: 6px 32px;\n }\n \n .crosshair-cursor-enabled {\n cursor: crosshair;\n }\n \n .leaflet-container {\n cursor: inherit;\n }\n \n .calendar-icon {\n position: relative;\n top: -35px;\n left: 10px;\n width: 13px;\n }\n \n .user-icon {\n position: relative;\n top: -36px;\n left: 10px;\n width: 13px;\n }\n\n .circle-icon {\n position: relative;\n top: -33px;\n left: 10px;\n width: 13px;\n }\n\n .fire-icon {\n position: relative;\n top: -36px;\n left: 10px;\n width: 13px;\n }\n\n .tree-icon {\n position: relative;\n top: -38px;\n left: 4px;\n width: 24px;\n }\n\n .music-icon {\n position: relative;\n top: -35px;\n left: 4px;\n width: 24px;\n }\n\n .drum-icon {\n position: relative;\n top: -38px;\n left: 4px;\n width: 24px;\n }\n \n .leaflet-popup-scrolled {\n overflow-x: hidden;\n }\n\n .leaflet-popup-content-wrapper, .leaflet-popup-tip{\n background-color: var(--fallback-b1,oklch(var(--b1)/1));\n color: var(--fallback-bc,oklch(var(--bc)/1));\n\n }\n\n .leaflet-tooltip {\n background-color: var(--fallback-b1,oklch(var(--b1)/1));\n color: var(--fallback-bc,oklch(var(--bc)/1));\n border-width: 0px;\n border-radius: 1em;\n transition: opacity 500ms;\n transition-delay: 50ms;\n }\n\n .leaflet-tooltip-top::before {\n border-top-color: var(--fallback-b1,oklch(var(--b1)/1));\n }\n\n .marker-cluster span {\n color: #000;\n }";
|
|
152
144
|
styleInject(css_248z$2);
|
|
153
145
|
|
|
154
146
|
var LayerContext = createContext({
|
|
@@ -3052,23 +3044,46 @@ var TagsControl = function () {
|
|
|
3052
3044
|
}) })));
|
|
3053
3045
|
};
|
|
3054
3046
|
|
|
3047
|
+
var Geometry = /** @class */ (function () {
|
|
3048
|
+
function Geometry(lng, lat) {
|
|
3049
|
+
this.coordinates = [lng, lat];
|
|
3050
|
+
this.type = "Point";
|
|
3051
|
+
}
|
|
3052
|
+
return Geometry;
|
|
3053
|
+
}());
|
|
3054
|
+
|
|
3055
3055
|
var SelectPositionContext = createContext({
|
|
3056
3056
|
selectPosition: null,
|
|
3057
3057
|
setSelectPosition: function () { },
|
|
3058
3058
|
setMarkerClicked: function () { },
|
|
3059
|
+
setMapClicked: function () { },
|
|
3059
3060
|
});
|
|
3060
3061
|
function useSelectPositionManager() {
|
|
3061
3062
|
var _this = this;
|
|
3062
3063
|
var _a = useState(null), selectPosition = _a[0], setSelectPosition = _a[1];
|
|
3063
3064
|
var _b = useState(), markerClicked = _b[0], setMarkerClicked = _b[1];
|
|
3065
|
+
var _c = useState(), mapClicked = _c[0], setMapClicked = _c[1];
|
|
3064
3066
|
var updateItem = useUpdateItem();
|
|
3065
3067
|
var hasUserPermission = useHasUserPermission();
|
|
3066
3068
|
useEffect(function () {
|
|
3067
3069
|
if (selectPosition && markerClicked && 'text' in selectPosition) {
|
|
3068
|
-
|
|
3070
|
+
itemUpdateParent(__assign(__assign({}, selectPosition), { parent: markerClicked.id }));
|
|
3069
3071
|
}
|
|
3070
3072
|
}, [markerClicked]);
|
|
3071
|
-
|
|
3073
|
+
useEffect(function () {
|
|
3074
|
+
if (selectPosition != null) {
|
|
3075
|
+
if ('menuIcon' in selectPosition) {
|
|
3076
|
+
mapClicked && mapClicked.setItemFormPopup({ layer: selectPosition, position: mapClicked === null || mapClicked === void 0 ? void 0 : mapClicked.position });
|
|
3077
|
+
setSelectPosition(null);
|
|
3078
|
+
}
|
|
3079
|
+
if ('text' in selectPosition) {
|
|
3080
|
+
var position = (mapClicked === null || mapClicked === void 0 ? void 0 : mapClicked.position.lng) && new Geometry(mapClicked === null || mapClicked === void 0 ? void 0 : mapClicked.position.lng, mapClicked === null || mapClicked === void 0 ? void 0 : mapClicked.position.lat);
|
|
3081
|
+
position && itemUpdatePosition(__assign(__assign({}, selectPosition), { position: position }));
|
|
3082
|
+
setSelectPosition(null);
|
|
3083
|
+
}
|
|
3084
|
+
}
|
|
3085
|
+
}, [mapClicked]);
|
|
3086
|
+
var itemUpdateParent = function (updatedItem) { return __awaiter(_this, void 0, void 0, function () {
|
|
3072
3087
|
var success, error_1;
|
|
3073
3088
|
var _a, _b, _c, _d, _e, _f;
|
|
3074
3089
|
return __generator(this, function (_g) {
|
|
@@ -3109,8 +3124,36 @@ function useSelectPositionManager() {
|
|
|
3109
3124
|
}
|
|
3110
3125
|
});
|
|
3111
3126
|
}); };
|
|
3127
|
+
var itemUpdatePosition = function (updatedItem) { return __awaiter(_this, void 0, void 0, function () {
|
|
3128
|
+
var success, error_2;
|
|
3129
|
+
var _a, _b;
|
|
3130
|
+
return __generator(this, function (_c) {
|
|
3131
|
+
switch (_c.label) {
|
|
3132
|
+
case 0:
|
|
3133
|
+
success = false;
|
|
3134
|
+
_c.label = 1;
|
|
3135
|
+
case 1:
|
|
3136
|
+
_c.trys.push([1, 3, , 4]);
|
|
3137
|
+
return [4 /*yield*/, ((_b = (_a = updatedItem === null || updatedItem === void 0 ? void 0 : updatedItem.layer) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.updateItem({ id: updatedItem.id, position: updatedItem.position }))];
|
|
3138
|
+
case 2:
|
|
3139
|
+
_c.sent();
|
|
3140
|
+
success = true;
|
|
3141
|
+
return [3 /*break*/, 4];
|
|
3142
|
+
case 3:
|
|
3143
|
+
error_2 = _c.sent();
|
|
3144
|
+
toast.error(error_2.toString());
|
|
3145
|
+
return [3 /*break*/, 4];
|
|
3146
|
+
case 4:
|
|
3147
|
+
if (success) {
|
|
3148
|
+
updateItem(updatedItem);
|
|
3149
|
+
toast.success("Item position updated");
|
|
3150
|
+
}
|
|
3151
|
+
return [2 /*return*/];
|
|
3152
|
+
}
|
|
3153
|
+
});
|
|
3154
|
+
}); };
|
|
3112
3155
|
var linkItem = function (id) { return __awaiter(_this, void 0, void 0, function () {
|
|
3113
|
-
var new_relations, updatedItem, success,
|
|
3156
|
+
var new_relations, updatedItem, success, error_3;
|
|
3114
3157
|
var _a, _b;
|
|
3115
3158
|
return __generator(this, function (_c) {
|
|
3116
3159
|
switch (_c.label) {
|
|
@@ -3130,8 +3173,8 @@ function useSelectPositionManager() {
|
|
|
3130
3173
|
success = true;
|
|
3131
3174
|
return [3 /*break*/, 4];
|
|
3132
3175
|
case 3:
|
|
3133
|
-
|
|
3134
|
-
toast.error(
|
|
3176
|
+
error_3 = _c.sent();
|
|
3177
|
+
toast.error(error_3.toString());
|
|
3135
3178
|
return [3 /*break*/, 4];
|
|
3136
3179
|
case 4:
|
|
3137
3180
|
if (success) {
|
|
@@ -3143,7 +3186,7 @@ function useSelectPositionManager() {
|
|
|
3143
3186
|
}
|
|
3144
3187
|
});
|
|
3145
3188
|
}); };
|
|
3146
|
-
return { selectPosition: selectPosition, setSelectPosition: setSelectPosition, setMarkerClicked: setMarkerClicked };
|
|
3189
|
+
return { selectPosition: selectPosition, setSelectPosition: setSelectPosition, setMarkerClicked: setMarkerClicked, setMapClicked: setMapClicked };
|
|
3147
3190
|
}
|
|
3148
3191
|
var SelectPositionProvider = function (_a) {
|
|
3149
3192
|
var children = _a.children;
|
|
@@ -3160,6 +3203,10 @@ var useSetSelectPosition = function () {
|
|
|
3160
3203
|
var useSetMarkerClicked = function () {
|
|
3161
3204
|
var setMarkerClicked = useContext(SelectPositionContext).setMarkerClicked;
|
|
3162
3205
|
return setMarkerClicked;
|
|
3206
|
+
};
|
|
3207
|
+
var useSetMapClicked = function () {
|
|
3208
|
+
var setMapClicked = useContext(SelectPositionContext).setMapClicked;
|
|
3209
|
+
return setMapClicked;
|
|
3163
3210
|
};
|
|
3164
3211
|
|
|
3165
3212
|
var ClusterRefContext = createContext({
|
|
@@ -3186,72 +3233,34 @@ var useSetClusterRef = function () {
|
|
|
3186
3233
|
// for refreshing map on resize (needs to be implemented)
|
|
3187
3234
|
var mapDivRef = React.createRef();
|
|
3188
3235
|
function UtopiaMap(_a) {
|
|
3189
|
-
var _this = this;
|
|
3190
3236
|
var _b = _a.height, height = _b === void 0 ? "500px" : _b, _c = _a.width, width = _c === void 0 ? "100%" : _c, _d = _a.center, center = _d === void 0 ? [50.6, 9.5] : _d, _e = _a.zoom, zoom = _e === void 0 ? 10 : _e, children = _a.children, geo = _a.geo;
|
|
3191
|
-
function MapEventListener(
|
|
3237
|
+
function MapEventListener() {
|
|
3192
3238
|
useMapEvents({
|
|
3193
3239
|
click: function (e) {
|
|
3194
|
-
|
|
3195
|
-
var params = new URLSearchParams(window.location.search);
|
|
3196
|
-
window.history.pushState({}, "", "/" + "".concat(params.toString() !== "" ? "?".concat(params) : ""));
|
|
3197
|
-
document.title = document.title.split("-")[0];
|
|
3198
|
-
(_a = document.querySelector('meta[property="og:title"]')) === null || _a === void 0 ? void 0 : _a.setAttribute("content", document.title);
|
|
3199
|
-
(_b = document.querySelector('meta[property="og:description"]')) === null || _b === void 0 ? void 0 : _b.setAttribute("content", "".concat((_c = document.querySelector('meta[name="description"]')) === null || _c === void 0 ? void 0 : _c.getAttribute("content")));
|
|
3240
|
+
resetMetaTags();
|
|
3200
3241
|
console.log(e.latlng.lat + ',' + e.latlng.lng);
|
|
3201
|
-
|
|
3202
|
-
if ('menuIcon' in selectNewItemPosition) {
|
|
3203
|
-
props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng });
|
|
3204
|
-
props.setSelectNewItemPosition(null);
|
|
3205
|
-
}
|
|
3206
|
-
if ('text' in selectNewItemPosition) {
|
|
3207
|
-
var position = new Geometry(e.latlng.lng, e.latlng.lat);
|
|
3208
|
-
itemUpdate(__assign(__assign({}, selectNewItemPosition), { position: position }));
|
|
3209
|
-
setSelectNewItemPosition(null);
|
|
3210
|
-
}
|
|
3211
|
-
}
|
|
3242
|
+
selectNewItemPosition && setMapClicked({ position: e.latlng, setItemFormPopup: setItemFormPopup });
|
|
3212
3243
|
},
|
|
3213
3244
|
moveend: function (e) {
|
|
3214
3245
|
console.log(e);
|
|
3215
|
-
}
|
|
3246
|
+
}
|
|
3216
3247
|
});
|
|
3217
3248
|
return null;
|
|
3218
3249
|
}
|
|
3219
|
-
var
|
|
3220
|
-
var success, error_1;
|
|
3250
|
+
var resetMetaTags = function () {
|
|
3221
3251
|
var _a, _b, _c;
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
_d.trys.push([1, 3, , 4]);
|
|
3229
|
-
return [4 /*yield*/, ((_b = (_a = updatedItem === null || updatedItem === void 0 ? void 0 : updatedItem.layer) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.updateItem({ id: updatedItem.id, position: updatedItem.position }))];
|
|
3230
|
-
case 2:
|
|
3231
|
-
_d.sent();
|
|
3232
|
-
success = true;
|
|
3233
|
-
return [3 /*break*/, 4];
|
|
3234
|
-
case 3:
|
|
3235
|
-
error_1 = _d.sent();
|
|
3236
|
-
toast.error(error_1.toString());
|
|
3237
|
-
return [3 /*break*/, 4];
|
|
3238
|
-
case 4:
|
|
3239
|
-
if (success) {
|
|
3240
|
-
updateItem(updatedItem);
|
|
3241
|
-
toast.success("Item position updated");
|
|
3242
|
-
navigate("/" + ((_c = updatedItem.layer) === null || _c === void 0 ? void 0 : _c.name) + "/" + updatedItem.id);
|
|
3243
|
-
}
|
|
3244
|
-
return [2 /*return*/];
|
|
3245
|
-
}
|
|
3246
|
-
});
|
|
3247
|
-
}); };
|
|
3252
|
+
var params = new URLSearchParams(window.location.search);
|
|
3253
|
+
window.history.pushState({}, "", "/" + "".concat(params.toString() !== "" ? "?".concat(params) : ""));
|
|
3254
|
+
document.title = document.title.split("-")[0];
|
|
3255
|
+
(_a = document.querySelector('meta[property="og:title"]')) === null || _a === void 0 ? void 0 : _a.setAttribute("content", document.title);
|
|
3256
|
+
(_b = document.querySelector('meta[property="og:description"]')) === null || _b === void 0 ? void 0 : _b.setAttribute("content", "".concat((_c = document.querySelector('meta[name="description"]')) === null || _c === void 0 ? void 0 : _c.getAttribute("content")));
|
|
3257
|
+
};
|
|
3248
3258
|
var selectNewItemPosition = useSelectPosition();
|
|
3249
3259
|
var setSelectNewItemPosition = useSetSelectPosition();
|
|
3250
3260
|
var location = useLocation();
|
|
3251
|
-
var updateItem = useUpdateItem();
|
|
3252
|
-
var navigate = useNavigate();
|
|
3253
3261
|
var setClusterRef = useSetClusterRef();
|
|
3254
3262
|
var clusterRef = useClusterRef();
|
|
3263
|
+
var setMapClicked = useSetMapClicked();
|
|
3255
3264
|
var _f = useState(null), itemFormPopup = _f[0], setItemFormPopup = _f[1];
|
|
3256
3265
|
useEffect(function () {
|
|
3257
3266
|
var params = new URLSearchParams(location.search);
|
|
@@ -3266,7 +3275,12 @@ function UtopiaMap(_a) {
|
|
|
3266
3275
|
return (jsx(Fragment, { children: jsxs("div", __assign({ className: (selectNewItemPosition != null ? "crosshair-cursor-enabled" : undefined) }, { children: [jsxs(MapContainer, __assign({ ref: mapDivRef, style: { height: height, width: width }, center: new LatLng(center[0], center[1]), zoom: zoom, zoomControl: false, maxZoom: 19 }, { children: [jsx(Outlet, {}), jsxs(Control, __assign({ position: 'topLeft', zIndex: "1000" }, { children: [jsx(SearchControl, {}), jsx(TagsControl, {})] })), jsxs(Control, __assign({ position: 'bottomLeft', zIndex: "999" }, { children: [jsx(QuestControl, {}), jsx(LayerControl, {})] })), jsx(TileLayer, { maxZoom: 19, attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: "https://tile.osmand.net/hd/{z}/{x}/{y}.png" }), jsx(MarkerClusterGroup, __assign({ ref: function (r) { return setClusterRef(r); }, showCoverageOnHover: true, chunkedLoading: true, maxClusterRadius: 50, removeOutsideVisibleBounds: false }, { children: React.Children.toArray(children).map(function (child) {
|
|
3267
3276
|
return React.isValidElement(child) ?
|
|
3268
3277
|
React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup, clusterRef: clusterRef }) : child;
|
|
3269
|
-
}) })), geo && jsx(GeoJSON, { data: geo, onEachFeature: onEachFeature
|
|
3278
|
+
}) })), geo && jsx(GeoJSON, { data: geo, onEachFeature: onEachFeature, eventHandlers: {
|
|
3279
|
+
click: function (e) {
|
|
3280
|
+
e.layer.closePopup();
|
|
3281
|
+
selectNewItemPosition && setMapClicked({ position: e.latlng, setItemFormPopup: setItemFormPopup });
|
|
3282
|
+
},
|
|
3283
|
+
} }), jsx(MapEventListener, {})] })), jsx(AddButton, { triggerAction: setSelectNewItemPosition }), selectNewItemPosition != null &&
|
|
3270
3284
|
jsxs("div", __assign({ className: "tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md" }, { children: [jsx("label", __assign({ className: "tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600", onClick: function () {
|
|
3271
3285
|
setSelectNewItemPosition(null);
|
|
3272
3286
|
} }, { children: jsx("p", __assign({ className: 'tw-text-center ' }, { children: "\u2715" })) })), jsx("div", __assign({ className: "tw-alert tw-bg-base-100 tw-text-base-content" }, { children: jsx("div", { children: jsxs("span", { children: ["Select ", selectNewItemPosition.name, " position!"] }) }) }))] }))] })) }));
|
|
@@ -4939,11 +4953,11 @@ function OverlayItemProfileSettings() {
|
|
|
4939
4953
|
urlTab ? setActiveTab(Number(urlTab)) : setActiveTab(1);
|
|
4940
4954
|
}, [location]);
|
|
4941
4955
|
useEffect(function () {
|
|
4942
|
-
var _a, _b, _c, _d, _e, _f;
|
|
4956
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
4943
4957
|
if ((_a = item.layer) === null || _a === void 0 ? void 0 : _a.itemColorField)
|
|
4944
4958
|
setColor(getValue(item, (_b = item.layer) === null || _b === void 0 ? void 0 : _b.itemColorField));
|
|
4945
4959
|
else
|
|
4946
|
-
setColor(((_c = item.layer) === null || _c === void 0 ? void 0 : _c.
|
|
4960
|
+
setColor(((_c = item.layer) === null || _c === void 0 ? void 0 : _c.itemColorField) && getValue(item, (_d = item.layer) === null || _d === void 0 ? void 0 : _d.itemColorField) ? getValue(item, (_e = item.layer) === null || _e === void 0 ? void 0 : _e.itemColorField) : (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (_f = item === null || item === void 0 ? void 0 : item.layer) === null || _f === void 0 ? void 0 : _f.markerDefaultColor));
|
|
4947
4961
|
setId((item === null || item === void 0 ? void 0 : item.id) ? item.id : "");
|
|
4948
4962
|
setName((item === null || item === void 0 ? void 0 : item.name) ? item.name : "");
|
|
4949
4963
|
setSubname((item === null || item === void 0 ? void 0 : item.subname) ? item.subname : "");
|
|
@@ -4952,15 +4966,15 @@ function OverlayItemProfileSettings() {
|
|
|
4952
4966
|
setOffers([]);
|
|
4953
4967
|
setNeeds([]);
|
|
4954
4968
|
setRelations([]);
|
|
4955
|
-
(
|
|
4969
|
+
(_g = item === null || item === void 0 ? void 0 : item.offers) === null || _g === void 0 ? void 0 : _g.map(function (o) {
|
|
4956
4970
|
var offer = tags === null || tags === void 0 ? void 0 : tags.find(function (t) { return t.id === o.tags_id; });
|
|
4957
4971
|
offer && setOffers(function (current) { return __spreadArray(__spreadArray([], current, true), [offer], false); });
|
|
4958
4972
|
});
|
|
4959
|
-
(
|
|
4973
|
+
(_h = item === null || item === void 0 ? void 0 : item.needs) === null || _h === void 0 ? void 0 : _h.map(function (o) {
|
|
4960
4974
|
var need = tags === null || tags === void 0 ? void 0 : tags.find(function (t) { return t.id === o.tags_id; });
|
|
4961
4975
|
need && setNeeds(function (current) { return __spreadArray(__spreadArray([], current, true), [need], false); });
|
|
4962
4976
|
});
|
|
4963
|
-
(
|
|
4977
|
+
(_j = item.relations) === null || _j === void 0 ? void 0 : _j.map(function (r) {
|
|
4964
4978
|
var item = items.find(function (i) { return i.id == r.related_items_id; });
|
|
4965
4979
|
item && setRelations(function (current) { return __spreadArray(__spreadArray([], current, true), [item], false); });
|
|
4966
4980
|
});
|
|
@@ -5112,7 +5126,7 @@ function OverlayItemProfileSettings() {
|
|
|
5112
5126
|
}
|
|
5113
5127
|
});
|
|
5114
5128
|
}); };
|
|
5115
|
-
return (jsx(Fragment, { children: jsx(MapOverlayPage, __assign({ backdrop: true, className: 'tw-mx-4 tw-mt-4 tw-mb-12 tw-overflow-x-hidden tw-max-h-[calc(100dvh-96px)] !tw-h-[calc(100dvh-96px)] tw-w-[calc(100%-32px)] md:tw-w-[calc(50%-32px)] tw-max-w-3xl !tw-left-auto tw-top-0 tw-bottom-0' }, { children: jsxs("div", __assign({ className: 'tw-flex tw-flex-col tw-h-full' }, { children: [jsxs("div", __assign({ className: "tw-flex" }, { children: [jsx(AvatarWidget, { avatar: image, setAvatar: setImage }), jsx(ColorPicker, { color: color
|
|
5129
|
+
return (jsx(Fragment, { children: jsx(MapOverlayPage, __assign({ backdrop: true, className: 'tw-mx-4 tw-mt-4 tw-mb-12 tw-overflow-x-hidden tw-max-h-[calc(100dvh-96px)] !tw-h-[calc(100dvh-96px)] tw-w-[calc(100%-32px)] md:tw-w-[calc(50%-32px)] tw-max-w-3xl !tw-left-auto tw-top-0 tw-bottom-0' }, { children: jsxs("div", __assign({ className: 'tw-flex tw-flex-col tw-h-full' }, { children: [jsxs("div", __assign({ className: "tw-flex" }, { children: [jsx(AvatarWidget, { avatar: image, setAvatar: setImage }), jsx(ColorPicker, { color: color, onChange: setColor, className: "-tw-left-6 tw-top-14 -tw-mr-6" }), jsxs("div", __assign({ className: 'tw-grow tw-mr-4' }, { children: [jsx(TextInput, { placeholder: "Name", defaultValue: (item === null || item === void 0 ? void 0 : item.name) ? item.name : "", updateFormValue: function (v) { return setName(v); }, containerStyle: 'tw-grow tw-input-md' }), jsx(TextInput, { placeholder: "Subtitle", defaultValue: (item === null || item === void 0 ? void 0 : item.subname) ? item.subname : "", updateFormValue: function (v) { return setSubname(v); }, containerStyle: 'tw-grow tw-input-sm tw-px-4 tw-mt-1' })] }))] })), jsxs("div", __assign({ role: "tablist", className: "tw-tabs tw-tabs-lifted tw-mt-4" }, { children: [jsx("input", { type: "radio", name: "my_tabs_2", role: "tab", className: "tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]", "aria-label": "Info", checked: activeTab == 1 && true, onChange: function () { return updateActiveTab(1); } }), jsx("div", __assign({ role: "tabpanel", className: "tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none" }, { children: jsx(TextAreaInput, { placeholder: "My Vision...", defaultValue: (item === null || item === void 0 ? void 0 : item.text) ? item.text : "", updateFormValue: function (v) { console.log(v); setText(v); }, containerStyle: 'tw-h-full', inputStyle: 'tw-h-full tw-border-t-0 tw-rounded-tl-none' }) })), ((_a = item.layer) === null || _a === void 0 ? void 0 : _a.itemType.offers_and_needs) &&
|
|
5116
5130
|
jsxs(Fragment, { children: [jsx("input", { type: "radio", name: "my_tabs_2", role: "tab", className: "tw-tab tw-min-w-[10em] [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]", "aria-label": "Offers & Needs", checked: activeTab == 3 && true, onChange: function () { return updateActiveTab(3); } }), jsx("div", __assign({ role: "tabpanel", className: "tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none" }, { children: jsxs("div", __assign({ className: 'tw-h-full' }, { children: [jsx("div", __assign({ className: 'tw-w-full tw-h-[calc(50%-0.75em)] tw-mb-4' }, { children: jsx(TagsWidget, { defaultTags: offers, onUpdate: function (v) { return setOffers(v); }, placeholder: "enter your offers", containerStyle: 'tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto' }) })), jsx("div", __assign({ className: 'tw-w-full tw-h-[calc(50%-0.75em)] ' }, { children: jsx(TagsWidget, { defaultTags: needs, onUpdate: function (v) { return setNeeds(v); }, placeholder: "enter your needs", containerStyle: 'tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto' }) }))] })) }))] }), ((_b = item.layer) === null || _b === void 0 ? void 0 : _b.itemType.relations) &&
|
|
5117
5131
|
jsxs(Fragment, { children: [jsx("input", { type: "radio", name: "my_tabs_2", role: "tab", className: "tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]", "aria-label": "Relations", checked: activeTab == 7 && true, onChange: function () { return updateActiveTab(7); } }), jsx("div", __assign({ role: "tabpanel", className: "tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-332px)] tw-overflow-y-auto tw-pt-4 tw-pb-1 -tw-mx-4 tw-overflow-x-hidden" }, { children: jsx("div", __assign({ className: 'tw-h-full' }, { children: jsxs("div", __assign({ className: 'tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-1 lg:tw-grid-cols-1 xl:tw-grid-cols-1 2xl:tw-grid-cols-2' }, { children: [relations && relations.map(function (i) {
|
|
5118
5132
|
return jsxs("div", __assign({ className: 'tw-cursor-pointer tw-card tw-bg-base-200 tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-text-base-content tw-mx-4 tw-p-6 tw-mb-4', onClick: function () { return navigate('/item/' + i.id); } }, { children: [jsx(LinkedItemsHeaderView, { unlinkPermission: updatePermission, item: i, unlinkCallback: unlinkItem, loading: loading }), jsx("div", __assign({ className: 'tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade' }, { children: jsx(TextView, { truncate: true, item: i }) }))] }), i.id);
|