| <form > | <form > | ||||
| <div className="card-body"> | <div className="card-body"> | ||||
| <div className="row"> | <div className="row"> | ||||
| {/* <div className="col-md-3"> | |||||
| <div className="col-md-3"> | |||||
| <div className="form-group"> | <div className="form-group"> | ||||
| <input type="text" className="form-control input-field cursor-pointer" value={requestObject.location} placeholder={t('createScrapeRequest.LocationPlaceholder')} onChange={e => setRequestObject(s => ({ ...s, location: e.target.value }))} /> | |||||
| <input type="text" className="form-control input-field" value={requestObject.description} placeholder={t('createScrapeRequest.DescriptionPlaceholder')} onChange={e => setRequestObject(s => ({ ...s, description: e.target.value }))} /> | |||||
| </div> | </div> | ||||
| </div> */} | |||||
| </div> | |||||
| <div className="col-md-3"> | <div className="col-md-3"> | ||||
| <div className="form-group"> | <div className="form-group"> | ||||
| <Autocomplete | <Autocomplete | ||||
| menuStyle={{ | menuStyle={{ | ||||
| display: 'block', | |||||
| margin: 0, | |||||
| padding: ".375rem .75rem", | padding: ".375rem .75rem", | ||||
| fontSize: '1rem', | fontSize: '1rem', | ||||
| fontWeight: '400', | fontWeight: '400', | ||||
| </div> | </div> | ||||
| <div className="col-md-2"> | <div className="col-md-2"> | ||||
| <div className="form-group"> | <div className="form-group"> | ||||
| <Select options={prices} onChange={handleChangePriceType} placeholder={t('createScrapeRequest.PricePlaceholder')} /> | |||||
| <Select options={prices} onChange={handleChangePriceType} placeholder={t('createScrapeRequest.PricePlaceholder')} /> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div className="col-md-2"> | <div className="col-md-2"> | ||||
| <div className="form-group"> | <div className="form-group"> | ||||
| <Select className="cursor-pointer" options={beds} onChange={handleChangeBedType} placeholder={t('createScrapeRequest.BedsPlaceholder')}/> | |||||
| <Select className="cursor-pointer" options={beds} onChange={handleChangeBedType} placeholder={t('createScrapeRequest.BedsPlaceholder')} /> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div className="col-md-2"> | <div className="col-md-2"> | ||||
| <Select className="cursor-pointer" options={types} onChange={handleChangeFilterType} placeholder={t('createScrapeRequest.TypePlaceholder')} /> | |||||
| <Select className="cursor-pointer" options={types} onChange={handleChangeFilterType} placeholder={t('createScrapeRequest.TypePlaceholder')} /> | |||||
| </div> | </div> | ||||
| <div className="col-md-2"> | <div className="col-md-2"> | ||||
| <Select className="cursor-pointer" options={lifeStyles} onChange={handleChangeLifeStyleType} placeholder={t('createScrapeRequest.LifestylePlaceholder')}/> | |||||
| <Select className="cursor-pointer" options={lifeStyles} onChange={handleChangeLifeStyleType} placeholder={t('createScrapeRequest.LifestylePlaceholder')} /> | |||||
| </div> | </div> | ||||
| <div className="col-md-1"> | <div className="col-md-1"> | ||||
| <button type="button" onClick={() => { handleRequest(requestObject); setRequestObject({ location: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button> | <button type="button" onClick={() => { handleRequest(requestObject); setRequestObject({ location: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button> |
| export const prices = [ | export const prices = [ | ||||
| { value: '$1000', label: '$1000' }, | |||||
| { value: '$1100', label: '$1100' }, | |||||
| { value: '$1300', label: '$1300' }, | |||||
| { value: '$1500', label: '$1500' }, | |||||
| { value: '$1800', label: '$1800' }, | |||||
| { value: '$2000', label: '$2000' } | |||||
| ]; | |||||
| export const beds = [ | |||||
| { value: '1', label: '1' }, | |||||
| { value: '2', label: '2' }, | |||||
| { value: '3', label: '3' }, | |||||
| { value: '4+', label: '4+' } | |||||
| ]; | |||||
| { value: '$1000', label: '$1000' }, | |||||
| { value: '$1100', label: '$1100' }, | |||||
| { value: '$1300', label: '$1300' }, | |||||
| { value: '$1500', label: '$1500' }, | |||||
| { value: '$1800', label: '$1800' }, | |||||
| { value: '$2000', label: '$2000' } | |||||
| ]; | |||||
| export const beds = [ | |||||
| { value: '1', label: '1' }, | |||||
| { value: '2', label: '2' }, | |||||
| { value: '3', label: '3' }, | |||||
| { value: '4+', label: '4+' } | |||||
| ]; | |||||
| export const types = [ | export const types = [ | ||||
| { value: 'apartments', label: 'apartments' }, | |||||
| { value: 'houses', label: 'houses' }, | |||||
| { value: 'condos', label: 'condos' }, | |||||
| { value: 'townhomes', label: 'townhomes' }, | |||||
| ]; | |||||
| export const lifeStyles = [ | |||||
| { value: 'student-housing', label: 'Student' }, | |||||
| { value: 'senior-housing', label: 'Senior Housing' }, | |||||
| { value: 'short-term', label: 'Short Term' }, | |||||
| { value: 'military', label: 'Military Housing'}, | |||||
| {value:'corporate' , label: 'Corporate Housing'} | |||||
| ]; | |||||
| { value: 'apartments', label: 'apartments' }, | |||||
| { value: 'houses', label: 'houses' }, | |||||
| { value: 'condos', label: 'condos' }, | |||||
| { value: 'townhomes', label: 'townhomes' }, | |||||
| ]; | |||||
| export const lifeStyles = [ | |||||
| { value: 'student-housing', label: 'Student' }, | |||||
| { value: 'senior-housing', label: 'Senior Housing' }, | |||||
| { value: 'short-term', label: 'Short Term' }, | |||||
| { value: 'military', label: 'Military Housing' }, | |||||
| { value: 'corporate', label: 'Corporate Housing' } | |||||
| ]; | |||||
| export const scrapeFrom = [ | |||||
| { value: 'www.apartments.com', label: 'www.apartments.com' }, | |||||
| ] |
| remove: 'Remove', | remove: 'Remove', | ||||
| invite: 'Invite', | invite: 'Invite', | ||||
| save: 'Save', | save: 'Save', | ||||
| execute:'Execute', | |||||
| execute: 'Execute', | |||||
| complete: 'Complete', | complete: 'Complete', | ||||
| download: 'Download', | download: 'Download', | ||||
| yes: 'Yes', | yes: 'Yes', | ||||
| usernameRequired: 'Username is required.', | usernameRequired: 'Username is required.', | ||||
| passwordRequired: 'A Password is required.', | passwordRequired: 'A Password is required.', | ||||
| forgotYourPassword: 'Forgot your password?', | forgotYourPassword: 'Forgot your password?', | ||||
| forgotPasswordEmail:'Email', | |||||
| forgotPasswordEmail: 'Email', | |||||
| useDifferentEmail: 'Use different email address or username', | useDifferentEmail: 'Use different email address or username', | ||||
| }, | }, | ||||
| password: { | password: { | ||||
| goBack: 'Go back to homepage', | goBack: 'Go back to homepage', | ||||
| logout: 'Logout', | logout: 'Logout', | ||||
| }, | }, | ||||
| apiErrors:{ | |||||
| ClientIpAddressIsNullOrEmpty:"Client Ip address is null or empty" | |||||
| apiErrors: { | |||||
| ClientIpAddressIsNullOrEmpty: "Client Ip address is null or empty" | |||||
| }, | }, | ||||
| createScrapeRequest: { | createScrapeRequest: { | ||||
| Title: "Request new scrappe", | Title: "Request new scrappe", | ||||
| LocationPlaceholder : "Location or Point of Interest", | |||||
| LocationPlaceholder: "Location or Point of Interest", | |||||
| PricePlaceholder: "price", | PricePlaceholder: "price", | ||||
| BedsPlaceholder:"beds", | |||||
| LifestylePlaceholder :"lifestyle", | |||||
| TypePlaceholder: "type" | |||||
| BedsPlaceholder: "beds", | |||||
| LifestylePlaceholder: "lifestyle", | |||||
| TypePlaceholder: "type", | |||||
| DescriptionPlaceholder: "Project description" | |||||
| }, | }, | ||||
| scrapeRequests: { | scrapeRequests: { | ||||
| Title: "Scrappes", | Title: "Scrappes", | ||||
| Columns: { | Columns: { | ||||
| Scrape:"Scrappe", | |||||
| Filters:"Filters", | |||||
| Status:"Status" | |||||
| Scrape: "Data Consolidator", | |||||
| Filters: "Filters", | |||||
| Status: "Status" | |||||
| } | } | ||||
| }, | }, | ||||
| scrapeRequest:{ | |||||
| scrapeRequest: { | |||||
| EstimatedTime: "Estimated time:", | EstimatedTime: "Estimated time:", | ||||
| ViewScrape:"view scrape origin" | |||||
| ViewScrape: "view scrape origin" | |||||
| } | } | ||||
| }; | }; |
| import ScrapeRequests from '../../components/ScrapeRequests/ScrapeRequests'; | import ScrapeRequests from '../../components/ScrapeRequests/ScrapeRequests'; | ||||
| import { createScrappes, executeScrappes, getAllScrappes } from '../../request/scrappe'; | import { createScrappes, executeScrappes, getAllScrappes } from '../../request/scrappe'; | ||||
| import { useTranslation } from 'react-i18next'; | import { useTranslation } from 'react-i18next'; | ||||
| import Select from 'react-select' | |||||
| import { scrapeFrom } from '../../constants/filters'; | |||||
| const HomePage = () => { | const HomePage = () => { | ||||
| const [scrappes, setScrappes] = useState([]) | const [scrappes, setScrappes] = useState([]) | ||||
| <div className="container"> | <div className="container"> | ||||
| <h1 className="lead text-center" style={{ fontSize: '80px' }}>{t('scrapeRequests.Columns.Scrape')} </h1> | <h1 className="lead text-center" style={{ fontSize: '80px' }}>{t('scrapeRequests.Columns.Scrape')} </h1> | ||||
| <hr></hr> | <hr></hr> | ||||
| <h2 className="lead text-center text-muted" style={{ fontSize: '40px' }}>https://www.apartments.com/</h2> | |||||
| {/* <h2 className="lead text-center text-muted" style={{ fontSize: '40px' }}>https://www.apartments.com/</h2> */} | |||||
| <Select className="cursor-pointer" isDisabled defaultValue={scrapeFrom[0]} options={scrapeFrom}></Select> | |||||
| <br></br> | <br></br> | ||||
| <CreateScrapeRequest handleRequest={handleRequest} /> | <CreateScrapeRequest handleRequest={handleRequest} /> | ||||
| <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} /> | <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} /> |