\r\n {/*
\r\n )\r\n }\r\n\r\n}\r\n\r\nexport default Swipe;","import React from 'react';\r\nimport Backdrop from '@material-ui/core/Backdrop';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n backdrop: {\r\n zIndex: theme.zIndex.drawer + 1,\r\n color: '#fff',\r\n },\r\n}));\r\n\r\nexport default function Backdrops({open}) {\r\n const classes = useStyles();\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React,{useState,useEffect} from 'react';\r\nimport \"../../styles/CollectionsDetail.css\";\r\nimport Button from '@material-ui/core/Button';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Backdrops from './BackDrop.js'\r\nimport CustomModal from './CustomModal'\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport AddIcon from '@material-ui/icons/Add';\r\nimport RemoveIcon from '@material-ui/icons/Remove';\r\nimport APIs from '../../Api.js';\r\n\r\nconst useStyles = makeStyles({\r\n button:{\r\n padding:13,\r\n borderRadius:0,\r\n background: 'linear-gradient( 135deg, rgb(49, 0, 62) 0%, rgb(195, 40, 110) 100% )'\r\n }\r\n});\r\n\r\nconst CollectionDetail = ({ collection,type }) => {\r\n const currentDate = new Date();\r\n currentDate.setDate(currentDate.getDate() - 1);\r\n const startDates = currentDate.toISOString().slice(0, 10);\r\n const [endDate, setEndDate] = useState(startDates);\r\n const [startDate, setStartDate] = useState(startDates);\r\n const [orderData,SetOrderData] = useState({})\r\n const [productCollectionData,SetProductCollectionData] = useState('')\r\n const [showBackDrop,SetBackDrop] = useState(false)\r\n const [productType,SetProductType] = useState('select')\r\n const [productID,SetProductID] = useState('')\r\n const [imagesIDs,SetImagesIDs] = useState([])\r\n const classes = useStyles();\r\n const [openModel,SetOpenModel] = useState(false)\r\n const [loader,SetLoader] = useState(false)\r\n const [linkID,SetLinkID] = useState('')\r\n const [IdsData,SetIdsData] = useState('')\r\n const [orderBtnText,SetOrderBtnText] = useState('Place Order')\r\n const [orderloader,SetOrderloader] = useState(false)\r\n const [coordinatorData,SetCoordinatorData] = useState([{lat:'',long:''}])\r\n const [error,SetError] = useState('')\r\n const [orderError,SetPlaceOrderError] = useState('')\r\n const [collectionName_,SetCollectionName] = useState('')\r\n const [estimateOrderLoader,SetEstimateOrderloader] = useState(false)\r\n const [estimateOrderCost,SetEstimateOrderCost] = useState('')\r\n const [paymentInfo,SetPaymentInfo] = useState('')\r\n const [enabelPlaceOrder,SetEnabelPlaceOrder] = useState(false)\r\n \r\n useEffect(()=>{\r\n paymentInfoHandler()\r\n },[])\r\n\r\n const paymentInfoHandler = () =>{\r\n let paymentData = localStorage.getItem('subscribe') || false\r\n if (paymentData){\r\n paymentData = JSON.parse(paymentData)\r\n } \r\n SetPaymentInfo(paymentData)\r\n }\r\n \r\n const selectForm = (option)=>{\r\n return (\r\n <>\r\n { option.key == 'geometry' ?\r\n <>\r\n
geoMetryTypeHandler(event,option.data)}>\r\n Select \r\n { option.data[0].map((item,index)=>{\r\n return (\r\n {item.title} \r\n )\r\n }) \r\n }\r\n \r\n {coordinatorFieldForm(option)}\r\n \r\n :\r\n
orderParamHandler(event,option)} value={orderData[option.key]}>\r\n Select \r\n { option.data[0].map((item,index)=>{\r\n return (\r\n {item.title} \r\n )\r\n }) \r\n }\r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n const selectImageIdHandler = (event,data)=>{\r\n SetOpenModel(true)\r\n SetIdsData(data)\r\n } \r\n\r\n const textForm = (data)=>{\r\n let key = data.key\r\n return (\r\n <>\r\n { key == 'id'?\r\n
\r\n selectImageIdHandler(event,data)}>Select Id \r\n \r\n :\r\n
orderParamHandler(event,data)} value={orderData[data.key]} type=\"text\" />\r\n }\r\n \r\n \r\n )\r\n }\r\n\r\n const dateTimeForm = (data)=>{\r\n return (\r\n
orderParamHandler(event,data)} value={orderData[data.key]} type=\"date\"/>\r\n )\r\n }\r\n\r\n const orderParamHandler = (event,data)=>{\r\n SetPlaceOrderError(\"\")\r\n let values = event.target.value\r\n if (event.target.type == 'number'){\r\n if (values.indexOf(\".\") !== -1) {\r\n values = parseFloat(values)\r\n } else {\r\n values = parseInt(values)\r\n }\r\n }\r\n let key = data.key\r\n let updateParms = {...orderData,[key]:values}\r\n SetOrderData(updateParms) \r\n }\r\n\r\n const integerForm = (data)=>{\r\n let value_ =orderData[data.key]\r\n let setp_ = 1\r\n if (value_ != '')\r\n if (Number.isInteger(data.maximum)){\r\n value_ = parseInt(value_)\r\n setp_ = 1\r\n } else {\r\n value_ = parseFloat(value_)\r\n setp_=0.1\r\n }\r\n return (\r\n
orderParamHandler(event,data)} value={value_} min={data.minimum} max={data.maximum}/>\r\n )\r\n }\r\n\r\n const geoMetryTypeHandler = (event)=>{ \r\n let values = event.target.value\r\n let updateParms = {...orderData,type:values}\r\n SetOrderData(updateParms)\r\n\r\n }\r\n\r\n const coordinatorParamHandler = (event,data,index)=>{\r\n let valueKey = event.target.name\r\n coordinatorData[index][valueKey] = event.target.value\r\n SetCoordinatorData([...coordinatorData]) \r\n let key = data.key\r\n let coordinatorData_ = []\r\n let tempCoordinatorData_ = []\r\n coordinatorData.map((item,index)=>{\r\n let lat = item.lat;\r\n let long = item.long;\r\n tempCoordinatorData_.push([parseFloat(lat),parseFloat(long)])\r\n })\r\n \r\n let type = orderData.type\r\n if (type == 'Point'){\r\n coordinatorData_ = tempCoordinatorData_\r\n } else {\r\n coordinatorData_ = [tempCoordinatorData_]\r\n }\r\n orderData.geokey = key\r\n orderData[key] = coordinatorData_\r\n SetOrderData({...orderData})\r\n }\r\n \r\n const createCoordinatorParamHandler = ()=>{\r\n SetCoordinatorData([...coordinatorData,{lat:'',long:''}])\r\n }\r\n\r\n const removeCoordinatorParamHandler = (event,data,index)=>{\r\n const updatedCoordinatorData = [...coordinatorData];\r\n updatedCoordinatorData.splice(index, 1);\r\n SetCoordinatorData(updatedCoordinatorData);\r\n \r\n let key = data.key\r\n let coordinatorData_ = []\r\n let tempCoordinatorData_ = []\r\n updatedCoordinatorData.map((item,index)=>{\r\n let lat = item.lat;\r\n let long = item.long;\r\n tempCoordinatorData_.push([parseFloat(lat),parseFloat(long)])\r\n })\r\n let type = orderData.type\r\n if (type == 'Point'){\r\n coordinatorData = tempCoordinatorData_\r\n } else {\r\n coordinatorData_ = [tempCoordinatorData_]\r\n }\r\n orderData.geokey = key\r\n orderData[key] = coordinatorData_\r\n\r\n SetOrderData({...orderData})\r\n }\r\n\r\n const coordinatorFieldForm = (data)=>{\r\n return(\r\n
\r\n
\r\n latitude \r\n longitude \r\n
\r\n
\r\n { \r\n \r\n coordinatorData.map((item,index)=>{\r\n return(\r\n
\r\n )\r\n })\r\n }\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n const coordinatesForm = (data)=>{\r\n return (\r\n <> \r\n
geoMetryTypeHandler(event,data.data)}>\r\n Select \r\n { \r\n data.selection.map((item,index)=>{\r\n return (\r\n {item} \r\n )\r\n })\r\n\r\n }\r\n \r\n {coordinatorFieldForm(data)}\r\n \r\n )\r\n }\r\n\r\n const formTypes = (key,data)=>{\r\n switch (key) {\r\n case 'select':\r\n return (selectForm(data))\r\n break;\r\n case 'text':\r\n return (textForm(data))\r\n break;\r\n case 'date-time':\r\n return (dateTimeForm(data))\r\n break;\r\n case 'integer':\r\n return (integerForm(data))\r\n break;\r\n case 'coordinates':\r\n return (coordinatesForm(data))\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const collectionForm = (params)=>{\r\n let properties = params.properties;\r\n let definitions = params.definitions;\r\n return(\r\n
\r\n { Object.keys(properties).map((item,index)=>{\r\n let data = properties[item]\r\n data['key'] = item\r\n if (data.allOf){\r\n \r\n let coordinatesData = []\r\n let allOfData = data.allOf\r\n allOfData.map((allOfItem,index)=>{\r\n let allOfDef = allOfItem.$ref.replace('#/definitions/','');\r\n const definitionsData = definitions[allOfDef]\r\n if (definitionsData.anyOf){\r\n coordinatesData.push(definitionsData.anyOf)\r\n } else{\r\n coordinatesData.push([definitionsData]) \r\n }\r\n \r\n })\r\n data.input_type = 'select'\r\n data['data'] = coordinatesData\r\n \r\n\r\n } else if (data.anyOf){\r\n let anyOfData = data.anyOf\r\n let coordinatesData = []\r\n let coordinatesSelection = []\r\n anyOfData.map((anyOfItem,index)=>{\r\n let anyOfDef = anyOfItem.$ref.replace('#/definitions/','');\r\n const definitionsData = definitions[anyOfDef]\r\n if (definitionsData.properties){\r\n coordinatesData.push(definitionsData)\r\n coordinatesSelection.push(anyOfDef)\r\n }\r\n })\r\n data.input_type = 'coordinates'\r\n data['data'] = coordinatesData\r\n data['selection'] = coordinatesSelection\r\n\r\n } else if (data.$ref){\r\n let refDef = data.$ref.replace('#/definitions/','');\r\n const definitionsData = definitions[refDef]\r\n let coordinatesData = [definitionsData]\r\n let coordinatesSelection = [refDef]\r\n data.input_type = 'coordinates'\r\n data['data'] = coordinatesData\r\n data['selection'] = coordinatesSelection\r\n data['title'] = item.toUpperCase()\r\n }\r\n else { \r\n if (data.format){\r\n if (data.format == 'date-time'){\r\n data['input_type'] = 'date-time'\r\n data['value'] = ''\r\n } else{\r\n\r\n }\r\n } else if (data.type == 'string'){\r\n data['input_type'] = 'text'\r\n data['value'] = ''\r\n } else if (data.type == 'integer' || data.type == 'number'){\r\n data['input_type'] = 'integer'\r\n data['value'] = 0\r\n } \r\n }\r\n return(\r\n
\r\n \r\n {data.title} \r\n \r\n {formTypes(data.input_type,data)}\r\n
\r\n )\r\n })}\r\n
\r\n ) \r\n }\r\n\r\n const placeOrderHandler = async(event)=>{\r\n SetPlaceOrderError('')\r\n SetOrderloader(true)\r\n let product_id = orderData.dataProduct\r\n let params = {\r\n product_type:productType,\r\n order_type:type,\r\n collection_name:collectionName_,\r\n params:{\r\n dataProduct:product_id,\r\n params:orderData\r\n }\r\n }\r\n console.log(collection,params);\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n body:JSON.stringify(params)\r\n };\r\n try {\r\n const response = await fetch(APIs.PLACE_ORDER, headerOptions);\r\n const {data,code,message } = await response.json();\r\n if (code == 200){\r\n SetOrderBtnText('Order Placed Successful')\r\n SetOrderData({})\r\n } else{\r\n SetPlaceOrderError(message)\r\n SetOrderData({})\r\n }\r\n SetOrderloader(false)\r\n SetOrderData({})\r\n } catch (error) {\r\n SetOrderloader(false)\r\n SetOrderData({})\r\n }\r\n }\r\n\r\n const productTypeHandler = (event)=>{\r\n let value = event.target.value\r\n let dataProductIds = collection.data_ids\r\n let collectionData = collection.collection_name\r\n if (value != 'select'){\r\n SetImagesIDs([])\r\n setEndDate(startDates)\r\n setStartDate(startDates)\r\n SetProductType(value)\r\n SetLinkID('')\r\n SetProductID(dataProductIds[value])\r\n productParamsHandler(dataProductIds[value],collectionData[value])\r\n SetCollectionName(collectionData[value])\r\n }\r\n }\r\n\r\n const productParamsHandler = async (productId,collection_name,fetchType='self') => {\r\n let productId_ = productID \r\n if (productId && productId !=\"\"){\r\n productId_ = productId\r\n } \r\n\r\n SetBackDrop(true)\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n };\r\n let payload = {hostName:collection.hostName,collectionName:collection_name,start:startDate,end:endDate,date:true};\r\n\r\n if (type == 'tasking'){\r\n payload.hostName = false\r\n payload.collectionName = false\r\n payload.date = false\r\n }\r\n \r\n try {\r\n const url = new URL(APIs.GET_PRODUCT_PARAMS+productId_);\r\n url.search = new URLSearchParams(payload).toString();\r\n const response = await fetch(url, headerOptions);\r\n const {code,data } = await response.json();\r\n if (code == 200){\r\n let scene_data = data.scene_data \r\n if (scene_data.length > 0){\r\n let imagesData = []\r\n scene_data.map((item,index)=>{\r\n let ids = item.properties.id\r\n imagesData.push({value:ids,const:ids})\r\n })\r\n \r\n SetImagesIDs(imagesData)\r\n SetLinkID(data.linkid)\r\n } else{\r\n if (fetchType!='self'){\r\n SetError(\"Ids not found this date range\")\r\n }\r\n }\r\n let properties = data.properties\r\n let allKeys = {type:'',dataProduct:productId_,'geokey':''}\r\n Object.keys(properties).map((item,index)=>{\r\n allKeys[item] = ''\r\n })\r\n SetBackDrop(false)\r\n SetOrderData(allKeys)\r\n SetProductCollectionData(data);\r\n SetLoader(false)\r\n } else {\r\n SetBackDrop(false)\r\n SetLoader(false)\r\n }\r\n \r\n } catch (error) {\r\n SetBackDrop(false) \r\n SetLoader(false)\r\n }\r\n }\r\n\r\n const productTypeForm = (collection)=>{\r\n let dataTypes = collection.data_type\r\n return(\r\n <> \r\n
productTypeHandler(event)}>\r\n Select \r\n { \r\n dataTypes.map((item,index)=>{\r\n return (\r\n {item.name} \r\n )\r\n })\r\n }\r\n \r\n \r\n )\r\n }\r\n\r\n const handleDateChange = (e,type) => {\r\n SetError(\"\")\r\n if (type == 'start'){\r\n setStartDate(e.target.value);\r\n } else {\r\n setEndDate(e.target.value);\r\n }\r\n \r\n };\r\n\r\n const dateRangeForm = (collection)=>{\r\n return(\r\n <> \r\n { type == 'catalog' &&\r\n <>\r\n
Date Range \r\n
\r\n Start date \r\n
\r\n
\r\n End date \r\n
\r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n const prductInfo =()=>{\r\n let productInfo = collection.info\r\n return(\r\n <>\r\n {\r\n Object.keys(productInfo).map((item,index)=>{\r\n let productData = productInfo[item]\r\n return(\r\n
\r\n
{productData.name} \r\n
\r\n { productData.content \r\n ?\r\n
{productData.content}
\r\n :\r\n
\r\n { productData.section ?\r\n productData.section.map((sectionItem,index)=>{\r\n return(\r\n
\r\n
{sectionItem.name} \r\n
\r\n \r\n \r\n {sectionItem.head.name} \r\n {sectionItem.head.content} \r\n \r\n \r\n \r\n {\r\n sectionItem.data.map((sectionDataItem,index)=>{\r\n return(\r\n \r\n {sectionDataItem.name}
\r\n \r\n {\r\n sectionDataItem.content!='' ?\r\n sectionDataItem.content.map((contentItem,index)=>{\r\n return(\r\n {contentItem} \r\n )\r\n })\r\n :\r\n sectionDataItem.data.map((contentDataItem,index)=>{\r\n return(\r\n <>\r\n {contentDataItem.name} \r\n \r\n {\r\n contentDataItem.content.map((contentItems,index)=>{\r\n return(\r\n {contentItems} \r\n )\r\n })\r\n }\r\n \r\n \r\n )\r\n })\r\n } \r\n \r\n \r\n \r\n )\r\n })\r\n } \r\n \r\n
\r\n
\r\n )\r\n })\r\n :\r\n productData.data.map((dataItem,index)=>{\r\n return(\r\n <>\r\n
{dataItem.name}
\r\n
\r\n { dataItem.content.map((contentItem,index)=>{\r\n return(\r\n {contentItem} \r\n )\r\n })}\r\n \r\n \r\n )\r\n })\r\n }\r\n
\r\n }\r\n \r\n
\r\n
\r\n )\r\n })\r\n }\r\n \r\n )\r\n }\r\n\r\n const closeImageIdModel = () => {\r\n SetOpenModel(false)\r\n }\r\n \r\n const loadMoreIdHandler = async(event,linkid) => {\r\n SetLoader(true)\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n };\r\n let payload = {hostName:collection.hostName,collectionName:collectionName_};\r\n try {\r\n const url = new URL(APIs.GET_SCENE_IDS+linkid);\r\n url.search = new URLSearchParams(payload).toString();\r\n const response = await fetch(url, headerOptions);\r\n const {code,data } = await response.json();\r\n if (code == 200){\r\n let scene_data = data.scene_data \r\n if (scene_data.length > 0){\r\n let imagesData = []\r\n scene_data.map((item,index)=>{\r\n let ids = item.properties.id\r\n imagesData.push({value:ids,const:ids})\r\n })\r\n let allData = [...imagesIDs,...imagesData]\r\n SetImagesIDs(allData)\r\n SetLinkID(data.linkid)\r\n } else{\r\n SetError(\"Ids not found this date range\")\r\n }\r\n SetLoader(false)\r\n \r\n } else {\r\n SetLoader(false)\r\n //console.log()\r\n }\r\n } catch (error) {\r\n SetLoader(false)\r\n //console.log()\r\n }\r\n }\r\n\r\n const getIdHandler = (event) => {\r\n SetLoader(true)\r\n productParamsHandler('',collectionName_,'model')\r\n }\r\n \r\n const selectedIdHandler = (event)=>{\r\n event.preventDefault();\r\n let updatedData_ = {...orderData,[IdsData.key]:event.target.value}\r\n SetOrderData(updatedData_)\r\n SetOpenModel(false)\r\n }\r\n\r\n const estimateOrderHandler = async(event)=>{\r\n SetPlaceOrderError('')\r\n SetEstimateOrderloader(true)\r\n let product_id = orderData.dataProduct\r\n let params = {order_type:type,params:{dataProduct:product_id,params:orderData}}\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n body:JSON.stringify(params)\r\n };\r\n try {\r\n const response = await fetch(APIs.ESTIMATE_ORDER, headerOptions);\r\n const {data,code,message } = await response.json();\r\n if (code == 200){\r\n SetEstimateOrderCost('Order Cost:- '+data.cost)\r\n SetEstimateOrderloader(false)\r\n SetEnabelPlaceOrder(true)\r\n } else{\r\n SetPlaceOrderError(message)\r\n SetEstimateOrderloader(false)\r\n SetEnabelPlaceOrder(false)\r\n SetEstimateOrderCost('')\r\n }\r\n } catch (error) {\r\n SetEstimateOrderloader(false)\r\n SetEnabelPlaceOrder(true)\r\n SetEstimateOrderCost('')\r\n }\r\n }\r\n\r\n return (\r\n
\r\n
{collection.title} \r\n
{collection.description}
\r\n
\r\n
\r\n {prductInfo()}\r\n
\r\n
\r\n
Product Type \r\n {productTypeForm(collection)}\r\n \r\n
\r\n {\r\n productCollectionData &&\r\n <> \r\n
Order product \r\n {collectionForm(productCollectionData)}\r\n {orderError &&
{orderError}
}\r\n { estimateOrderCost &&
{estimateOrderCost}
}\r\n
\r\n estimateOrderHandler(event)} \r\n size=\"medium\" \r\n style={{width:\"20%\",opacity:0.6,marginRight:50,borderRadius:5}} variant=\"contained\" color=\"secondary\">\r\n {\r\n estimateOrderLoader ?\r\n \r\n\r\n {\r\n enabelPlaceOrder &&\r\n orderBtnText=='Place Order'&&placeOrderHandler(event)} size=\"medium\" \r\n style={{width:\"25%\",opacity:0.6,borderRadius:5}} variant=\"contained\" color=\"secondary\"\r\n >\r\n {\r\n orderloader ? \r\n }\r\n
\r\n \r\n }\r\n
\r\n
\r\n \r\n \r\n {dateRangeForm(collection)}\r\n\r\n
\r\n { imagesIDs.length > 0 &&\r\n selectedIdHandler(event)}>\r\n ()=>{}}>Select \r\n {\r\n imagesIDs.map((imageItem,index)=>{\r\n return(\r\n {imageItem.const} \r\n )\r\n })\r\n }\r\n \r\n } \r\n
\r\n
{error.error} }\r\n \r\n { \r\n \r\n linkID!=''? loadMoreIdHandler(event,linkID):getIdHandler(event)} size=\"medium\" variant=\"contained\" color=\"secondary\">\r\n {\r\n linkID != '' ? \r\n loader ?\r\n \r\n }\r\n \r\n
\r\n \r\n \r\n )\r\n};\r\n\r\nexport default CollectionDetail;","import React from \"react\";\r\nimport { CardElement } from \"@stripe/react-stripe-js\";\r\n\r\nconst CARD_ELEMENT_OPTIONS = {\r\n style: {\r\n base: {\r\n color: \"#303238\",\r\n fontSize: \"16px\",\r\n fontFamily: \"sans-serif\",\r\n fontSmoothing: \"antialiased\",\r\n \"::placeholder\": {\r\n color: \"#CFD7DF\"\r\n }\r\n },\r\n invalid: {\r\n color: \"#e5424d\",\r\n \":focus\": {\r\n color: \"#303238\"\r\n }\r\n }\r\n }\r\n};\r\n\r\nfunction CardSection() {\r\n return (\r\n
\r\n {/* Card details */}\r\n \r\n );\r\n}\r\n\r\nexport default CardSection;","import React from \"react\";\r\nimport { ElementsConsumer, CardElement } from \"@stripe/react-stripe-js\";\r\nimport CardSection from \"./CardSection\";\r\nimport APIs from '../Api';\r\n\r\nclass CheckoutForm extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n productInfo:{}\r\n };\r\n }\r\n\r\n handleSubmit = async (event) => {\r\n event.preventDefault();\r\n\r\n const { stripe, elements,getCredit } = this.props;\r\n if (!stripe || !elements) {\r\n return;\r\n }\r\n \r\n const card = elements.getElement(CardElement);\r\n \r\n const { paymentMethod, error } = await stripe.createPaymentMethod({\r\n type: 'card',\r\n card,\r\n });\r\n\r\n if (error) {\r\n console.error(error.message);\r\n } else {\r\n\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n };\r\n \r\n headerOptions.body = JSON.stringify({id:paymentMethod.id})\r\n const response = await fetch(APIs.STRIPE_PAYMENT_INTENT, headerOptions);\r\n const { key } = await response.json();\r\n \r\n const confirmResult = await stripe.confirmCardPayment(key, {\r\n payment_method: paymentMethod.id,\r\n return_url: 'http://www.farmin-app.com/',\r\n });\r\n \r\n if (confirmResult.error) {\r\n console.error(confirmResult.error.message);\r\n } else {\r\n let intent_id = confirmResult.paymentIntent.id;\r\n let amount = this.state.productInfo.amount\r\n let credit = 10000\r\n headerOptions.body = JSON.stringify({intent_id,amount,credit})\r\n await fetch(APIs.STRIPE_PAYMENT_SUCCESS, headerOptions);\r\n getCredit()\r\n }\r\n }\r\n };\r\n\r\n getProductInfo = async ()=> {\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n };\r\n const response = await fetch(APIs.STRIPE_SINGLE_PRODUCT_INFO, headerOptions);\r\n const {code,data} = await response.json();\r\n if (code == 200){\r\n this.setState({productInfo:data})\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.getProductInfo()\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n
\r\n
\r\n \r\n Amount: {this.state.productInfo.amount} \r\n {this.state.productInfo.currency} , \r\n Credit: 10000 \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default function InjectedCheckoutForm(props) {\r\n return (\r\n
\r\n {({ stripe, elements }) => (\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardActionArea from '@material-ui/core/CardActionArea';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport Button from '@material-ui/core/Button';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\nconst useStyles = makeStyles({\r\n root: {\r\n maxWidth: '90%',\r\n boxShadow:'0px 10px 30px rgba(0, 0, 0, 0.4)',\r\n borderRadius:10,\r\n background: '#f4f4f4'\r\n },\r\n media: {\r\n height: 140,\r\n },\r\n buttonDiv:{\r\n marginTop:26,\r\n padding:0\r\n },\r\n button:{\r\n padding:13,\r\n borderRadius:0,\r\n background: 'linear-gradient( 135deg, rgb(49, 0, 62) 0%, rgb(195, 40, 110) 100% )'\r\n }\r\n});\r\n\r\nexport default function Plans({planDetails,onClick,purchased}) {\r\n const classes = useStyles();\r\n let amount = planDetails.details.unit_amount.toString().slice(0, -2)\r\n return (\r\n
\r\n \r\n \r\n \r\n {planDetails.name} plan\r\n \r\n \r\n Credit {planDetails.credits}\r\n \r\n \r\n {amount} {planDetails.details.currency.toUpperCase()}\r\n \r\n \r\n \r\n \r\n {\r\n purchased ? \r\n Subscribed \r\n :\r\n onClick(planDetails.live_plan_id)} variant=\"contained\" color=\"secondary\">subscribe \r\n }\r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect,useState } from 'react';\r\nimport CheckoutForm from \"../CheckoutForm.js\";\r\nimport { Elements } from '@stripe/react-stripe-js';\r\nimport { loadStripe } from \"@stripe/stripe-js\";\r\nimport Plans from './Plans.js'\r\nimport Backdrops from './BackDrop.js'\r\nimport APIs from '../../Api.js';\r\nimport { log } from 'deck.gl';\r\n\r\nconst Stripe = ()=> {\r\n const stripePromise = loadStripe(\"pk_test_51OHM9lKTFbocMdpQKaYXWleSmUWpIoIfOL2aE6KhzeBT26IPubSNCj7jpKYjflZAphvi4CWfZCqB7STHyI9DQYKx00IaOvzAW9\")\r\n const [credit,setCredit] = useState(0)\r\n const [purchasedPlan,SetPurchasedPlan] = useState(false)\r\n const [planData,SetPlanData] = useState([])\r\n const [showBackDrop,SetBackDrop] = useState(true)\r\n\r\n useEffect(()=>{\r\n getCredit()\r\n getAllPlan()\r\n },[])\r\n\r\n const getCredit = async ()=> {\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n };\r\n const response = await fetch(APIs.GET_CREDIT_STRIPE, headerOptions);\r\n const { credit,data,code } = await response.json();\r\n if (code == 200){\r\n setCredit(credit)\r\n SetPurchasedPlan(data)\r\n let subscribedPlan = data\r\n if (data){\r\n subscribedPlan = JSON.stringify(data)\r\n }\r\n localStorage.setItem('subscribe',subscribedPlan)\r\n \r\n }\r\n }\r\n\r\n const getAllPlan = async ()=> {\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'GET',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n };\r\n const response = await fetch(APIs.GET_PLANS, headerOptions);\r\n const { code,data } = await response.json();\r\n if (code == 200){\r\n SetPlanData(data)\r\n }\r\n setTimeout(()=>{\r\n SetBackDrop(false)\r\n },500)\r\n }\r\n\r\n const planHandler = async (plan_id)=> {\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Token ${token}`,\r\n },\r\n body:JSON.stringify({id:plan_id})\r\n };\r\n const response = await fetch(APIs.STRIPE_CHECKOUT, headerOptions);\r\n const {code,url} = await response.json();\r\n if (code == 200){\r\n window.open(url, '_blank');\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n
Remaning Credit {credit} \r\n \r\n
\r\n
\r\n { \r\n planData.map((item,index) => \r\n
planHandler(plan_id)}\r\n purchased={purchasedPlan}\r\n /> \r\n ) \r\n }\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default Stripe;","export default __webpack_public_path__ + \"static/media/active-world.96e7b800.svg\";","export default __webpack_public_path__ + \"static/media/deactive-world.41bbff75.svg\";","export const archiveData = {\r\n opticalData:[\r\n { \r\n minresolution:0,\r\n maxresolution:0.50,\r\n data:[\r\n {\r\n collection:\"pneo\",\r\n name:\"Pléiades Neo\",\r\n hostName: \"oneatlas\",\r\n setting:[\r\n {\r\n name:\"Analytic\",\r\n productId:\"6f722fb5-0323-4c97-9b1e-22870325b8db\",\r\n collection_:\"pneo\",\r\n },\r\n {\r\n name:\"Display\",\r\n productId:\"17745de8-6e7d-4751-99cd-3f8e9e9d290e\",\r\n collection_:\"pneo\",\r\n },\r\n\r\n ]\r\n },\r\n {\r\n collection:\"phr\",\r\n name:\"Pléiades\",\r\n hostName:\"oneatlas\",\r\n setting:[\r\n {\r\n name:\"Analytic\",\r\n productId:\"4f1b2f62-98df-4c74-81f4-5dce45deee99\",\r\n collection_:\"phr\",\r\n },\r\n {\r\n name:\"Pansharpened reflectance\",\r\n productId:\"df4ca029-2f6f-432b-98d5-ef2f5d70baee\",\r\n collection_:\"phr\",\r\n },\r\n {\r\n name:\"Display\",\r\n productId:\"647780db-5a06-4b61-b525-577a8b68bb54\",\r\n collection_:\"phr\",\r\n },\r\n\r\n ]\r\n },\r\n {\r\n collection:\"beijing-3a\",\r\n name:\"Beijing-3A\",\r\n hostName:\"21at\",\r\n setting:[\r\n {\r\n name:\"Mono 16-bit\",\r\n productId:\"e080274b-6cfb-4a89-bc12-64fd4895b3c2\",\r\n collection_:\"beijing-3a\",\r\n },\r\n {\r\n name:\"Stereo 16-bit\",\r\n productId:\"ab6fbe7d-2eb6-4f84-8337-418db71d8e75\",\r\n collection_:\"beijing-3a\",\r\n },\r\n ]\r\n },\r\n ]\r\n },\r\n { \r\n minresolution:0.50,\r\n maxresolution:2,\r\n data:[\r\n {\r\n collection:\"spot\",\r\n name:\"SPOT\",\r\n hostName:\"oneatlas\",\r\n setting:[\r\n {\r\n name:\"Analytic\",\r\n productId:\"b1f8c48e-d16b-44c4-a1bb-5e8a24892e69\",\r\n collection_:\"spot\",\r\n },\r\n {\r\n name:\"Pansharpened reflectance\",\r\n productId:\"df4ca029-2f6f-432b-98d5-ef2f5d70baee\",\r\n collection_:\"spot\",\r\n },\r\n {\r\n name:\"Display\",\r\n productId:\"acc3f9a4-b622-49c1-b1e1-c762aa3e7e13\",\r\n collection_:\"spot\",\r\n },\r\n \r\n ]\r\n },\r\n {\r\n collection:\"triplesat\",\r\n name:\"TripleSat\",\r\n hostName:\"21at\",\r\n setting:[\r\n {\r\n name:\"Level 2 (8-bit)\",\r\n productId:\"2398d8f5-5f7f-4596-884d-345c0b07af149\",\r\n collection_:\"triplesat\",\r\n },\r\n {\r\n name:\"Level 2 (16-bit)\",\r\n productId:\"37c26f4d-f6a9-47c9-ae4d-a095569ab8bc\",\r\n collection_:\"triplesat\",\r\n },\r\n ]\r\n },\r\n ]\r\n },\r\n { \r\n minresolution:2,\r\n maxresolution:20,\r\n data:[\r\n {\r\n collection:\"sentinel-2\",\r\n name:\"Sentinel-2\",\r\n hostName:\"earthsearch-aws\",\r\n setting:[\r\n {\r\n name:\"Level-2A\",\r\n productId:\"c3de9ed8-f6e5-4bb5-a157-f6430ba756da\",\r\n collection_:\"sentinel-2\",\r\n },\r\n ]\r\n }\r\n ]\r\n },\r\n { \r\n minresolution:20,\r\n maxresolution:null,\r\n data:[\r\n {\r\n collection:\"landsat-8\",\r\n name:\"Landsat 8\",\r\n hostName:\"earthsearch-aws\",\r\n setting:[\r\n {\r\n name:\"Level-2SP\",\r\n productId:\"0d6796c4-9e0b-44e8-bb8f-3d0bc9794382\",\r\n collection_:\"landsat-8\",\r\n },\r\n ]\r\n }\r\n ]\r\n }\r\n ],\r\n sarData:[\r\n { \r\n minresolution:0,\r\n maxresolution:0.50,\r\n data:[\r\n {\r\n collection:\"capella-slc\",\r\n name:\"SLC\",\r\n hostName:\"capellaspace\",\r\n productId:\"1f2b0d7f-d3e2-4b3d-96b7-e7c184df7952\",\r\n collection_:\"capella-slc\",\r\n thumbnail:\"sarcover.png\", \r\n },\r\n {\r\n collection:\"capella-gec\",\r\n name:\"GEC\",\r\n productId:\"96072809-d820-4cf9-86dd-d3bff3337c35\",\r\n hostName: \"capellaspace\",\r\n collection_:\"capella-gec\",\r\n thumbnail:\"sarcover.png\",\r\n },\r\n {\r\n collection:\"capella-geo\",\r\n name:\"GEO\",\r\n hostName: \"capellaspace\",\r\n productId:\"d66facaa-533f-49a2-849a-c2910ac9dd31\",\r\n collection_:\"capella-geo\",\r\n thumbnail:\"sarcover.png\",\r\n },\r\n {\r\n collection:\"capella-sicd\",\r\n name:\"SICD\",\r\n hostName: \"capellaspace\",\r\n productId:\"8b0aed07-c565-4bf9-b719-401e692de4a6\",\r\n collection_:\"capella-sicd\",\r\n thumbnail:\"sarcover.png\",\r\n }\r\n ]\r\n } \r\n ],\r\n thermal:[\r\n { \r\n minresolution:10,\r\n maxresolution:20,\r\n data:[\r\n {\r\n collection:\"capella-slc\",\r\n setting:[\r\n {\r\n name:\"SLC\",\r\n productId:\"1f2b0d7f-d3e2-4b3d-96b7-e7c184df7952\",\r\n collection_:\"capella-slc\",\r\n },\r\n ]\r\n },\r\n {\r\n collection:\"capella-gec\",\r\n setting:[\r\n {\r\n name:\"GEC\",\r\n productId:\"96072809-d820-4cf9-86dd-d3bff3337c35\",\r\n collection_:\"capella-gec\",\r\n },\r\n ]\r\n },\r\n {\r\n collection:\"capella-geo\",\r\n setting:[\r\n {\r\n name:\"GEO\",\r\n productId:\"d66facaa-533f-49a2-849a-c2910ac9dd31\",\r\n collection_:\"capella-geo\",\r\n },\r\n ]\r\n },\r\n {\r\n collection:\"capella-sicd\",\r\n setting:[\r\n {\r\n name:\"SICD\",\r\n productId:\"8b0aed07-c565-4bf9-b719-401e692de4a6\",\r\n collection_:\"capella-sicd\",\r\n },\r\n ]\r\n }\r\n ]\r\n } \r\n ]\r\n}\r\n","export const newImageryData = {\r\n type:[\r\n {name:\"Normal RGB\",value:\"normalrgb\"},\r\n {name:\"SAR\",value:\"sar\"},\r\n {name:\"Thermal\",value:\"thermal\"},\r\n ],\r\n images:{\r\n normalrgb:\"normalrgb.png\",\r\n sar:\"sarcover.png\",\r\n thermal:\"thermalcover.png\",\r\n },\r\n content:{\r\n normalrgb:\"Lorem ipsum dolor sit amet consectetur. Amet feugiat vulputate hendrerit accumsan blandit sem felis fames tellus. Ac netus in amet dui nulla ac diam posuere. Vel sed eros fringilla facilisis adipiscing porttitor vel. Mauris volutpat turpis.\",\r\n optical:\"Lorem ipsum dolor sit amet consectetur. Amet feugiat vulputate hendrerit accumsan blandit sem felis fames tellus. Ac netus in amet dui nulla ac diam posuere. Vel sed eros fringilla facilisis adipiscing porttitor vel. Mauris volutpat turpis.\",\r\n sar:\"Lorem ipsum dolor sit amet consectetur. Amet feugiat vulputate hendrerit accumsan blandit sem felis fames tellus. Ac netus in amet dui nulla ac diam posuere. Vel sed eros fringilla facilisis adipiscing porttitor vel. Mauris volutpat turpis.\",\r\n thermal:\"Lorem ipsum dolor sit amet consectetur. Amet feugiat vulputate hendrerit accumsan blandit sem felis fames tellus. Ac netus in amet dui nulla ac diam posuere. Vel sed eros fringilla facilisis adipiscing porttitor vel. Mauris volutpat turpis.\",\r\n },\r\n aoi:[\r\n {name:\"Dubai\",value:\"dubai\"},\r\n {name:\"Riyadh\",value:\"riyadh\"},\r\n {name:\"Paris\",value:\"paris\"},\r\n {name:\"New York\",value:\"newyork\"}\r\n ],\r\n aoiTypeValue:{\r\n dubai:{\r\n \"geometry\": {\r\n \"type\": \"Polygon\",\r\n \"coordinates\": [\r\n [\r\n [\r\n 54.74463718179653,\r\n 24.891856377755563\r\n ],\r\n [\r\n 55.73415415089634,\r\n 24.873309641327108\r\n ],\r\n [\r\n 55.75868762946919,\r\n 25.77879640172932\r\n ],\r\n [\r\n 54.75281500798682,\r\n 25.775114361040988\r\n ],\r\n [\r\n 54.74463718179653,\r\n 24.891856377755563\r\n ]\r\n ]\r\n ]\r\n },\r\n \"properties\": {\r\n \"id\": \"4c90faa9-507b-41b2-9d0f-5ab4b6bb25c0\",\r\n \"constellation\": \"spot\",\r\n \"collection\": \"spot\",\r\n \"providerName\": \"oneatlas\",\r\n \"up42:usageType\": [\r\n \"DATA\"\r\n ],\r\n \"providerProperties\": {\r\n \"qualified\": false,\r\n \"sourceIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"acquisitionStation\": \"SV1\",\r\n \"archivingCenter\": \"FR1\",\r\n \"lastUpdateDate\": \"2023-11-27T09:26:14.346557219Z\",\r\n \"processingDate\": \"2023-11-26T13:57:11.523Z\",\r\n \"parentIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"azimuthAngle\": 180.01634984157405,\r\n \"title\": \"\",\r\n \"workspaceTitle\": \"Public\",\r\n \"productCategory\": \"image\",\r\n \"spectralRange\": \"VISIBLE\",\r\n \"activityId\": \"2871d2c6-72d1-4b16-aa62-a684ab078b44\",\r\n \"processingLevel\": \"ALBUM\",\r\n \"acquisitionIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"sensorType\": \"OPTICAL\",\r\n \"productionStatus\": \"ARCHIVED\",\r\n \"geometryCentroid\": {\r\n \"lat\": 25.211346019233744,\r\n \"lon\": 53.6929655754223\r\n },\r\n \"correlationId\": \"e41374d8-d0dc-4620-896d-98d683f60287\",\r\n \"workspaceName\": \"public\",\r\n \"processorName\": \"MMCAT\",\r\n \"publicationDate\": \"2023-11-27T09:26:14.346557219Z\",\r\n \"productType\": \"mono\",\r\n \"illuminationElevationAngle\": 16.219458656832728,\r\n \"workspaceId\": \"0e33eb50-3404-48ad-b835-b0b4b72a5625\",\r\n \"expirationDate\": \"2223-10-10T09:22:29.468992418Z\",\r\n \"incidenceAngleAcrossTrack\": -14.258450470658444,\r\n \"format\": \"image/tiff\",\r\n \"illuminationAzimuthAngle\": 167.19044820267305,\r\n \"incidenceAngleAlongTrack\": -9.229143296356984,\r\n \"incidenceAngle\": 16.539283326759,\r\n \"archiveIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"processingCenter\": \"MOC\",\r\n \"organisationName\": \"AIRBUS DS GEO\",\r\n \"snowCover\": 0\r\n },\r\n \"sceneId\": \"4c90faa9-507b-41b2-9d0f-5ab4b6bb25c0\",\r\n \"producer\": \"airbus\",\r\n \"acquisitionDate\": \"2023-11-26T10:01:08.249Z\",\r\n \"start_datetime\": null,\r\n \"end_datetime\": null,\r\n \"cloudCoverage\": 31.2,\r\n \"resolution\": 1.5,\r\n \"deliveryTime\": \"HOURS\"\r\n },\r\n \"type\": \"Feature\",\r\n \"bbox\": [\r\n 12.813546555504491,\r\n 51.906473484962824,\r\n 13.766187370220909,\r\n 52.95088361510117\r\n ]\r\n },\r\n riyadh:{\r\n \"geometry\": { \r\n \"type\": \"Polygon\",\r\n \"coordinates\": [\r\n [\r\n [\r\n 46.016268798079146,\r\n 25.099471945449533\r\n ],\r\n [\r\n 46.01077563401696,\r\n 24.275954391514308\r\n ],\r\n [\r\n 47.449984618391646,\r\n 24.265939124867028\r\n ],\r\n [\r\n 47.43899829026728,\r\n 25.094497384843642\r\n ],\r\n [\r\n 46.016268798079146,\r\n 25.099471945449533\r\n ]\r\n ]\r\n ]\r\n },\r\n \"properties\": {\r\n \"id\": \"4c90faa9-507b-41b2-9d0f-5ab4b6bb25c0\",\r\n \"constellation\": \"spot\",\r\n \"collection\": \"spot\",\r\n \"providerName\": \"oneatlas\",\r\n \"up42:usageType\": [\r\n \"DATA\"\r\n ],\r\n \"providerProperties\": {\r\n \"qualified\": false,\r\n \"sourceIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"acquisitionStation\": \"SV1\",\r\n \"archivingCenter\": \"FR1\",\r\n \"lastUpdateDate\": \"2023-11-27T09:26:14.346557219Z\",\r\n \"processingDate\": \"2023-11-26T13:57:11.523Z\",\r\n \"parentIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"azimuthAngle\": 180.01634984157405,\r\n \"title\": \"\",\r\n \"workspaceTitle\": \"Public\",\r\n \"productCategory\": \"image\",\r\n \"spectralRange\": \"VISIBLE\",\r\n \"activityId\": \"2871d2c6-72d1-4b16-aa62-a684ab078b44\",\r\n \"processingLevel\": \"ALBUM\",\r\n \"acquisitionIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"sensorType\": \"OPTICAL\",\r\n \"productionStatus\": \"ARCHIVED\",\r\n \"geometryCentroid\": {\r\n \"lat\": 24.39144479268129,\r\n \"lon\": 45.523519742783954\r\n },\r\n \"correlationId\": \"e41374d8-d0dc-4620-896d-98d683f60287\",\r\n \"workspaceName\": \"public\",\r\n \"processorName\": \"MMCAT\",\r\n \"publicationDate\": \"2023-11-27T09:26:14.346557219Z\",\r\n \"productType\": \"mono\",\r\n \"illuminationElevationAngle\": 16.219458656832728,\r\n \"workspaceId\": \"0e33eb50-3404-48ad-b835-b0b4b72a5625\",\r\n \"expirationDate\": \"2223-10-10T09:22:29.468992418Z\",\r\n \"incidenceAngleAcrossTrack\": -14.258450470658444,\r\n \"format\": \"image/tiff\",\r\n \"illuminationAzimuthAngle\": 167.19044820267305,\r\n \"incidenceAngleAlongTrack\": -9.229143296356984,\r\n \"incidenceAngle\": 16.539283326759,\r\n \"archiveIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"processingCenter\": \"MOC\",\r\n \"organisationName\": \"AIRBUS DS GEO\",\r\n \"snowCover\": 0\r\n },\r\n \"sceneId\": \"4c90faa9-507b-41b2-9d0f-5ab4b6bb25c0\",\r\n \"producer\": \"airbus\",\r\n \"acquisitionDate\": \"2023-11-26T10:01:08.249Z\",\r\n \"start_datetime\": null,\r\n \"end_datetime\": null,\r\n \"cloudCoverage\": 31.2,\r\n \"resolution\": 1.5,\r\n \"deliveryTime\": \"HOURS\"\r\n },\r\n \"type\": \"Feature\",\r\n \"bbox\": [\r\n 12.813546555504491,\r\n 51.906473484962824,\r\n 13.766187370220909,\r\n 52.95088361510117\r\n ]\r\n },\r\n paris:{\r\n \"geometry\": { \r\n \"type\": \"Polygon\",\r\n \"coordinates\": [\r\n [\r\n [\r\n 1.432067571096702,\r\n 49.10333945101257\r\n ],\r\n [\r\n 1.4375607351589383,\r\n 48.21805915874694\r\n ],\r\n [\r\n 3.332702336721399,\r\n 48.214398946600106\r\n ],\r\n [\r\n 3.3491818289088977,\r\n 49.10333945101257\r\n ],\r\n [\r\n 1.432067571096702,\r\n 49.10333945101257\r\n ]\r\n ]\r\n ]\r\n },\r\n \"properties\": {\r\n \"id\": \"07b-41b2-9d0f-5ab4b6bb25c0\",\r\n \"constellation\": \"spot\",\r\n \"collection\": \"spot\",\r\n \"providerName\": \"oneatlas\",\r\n \"up42:usageType\": [\r\n \"DATA\"\r\n ],\r\n \"providerProperties\": {\r\n \"qualified\": false,\r\n \"sourceIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"acquisitionStation\": \"SV1\",\r\n \"archivingCenter\": \"FR1\",\r\n \"lastUpdateDate\": \"2023-11-27T09:26:14.346557219Z\",\r\n \"processingDate\": \"2023-11-26T13:57:11.523Z\",\r\n \"parentIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"azimuthAngle\": 180.01634984157405,\r\n \"title\": \"\",\r\n \"workspaceTitle\": \"Public\",\r\n \"productCategory\": \"image\",\r\n \"spectralRange\": \"VISIBLE\",\r\n \"activityId\": \"2871d2c6-72d1-4b16-aa62-a684ab078b44\",\r\n \"processingLevel\": \"ALBUM\",\r\n \"acquisitionIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"sensorType\": \"OPTICAL\",\r\n \"productionStatus\": \"ARCHIVED\",\r\n \"geometryCentroid\": {\r\n \"lat\":48.61363861036861,\r\n \"lon\":0.7426754812512015\r\n },\r\n \"correlationId\": \"e41374d8-d0dc-4620-896d-98d683f60287\",\r\n \"workspaceName\": \"public\",\r\n \"processorName\": \"MMCAT\",\r\n \"publicationDate\": \"2023-11-27T09:26:14.346557219Z\",\r\n \"productType\": \"mono\",\r\n \"illuminationElevationAngle\": 16.219458656832728,\r\n \"workspaceId\": \"0e33eb50-3404-48ad-b835-b0b4b72a5625\",\r\n \"expirationDate\": \"2223-10-10T09:22:29.468992418Z\",\r\n \"incidenceAngleAcrossTrack\": -14.258450470658444,\r\n \"format\": \"image/tiff\",\r\n \"illuminationAzimuthAngle\": 167.19044820267305,\r\n \"incidenceAngleAlongTrack\": -9.229143296356984,\r\n \"incidenceAngle\": 16.539283326759,\r\n \"archiveIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"processingCenter\": \"MOC\",\r\n \"organisationName\": \"AIRBUS DS GEO\",\r\n \"snowCover\": 0\r\n },\r\n \"sceneId\": \"4c90faa9-507b-41b2-9d0f-5ab4b6bb25c0\",\r\n \"producer\": \"airbus\",\r\n \"acquisitionDate\": \"2023-11-26T10:01:08.249Z\",\r\n \"start_datetime\": null,\r\n \"end_datetime\": null,\r\n \"cloudCoverage\": 31.2,\r\n \"resolution\": 1.5,\r\n \"deliveryTime\": \"HOURS\"\r\n },\r\n \"type\": \"Feature\",\r\n \"bbox\": [\r\n 12.813546555504491,\r\n 51.906473484962824,\r\n 13.766187370220909,\r\n 52.95088361510117\r\n ]\r\n },\r\n newyork:{\r\n \"geometry\": {\r\n \"type\": \"Polygon\",\r\n \"coordinates\": [\r\n [\r\n [\r\n -74.69989389922024,\r\n 41.132848376535975\r\n ],\r\n [\r\n -74.71088022734511,\r\n 40.22890349148231\r\n ],\r\n [\r\n -72.71136850859541,\r\n 40.22890349148231\r\n ],\r\n [\r\n -72.71136850859541,\r\n 41.12457310189462\r\n ],\r\n [\r\n -74.69989389922024,\r\n 41.132848376535975\r\n ]\r\n ]\r\n ]\r\n },\r\n \"properties\": {\r\n \"id\": \"9d0f-5ab4b6bb25c0\",\r\n \"constellation\": \"spot\",\r\n \"collection\": \"spot\",\r\n \"providerName\": \"oneatlas\",\r\n \"up42:usageType\": [\r\n \"DATA\"\r\n ],\r\n \"providerProperties\": {\r\n \"qualified\": false,\r\n \"sourceIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"acquisitionStation\": \"SV1\",\r\n \"archivingCenter\": \"FR1\",\r\n \"lastUpdateDate\": \"2023-11-27T09:26:14.346557219Z\",\r\n \"processingDate\": \"2023-11-26T13:57:11.523Z\",\r\n \"parentIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"azimuthAngle\": 180.01634984157405,\r\n \"title\": \"\",\r\n \"workspaceTitle\": \"Public\",\r\n \"productCategory\": \"image\",\r\n \"spectralRange\": \"VISIBLE\",\r\n \"activityId\": \"2871d2c6-72d1-4b16-aa62-a684ab078b44\",\r\n \"processingLevel\": \"ALBUM\",\r\n \"acquisitionIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"sensorType\": \"OPTICAL\",\r\n \"productionStatus\": \"ARCHIVED\",\r\n \"geometryCentroid\": {\r\n \"lat\":40.23938734931336,\r\n \"lon\": -75.25745005156492\r\n },\r\n \"correlationId\": \"e41374d8-d0dc-4620-896d-98d683f60287\",\r\n \"workspaceName\": \"public\",\r\n \"processorName\": \"MMCAT\",\r\n \"publicationDate\": \"2023-11-27T09:26:14.346557219Z\",\r\n \"productType\": \"mono\",\r\n \"illuminationElevationAngle\": 16.219458656832728,\r\n \"workspaceId\": \"0e33eb50-3404-48ad-b835-b0b4b72a5625\",\r\n \"expirationDate\": \"2223-10-10T09:22:29.468992418Z\",\r\n \"incidenceAngleAcrossTrack\": -14.258450470658444,\r\n \"format\": \"image/tiff\",\r\n \"illuminationAzimuthAngle\": 167.19044820267305,\r\n \"incidenceAngleAlongTrack\": -9.229143296356984,\r\n \"incidenceAngle\": 16.539283326759,\r\n \"archiveIdentifier\": \"DS_SPOT6_202311261001082_FR1_FR1_SV1_SV1_E013N52_03251\",\r\n \"processingCenter\": \"MOC\",\r\n \"organisationName\": \"AIRBUS DS GEO\",\r\n \"snowCover\": 0\r\n },\r\n \"sceneId\": \"4c90faa9-507b-41b2-9d0f-5ab4b6bb25c0\",\r\n \"producer\": \"airbus\",\r\n \"acquisitionDate\": \"2023-11-26T10:01:08.249Z\",\r\n \"start_datetime\": null,\r\n \"end_datetime\": null,\r\n \"cloudCoverage\": 31.2,\r\n \"resolution\": 1.5,\r\n \"deliveryTime\": \"HOURS\"\r\n },\r\n \"type\": \"Feature\",\r\n \"bbox\": [\r\n 12.813546555504491,\r\n 51.906473484962824,\r\n 13.766187370220909,\r\n 52.95088361510117\r\n ]\r\n }\r\n }\r\n}\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAYAAAAmlE46AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADYSURBVHgBlVPBEYIwELxjGBlf8sUXJVgCpViCHYiVaCdQir54in+Hcy+AZiDEsAPkILfLziYhcqB5yblpRex72hORD0wlnrVrykvMdnwBuXbNxT6isSjuuRmxeUrOQif03/G3Gy2ApyR8qbSWhIr9lh+LRE3w+yZ0hFLaJXTwkXqrYpL7cZHkP5IiGgyXWcpMKxAPFgtY1lGvNITIrl2hacrGb3lmz4SFkFDmowC/UXdUeImGrMsSkRGAnRZNrREKhQrAwdXe6OMBCBMYT0s/VlrHtAbWmn8Arix52NPUxikAAAAASUVORK5CYII=\"","export default __webpack_public_path__ + \"static/media/normalrgb.a8e4c014.png\";","export default __webpack_public_path__ + \"static/media/sarcover.af3fe6f0.png\";","export default __webpack_public_path__ + \"static/media/thermalcover.7cf8b189.png\";","import React, { useState, useCallback, useEffect } from 'react'\r\nimport { Box, Slider, Typography,CircularProgress } from '@material-ui/core'\r\nimport '../../../styles/BrowseArchive.css'\r\nimport { archiveData } from './BrowseArchiveDate.js'\r\nimport { newImageryData } from './OrderImageData.js'\r\nimport polyline from '../../../images/polyline.png'\r\nimport opticalResolutionImage from '../../../images/normalrgb.png'\r\nimport sarResolutionImage from '../../../images/sarcover.png'\r\nimport thermalResolutionImage from '../../../images/thermalcover.png'\r\nimport APIs from '../../../Api.js'\r\n\r\n\r\n\r\nexport default function BrowseArchive({ orderImageHandler_,setContainerWidth_}) {\r\n\r\n // +++++++++++++++ Force Update State +++++++++++++++++++\r\n const [, updateState] = useState({});\r\n const forceUpdate = useCallback(() => updateState({}), []);\r\n\r\n\r\n // +++++++++++++++ Archive Collection Data +++++++++++++++++++\r\n const [archiveCollectionData_, setArchiveCollectionData_] = useState(archiveData)\r\n\r\n\r\n // +++++++++++++++ Date State +++++++++++++++++++\r\n const currentDate = new Date();\r\n currentDate.setDate(currentDate.getDate() - 25);\r\n const startDate_ = currentDate.toISOString().slice(0, 10);\r\n const endDate_ = new Date().toISOString().slice(0, 10);\r\n const [startDate, setStartDate] = useState(startDate_)\r\n const [endDate, setEndDate] = useState(endDate_)\r\n\r\n\r\n // +++++++++++++++ Area Interest State +++++++++++++++++++\r\n const [aoiData_, setAoiData_] = useState(newImageryData)\r\n const storageAoiType_ = localStorage.getItem('aoi_selected') || 'select'\r\n const [aoiType_, setAoiType_] = useState(storageAoiType_)\r\n\r\n\r\n // +++++++++++++++ Angle State +++++++++++++++++++\r\n let archiveAngle_ = localStorage.getItem('archive_angle') || '[30,70]'\r\n archiveAngle_ = JSON.parse(archiveAngle_)\r\n const [angle_, setAngle_] = useState(archiveAngle_)\r\n\r\n\r\n // +++++++++++++++ Cloud State +++++++++++++++++++\r\n let cloudCoverages_ = localStorage.getItem('archive_cloud') || '[30,70]'\r\n cloudCoverages_ = JSON.parse(cloudCoverages_)\r\n const [cloudCoverages, setCloudCoverages] = useState(cloudCoverages_);\r\n\r\n\r\n // +++++++++++++++ Filter Date +++++++++++++++++++\r\n let filterData_ = localStorage.getItem('filter_date') || '{}'\r\n filterData_ = JSON.parse(filterData_)\r\n const [allfilterData_, setFilterData_] = useState(filterData_);\r\n\r\n\r\n // +++++++++++++++ Optical Resolution State +++++++++++++++++++\r\n let opticalResolutionData_ = localStorage.getItem('optical_resolution') || \"[]\"\r\n opticalResolutionData_ = JSON.parse(opticalResolutionData_)\r\n if (opticalResolutionData_.length == 0){\r\n opticalResolutionData_ = [{min:0,max:0.5,unit:\"m\"}]\r\n }\r\n const [opticalResolutionValue, setOpticalResolutionValue] = useState(opticalResolutionData_);\r\n\r\n\r\n // +++++++++++++++ Optical Satellite State +++++++++++++++++++\r\n let opticalSateliteData_ = localStorage.getItem('optical_satellite') || \"select\"\r\n const [opticalSatelliteValue, setOpticalSateliteValue] = useState(opticalSateliteData_);\r\n\r\n\r\n // +++++++++++++++ Optical Satellite Setting +++++++++++++++++++\r\n let opticalSateliteSettingData_ = localStorage.getItem('optical_satellite_setting') || \"{}\"\r\n opticalSateliteSettingData_ = JSON.parse(opticalSateliteSettingData_)\r\n const [opticalSatelliteSettingValue, setOpticalSateliteSettingValue] = useState(opticalSateliteSettingData_);\r\n\r\n let opticalSateliteSettingSelected_ = localStorage.getItem('optical_setting_selected') || \"[]\"\r\n opticalSateliteSettingSelected_ = JSON.parse(opticalSateliteSettingSelected_)\r\n const [opticalSelectedSettingValue_, setOpticalSelectedSettingValue_] = useState(opticalSateliteSettingSelected_);\r\n\r\n\r\n // +++++++++++++++ Sar Satellite State +++++++++++++++++++\r\n let sarSateliteMethod_ = localStorage.getItem('sar_satelite_method') || \"[]\"\r\n sarSateliteMethod_ = JSON.parse(sarSateliteMethod_)\r\n const [sarSateliteSMethodValue, setSateliteSMethodValue] = useState(sarSateliteMethod_);\r\n\r\n let sarSateliteResolution_ = localStorage.getItem('sar_satelite_resolution') || \"~0.50m\"\r\n const [sarSateliteResolution, setSarSateliteResolutione] = useState(sarSateliteResolution_);\r\n\r\n\r\n // +++++++++++++++ Thermal Satellite State +++++++++++++++++++\r\n let thermalSateliteResolution_ = localStorage.getItem('sar_thermal_resolution') || \"~10cm\"\r\n const [thermalSateliteResolution, setThermalSateliteResolutione] = useState(thermalSateliteResolution_);\r\n\r\n\r\n // +++++++++++++++ Archive Model State +++++++++++++++++++\r\n const [showArchiveModel, setShowArchiveModel] = useState(false);\r\n const [archiveModelData, setArchiveModelData] = useState([]);\r\n const [showArchiveModelLoader, setShowArchiveModelLoader] = useState(false);\r\n\r\n\r\n // +++++++++++++++ use Effect +++++++++++++++++++\r\n useEffect(()=>{\r\n let filterData_ = allfilterData_\r\n if (Object.keys(filterData_).length == 0) {\r\n if (!filterData_.end){\r\n let cloudCoverages_ = cloudCoverages[1] - cloudCoverages[0]\r\n let angle = angle_[1] - angle_[0]\r\n let filterInitData = {...allfilterData_,end:endDate_,start:startDate_,cloudCoverages:cloudCoverages_,angle}\r\n localStorageOperations(\"filter_date\",'set','', filterInitData)\r\n } \r\n }\r\n \r\n },[])\r\n\r\n\r\n\r\n\r\n // +++++++++++++++ local Storage Operations +++++++++++++++++++\r\n const localStorageOperations = (key_ = \"filter_date\", type = 'get', returnType = \"object\", data_) => {\r\n if (type == 'get') {\r\n let data;\r\n if (returnType == 'object') {\r\n data = localStorage.getItem(key_) || '{}'\r\n } else {\r\n data = localStorage.getItem(key_) || '[]'\r\n }\r\n data = JSON.parse(data)\r\n return data\r\n } else if (type == 'set') {\r\n localStorage.setItem(key_, JSON.stringify(data_))\r\n } else if (type == 'remove'){\r\n localStorage.removeItem(key_)\r\n } else {\r\n //console.log();\r\n }\r\n }\r\n\r\n\r\n // +++++++++++++++ Date +++++++++++++++++++\r\n const handleDateChange = (e, type) => {\r\n const date_ = e.target.value\r\n if (type == 'start') {\r\n setStartDate(date_);\r\n } else {\r\n setEndDate(date_);\r\n }\r\n const filterData_ = { ...allfilterData_, [type]: date_ }\r\n setFilterData_(filterData_)\r\n localStorageOperations('filter_date', 'set', '', filterData_)\r\n localStorageOperations('optical_satellite','remove')\r\n localStorageOperations('optical_satellite_setting','remove')\r\n setOpticalSateliteSettingValue({})\r\n setOpticalSateliteValue('select')\r\n localStorageOperations('optical_resolution','remove')\r\n setOpticalResolutionValue([{min:0,max:0.5,unit:\"m\"}])\r\n setShowArchiveModel(false)\r\n };\r\n\r\n\r\n // +++++++++++++++ Angle +++++++++++++++++++\r\n const handleChangeAngle = (e) => {\r\n //console.log()\r\n };\r\n\r\n const angleCommittedHanlder = (event, newValue) => {\r\n setAngle_(newValue);\r\n localStorage.setItem('archive_angle', JSON.stringify(newValue))\r\n const angleValue = newValue[1] - newValue[0]\r\n const filterData_ = { ...allfilterData_, angle: angleValue }\r\n setFilterData_(filterData_)\r\n localStorageOperations('filter_date', 'set', '', filterData_)\r\n localStorageOperations('optical_satellite','remove')\r\n localStorageOperations('optical_satellite_setting','remove')\r\n setOpticalSateliteSettingValue({})\r\n setOpticalSateliteValue('select')\r\n localStorageOperations('optical_resolution','remove')\r\n setOpticalResolutionValue([{min:0,max:0.5,unit:\"m\"}])\r\n setShowArchiveModel(false)\r\n }\r\n\r\n\r\n // +++++++++++++++ Cloud +++++++++++++++++++\r\n const handleChangeCloud = (e) => {\r\n //console.log()\r\n };\r\n\r\n const onChangeCommittedHanlder = (e, newValue) => {\r\n setCloudCoverages(newValue)\r\n localStorage.setItem('archive_cloud', JSON.stringify(newValue))\r\n const cloudValue = newValue[1] - newValue[0]\r\n const filterData_ = { ...allfilterData_, cloudCoverages: cloudValue }\r\n setFilterData_(filterData_)\r\n localStorageOperations('filter_date', 'set', '', filterData_)\r\n localStorageOperations('optical_satellite','remove')\r\n localStorageOperations('optical_satellite_setting','remove') \r\n setOpticalSateliteSettingValue({})\r\n setOpticalSateliteValue('select')\r\n localStorageOperations('optical_resolution','remove')\r\n setOpticalResolutionValue([{min:0,max:0.5,unit:\"m\"}])\r\n setShowArchiveModel(false)\r\n };\r\n\r\n const valuetext = (value) => {\r\n return `${value}°C`;\r\n }\r\n\r\n\r\n // +++++++++++++++ Draw Polygon ++++++++++++++++++ \r\n const drawPolygonHandler = () => {\r\n let aoiInit = localStorage.getItem('aoidraw_enable') || '1'\r\n let data = {}\r\n let aoiIsSeletced = true\r\n if (aoiInit == '0') {\r\n aoiInit = '1'\r\n aoiIsSeletced = false\r\n } else {\r\n aoiInit = '0'\r\n }\r\n data.aoiIsSeletced = aoiIsSeletced\r\n data.dataShow = false\r\n orderImageHandler_(data)\r\n localStorage.setItem('aoidraw_enable', aoiInit)\r\n // localStorage.setItem('aoi_selected', 'select')\r\n localStorageOperations('optical_satellite','remove')\r\n localStorageOperations('optical_satellite_setting','remove')\r\n setOpticalSateliteSettingValue({})\r\n setOpticalSateliteValue('select')\r\n localStorageOperations('optical_resolution','remove')\r\n setOpticalResolutionValue([{min:0,max:0.5,unit:\"m\"}])\r\n setShowArchiveModel(false)\r\n }\r\n\r\n\r\n // +++++++++++++++ Area Interest +++++++++++++++++++ \r\n const archiveAreaInterestSelectHandler = (e) => {\r\n localStorage.setItem('aoidraw_enable', '1')\r\n const { value } = e.target\r\n if (value != 'select') {\r\n let aoiData = aoiData_.aoiTypeValue\r\n let data = aoiData[value]\r\n data.aoiIsSeletced = false\r\n data.dataShow = true\r\n orderImageHandler_(data)\r\n setAoiType_(value)\r\n localStorage.setItem('aoi_selected', value)\r\n localStorageOperations('optical_satellite','remove')\r\n localStorageOperations('optical_satellite_setting','remove')\r\n setOpticalSateliteSettingValue({})\r\n setOpticalSateliteValue('select')\r\n localStorageOperations('optical_resolution','remove')\r\n setOpticalResolutionValue([{min:0,max:0.5,unit:\"m\"}]) \r\n setShowArchiveModel(false)\r\n localStorage.setItem('archive_coordinator',JSON.stringify(data.geometry))\r\n }\r\n }\r\n\r\n const archiveAreaInterest = () => {\r\n let aoiType = aoiData_.aoi\r\n return (\r\n <>\r\n { archiveAreaInterestSelectHandler(e) }}>\r\n Choose an area \r\n {aoiType.map((item_, index) => {\r\n return (\r\n {item_.name} \r\n )\r\n })}\r\n\r\n \r\n \r\n )\r\n }\r\n\r\n \r\n // +++++++++++++++ Optical Filter +++++++++++++++++++ \r\n const opticalResolutionHandler = (data) => {\r\n localStorageOperations('optical_satellite','remove')\r\n localStorageOperations('optical_satellite_setting','remove')\r\n setOpticalSateliteValue('select')\r\n // setShowArchiveModel(false)\r\n setOpticalSateliteSettingValue({})\r\n let opticalResolutionLocalData = opticalResolutionValue\r\n if (opticalResolutionLocalData.length > 0){\r\n let existData = opticalResolutionLocalData.filter((data_)=>{\r\n return data_.min == data.min && data_.max == data.max\r\n })\r\n existData.map((existItem,index)=>{\r\n let itemIndex = opticalResolutionLocalData.indexOf(existItem)\r\n opticalResolutionLocalData.splice(itemIndex,1)\r\n })\r\n if (existData.length > 0){\r\n setOpticalResolutionValue(opticalResolutionLocalData)\r\n localStorageOperations('optical_resolution', 'set', '', opticalResolutionLocalData)\r\n } else {\r\n let newFilterData = [...opticalResolutionLocalData,{ min: data.min, max: data.max, unit: data.unit }]\r\n setOpticalResolutionValue(newFilterData)\r\n localStorageOperations('optical_resolution', 'set', '', newFilterData)\r\n }\r\n } else {\r\n let opticalResolutionData = [{ min: data.min, max: data.max, unit: data.unit }]\r\n setOpticalResolutionValue(opticalResolutionData)\r\n localStorageOperations('optical_resolution', 'set', '', opticalResolutionData)\r\n } \r\n forceUpdate() \r\n }\r\n\r\n const opticalResolutionSectionImage = (data) => {\r\n const imageUrl = opticalResolutionImage;\r\n const imageUrlArray = [\r\n { rid: 1, src: imageUrl, value: '~0.50m', min: 0, max: 0.50, unit: \"m\" },\r\n { rid: 2, src: imageUrl, value: '~2m', min: 0.5, max: 2, unit: \"m\" },\r\n { rid: 3, src: imageUrl, value: '~20m', min: 2, max: 20, unit: \"m\" },\r\n { rid: 4, src: imageUrl, value: '~100m', min: 20, max: null, unit: \"m\" },\r\n ];\r\n\r\n return (\r\n <>\r\n {\r\n imageUrlArray.map((item_, index) => {\r\n let selectedOption = opticalResolutionValue.filter((selectedItem)=>{return item_.min ==selectedItem.min;})\r\n let isSelected = selectedOption.length>0?true:false\r\n return (\r\n { opticalResolutionHandler(item_) }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n )\r\n }\r\n\r\n const opticalOptionsHandler = (e,opticalProduct) => {\r\n const { value } = e.target\r\n if (value != 'select') {\r\n let filterOpticalData = opticalProduct.filter((product)=>{return product.collection==value})\r\n if (filterOpticalData.length > 0){\r\n localStorageOperations('optical_satellite_setting','set','',filterOpticalData[0])\r\n setOpticalSateliteSettingValue(filterOpticalData[0])\r\n let updateFilterDate = {...allfilterData_,collection:[{name:value,hostName:filterOpticalData[0].hostName}]}\r\n setFilterData_(updateFilterDate)\r\n let oldFilterData = localStorageOperations('filter_date','get','object',)\r\n if (oldFilterData.collection && oldFilterData.collection.length> 0){\r\n let filterCollectionData = [...oldFilterData.collection,{name:value,hostName:filterOpticalData[0].hostName}]\r\n updateFilterDate = {...allfilterData_,collection:filterCollectionData}\r\n }\r\n localStorageOperations('filter_date','set','',updateFilterDate)\r\n }\r\n localStorage.setItem('optical_satellite',value)\r\n setOpticalSateliteValue(value)\r\n setTimeout(() => {\r\n getArchiveCollection()\r\n }, 1000);\r\n }\r\n }\r\n\r\n const opticalOptions = () => {\r\n let opticalData = archiveCollectionData_.opticalData\r\n if (opticalResolutionValue.length > 0) {\r\n let filterData_ = []\r\n opticalResolutionValue.map((dateItem_)=>{\r\n let opticalFilterData_ = opticalData.filter((item_)=>{return item_.maxresolution==dateItem_.max})\r\n filterData_.push(opticalFilterData_[0])\r\n })\r\n opticalData = filterData_\r\n } else {\r\n opticalData = []\r\n }\r\n\r\n let opticalProduct = []\r\n opticalData.map((item_, index) => {\r\n item_.data.map((collectionData, index) => {\r\n opticalProduct.push(collectionData)\r\n })\r\n })\r\n\r\n return (\r\n {opticalOptionsHandler(e,opticalProduct)}} className=\"archive_satellite\">\r\n Choose Satellite \r\n {\r\n opticalProduct.map((item_, index) => {\r\n return (\r\n {item_.name} \r\n )\r\n })\r\n }\r\n \r\n )\r\n }\r\n\r\n\r\n // +++++++++++++++ Optical Filter Setting +++++++++++++++++++ \r\n const opticalSettingHandler = (data) =>{\r\n let opticalSelectedSettingValue = opticalSelectedSettingValue_\r\n if (opticalSelectedSettingValue.length > 0){\r\n let filterSetting = opticalSelectedSettingValue_.filter((item_)=>{\r\n return item_.productId == data.productId\r\n })\r\n if (filterSetting.length > 0){\r\n let itemIndex = -1\r\n itemIndex = opticalSelectedSettingValue.indexOf(filterSetting[0])\r\n if (itemIndex > -1){\r\n opticalSelectedSettingValue.splice(itemIndex,1)\r\n setOpticalSelectedSettingValue_(opticalSelectedSettingValue)\r\n localStorageOperations('optical_setting_selected','set','',opticalSelectedSettingValue)\r\n } else {\r\n const settingData = [...opticalSelectedSettingValue,{...data}]\r\n setOpticalSelectedSettingValue_(settingData)\r\n localStorageOperations('optical_setting_selected','set','',settingData)\r\n }\r\n } else {\r\n const settingData = [...opticalSelectedSettingValue,{...data}]\r\n setOpticalSelectedSettingValue_(settingData)\r\n localStorageOperations('optical_setting_selected','set','',settingData)\r\n }\r\n } else {\r\n setOpticalSelectedSettingValue_([data])\r\n localStorageOperations('optical_setting_selected','set','',[data])\r\n }\r\n forceUpdate()\r\n }\r\n \r\n const opticalFilterSetting = () =>{\r\n let opticalSetting = opticalSatelliteSettingValue.setting\r\n let isExistopticalSetting = true\r\n if (!opticalSetting){\r\n opticalSetting = []\r\n isExistopticalSetting = false\r\n }\r\n\r\n return(\r\n <>\r\n { isExistopticalSetting ? \r\n opticalSetting.map((item,index)=>{\r\n const filterSetting = opticalSelectedSettingValue_.filter((settingItem,)=>{\r\n return settingItem.productId == item.productId\r\n }) \r\n let isSelected = false\r\n if (filterSetting.length>0){\r\n isSelected = true\r\n }\r\n\r\n return(\r\n opticalSettingHandler(item)}>\r\n \r\n \r\n {item.name} \r\n \r\n )\r\n })\r\n :\r\n <>\r\n \r\n \r\n \r\n Setting 1 \r\n \r\n \r\n \r\n \r\n Setting 2 \r\n \r\n \r\n \r\n \r\n Setting 3 \r\n \r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n\r\n // +++++++++++++++ Sar Filter +++++++++++++++++++ \r\n const captureMethodHandler = (data) => {\r\n let selectedCaptureMethod = sarSateliteSMethodValue\r\n let filterData = sarSateliteSMethodValue.filter((item_)=>{\r\n return data.collection == item_.collection\r\n })\r\n let itemIndex = -1\r\n if (filterData.length > 0){\r\n itemIndex = sarSateliteSMethodValue.indexOf(filterData[0])\r\n }\r\n let filterData_ = localStorageOperations('filter_date','get','object')\r\n let storageCollection = filterData_.collection\r\n if (!storageCollection){\r\n storageCollection = []\r\n }\r\n\r\n if (itemIndex > -1){\r\n selectedCaptureMethod.splice(itemIndex, 1); \r\n setSateliteSMethodValue(selectedCaptureMethod)\r\n localStorageOperations('sar_satelite_method','set','',selectedCaptureMethod)\r\n \r\n let storagefilterCollection = storageCollection.filter((storageItem_)=>{return data.collection == storageItem_.name})\r\n\r\n let storageCollectionItemIndex = -1\r\n if (storagefilterCollection.length > 0){\r\n storageCollectionItemIndex = storageCollection.indexOf(storagefilterCollection[0])\r\n } \r\n if (storageCollectionItemIndex > -1){\r\n storageCollection.splice(storageCollectionItemIndex, 1);\r\n let newCollectionData = {...filterData_,collection:storageCollection}\r\n localStorageOperations('filter_date','set','',newCollectionData)\r\n } \r\n \r\n } else {\r\n let selectedCapturedMethod = [...selectedCaptureMethod,{collection:data.collection,hostName:data.hostName}]\r\n setSateliteSMethodValue(selectedCapturedMethod)\r\n localStorageOperations('sar_satelite_method','set','',selectedCapturedMethod)\r\n\r\n let newCollectionData_ = [...storageCollection,{name:data.collection,hostName:data.hostName}]\r\n let updatedFilterData = {...filterData_,collection:newCollectionData_}\r\n localStorageOperations('filter_date','set','',updatedFilterData) \r\n }\r\n forceUpdate()\r\n setTimeout(() => {\r\n getArchiveCollection()\r\n }, 3000);\r\n \r\n }\r\n\r\n const captureMethodImage = () => {\r\n let sarData = archiveCollectionData_.sarData[0];\r\n return (\r\n \r\n {\r\n sarData.data.map((item_, index) => {\r\n const imageUrl = `/up42/${item_.thumbnail}`;\r\n let sarSelectedMethod = sarSateliteSMethodValue.filter((seletedMethod,index)=>{\r\n return (seletedMethod.collection == item_.collection)\r\n })\r\n let isSelected = sarSelectedMethod.length > 0 ? true : false\r\n return (\r\n { captureMethodHandler(item_) }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n )\r\n }\r\n\r\n const sarResolutionHandler = (rid) => {\r\n setSarSateliteResolutione(rid)\r\n localStorageOperations('sar_satelite_resolution','set','',rid)\r\n getArchiveCollection()\r\n }\r\n\r\n const sarResolutionSectionImage = (data) => {\r\n const imageUrl = sarResolutionImage;\r\n const imageUrlArray = [\r\n { rid: 5, src: imageUrl, value: '~0.25m',min: 0, max: 0.50, unit: \"m\" },\r\n { rid: 6, src: imageUrl, value: '~0.35m',min: 0, max: 0.50, unit: \"m\" },\r\n { rid: 7, src: imageUrl, value: '~0.50m',min: 0, max: 0.50, unit: \"m\" },\r\n { rid: 8, src: imageUrl, value: '~1.00m',min: 0.50, max: 1000, unit: \"m\" },\r\n ];\r\n\r\n return (\r\n <>\r\n {imageUrlArray.map((item_, index) => (\r\n { sarResolutionHandler(item_.value) }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n )\r\n }\r\n\r\n\r\n // +++++++++++++++ Thermal Filter +++++++++++++++++++ \r\n const thermalResolutionHandler = (value) => {\r\n localStorageOperations('sar_thermal_resolution','set','',value)\r\n setThermalSateliteResolutione(value)\r\n }\r\n\r\n const thermalResolutionSectionImage = () => {\r\n const imageUrl = thermalResolutionImage;\r\n const imageUrlArray = [\r\n { rid: 1, src: imageUrl, value:'~3m', value_:'~3m', min: 0, max: 0.50, unit: \"m\" },\r\n { rid: 2, src: imageUrl, value:'~30m', value_:'~30m', min: 0, max: 0.50, unit: \"m\" },\r\n ];\r\n\r\n return (\r\n <>\r\n {imageUrlArray.map((item_, index) => (\r\n { thermalResolutionHandler(item_.value_) }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n )\r\n }\r\n\r\n\r\n // +++++++++++++++ Check filter data +++++++++++++++++++\r\n const filterDataCheck = () =>{\r\n let filterData_ = localStorageOperations('filter_date', 'get', 'object');\r\n let callAPi = true;\r\n if (Object.keys(filterData_).length > 0) {\r\n if (!filterData_.collection){\r\n callAPi = false;\r\n } else {\r\n if (filterData_.collection.length == 0 || !filterData_.start || !filterData_.end || !filterData_.cloudCoverages) {\r\n callAPi = false;\r\n }\r\n }\r\n \r\n if (!filterData_.cloudCoverages){\r\n localStorageOperations(\"filter_date\",'set','', {...allfilterData_,cloudCoverages})\r\n callAPi = true\r\n }\r\n\r\n } else {\r\n callAPi = false;\r\n }\r\n\r\n return callAPi\r\n }\r\n\r\n\r\n // +++++++++++++++ GET Archive Collections +++++++++++++++++++\r\n const getArchiveCollection = async () => {\r\n setContainerWidth_()\r\n let callAPi = filterDataCheck()\r\n let coordinatorFilter = false\r\n let filterData_ = localStorageOperations('filter_date','get','object')\r\n if (!filterData_.collection){\r\n callAPi = false\r\n } else {\r\n if (filterData_.collection.length == 0){\r\n callAPi = false\r\n } \r\n }\r\n let archiveCoordinator = localStorage.getItem('archive_coordinator') || \"{}\"\r\n archiveCoordinator = JSON.parse(archiveCoordinator)\r\n if (Object.keys(archiveCoordinator).length > 0){\r\n coordinatorFilter = true\r\n filterData_.intersects = archiveCoordinator \r\n }\r\n\r\n filterData_.coordinator_filter = coordinatorFilter\r\n if (callAPi) {\r\n setShowArchiveModel(true)\r\n setShowArchiveModelLoader(true)\r\n const token = localStorage.getItem('token');\r\n const headerOptions = {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n Authorization: `Token ${token}`,\r\n },\r\n body: JSON.stringify(filterData_),\r\n };\r\n try {\r\n const response = await fetch(APIs.GET_ARCHIVE_CATALOG, headerOptions);\r\n const { data, code, message } = await response.json();\r\n if (code === 200) {\r\n // setArchiveModelData([...archiveModelData,data])\r\n setArchiveModelData(data)\r\n setShowArchiveModelLoader(false)\r\n } else {\r\n setShowArchiveModelLoader(false)\r\n console.log(message, 'Error Messgae');\r\n }\r\n } catch (error) {\r\n setShowArchiveModelLoader(false)\r\n // Handle error\r\n }\r\n }\r\n }\r\n\r\n const roundToDecimalPlaces = (num, decimalPlaces) => {\r\n const factor = 10 ** decimalPlaces;\r\n return Math.round(num * factor) / factor;\r\n }\r\n \r\n\r\n // +++++++++++++++ Archive Collections Model +++++++++++++++++++\r\n const imageHandler = (data) =>{\r\n data.aoiIsSeletced = false\r\n data.dataShow = true\r\n data.zoomIn = false\r\n localStorageOperations('optical_satellite_setting','remove')\r\n localStorageOperations('optical_satellite','remove')\r\n setOpticalSateliteValue('select')\r\n setOpticalSateliteSettingValue({})\r\n localStorageOperations('sar_satelite_method','remove')\r\n localStorageOperations('aoi_selected','remove')\r\n setAoiType_('select')\r\n localStorage.setItem('aoidraw_enable', '1')\r\n setSateliteSMethodValue([])\r\n orderImageHandler_(data)\r\n }\r\n\r\n const browseArchiveIds = () =>{\r\n \r\n return(\r\n \r\n {\r\n showArchiveModelLoader ? \r\n \r\n \r\n \r\n :\r\n\r\n <> \r\n \r\n Archive \r\n
\r\n \r\n Select an image: \r\n {\r\n archiveModelData.length >0 ? \r\n archiveModelData.map((item_,index)=>{\r\n const properties_ = item_.properties\r\n const angle = roundToDecimalPlaces(properties_.providerProperties.incidenceAngle, 2);\r\n const originalDate = new Date(properties_.acquisitionDate);\r\n const formattedDate = `${originalDate.getDate()} - ${originalDate.getMonth()+1} - ${originalDate.getFullYear()}`;\r\n return(\r\n {imageHandler(item_)}}>\r\n
\r\n
\r\n
\r\n
Resolution: {properties_.resolution} cm
\r\n
Captured: {formattedDate}
\r\n
Angle: {angle}o
\r\n
Cloud: {properties_.cloudCoverage}%
\r\n
Not Data Found
}\r\n \r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n\r\n\r\n\r\n // +++++++++++++++ Return Jsx +++++++++++++++++++ \r\n return (\r\n \r\n \r\n\r\n {/* General Filter*/}\r\n \r\n \r\n {/* Date Filter */}\r\n \r\n \r\n Date: \r\n \r\n Please select image date: \r\n \r\n\r\n {/* Setting Section */}\r\n \r\n \r\n Settings: \r\n \r\n \r\n \r\n Angle:\r\n
\r\n \r\n {angle_[0]} \r\n {angle_[1]} \r\n \r\n \r\n \r\n \r\n Cloud %:\r\n
\r\n \r\n {cloudCoverages[0]} \r\n {cloudCoverages[1]} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
Super Resolution
\r\n
\r\n \r\n \r\n\r\n {/*Area Of Interest */}\r\n \r\n \r\n Area of interest: \r\n \r\n \r\n \r\n {archiveAreaInterest()}\r\n \r\n { drawPolygonHandler() }}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Collection Filter*/}\r\n \r\n\r\n {/* Optical Filter */}\r\n \r\n {/* Resolution */}\r\n \r\n \r\n Resolution: \r\n \r\n {opticalResolutionSectionImage()}\r\n \r\n \r\n Satellite: \r\n \r\n {opticalOptions()}\r\n \r\n \r\n \r\n \r\n \r\n Setting: \r\n \r\n \r\n {opticalFilterSetting()}\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Sar Filter */}\r\n \r\n \r\n \r\n Capture method: \r\n \r\n {captureMethodImage()}\r\n \r\n \r\n \r\n Resolution: \r\n \r\n {sarResolutionSectionImage()}\r\n \r\n \r\n\r\n {/* Thermal Filter */}\r\n \r\n \r\n \r\n Resolution: \r\n \r\n {thermalResolutionSectionImage()}\r\n \r\n \r\n \r\n \r\n \r\n { showArchiveModel && \r\n browseArchiveIds()\r\n }\r\n \r\n \r\n )\r\n}\r\n","import React, { useState,useEffect } from \"react\";\r\nimport { Box } from \"@material-ui/core\";\r\nimport \"./orderImageComponent.css\";\r\nimport APIs from '../../../Api.js';\r\nimport CircularProgress from '@material-ui/core/CircularProgress';\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport BrowseArchive from \"./BrowseArchive.js\";\r\nimport {useHistory,useLocation} from \"react-router-dom\";\r\nimport {newImageryData} from \"./OrderImageData.js\"\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport polyline from '../../../images/polyline.png'\r\n\r\nconst OrderImageComponent = ({orderImageHandler,analyzeOrderHandler_,polygonCoordinates,updateMapHeight}) => {\r\n const estimatedcoordinatesData = useSelector((state) => state.coordinates);\r\n const currentDate = new Date();\r\n currentDate.setDate(currentDate.getDate() - 25);\r\n const startDates = currentDate.toISOString().slice(0, 10);\r\n const endDates = new Date().toISOString().slice(0, 10);\r\n const [endDate, setEndDate] = useState(endDates);\r\n const [startDate, setStartDate] = useState(startDates);\r\n const activeTab_ = localStorage.getItem('active_tab') || 'newImagery'\r\n const [activeTab, setActiveTab] = useState(activeTab_);\r\n const [collectionData, setCollectionData] = useState([]);\r\n const [selectedCollectionData,setSelectedCollectionData] = useState({})\r\n const [showLoader,setShowLoader] = useState(false)\r\n const [productType,setProductType] = useState('select')\r\n const [productID,setProductID] = useState('')\r\n const [collectionName_,setCollectionName] = useState('')\r\n const [imagesIDs,setImagesIDs] = useState([])\r\n const [orderData,setOrderData] = useState({})\r\n const [productCollectionData,setProductCollectionData] = useState('')\r\n const [linkID,setLinkID] = useState('')\r\n const [cloudCoverages, setCloudCoverages] = useState([0, 100]);\r\n const [sceneData, setSceneData] = useState([]);\r\n const [fieldData,setFieldData] = useState([]);\r\n const [aoiType,setAoiType] = useState('select')\r\n const [imageIdLoader,setImageIdLoader] = useState(false)\r\n const [showImageIdsContainer,setImageIdsContainer] = useState(false)\r\n const [allError,setError] = useState({aoi:\"\",cart:\"\"})\r\n const [estimateCredit,setEstimateCredit] = useState(0)\r\n const [addToCart,setAddToCart] = useState(false) \r\n const [estimateOrderLoader,setEstimateOrderLoader] = useState(false)\r\n const rid_ = localStorage.getItem('rid') || 1\r\n const [resolutionId, setResolutionId] = useState(rid_);\r\n // const imageryResolution_ = localStorage.getItem('imagery_resolution') || '~10CM'\r\n // const [imageryResolution,setImageryResolution] = useState(imageryResolution_)\r\n const [allOrderParms,setAllOrderParms] = useState({})\r\n const history = useHistory();\r\n\r\n\r\n const currentDate_ = new Date();\r\n currentDate.setDate(currentDate.getDate() - 25);\r\n const startDates_ = currentDate.toISOString().slice(0, 10);\r\n const endDates_ = new Date().toISOString().slice(0, 10);\r\n const [dummyData, setDummyData] = useState(newImageryData)\r\n const typeValue_ = localStorage.getItem('type_value') || 'normalrgb'\r\n const [typeValue, setTypeValue] = useState(typeValue_)\r\n const [typeImage, setTypeImage] = useState('normalrgb.png')\r\n const [resolutionId_,setResolutionId_] = useState(1)\r\n const imageryResolution_ = localStorage.getItem('imagery_resolution') || '~10CM'\r\n const [resolutionValue,setResolutionValue] = useState(imageryResolution_)\r\n\r\n\r\n const storageAoiType_ = localStorage.getItem('aoi_selected') || 'select'\r\n const [aoiType_,setAoiType_] = useState(storageAoiType_)\r\n const [aoiData_,setAoiData] = useState({})\r\n const [startDate_,setStartDate_] = useState(startDates_)\r\n const [endDate_,setEndDate_] = useState(endDates_)\r\n const [cloudCoverage_,setCloudCoverages_] = useState([30,70])\r\n const [angle_,setAngle_] = useState([30,70])\r\n\r\n\r\n const captureMethod_ = localStorage.getItem('capture_method') || 'SLC'\r\n const [captureMethodId,setCaptureMethodId_] = useState(5)\r\n const [captureMethodValue_,setCaptureMethodValue_] = useState(captureMethod_)\r\n\r\n const [containerWidth,setContainerWidth] = useState('578px')\r\n\r\n\r\n\r\n\r\n // useEffect(()=>{\r\n // let catalogData = localStorage.getItem('catalog_data') || \"[]\"\r\n // catalogData = JSON.parse(catalogData)\r\n // setCollectionData(catalogData)\r\n // if (catalogData.length == 0){\r\n // getAllTaskingCollection()\r\n // } \r\n \r\n // const productType = localStorage.getItem('product_type') || false\r\n // const collectionName = localStorage.getItem(\"collection_name\") || false\r\n // const productId_ = localStorage.getItem(\"product_id\") || false\r\n // const startDate_ = localStorage.getItem('start_date') || false\r\n // const endDate_ = localStorage.getItem('end_date') || false\r\n // const aoi_ = localStorage.getItem('aoi_') || \"[]\"\r\n // const aoi_options = JSON.parse(aoi_)\r\n // const aoiValue = localStorage.getItem('aoi_value') || \"select\"\r\n // const cloudCoverages_ = localStorage.getItem('cloud') || \"[0, 100]\"\r\n // const cloud = JSON.parse(cloudCoverages_)\r\n\r\n\r\n // setAoiType(aoiValue)\r\n\r\n // setCloudCoverages(cloud)\r\n // setFieldData(aoi_options)\r\n\r\n // if (startDate_){\r\n // setStartDate(startDate_)\r\n // }\r\n\r\n // if (endDate_){\r\n // setEndDate(endDate_)\r\n // }\r\n\r\n // if (collectionName){\r\n // setCollectionName(collectionName)\r\n // }\r\n\r\n // if (productId_){\r\n // setProductID(productId_)\r\n // }\r\n\r\n // if (productType){\r\n // setProductType(productType)\r\n // }\r\n\r\n // },[])\r\n\r\n // const getAllTaskingCollection = async ()=> {\r\n // setShowLoader(true)\r\n // const token = localStorage.getItem('token');\r\n // const headerOptions = {\r\n // method: 'GET',\r\n // headers: {\r\n // 'Content-Type': 'application/json',\r\n // 'Authorization': `Token ${token}`,\r\n // },\r\n // };\r\n // let collectionType = \"catalog\";\r\n // const response = await fetch(APIs.GET_COLLECTIONS+collectionType, headerOptions);\r\n // const {data,code } = await response.json();\r\n // if (code == 200){\r\n // localStorage.setItem('catalog_data',JSON.stringify(data))\r\n // data.map((item_,index)=>{\r\n // if (item_.section == 'Optical satellite imagery'){\r\n // localStorage.setItem(\"selected_catalog\",JSON.stringify(item_.products[0]))\r\n // setSelectedCollectionData(item_.products[0])\r\n // }\r\n // })\r\n // setCollectionData(data)\r\n // setShowLoader(false)\r\n // } else {\r\n // setShowLoader(false)\r\n // }\r\n\r\n // }\r\n\r\n const handleTabClick = (tab) => {\r\n localStorage.setItem('ai_model_init',1)\r\n updateMapHeight(tab)\r\n setActiveTab(tab);\r\n localStorage.setItem('active_tab',tab)\r\n localStorage.setItem('aoi_selected','select')\r\n orderImageHandler(false)\r\n\r\n if (tab=='browseArchive'){\r\n localStorage.removeItem('aoi_value',)\r\n localStorage.removeItem('order_data',)\r\n localStorage.removeItem('aoi_',)\r\n localStorage.removeItem('product_type')\r\n localStorage.removeItem('product_id')\r\n localStorage.removeItem('start_date')\r\n localStorage.removeItem('end_date')\r\n localStorage.removeItem('imagery_resolution')\r\n localStorage.removeItem('rid')\r\n setProductType('select')\r\n setAoiType('select')\r\n setProductID('')\r\n } else {\r\n localStorage.removeItem('optical_satellite')\r\n localStorage.removeItem('aoi_selected')\r\n localStorage.removeItem('optical_satellite_setting')\r\n localStorage.removeItem('optical_resolution')\r\n }\r\n };\r\n\r\n // const newImageryTypeOptionHandler = (e) =>{\r\n // localStorage.removeItem('collection_name')\r\n // localStorage.removeItem('imagery_resolution')\r\n // localStorage.removeItem('rid')\r\n // localStorage.removeItem('product_id')\r\n // localStorage.removeItem('aoi_')\r\n // localStorage.removeItem('aoi_value')\r\n // localStorage.removeItem('product_type')\r\n // setError({aoi:\"\",cart:\"\"})\r\n // setResolutionId(1)\r\n // setImageryResolution('~10CM')\r\n // setProductID('')\r\n // setCollectionName('')\r\n // setAoiType('select')\r\n // setFieldData([])\r\n // setSceneData([])\r\n // const {value} = e.target\r\n // let catalogData = localStorage.getItem('catalog_data') || \"[]\"\r\n // catalogData = JSON.parse(catalogData)\r\n // let optionData_ = []\r\n // catalogData.map((item_,index)=>{optionData_.push(...item_.products)})\r\n // const filterData = optionData_.filter((optionItem)=>{return optionItem.name == value;})\r\n // if (filterData.length>0){\r\n // localStorage.setItem(\"selected_catalog\",JSON.stringify(filterData[0]))\r\n // setSelectedCollectionData(filterData[0])\r\n // }\r\n // }\r\n\r\n const newImageryTypeOptionHandler = (e) =>{\r\n localStorage.removeItem('aoi_selected')\r\n localStorage.removeItem('aoidraw_enable')\r\n localStorage.removeItem('imagery_resolution')\r\n localStorage.removeItem('capture_method')\r\n orderImageHandler(false)\r\n setAoiType_('select')\r\n const {value} = e.target\r\n setTypeValue(value)\r\n setTypeImage(dummyData.images[value])\r\n localStorage.setItem('type_value',value)\r\n }\r\n\r\n // const newImageryTypeSectionOption = () => {\r\n // let catalogData = localStorage.getItem('catalog_data') || \"[]\"\r\n // catalogData = JSON.parse(catalogData)\r\n // let optionData = []\r\n // catalogData.map((item_,index)=>{\r\n // optionData.push(...item_.products)\r\n // })\r\n \r\n // let selectedCatalogData = localStorage.getItem('selected_catalog') || \"[]\"\r\n // selectedCatalogData = JSON.parse(selectedCatalogData)\r\n // return(\r\n // {newImageryTypeOptionHandler(e)}}>\r\n // { \r\n // optionData.map((optionItem,index)=>{\r\n\r\n // return (\r\n // {optionItem.title} \r\n // )\r\n // })\r\n // }\r\n // \r\n // )\r\n // }\r\n\r\n\r\n const newImageryTypeSectionOption = () => {\r\n let typeData = dummyData.type\r\n return(\r\n {newImageryTypeOptionHandler(e)}}>\r\n {\r\n typeData.map((item_,index)=>{\r\n return(\r\n {item_.name} \r\n )\r\n })\r\n }\r\n \r\n )\r\n }\r\n\r\n // const rightSectionImage = () =>{\r\n // let selectedCatalogData = localStorage.getItem('selected_catalog') || \"[]\"\r\n // selectedCatalogData = JSON.parse(selectedCatalogData)\r\n // const imageUrl = `/up42/${selectedCatalogData.thumbnail}`;\r\n // return(\r\n // {resolutionHandler(item_.rid,item_.value)}}\r\n // >\r\n // \r\n // \r\n // \r\n // \r\n // \r\n // ))}\r\n // \r\n // )\r\n // }\r\n\r\n const resolutionSectionImage = () =>{\r\n const imageUrl = `/up42/${dummyData.images[typeValue]}`;\r\n\r\n let imageUrlArray = [\r\n {rid:1,src:imageUrl,value:'~10CM'},\r\n {rid:2,src:imageUrl,value:'~30CM'},\r\n {rid:3,src:imageUrl,value:'~50CM'},\r\n {rid:4,src:imageUrl,value:'~1M'},\r\n {rid:5,src:imageUrl,value:'~10M'}\r\n ]\r\n let clasName_ = 'normalgrid'\r\n switch (typeValue) {\r\n case 'sar':\r\n imageUrlArray = [\r\n {rid:1,src:imageUrl,value:'~10CM'},\r\n {rid:2,src:imageUrl,value:'~30CM'},\r\n {rid:3,src:imageUrl,value:'~50CM'},\r\n {rid:4,src:imageUrl,value:'~1M'},\r\n ]\r\n clasName_ = 'sargrid'\r\n break;\r\n case 'thermal':\r\n imageUrlArray = [\r\n {rid:1,src:imageUrl,value:'~3M'},\r\n {rid:2,src:imageUrl,value:'~30M'},\r\n ]\r\n clasName_ = 'thermalgrid'\r\n break;\r\n default:\r\n imageUrlArray = imageUrlArray\r\n clasName_ = clasName_\r\n break;\r\n }\r\n\r\n\r\n return(\r\n <>\r\n {\r\n imageUrlArray.map((item_, index) => {\r\n return(\r\n <>\r\n {resolutionHandler(item_.rid,item_.value)}}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n )\r\n }\r\n\r\n // const newImageryleftSectionParagraph = () => {\r\n // let selectedCatalogData = localStorage.getItem('selected_catalog') || \"[]\"\r\n // selectedCatalogData = JSON.parse(selectedCatalogData)\r\n // return(\r\n // {selectedCatalogData.description}
\r\n // )\r\n // }\r\n\r\n const newImageryleftSectionParagraph = () => {\r\n return(\r\n \r\n Lorem ipsum dolor sit amet consectetur. Amet feugiat vulputate hendrerit accumsan blandit sem felis fames tellus. Ac netus in amet dui nulla ac diam posuere. Vel sed eros fringilla facilisis adipiscing porttitor vel. Mauris volutpat turpis.\r\n
\r\n )\r\n }\r\n\r\n // const collectionForm = (params)=>{\r\n // let properties = params.properties;\r\n // let definitions = params.definitions;\r\n // let fieldData = []\r\n // Object.keys(properties).map((item,index)=>{\r\n // let data = properties[item]\r\n // data['key'] = item\r\n // if (data.allOf){\r\n // let coordinatesData = []\r\n // let allOfData = data.allOf\r\n // allOfData.map((allOfItem,index)=>{\r\n // let allOfDef = allOfItem.$ref.replace('#/definitions/','');\r\n // const definitionsData = definitions[allOfDef]\r\n // if (definitionsData.anyOf){\r\n // coordinatesData.push(definitionsData.anyOf)\r\n // } else{\r\n // coordinatesData.push([definitionsData]) \r\n // }\r\n \r\n // })\r\n // data.input_type = 'select'\r\n // data['data'] = coordinatesData\r\n \r\n\r\n // } else if (data.anyOf){\r\n // let anyOfData = data.anyOf\r\n // let coordinatesData = []\r\n // let coordinatesSelection = []\r\n // anyOfData.map((anyOfItem,index)=>{\r\n // let anyOfDef = anyOfItem.$ref.replace('#/definitions/','');\r\n // const definitionsData = definitions[anyOfDef]\r\n // if (definitionsData.properties){\r\n // coordinatesData.push(definitionsData)\r\n // coordinatesSelection.push(anyOfDef)\r\n // }\r\n // })\r\n // data.input_type = 'coordinates'\r\n // data['data'] = coordinatesData\r\n // data['selection'] = coordinatesSelection\r\n\r\n // } else if (data.$ref){\r\n // let refDef = data.$ref.replace('#/definitions/','');\r\n // const definitionsData = definitions[refDef]\r\n // let coordinatesData = [definitionsData]\r\n // let coordinatesSelection = [refDef]\r\n // data.input_type = 'coordinates'\r\n // data['data'] = coordinatesData\r\n // data['selection'] = coordinatesSelection\r\n // data['title'] = item.toUpperCase()\r\n // }\r\n // else { \r\n // if (data.format){\r\n // if (data.format == 'date-time'){\r\n // data['input_type'] = 'date-time'\r\n // data['value'] = ''\r\n // } else{\r\n\r\n // }\r\n // } else if (data.type == 'string'){\r\n // data['input_type'] = 'text'\r\n // data['value'] = ''\r\n // } else if (data.type == 'integer' || data.type == 'number'){\r\n // data['input_type'] = 'integer'\r\n // data['value'] = 0\r\n // } \r\n // }\r\n // fieldData.push(data)\r\n // }) \r\n // localStorage.removeItem('aoi_','aoi_value')\r\n // setFieldData(fieldData)\r\n // }\r\n\r\n // const productParamsHandler = async (productId,collection_name,hostName_,object,cloudCoverage=100,fetchType='self') => {\r\n // setError({aoi:\"\",cart:\"\"})\r\n // localStorage.removeItem('aoi_')\r\n // localStorage.removeItem('aoi_value')\r\n // setAoiType('select')\r\n // setImageIdLoader(true)\r\n // let type = 'catalog'\r\n // let productId_ = productID \r\n // if (productId && productId !=\"\"){\r\n // productId_ = productId\r\n // } \r\n\r\n // let startDate_ = startDate\r\n // let endDate_ = endDate\r\n // if (object){\r\n // if (object.type == 'start'){\r\n // startDate_ = object.date\r\n // } else {\r\n // endDate_ = object.date\r\n // }\r\n // }\r\n\r\n // const token = localStorage.getItem('token');\r\n // const headerOptions = {\r\n // method: 'GET',\r\n // headers: {\r\n // 'Content-Type': 'application/json',\r\n // 'Authorization': `Token ${token}`,\r\n // },\r\n // };\r\n\r\n // let resolution_ = localStorage.getItem('imagery_resolution') || '~10CM'\r\n // resolution_ = parseInt(resolution_.match(/\\d+/)[0], 10);\r\n \r\n // let payload = {\r\n // hostName:hostName_,\r\n // collectionName:collection_name,\r\n // start:startDate_,\r\n // end:endDate_,\r\n // date:true,\r\n // query:true,\r\n // cloudCoverage,\r\n // resolution_,\r\n // };\r\n\r\n\r\n // if (type == 'tasking'){\r\n // payload.hostName = false\r\n // payload.collectionName = false\r\n // payload.date = false\r\n // }\r\n \r\n // try {\r\n // const url = new URL(APIs.GET_PRODUCT_PARAMS+productId_);\r\n // url.search = new URLSearchParams(payload).toString();\r\n // const response = await fetch(url, headerOptions);\r\n // const {code,data } = await response.json();\r\n // if (code == 200){\r\n // collectionForm(data)\r\n // setSceneData([data])\r\n // let scene_data = data.scene_data \r\n // if (scene_data.length > 0){\r\n // let imagesData = []\r\n // scene_data.map((item,index)=>{\r\n // let ids = item.properties.id\r\n // imagesData.push({value:ids,const:ids})\r\n // })\r\n // setImagesIDs(imagesData)\r\n // setLinkID(data.linkid)\r\n // } else{\r\n // if (fetchType!='self'){\r\n // //setError(\"Ids not found this date range\")\r\n // }\r\n // }\r\n // let properties = data.properties\r\n // let allKeys = {type:'',dataProduct:productId_,'geokey':''}\r\n // Object.keys(properties).map((item,index)=>{\r\n // allKeys[item] = ''\r\n // })\r\n // setOrderData(allKeys)\r\n // localStorage.setItem('order_data',JSON.stringify(allKeys))\r\n // setProductCollectionData(data);\r\n // setImageIdLoader(false)\r\n \r\n // } else {\r\n // setImageIdLoader(false)\r\n // }\r\n \r\n // } catch (error) {\r\n // //setBackDrop(false) \r\n // //setLoader(false)\r\n // setImageIdLoader(false)\r\n // }\r\n // }\r\n\r\n // const productTypeHandler = (event)=>{\r\n // setError({aoi:\"\",cart:\"\"})\r\n // let value = event.target.value\r\n // localStorage.setItem(\"product_type\",value)\r\n // if (value != 'select'){\r\n // setImageIdsContainer(true)\r\n // setFieldData([])\r\n \r\n // let dataType = []\r\n // if (Object.keys(selectedCollectionData).length>0){\r\n // dataType = selectedCollectionData\r\n // } else{\r\n // dataType = localStorage.getItem('selected_catalog') || \"{}\"\r\n // dataType = JSON.parse(dataType)\r\n // if (Object.keys(dataType).length>0){\r\n // dataType = dataType\r\n // }\r\n // }\r\n // let dataProductIds = dataType.data_ids\r\n // let collectionData = dataType.collection_name\r\n // let hostName = dataType.hostName\r\n // setImagesIDs([])\r\n // setLinkID('')\r\n\r\n // let cloudCoverage_ = cloudCoverages[1] - cloudCoverages[0]\r\n // productParamsHandler(dataProductIds[value],collectionData[value],hostName,false,cloudCoverage_)\r\n\r\n // localStorage.setItem(\"product_type\",value)\r\n // localStorage.setItem(\"collection_name\",collectionData[value])\r\n // localStorage.setItem(\"product_id\",dataProductIds[value])\r\n\r\n // setProductType(value)\r\n // setCollectionName(collectionData[value])\r\n // setProductID(dataProductIds[value])\r\n // }\r\n // }\r\n\r\n// const newImageryProductTypes = () => {\r\n// let dataType = []\r\n// if (Object.keys(selectedCollectionData).length>0){\r\n// dataType = selectedCollectionData.data_type\r\n// } else{\r\n// dataType = localStorage.getItem('selected_catalog') || \"[]\"\r\n// dataType = JSON.parse(dataType)\r\n// if (Object.keys(dataType).length>0){\r\n// dataType = dataType.data_type\r\n// }\r\n// }\r\n// return(\r\n// productTypeHandler(event)}>\r\n// Select \r\n// {\r\n// dataType.map((item,index)=>{\r\n// return(\r\n// {item.name} \r\n// )\r\n// })\r\n// }\r\n// \r\n// )\r\n// }\r\n\r\n // const handleDateChange = (e,type) => {\r\n // setError({aoi:\"\",cart:\"\"})\r\n // let dataType = []\r\n // if (Object.keys(selectedCollectionData).length>0){\r\n // dataType = selectedCollectionData\r\n // } else{\r\n // dataType = localStorage.getItem('selected_catalog') || \"{}\"\r\n // dataType = JSON.parse(dataType)\r\n // if (Object.keys(dataType).length>0){\r\n // dataType = dataType\r\n // }\r\n // }\r\n // let hostName = dataType.hostName\r\n // let date_ = e.target.value\r\n // if (type == 'start'){\r\n // setStartDate(date_);\r\n // localStorage.setItem('start_date',date_)\r\n // } else {\r\n // localStorage.setItem('end_date',date_)\r\n // setEndDate(date_);\r\n // }\r\n // let cloudCoverage_ = cloudCoverages[1] - cloudCoverages[0]\r\n // productParamsHandler(productID,collectionName_,hostName,{date:date_,type},cloudCoverage_)\r\n // if (!showImageIdsContainer){\r\n // setImageIdsContainer(true)\r\n // }\r\n // };\r\n\r\n const handleDateChange = (e,type) => {\r\n const {value} = e.target\r\n if (type == 'start'){\r\n setStartDate_(value);\r\n } else {\r\n setEndDate_(value);\r\n }\r\n };\r\n\r\n const handleChangeAngle = (e)=>{\r\n //console.log();\r\n }\r\n\r\n const handleChange = (event, newValue) => {\r\n //console.log();\r\n }; \r\n\r\n const valuetext = (value) => {\r\n return `${value}°C`;\r\n }\r\n\r\n // const newImageryAreaInterestSelect = (e,key) =>{\r\n // const {value} = e.target\r\n // if (value != 'select'){\r\n // setError({...allError,aoi:\"\"})\r\n // localStorage.setItem('aoi_value',value)\r\n // setAoiType(value)\r\n // setOrderData({...orderData,type:value,geokey:key})\r\n // let orderData_ = localStorage.getItem('order_data') || \"{}\"\r\n // orderData_ = JSON.parse(orderData_)\r\n // localStorage.setItem('order_data',JSON.stringify({...orderData_,type:value,geokey:key}))\r\n // }\r\n // }\r\n\r\n const newImageryAreaInterestSelect = (e) =>{\r\n localStorage.setItem('aoidraw_enable','1')\r\n const {value} = e.target\r\n if (value != 'select'){\r\n let aoiData = dummyData.aoiTypeValue\r\n let data = aoiData[value]\r\n data.aoiIsSeletced = false\r\n data.dataShow = true\r\n orderImageHandler(data)\r\n setAoiData(data)\r\n setAoiType_(value)\r\n localStorage.setItem('aoi_selected',value)\r\n }\r\n }\r\n \r\n // const newImageryAreaInterest = () =>{\r\n // let fieldData_ = fieldData\r\n // let aoiOptions = []\r\n // if (fieldData_.length > 0){\r\n // fieldData_.map((object_,index)=>{\r\n // if (object_.input_type == 'coordinates'){\r\n // aoiOptions.push(object_.selection)\r\n // }\r\n // })\r\n // }\r\n\r\n // if (aoiOptions.length>0){\r\n // const aioData = [{input_type:\"coordinates\",selection:aoiOptions}]\r\n // localStorage.removeItem('aoi_','aoi_value')\r\n // localStorage.setItem('aoi_',JSON.stringify(aioData))\r\n // }\r\n\r\n // return(\r\n // <>\r\n // 0?false:true} value={aoiType} onChange={(e)=>{newImageryAreaInterestSelect(e,'aoi')}} className=\"selectListStyle\">\r\n // Select \r\n // { aoiOptions.length > 0 &&\r\n // aoiOptions[0].map((option,item)=>{\r\n // return(\r\n // {option} \r\n // )\r\n // })\r\n // }\r\n // \r\n // \r\n // )\r\n // }\r\n\r\n\r\n const newImageryAreaInterest = () =>{\r\n let aoiType = dummyData.aoi\r\n return(\r\n <>\r\n {newImageryAreaInterestSelect(e)}}>\r\n Choose an area \r\n {aoiType.map((item_,index)=>{\r\n return(\r\n {item_.name} \r\n )\r\n })}\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n const imageHandler = (data) =>{\r\n let fieldData_ = fieldData\r\n let aoiIsSeletced = true\r\n let dataShow = true\r\n let showError_ = false\r\n if (fieldData_.length > 0){\r\n for (let index=0;index < fieldData_.length;index++){\r\n if (fieldData_[index].input_type == 'coordinates'){\r\n if (aoiType =='select'){\r\n aoiIsSeletced = false\r\n dataShow = false\r\n showError_ = true\r\n break;\r\n } else {\r\n aoiIsSeletced = true\r\n }\r\n } else {\r\n aoiIsSeletced = false\r\n dataShow = true\r\n }\r\n }\r\n }\r\n let orderData = localStorage.getItem('order_data') || \"{}\"\r\n orderData = JSON.parse(orderData)\r\n let cloudCoverage = data.properties.cloudCoverage\r\n let resolution = data.properties.resolution\r\n\r\n let originalDate = new Date(data.properties.acquisitionDate);\r\n let startDate = `${originalDate.getFullYear()}-${originalDate.getMonth()+ 1}-${originalDate.getDate()}`;\r\n\r\n let orderDatanew = {\r\n ...orderData,\r\n id:data.properties.id,\r\n cloudCoverage,\r\n startDate,\r\n resolution,\r\n } \r\n localStorage.setItem('order_data',JSON.stringify(orderDatanew))\r\n\r\n data.aoiIsSeletced = aoiIsSeletced\r\n data.dataShow = dataShow\r\n orderImageHandler(data)\r\n if (showError_){\r\n setError({...allError,aoi:\"Please select the aoi\"})\r\n }\r\n \r\n }\r\n\r\n const newImageryImagesIds = () =>{\r\n let sceneData_ = sceneData\r\n if (sceneData_.length > 0){\r\n sceneData_ = sceneData_[0].scene_data\r\n }\r\n return(\r\n <>\r\n { showImageIdsContainer &&\r\n \r\n {imageIdLoader ? \r\n \r\n \r\n \r\n :\r\n <> \r\n \r\n Select an image: \r\n
\r\n \r\n { sceneData_.length > 0 ?\r\n <>\r\n { \r\n sceneData_.map((item_,index)=>{\r\n const properties_ = item_.properties\r\n const originalDate = new Date(properties_.acquisitionDate);\r\n const formattedDate = `${originalDate.getDate()} - ${originalDate.getMonth()+1} - ${originalDate.getFullYear()}`;\r\n return(\r\n {imageHandler(item_)}}>\r\n
\r\n
\r\n
\r\n
Resolution: {properties_.resolution} cm
\r\n
Captured: {formattedDate}
\r\n
Cloud: {properties_.cloudCoverage}%
\r\n
Not Data Found
\r\n }\r\n \r\n \r\n }\r\n \r\n }\r\n \r\n )\r\n }\r\n\r\n // const estimateOrderHandler = async(event)=>{\r\n // setEstimateOrderLoader(true)\r\n // setError({...allError,cart:\"\",aoi:\"\"})\r\n // analyzeOrderHandler_()\r\n // let polygonCoordinates_ = polygonCoordinates\r\n // if (estimatedcoordinatesData.length > 0){\r\n // polygonCoordinates_ = estimatedcoordinatesData\r\n // }\r\n\r\n // let orderData_ = localStorage.getItem(\"order_data\") || \"{}\"\r\n // orderData_ = JSON.parse(orderData_)\r\n // const product_id = orderData_.dataProduct\r\n // let key = orderData_.geokey\r\n // if (key){\r\n // orderData_[key] = polygonCoordinates_\r\n // }\r\n // let selectedCatalogData = localStorage.getItem('selected_catalog') || \"{}\"\r\n // selectedCatalogData = JSON.parse(selectedCatalogData)\r\n // let host_name_ = ''\r\n // if (selectedCatalogData?.hostName){\r\n // host_name_ = selectedCatalogData?.hostName\r\n // }\r\n\r\n \r\n // let collection_name = localStorage.getItem('collection_name') || \"\"\r\n // let product_type = localStorage.getItem('product_type') || \"\"\r\n \r\n // let cloudCoverage = orderData_.cloudCoverage\r\n // let resolution = orderData_.resolution\r\n // let startDate = orderData_.startDate\r\n\r\n // delete orderData_['cloudCoverage'];\r\n // delete orderData_['resolution'];\r\n // delete orderData_['startDate'];\r\n\r\n\r\n // let params = {\r\n // collection_name,\r\n // cloudCoverage,\r\n // resolution,\r\n // startDate,\r\n // product_type,\r\n // host_name_,\r\n // order_type:\"catalog\",\r\n // aoi:\"Polygon\",\r\n // params:{\r\n // dataProduct:product_id,\r\n // params:orderData_\r\n // }\r\n // }\r\n\r\n // const token = localStorage.getItem('token');\r\n // const headerOptions = {\r\n // method: 'POST',\r\n // headers: {\r\n // 'Content-Type': 'application/json',\r\n // 'Authorization': `Token ${token}`,\r\n // },\r\n // body:JSON.stringify(params)\r\n // };\r\n // try {\r\n // const response = await fetch(APIs.ESTIMATE_ORDER, headerOptions);\r\n // const {data,code,message } = await response.json();\r\n // if (code == 200){\r\n // setAllOrderParms(params)\r\n // setEstimateCredit(data.cost)\r\n // setAddToCart(true)\r\n // setEstimateOrderLoader(false)\r\n // } else {\r\n // if (data){\r\n // setEstimateCredit(data.cost)\r\n // setError({...allError,cart:message})\r\n // } else {\r\n // setError({...allError,cart:message})\r\n // }\r\n // localStorage.removeItem('aoi_','aoi_value','product_type')\r\n // setEstimateOrderLoader(false)\r\n // }\r\n // } catch (error) {\r\n // setEstimateOrderLoader(false)\r\n // }\r\n\r\n // }\r\n\r\n // const addToCartHandler = async()=>{\r\n // setError({aoi:\"\",cart:\"\"})\r\n // const token = localStorage.getItem('token');\r\n // const headerOptions = {\r\n // method: 'POST',\r\n // headers: {\r\n // 'Content-Type': 'application/json',\r\n // 'Authorization': `Token ${token}`,\r\n // },\r\n // body:JSON.stringify(allOrderParms)\r\n // };\r\n // try {\r\n // const response = await fetch(APIs.PLACE_ORDER, headerOptions);\r\n // const {data,code,message } = await response.json();\r\n // if (code == 200){\r\n // history.push('/data-collections');\r\n // localStorage.removeItem(\"product_id\")\r\n // localStorage.removeItem(\"collection_name\")\r\n // localStorage.removeItem(\"product_type\")\r\n // localStorage.removeItem(\"aoi_\")\r\n // localStorage.removeItem(\"aoi_value\")\r\n // } else {\r\n // setError({aoi:\"\",cart:message})\r\n // }\r\n // } catch (error) {\r\n \r\n // }\r\n // }\r\n\r\n // const onChangeCommittedHanlder = (event,newValue) =>{\r\n // setCloudCoverages(newValue);\r\n // let dataType = []\r\n // if (Object.keys(selectedCollectionData).length>0){\r\n // dataType = selectedCollectionData\r\n // } else{\r\n // dataType = localStorage.getItem('selected_catalog') || \"{}\"\r\n // dataType = JSON.parse(dataType)\r\n // if (Object.keys(dataType).length>0){\r\n // dataType = dataType\r\n // }\r\n // }\r\n // let hostName_ = dataType.hostName\r\n // let cloudCoverage_ = newValue[1] - newValue[0]\r\n // productParamsHandler(false,collectionName_,hostName_,false,cloudCoverage_)\r\n // localStorage.setItem('cloud',JSON.stringify(newValue))\r\n // if (!showImageIdsContainer){\r\n // setImageIdsContainer(true)\r\n // }\r\n // }\r\n\r\n const onChangeCommittedHanlder = (event,newValue) =>{\r\n setCloudCoverages_(newValue);\r\n }\r\n\r\n const angleCommittedHanlder = (event,newValue) =>{\r\n setAngle_(newValue);\r\n }\r\n\r\n const drawPolygonHandler = () =>{\r\n let aoiInit = localStorage.getItem('aoidraw_enable') || '1'\r\n let data = {}\r\n let aoiIsSeletced = true\r\n if (aoiInit == '0'){\r\n aoiInit = '1'\r\n aoiIsSeletced = false\r\n } else {\r\n aoiInit = '0'\r\n }\r\n data.aoiIsSeletced = aoiIsSeletced\r\n data.dataShow = false\r\n orderImageHandler(data)\r\n localStorage.setItem('aoidraw_enable',aoiInit)\r\n // localStorage.setItem('aoi_selected','select')\r\n }\r\n\r\n\r\n const captureMethodHandler = (rid,value)=>{\r\n setCaptureMethodId_(rid)\r\n setCaptureMethodValue_(value)\r\n localStorage.setItem('capture_method',value)\r\n }\r\n\r\n const captureMethodImage_ = () =>{\r\n const imageUrl = `/up42/${dummyData.images[typeValue]}`;\r\n let imageUrlArray_ = [\r\n {rid:5,src:imageUrl,value:'SLC'},\r\n {rid:6,src:imageUrl,value:'GEC'},\r\n {rid:7,src:imageUrl,value:'GEO'},\r\n {rid:8,src:imageUrl,value:'SICD'},\r\n ]\r\n\r\n return(\r\n \r\n {imageUrlArray_.map((item, index) => (\r\n {captureMethodHandler(item.rid,item.value)}}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n Order Image \r\n
\r\n { showLoader ? \r\n \r\n \r\n \r\n :\r\n <>\r\n \r\n
handleTabClick(\"newImagery\")}\r\n >\r\n New Imagery\r\n handleTabClick(\"browseArchive\")}\r\n >\r\n Browse Archive\r\n