diff --git a/src/App.js b/src/App.js
index 4843b65..2e6ff1b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -138,7 +138,7 @@ function App() {
{/* */}
{/* */}
{/* */}
- {/* */}
+
{/* *************************************************** mini components *************************************************** */}
@@ -171,7 +171,7 @@ function App() {
{/* */}
{/* */}
{/* */}
-
+ {/* */}
{/*
diff --git a/src/components/LeafletMap/index.js b/src/components/LeafletMap/index.js
index c163895..c95ac0b 100644
--- a/src/components/LeafletMap/index.js
+++ b/src/components/LeafletMap/index.js
@@ -1,4 +1,5 @@
import React, { useState, useRef, useMemo } from "react";
+
import {
MapContainer,
TileLayer,
@@ -9,12 +10,126 @@ import {
ZoomControl,
ScaleControl,
} from "react-leaflet";
+
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
+
import { EditControl } from "react-leaflet-draw";
+
import "leaflet-draw";
import "./index.scss";
+
import grid from "../../assets/images/grid.png";
+
+import * as L from "leaflet";
+
+L.drawLocal = {
+ draw: {
+ toolbar: {
+ actions: {
+ title: "کنسل کردن رسم",
+ text: "کنسل",
+ },
+ finish: {
+ title: "پایان رسم",
+ text: "پایان رسم",
+ },
+ undo: {
+ title: "پاک کردن آخرین نقطه رسم شده",
+ text: "پاک کردن آخرین نقطه رسم شده",
+ },
+ buttons: {
+ polyline: "موکب مورد نظر خود را رسم نمایید",
+ polygon: "رسم پولیگان",
+ rectangle: "رسم جای خواب",
+ circle: "رسم دایره",
+ marker: "رسم مارکر",
+ circlemarker: "رسم دایره مارکر",
+ },
+ },
+ handlers: {
+ circle: {
+ tooltip: {
+ start: "کلیک کنید و سپس درگ کنید تا یک دایره بکشید.",
+ },
+ radius: "ردیوس",
+ },
+ circlemarker: {
+ tooltip: {
+ start: "Click map to place circle marker.",
+ },
+ },
+ marker: {
+ tooltip: {
+ start: "Click map to place marker.",
+ },
+ },
+ polygon: {
+ tooltip: {
+ start: "Click to start drawing shape.",
+ cont: "Click to continue drawing shape.",
+ end: "Click first point to close this shape.",
+ },
+ },
+ polyline: {
+ error: "Error: shape edges cannot cross!",
+ tooltip: {
+ start: "Click to start drawing line.",
+ cont: "Click to continue drawing line.",
+ end: "Click last point to finish line.",
+ },
+ },
+ rectangle: {
+ tooltip: {
+ start: "با کلیک و درگ کردن یک جای خواب رسم کنید.",
+ },
+ },
+ simpleshape: {
+ tooltip: {
+ end: "ماوس را رها کنید تا رسم تمام شود.",
+ },
+ },
+ },
+ },
+ edit: {
+ toolbar: {
+ actions: {
+ save: {
+ title: "ذخیره تنظیمات",
+ text: "ذخیره",
+ },
+ cancel: {
+ title: "کنسل کردن، ویرایش تمام تغییرات نادیده گرفته خواهند شد",
+ text: "کنسل",
+ },
+ clearAll: {
+ title: "پاک کردن تمام لایه ها",
+ text: "پاک کردن لایه ها",
+ },
+ },
+ buttons: {
+ edit: "ویرایش لایه ها",
+ editDisabled: "لایه ای برای ویرایش وجود ندارد",
+ remove: "پاک کردن لایه ها",
+ removeDisabled: "لایه ای برای پاک کردن وجود ندارد",
+ },
+ },
+ handlers: {
+ edit: {
+ tooltip: {
+ text: "Drag handles or markers to edit features.",
+ subtext: "با کلیک بر روی کنسل تغییرات اعمال نخواهند شد.",
+ },
+ },
+ remove: {
+ tooltip: {
+ text: "Click on a feature to remove.",
+ },
+ },
+ },
+ },
+};
+
const outerBounds = [
[50.505, -29.09],
[52.505, 29.09],
@@ -22,6 +137,7 @@ const outerBounds = [
const LeafletMap = () => {
const leafEl = useRef(null);
+
const onCreated = (e) => {
const drawnItems = leafEl.current._layers;
console.log({ drawnItems });
diff --git a/src/components/TestComponentNew/index.js b/src/components/TestComponentNew/index.js
index 7a31cc3..c4bee1c 100644
--- a/src/components/TestComponentNew/index.js
+++ b/src/components/TestComponentNew/index.js
@@ -1,76 +1,7 @@
-import React, { useState, useEffect } from "react";
-
-import "./index.scss";
-
-import { Calendar } from "react-multi-date-picker";
-import DatePicker from "react-multi-date-picker";
-
-import persian from "react-date-object/calendars/persian";
-import persian_fa from "react-date-object/locales/persian_fa";
-
-//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
-// const weekDays = [
-// "شنبه",
-// "یکشنبه",
-// "دوشنبه",
-// "سشنبه",
-// "چهارشنبه",
-// "پنجشنبه",
-// "جمعه",
-// ];
-
-function CustomRangeInput({ openCalendar, value }) {
- useEffect(() => {
- openCalendar();
- }, []);
-
- return (
-
- );
-}
+import React from "react";
const TestComponentNew = () => {
- return (
-
-
-
- false}
- arrow={false}
- minDate={new Date()}
- render={}
- // weekDays={weekDays}
- className="custom-calendar"
- style={{
- width: "100%",
- height: "33px",
- boxSizing: "border-box",
- backgroundColor: "red",
- }}
- />
-
- );
+ return TestComponentNew
;
};
export default TestComponentNew;
diff --git a/src/components/TestComponentNew/index.scss b/src/components/TestComponentNew/index.scss
index d080051..e69de29 100644
--- a/src/components/TestComponentNew/index.scss
+++ b/src/components/TestComponentNew/index.scss
@@ -1,34 +0,0 @@
-.rmdp-arrow-container {
- background-color: #0074d9;
- border-radius: 2px !important;
- height: 24px !important;
- width: 24px !important;
-}
-
-.rmdp-arrow-container .rmdp-arrow {
- border: solid #fff;
- border-width: 0 2px 2px 0;
- margin-top: 8px !important;
-}
-
-.rmdp-wrapper .start {
- background: #0074d9 !important;
- color: #fff !important;
- border: none !important;
- box-shadow: none !important;
-}
-
-.rmdp-wrapper .end {
- background: #0074d9 !important;
- color: #fff !important;
- box-shadow: none !important;
-
- border: none !important;
-}
-
-.rmdp-range {
- background: #f7f7f7 !important;
- color: #0074d9 !important;
- border: none !important;
- box-shadow: none !important;
-}