\n \n \n \n \n {this.state.geoJsonElements}\n {this.state.selectedGeoJsonElement}\n \n \n {true ? accuracyCircle : null}\n {positionMarker}\n {this.props.selectLocation && this.state.center && (\n \n New plot position \n \n )}\n \n \n
\n );\n }\n}\n\nexport default MainMap;\n","import React, { Component } from 'react';\n\nimport Button from '@material-ui/core/Button';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\n\nimport './Navbar.css'\n\nclass NavBar extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\topen: false\n\t\t};\n\t}\n\n\tcomponentDidMount = () => {\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n } onClick={handleNoClick}>\n Nee\n \n } onClick={handleYesClick}>\n Ja\n \n
\n \n );\n }\n return (\n \n \n \n Bent u in staat om voor dit perceel het volgende onderscheid te maken? Zo ja vink dan aan, kies anders nee\n \n \n\n \n \n 0-A. Engels Raaigrasland\n \n \n glanzend groene productieve grassoorten; Type 0 in Schippers et al., 2012\n \n\n \n \n 0-B. Productieve voederkruiden\n \n \n Ingezaaide productieve voederkruiden (productieve grassen met o.a. smalle weegbree, cichorei en div. klavers)\n \n\n \n \n 0-C. Productief klavergrasland\n \n Productief klavergrasland (productieve grassen met minimaal 10% klaver) \n\n \n \n Geen van de typen 0-A, 0-B of 0-C \n (kies dit alleen als u het onderscheid tussen typen 1-5 niet kent) )\n \n Het grasland voldoet aan geen van de genoemde typen \n\n \n \n Nee\n \n Ik ben niet in staat deze typering goed te maken. \n
\n );\n};\n","import React, { useState } from \"react\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { FormControl, MenuItem, Paper, Select } from \"@material-ui/core\";\nimport Button from \"@material-ui/core/Button\";\nimport DoneIcon from \"@material-ui/icons/Done\";\nimport NavigateNextIcon from \"@material-ui/icons/NavigateNext\";\n\nexport const AnswerQuestionsStep2 = ({ onSubmitInfo }) => {\n const [start, setStart] = useState(false);\n const [answer1, setAnswer1] = useState(null);\n const [answer2, setAnswer2] = useState(null);\n const [answer3, setAnswer3] = useState(null);\n\n const handleGrazingChange = (event) => {\n setAnswer1(event.target.value);\n };\n const handleOverseededChange = (event) => {\n setAnswer2(event.target.value);\n };\n const handleRateChange = (event) => {\n setAnswer3(event.target.value);\n };\n const handleSubmitClick = () => {\n onSubmitInfo({ 1: answer1, 2: answer2, 3: answer3 });\n };\n const handleYesClick = () => {\n setStart(true);\n };\n const handleNoClick = () => {\n onSubmitInfo(null);\n };\n if (!start) {\n return (\n {true ? null : 
}
\n \n \n {true ? null : 
}
\n \n \n {true ? null : 
}
\n \n \n {true ? null : 
}
\n \n \n\n {true ? null : 
}
\n \n \n\n \n } onClick={handleNoClick}>\n Sla Over\n \n
\n \n } onClick={handleNoClick}>\n Nee\n \n } onClick={handleYesClick}>\n Ja\n \n
\n \n );\n }\n return (\n \n Fill: \n\n Wordt dit perceel begraasd? \n \n \n \n\n\n Is dit grasland recentelijk (afgelopen 5 jaar) ingezaaid of doorgezaaid? \n \n \n \n Hoe productief schat u dit grasland in? \n \n \n \n
\n );\n};\n","import React, { useState } from \"react\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Button from \"@material-ui/core/Button\";\nimport NavigateNextIcon from \"@material-ui/icons/NavigateNext\";\nimport { Paper } from \"@material-ui/core\";\n\nimport choice1 from \"./assets/image1.jpg\";\nimport choice2 from \"./assets/image2.jpg\";\nimport choice3 from \"./assets/image10.jpg\";\nimport choice4 from \"./assets/image3.png\";\nimport choice5 from \"./assets/image4.png\";\nimport choice6 from \"./assets/image6.png\";\nimport choice7 from \"./assets/image7.png\";\nimport choice8 from \"./assets/image8.png\";\n\nexport const AnswerQuestionsStepb = ({ onSubmitInfo }) => {\n const [start, setStart] = useState(true);\n\n const handleSubmit = (value) => () => {\n onSubmitInfo({ class: value });\n };\n const handleYesClick = () => {\n setStart(true);\n };\n const handleNoClick = () => {\n onSubmitInfo(null);\n };\n if (!start) {\n return (\n \n
\n \n } onClick={handleNoClick}>\n Nee\n \n } onClick={handleYesClick}>\n Ja\n \n
\n \n );\n }\n return (\n \n \n \n Bent u bekend met de indeling van Wim Schippers’ veldgids uit 2012? Zo ja vink dat dan het juiste type aan,\n kies anders nee\n \n \n\n \n \n 1. Grassen-mix (Type 1 in Schippers, 2012)\n \n\n \n \n 2. Dominant stadium (Type 2 in Schippers, 2012)\n \n\n \n \n 3. Gras-kruiden-mix (Type 3 in Schippers, 2012)\n \n\n \n \n 4. Bloemrijk grasland (Type 4 in Schippers, 2012)\n \n\n \n \n 5. Schraalland (Type 5 in Schippers, 2012)\n \n\n \n \n 6. Nee ik ben hier niet mee bekend\n \n\n
\n );\n};\n","import React, { Component } from \"react\";\n\nimport Button from \"@material-ui/core/Button\";\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nimport AddAPhotoIcon from \"@material-ui/icons/AddAPhoto\";\n\nimport AppUtility from \"../../AppUtility\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\n\nimport \"./AddPhoto.css\";\nimport { Paper, Snackbar, Typography } from \"@material-ui/core\";\nimport ApiManager from \"../../ApiManager\";\nimport PublishIcon from \"@material-ui/icons/Publish\";\nimport CancelIcon from \"@material-ui/icons/Cancel\";\nimport NavigateNextIcon from \"@material-ui/icons/NavigateNext\";\n\nimport { createMuiTheme, ThemeProvider } from \"@material-ui/core/styles\";\nimport { blue } from \"@material-ui/core/colors\";\nimport { AnswerQuestionsStep } from \"./AnswerQuestionsStep\";\nimport { AnswerQuestionsStep2 } from \"./AnswerQuestionsStep2\";\nimport { AnswerQuestionsStepb } from \"./AnswerQuestionsStepb\";\n\nimport example1 from \"./assets/image5.png\";\nimport example2 from \"./assets/image9.png\";\n\nfunction Alert(props) {\n return {true ? null : }
\n \n \n {true ? null : 
}
\n \n \n {true ? null : 
}
\n \n \n {true ? null : }
\n \n \n {true ? null : 
}
\n \n \n\n {true ? null : }
\n \n \n\n \n } onClick={handleNoClick}>\n Sla Over\n \n
\n \n -\n \n Vanaf de rand van het perceel, neemt u de foto’s staand en op ooghoogte\n \n
\n \n -Neem 2 foto’s en vermijd daarbij overlap \n
\n \n -Zorg dat u een klein stukje horizon of lucht op de foto zet \n
\n \n -\n \n Vermijd storende/afwijkende objecten op de foto, zoals een hekwerk of koe\n \n
\n \n -Vermijd de perceelrand en/of de slootkant \n
\n \n -Voorbeeld van een goede overzichtsfoto: \n
\n \n 
\n
\n \n );\n }\n return (\n \n -\n \n Richt de camera meer naar beneden voor het vastleggen van plantensoorten\n \n
\n \n -Maak representatieve fotos niet alleen de mooiste stukjes \n
\n \n -Neem 2 foto’s en vermijd daarbij overlap \n
\n \n -\n \n Als u daarvoor toestemming heeft en geen dieren verstoort, kunt u in het perceel gaan staan en meerdere\n detailfoto’s maken op verschillende plekken in het perceel\n \n
\n \n -\n \n Maak niet alleen foto’s van de allermooiste stukjes, maar juist van representatieve gedeelten\n \n
\n \n -Vermijd storende objecten zoals uw eigen schoenen \n
\n \n -Vermijd overlap tussen de foto’s \n
\n \n 
\n
\n \n );\n};\n\nconst Confirmation = ({ src, handleConfirmClick, handleRejectClick }) => {\n return (\n \n 
\n
\n );\n};\n\nconst theme = createMuiTheme({ palette: { primary: blue } });\n\nconst ProceedButton = ({ visible, handleProceedClick }) => {\n if (!visible) {\n return null;\n }\n return (\n \n } onClick={handleRejectClick}>\n Opnieuw\n \n\n
\n \n \n } onClick={handleProceedClick}>\n Klaar met deze stap\n \n \n
\n );\n};\n\nconst UploadButton = ({ step, type, onPhotoChange }) => {\n return (\n \n
\n );\n};\n\nclass AddPhoto extends Component {\n constructor(props) {\n super(props);\n this.state = { step: 1, open: false, photos: [[], []] };\n }\n\n handleClose = (event, reason) => {\n if (reason === \"clickaway\") {\n return;\n }\n\n this.setState({ open: false });\n };\n handleSubmit = (message, complete, answerType) => {\n const body = {\n text: JSON.stringify({ ...message, session: this.props.sessionId, answerType }),\n location: {\n x: this.props.position.coords[1],\n y: this.props.position.coords[0],\n },\n };\n\n body.mapId = this.props.extMap.id;\n body.layerId = \"e13b1302-2c96-445d-adf7-611c83f985eb\";\n body.geometryId = this.props.addedFeature.properties.id;\n\n ApiManager.post(\"/message/add\", body, this.props.user)\n .then(() => {\n complete && this.props.onActionPaneModeChange(AppUtility.actionPaneMode.none);\n })\n .catch((err) => {\n alert(\"Er is een fout opgetreden. Probeer nog eens.\");\n });\n };\n handleSubmitInfo1 = (message) => {\n this.props.onTypeChange();\n message && this.handleSubmit(message, false, 1);\n };\n handleSubmitInfo2 = (message) => {\n this.props.onOpenSnackbar();\n if (message) {\n this.handleSubmit(message, true, 2);\n } else {\n this.props.onActionPaneModeChange(AppUtility.actionPaneMode.none);\n }\n };\n handleProceedClick = () => {\n this.setState({ step: 1 });\n this.props.onTypeChange();\n };\n handleRejectClick = () => {\n this.setState({ confirm: null });\n };\n\n handleConfirmClick = (base64) => {\n const photos = [...this.state.photos];\n photos[this.props.type].push(base64);\n\n const body = {\n image: base64,\n text: JSON.stringify({\n session: this.props.sessionId,\n photoType: this.props.type ? \"Detailfoto\" : \"Overzichtfoto\",\n }),\n location: {\n x: this.props.position.coords[1],\n y: this.props.position.coords[0],\n },\n };\n\n body.mapId = this.props.extMap.id;\n body.layerId = \"e13b1302-2c96-445d-adf7-611c83f985eb\";\n body.geometryId = this.props.addedFeature.properties.id;\n\n ApiManager.post(\"/message/add\", body, this.props.user)\n .then((result) => {\n // this.setState({ open: true, snackbarOpen: true });\n })\n .catch((err) => {\n alert(\"Er is een fout opgetreden. Probeer nog eens.\");\n });\n this.setState({ step: this.state.step + 1, photos, confirm: null });\n };\n onPhotoChange = (e) => {\n let file = e.target.files[0];\n\n if (!file.type.includes(\"image\")) {\n alert(\"Foto moet een plaatje zijn.\");\n return;\n }\n\n toBase64(file)\n .then((base64) => {\n console.log(\"uploaded\");\n console.log(base64);\n this.handleConfirmClick(base64);\n this.setState({ confirm: base64 });\n })\n .catch((err) => {\n alert(`Foutief bestand. Probeer nog eens of een ander bestand.`);\n });\n };\n\n render() {\n if (this.props.type === 2) {\n return \n \n
\n \n );\n }\n return (\n <>\n \n \n
\n \n );\n }\n}\n\nexport default PostPhoto;\n","import React, { Component } from \"react\";\nimport moment from \"moment\";\n\nimport Stepper from \"@material-ui/core/Stepper\";\nimport Step from \"@material-ui/core/Step\";\nimport StepLabel from \"@material-ui/core/StepLabel\";\nimport StepContent from \"@material-ui/core/StepContent\";\nimport Typography from \"@material-ui/core/Typography\";\nimport IconButton from \"@material-ui/core/IconButton\";\n\nimport DeleteIcon from \"@material-ui/icons/Delete\";\n\nimport ApiManager from \"../../ApiManager\";\n\nimport \"./Timeline.css\";\n\nconst getMessageData = (message) => {\n try {\n return JSON.parse(message.text);\n } catch {\n return {};\n }\n};\nconst combineMessages = (messages) => {\n const map = {};\n const result = [];\n messages.forEach((message) => {\n const data = getMessageData(message);\n if (data.session) {\n if (!map[data.session]) {\n map[data.session] = [];\n }\n map[data.session].push(message);\n } else {\n result.push(message);\n }\n });\n Object.keys(map).forEach((session) => {\n const items = map[session];\n const descriptionItem = items.find((item) => !item.image);\n const group = { ...descriptionItem, group: true };\n group.images = items.map((item) => item).filter((item) => !!item.image);\n group.textMessages = items.map((item) => item).filter((item) => !item.image);\n result.push(group);\n });\n return result.sort((a, b) => {\n const aDate = moment(a.date);\n const bDate = moment(b.date);\n\n if (aDate.isBefore(bDate)) {\n return 1;\n }\n if (aDate.isAfter(bDate)) {\n return -1;\n }\n return 0;\n });\n};\n\nclass Timeline extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n geoMessages: null,\n };\n }\n\n componentDidMount() {\n console.log('MOUNTING timeline')\n console.log(this.props)\n this.getGeoMessages();\n }\n\n getMessages = async (mapId, layerId, elementId) => {\n let body = {\n mapId,\n layerId,\n geometryIds:[elementId],\n };\n\n const { result } = await ApiManager.post(\"/message/get\", body, this.props.user);\n return result;\n };\n getGeoMessages = async () => {\n const { selectedFeature } = this.props;\n console.log('getting messages for')\n console.log(selectedFeature)\n let geoMessages\n try {\n geoMessages = await this.getMessages(selectedFeature.properties.mapId, selectedFeature.properties.layerId, selectedFeature.properties.id);\n console.log('found messages')\n console.log(geoMessages)\n } catch (err) {\n alert(\"Er is een fout opgetreden. Herlaadt de pagina en probeer nog eens.\");\n this.setState({ geoMessages: [] });\n }\n let combined = combineMessages(geoMessages)\n console.log(combined)\n this.setState({ geoMessages: combined });\n\n\n };\n\n viewImage = (geoMessage) => {\n if (geoMessage.fullImage) {\n this.props.onModalChange(\n
\n }\n \n {geoMessage.user ? geoMessage.user.username : null}\n {canDelete ? (\n this.onDelete(geoMessage)}\n >\n
\n {moment(geoMessage.date).format(\"DD-MM-YYYY HH:mm\")}
\n - \n
- \n
Class: {data.class} \n \n
- \n
- \n
1: {data[1]} \n \n - \n
2: {data[2]} \n \n - \n
3: {data[3]} \n \n
\n {geoMessage.images.map((image) => (\n
\n \n 
this.viewImage(image)} />\n
\n ))}\n \n {timelineItems} \n
\n );\n }\n}\n\nexport default Timeline;\n","import React, { Component } from \"react\";\n\nimport Paper from \"@material-ui/core/Paper\";\nimport IconButton from \"@material-ui/core/IconButton\";\n\nimport CloseIcon from \"@material-ui/icons/Close\";\n\nimport AddPhoto from \"./AddPhoto/AddPhoto\";\nimport PostPhoto from \"./PostPhoto/PostPhoto\";\nimport Timeline from \"./Timeline/Timeline\";\n\nimport AppUtility from \"../AppUtility\";\n\nimport \"./ActionPane.css\";\nimport { Typography } from \"@material-ui/core\";\n\nconst LetOp = () => {\n return (\n \n
\n \n {this.state.type === 1 ?
\n \n
\n \n \n \n
\n {`Perceel ${this.props.selectedFeature.properties.id}`}
\n\n map.id === this.props.selectedFeature.properties.mapId\n )}\n />\n
\n \n
\n );\n }\n}\n\nexport default ModalView;\n","import React, { Component } from \"react\";\n\nimport { createMuiTheme, ThemeProvider } from \"@material-ui/core/styles\";\nimport Button from \"@material-ui/core/Button\";\nimport IconButton from \"@material-ui/core/Button\";\nimport { Paper, Snackbar, Typography } from \"@material-ui/core\";\n\nimport DefaultTheme from \"./theme\";\n\nimport AddIcon from \"@material-ui/icons/Add\";\nimport bbox from \"geojson-bbox\";\nimport Map from \"./Map/Map\";\nimport Navbar from \"./Navbar/Navbar\";\nimport ActionPane from \"./ActionPane/ActionPane\";\nimport ModalView from \"./ModalView/ModalView\";\n\nimport ApiManager from \"./ApiManager\";\nimport AppUtility from \"./AppUtility\";\n\nimport \"./App.css\";\nimport moment from \"moment\";\nimport MuiAlert from \"@material-ui/lab/Alert\";\nconst theme = createMuiTheme(DefaultTheme);\n\nconst ACCOUNTS_URL = \"https://account.ellipsis-drive.com/v2\";\n// const ACCOUNTS_URL = \"https://dev.account.ellipsis-drive.com\";\n// const ACCOUNTS_URL = 'http://localhost:3001';\n\nconst LOCAL_STORE_USER_KEY = \"user\";\n\nexport const PLOT_FREE_AREA_MAP_ID = \"cee89344-dfe2-41b1-a9ea-c1f4acdf8bfa\";\nconst PLOT_NETHERLANDS_AREA_MAP_ID = \"60b634e1-8dfd-4612-bfe2-b828c81e8dce\";\nconst PERCELEN_LAYER_ID = \"e3a7b9bf-dba4-4d4f-9738-954973ab0c86\";\nconst FREE_PERCELEN_LAYER_ID = \"e13b1302-2c96-445d-adf7-611c83f985eb\";\n\nconst GEOMESSAGE_LIMIT = 100;\nconst NEARBY_FIELDS_METER = 15;\nconst NEARBY_FIELDS_ACCURACY_MODIFIER = 1;\nfunction Alert(props) {\n return \n \n \n
\n \n {children}\n
\n \n \n {this.state.floatingMessage}\n \n
\n );\n }\n\n return (\n \n
\n {floatingMessage}\n \n \n
\n