diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..cb219d42 --- /dev/null +++ b/.gitignore @@ -0,0 +1,103 @@ + +# Created by https://www.gitignore.io/api/osx,node,macos + +### macOS ### +*.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +secrets.env + + +### OSX ### + +# Icon must end with two \r + +# Thumbnails + +# Files that might appear in the root of a volume + +# Directories potentially created on remote AFP share + + +# End of https://www.gitignore.io/api/osx,node,macos diff --git a/Procfile b/Procfile new file mode 100644 index 00000000..36c6b6bd --- /dev/null +++ b/Procfile @@ -0,0 +1 @@ +web: yarn start:prod diff --git a/README.md b/README.md index da7531b0..e9edb357 100644 --- a/README.md +++ b/README.md @@ -1,65 +1,84 @@ -# Your Project Name +# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project 4 – TripCollab Expanded -This is the starter code for WDI projects. Please update this README file with information specific to your project. Replace this paragraph for instance, with a short description of your project. Then update the sections below. Refer to your project specificaion for instructions on how to submit your projects. +Our group is developing a website with a centralised, easy-to-use travel itinerary in a single view which can be collaborated and shared with travel friends making travel planning more fun without any hassle. -## Getting Started - -Provide instructions here about how to get your project running on our local machine. Do we just need to clone and open a certain file or do we need to install anything first. - -### Prerequisites +Live version: https://tripcollab-v2.herokuapp.com/ -What is needed to install and run the project, how do we install them - -``` -Code example -``` +--- +## Getting Started ### How to Use +* Fork and clone this repository. +* Open terminal and run ```yarn install``` to install dependencies. +* Run ```yarn start```. -A step by step guide on how to install and use the project, for example if this is a game, how do we play it. +--- +## Built With +* Technologies: React, Node.js +* Database: MongoDB +* CSS Framework: Bootstrap 4.0 -``` -Code example -``` +--- -More steps... +## Deployment & Versioning +* Github +* Heroku -``` -until finished -``` +--- +## Workflow +### Entity-Relationship Diagram +![p4_erd](https://user-images.githubusercontent.com/31798170/36540300-cb5d74a6-1814-11e8-92b7-dd616885589a.png) -## Tests +--- -Did you write automated tests? If so, how do we run them. +### User Stories +![p4 user stories](https://user-images.githubusercontent.com/31798170/36518579-f591fde4-17c1-11e8-86fa-507fc7c83dca.png) +--- -``` -Code example -``` +### Use Case +![p4 use case](https://user-images.githubusercontent.com/31798170/36517157-31ab1938-17bc-11e8-8c09-ffcb18f84878.png) -## Live Version +--- -Where is this deployed online (github pages, heroku etc), give us the link and any access details we need. +### Flowchart +![p4 flowchart](https://user-images.githubusercontent.com/31798170/36543397-9fb85cd0-181e-11e8-8d5b-a90f7354bb96.png) -## Built With +--- -What did you use to build it, list the technologies, plugins, gems, packages etc. +### Wireframe +![p4_wireframe](https://user-images.githubusercontent.com/31798170/36517183-58883ca2-17bc-11e8-90c0-e9d5028f26f0.png) -* [jQuery](http://jquery.com/) - jQuery for example is something you likely used +![wireframe](https://user-images.githubusercontent.com/31798170/36540329-e53e5174-1814-11e8-8fa0-f153f6e1f86f.png) +--- -## Workflow +# Scalable Areas +* Share trip url via email. +* Allow upvote and downvote on each location. + +--- -Did you write user stories, draw wireframes, use task tracking, produce ERDs? Did you use source control, with regular commits? Include links to them here. +## Project Collaboration +* Trello Project Management application -## Authors +![trello](https://user-images.githubusercontent.com/31798170/36472250-3cf73956-172c-11e8-9582-d4665b5f220c.jpeg) -Did you collaborate with others on this project, list them here +### Authors +* [Darren Koh](https://github.com/keed) +* [Chong Ching Tong](https://github.com/chongct) +* [Edmund Teo](https://github.com/edmundtck) +* [Wong Kin Ting](https://github.com/strisen) +* [Speed Chan](https://github.com/knownopear) +* [Lim Jiechao](https://github.com/limjiechao) +* [Poh Yan Jie](https://github.com/empludo) +* [Jo Sho](https://github.com/emjys) -* **John McClain** - *Responsible for keeping vests white* - [GithubUserName](https://github.com/GithubUserName) +--- ## Acknowledgments -* Hat tip to anyone who's code was used, for example [this was a useful starting point for creating this template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2). +* Homepage Photo by Helena Lopes on Unsplash +--- \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..44e98b48 --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "tripcollab-v2-project4", + "main": "index.js", + "license": "MIT", + "dependencies": { + "concurrently": "^3.5.1", + "dotenv": "^5.0.0", + "react-fontawesome": "^1.6.1" + }, + "scripts": { + "build": "concurrently \"cd tripcollab-client && yarn build\" \"cd tripcollab-server && yarn build\"", + "install": "(cd tripcollab-client && yarn) && (cd tripcollab-server && yarn)", + "start": "concurrently \"cd tripcollab-client && PORT=3000 yarn start\" \"cd tripcollab-server && PORT=3001 yarn start\"", + "start:prod": "cd tripcollab-server && yarn start:prod", + "heroku-postbuild": "cd tripcollab-client && npm install && npm install --only=dev --no-shrinkwrap && npm run build" + } +} diff --git a/readme_images/P4 Flowchart.png b/readme_images/P4 Flowchart.png new file mode 100644 index 00000000..1fa26306 Binary files /dev/null and b/readme_images/P4 Flowchart.png differ diff --git a/readme_images/P4 Use Case.png b/readme_images/P4 Use Case.png new file mode 100644 index 00000000..3c36fea6 Binary files /dev/null and b/readme_images/P4 Use Case.png differ diff --git a/readme_images/P4 User Stories.png b/readme_images/P4 User Stories.png new file mode 100644 index 00000000..0be9b321 Binary files /dev/null and b/readme_images/P4 User Stories.png differ diff --git a/readme_images/P4_ERD.png b/readme_images/P4_ERD.png new file mode 100644 index 00000000..804ec352 Binary files /dev/null and b/readme_images/P4_ERD.png differ diff --git a/readme_images/P4_Wireframe.png b/readme_images/P4_Wireframe.png new file mode 100644 index 00000000..e7f50d05 Binary files /dev/null and b/readme_images/P4_Wireframe.png differ diff --git a/readme_images/Trello.jpeg b/readme_images/Trello.jpeg new file mode 100644 index 00000000..479aa80a Binary files /dev/null and b/readme_images/Trello.jpeg differ diff --git a/readme_images/wireframe.png b/readme_images/wireframe.png new file mode 100644 index 00000000..270385a2 Binary files /dev/null and b/readme_images/wireframe.png differ diff --git a/tripcollab-client/.gitignore b/tripcollab-client/.gitignore new file mode 100644 index 00000000..d30f40ef --- /dev/null +++ b/tripcollab-client/.gitignore @@ -0,0 +1,21 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/tripcollab-client/package.json b/tripcollab-client/package.json new file mode 100644 index 00000000..8de12b47 --- /dev/null +++ b/tripcollab-client/package.json @@ -0,0 +1,24 @@ +{ + "name": "tripcollab-client", + "version": "0.1.0", + "private": true, + "dependencies": { + "bootstrap": "^4.0.0", + "react": "^16.2.0", + "react-dom": "^16.2.0", + "react-fontawesome": "^1.6.1", + "react-google-maps": "^9.4.5", + "react-modal": "^3.3.1", + "react-router-dom": "^4.2.2", + "react-scripts": "1.1.1", + "reactstrap": "^5.0.0-beta", + "recompose": "^0.26.0" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "proxy": "http://localhost:3001/" +} diff --git a/tripcollab-client/public/assets/add-contact.svg b/tripcollab-client/public/assets/add-contact.svg new file mode 100755 index 00000000..fbe55984 --- /dev/null +++ b/tripcollab-client/public/assets/add-contact.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + diff --git a/tripcollab-client/public/assets/calendar.svg b/tripcollab-client/public/assets/calendar.svg new file mode 100755 index 00000000..cfc973e8 --- /dev/null +++ b/tripcollab-client/public/assets/calendar.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tripcollab-client/public/assets/friends.jpg b/tripcollab-client/public/assets/friends.jpg new file mode 100755 index 00000000..0f5f13c2 Binary files /dev/null and b/tripcollab-client/public/assets/friends.jpg differ diff --git a/tripcollab-client/public/assets/icon.png b/tripcollab-client/public/assets/icon.png new file mode 100644 index 00000000..4509c2a0 Binary files /dev/null and b/tripcollab-client/public/assets/icon.png differ diff --git a/tripcollab-client/public/assets/offline.svg b/tripcollab-client/public/assets/offline.svg new file mode 100755 index 00000000..4abe2f7e --- /dev/null +++ b/tripcollab-client/public/assets/offline.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/tripcollab-client/public/assets/planning.svg b/tripcollab-client/public/assets/planning.svg new file mode 100755 index 00000000..689cbb55 --- /dev/null +++ b/tripcollab-client/public/assets/planning.svg @@ -0,0 +1,183 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tripcollab-client/public/favicon.ico b/tripcollab-client/public/favicon.ico new file mode 100644 index 00000000..c107acf1 Binary files /dev/null and b/tripcollab-client/public/favicon.ico differ diff --git a/tripcollab-client/public/index.html b/tripcollab-client/public/index.html new file mode 100644 index 00000000..6f75269e --- /dev/null +++ b/tripcollab-client/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + TripCollab – Plan with friends! + + + +
+ + + diff --git a/tripcollab-client/public/manifest.json b/tripcollab-client/public/manifest.json new file mode 100644 index 00000000..ef19ec24 --- /dev/null +++ b/tripcollab-client/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/tripcollab-client/src/App.js b/tripcollab-client/src/App.js new file mode 100644 index 00000000..31870d50 --- /dev/null +++ b/tripcollab-client/src/App.js @@ -0,0 +1,143 @@ +import React, { Component } from 'react'; +// import logo from './logo.svg'; +import './App.css'; +import PlacesWithStandaloneSearchBox from './SearchBox'; + +class App extends Component { + constructor() { + super(); + this.state = { + locationList: [] + }; + } + + addToList = async ({ place_id, formatted_address, name, geometry: { location } }) => { + // display on React client + var node = document.createElement("LI"); + var textnode = document.createTextNode(`${name}, ${formatted_address} at ${location.lat()}, ${location.lng()}`); + node.appendChild(textnode); + document.getElementById("locationList").appendChild(node); + + // write to Express server + var params = { + id: place_id, + name: name, + address: formatted_address, + latitude: location.lat(), + longitude: location.lng() + }; + console.log(params); + let response = await fetch('/location/new', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }); + }; + + retrieveFromList = async () => { + const response = await fetch('/location/getAllForTrip'); + const body = await response.json(); + if (response.status !== 200) throw Error(body.message); + this.setState({ locationList: body }); + }; + + componentDidMount() { + this.retrieveFromList(); + } + + // Event creation Test + + addToEvent = async (e, req) => { + + // write to Express server + var params = { + location_id: e.target.parentNode.id + // trip_id: req.params.id, + // name: this.state.locationList[e.target] + }; + console.log(params); + // let response = await fetch('/event/new', { + // method: 'POST', + // headers: { + // 'Accept': 'application/json', + // 'Content-Type': 'application/json' + // }, + // body: JSON.stringify(params) + // }); + }; + + // End of Event Creation Test + + // Update Event Test + updateEvent = async (e, req) => { + + // write to Express server + var params = { + // eventID: e.target.parentNode.id, + description: 'Testing123', + // Mock data to represent event ID + id: '5a8bcdd420581688a8dcf1bf' + // locationID: '5a8b8f5ec4e9267e17d6a63c' + // trip_id: req.params.id, + // name: this.state.locationList[e.target] + }; + // console.log(e.target.parentNode) + console.log(params); + let response = await fetch(`/event/update/${params.id}`, { + method: 'PUT', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }); + }; + // End of Update Event Test + + // Delete Event Test + deleteEvent = async (e, req) => { + + // write to Express server + var params = { + // Mock data to represent event ID + id: '5a8be2f709de0d8cbd9d2ece' + }; + // console.log(e.target.parentNode) + console.log(params); + let response = await fetch(`/event/delete/${params.id}`, { + method: 'DELETE', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }); + }; + // End of Delete Event Test + render() { + let locationList = this.state.locationList.map((location, i) =>

{location.locationName}, {location.locationAddress} at {location.latitude}, {location.longitude}

) + console.log(locationList) + return ( +
+ {/*
+ logo +

Welcome to React

+
+

+ To get started, edit src/App.js and save to reload. +

*/} + +
    + + {/* this section retrieves saved locations from MongoDB, data can be manipulated */} +

    Previously Saved Locations

    + { locationList } +
    + ); + } +} + +export default App; diff --git a/tripcollab-client/src/components/App.js b/tripcollab-client/src/components/App.js new file mode 100644 index 00000000..f9b96203 --- /dev/null +++ b/tripcollab-client/src/components/App.js @@ -0,0 +1,323 @@ +// ############### React ############### +import React, { Component } from 'react'; +import { + Container, + Row, + Col, + Popover, + PopoverHeader, + PopoverBody +} from 'reactstrap'; + +// ############### Components ############### +import Locations from './Locations' +import Dates from './Dates' +import Itinerary from './Itinerary' +import PlacesWithStandaloneSearchBox from './SearchBox'; + +// ############### Styling ############### +import '../styles/App.css' +import FontAwesome from 'react-fontawesome' +// import logo from '../icon.png' + +class App extends Component { + + // ========== Constructors ========== + constructor() { + super(); + this.state = { + locationList: [], + numberOfDays: [1], + activeTab: 1, + itineraryList: [], + currentDayItinerary: [], + tripID: '', + popoverOpen: false, + }; + } + + // Test Code + // ========== adding location to list ========== + addToList = async ({ place_id, formatted_address, name, geometry: { location } }) => { + console.log(this.state.tripID) + // display on React client + // var node = document.createElement("LI"); + // var textnode = document.createTextNode(`${name}, ${formatted_address} at ${location.lat()}, ${location.lng()}`); + // node.appendChild(textnode); + // document.getElementById("locationList").appendChild(node); + + // write to Express server + var params = { + id: place_id, + name: name, + address: formatted_address, + latitude: location.lat(), + longitude: location.lng(), + tripID: this.state.tripID._id + } + const response = await fetch('/location/new/', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }) + const body = await response.json() + console.log(body) + this.setState({ locationList: body }) + } + + // ========== fetching from db the itineray list ========== + getItineraryList = async (id) => { + const response = await fetch(`/event/view/${id}`); + const body = await response.json(); + if (response.status !== 200) throw Error(body.message); + this.setState({ itineraryList: body }); + + this.setState({ + currentDayItinerary: this.state.itineraryList.filter(event => event.date === this.state.activeTab) + }) + } + + // ========== fetching from db the location list ========== + retrieveFromList = async (id) => { + console.log(id) + const response = await fetch(`/location/getAllForTrip/${id}`); + const body = await response.json(); + if (response.status !== 200) throw Error(body.message); + this.setState({ locationList: body }); + }; + + // ========== deleting location from list ========== + deleteFromList = async (id) => { + const response = await fetch(`/location/delete/${id}`, { + method: 'DELETE', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + }) + this.retrieveFromList(this.state.tripID._id) + } + + // ========== mounting of component ========== + componentDidMount() { + let urlLength = window.location.href.split('/').length + this.getTripId(window.location.href.split('/')[urlLength - 1]) + } + + // ========== setting state for activeTab and currentDayItinerary ========== + getActiveTab = async (data) => { + await this.setState({activeTab: data}) + + await this.setState({ + currentDayItinerary: this.state.itineraryList.filter(event => event.date === this.state.activeTab) + }) + } + + // Event creation Test + + addToEvent = async (req) => { + console.log(this.state.tripID) + // write to Express server + var params = { + locationName: req.locationName, + locationAddress: req.locationAddress, + time: "00:00", + date: this.state.activeTab, + tripID: this.state.tripID._id + }; + let response = await fetch('/event/new', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }); + this.getItineraryList(this.state.tripID._id) + }; + + // End of Event Creation Test + + // Update Event Test + // ========== updating of event ========== + updateEvent = async (req) => { + + // write to Express server + var params = { + description: req.description, + id: req.id, + time: req.time + }; + let response = await fetch(`/event/update/${params.id}`, { + method: 'PUT', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }); + this.getItineraryList() + }; + // End of Update Event Test + + // Delete Event Test + // ========== deleting event from the db ========== + deleteEvent = async (req) => { + console.log(this.state.tripID) + // write to Express server + var params = { + id: req + }; + + let response = await fetch(`/event/delete/${params.id}`, { + method: 'DELETE', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }); + this.getItineraryList(this.state.tripID._id) + }; + + // End of Test Code + + // get the number of days from dates + + getNumberOfDays = (props) => { + let days = Array(props).fill().map((_,i) => i + 1) + // console.log(days.length) + if (days.length > 30) { + this.setState({numberOfDays: days.slice(0, 30)}) + alert(`You have exceeded the max length of 30 days.`) + } else { + this.setState({numberOfDays: days}) + } + } + + // get tripID + getTripId = async (id) => { + const response = await fetch(`/trip/read/${id}`) + const body = await response.json() + this.setState({ tripID: body }) + console.log("hellllooo"); + this.retrieveFromList(body._id) + this.getItineraryList(body._id) + } + + // copy URL to clipboard + copyToClipboard = () => { + let copyURL = document.getElementById("shareLink"); + copyURL.select(); + document.execCommand("Copy"); + this.togglePopover() + setTimeout(()=> this.togglePopover(), 1000) + } + + // toggle popover to tell user that URL has been copied + togglePopover() { + this.setState({ + popoverOpen: !this.state.popoverOpen + }); + } + + render() { + + let newStartDate = new Date() + let newStartDay = ("0" + newStartDate.getDate()).slice(-2) + let newStartMonth =("0" + (newStartDate.getMonth() + 1)).slice(-2) + let newStartYear = newStartDate.getFullYear() + let formattedStartDate = `${newStartYear}-${newStartMonth}-${newStartDay}` + + let newEndDate = new Date() + newEndDate.setDate(newEndDate.getDate() + 1) + let newEndDay = ("0" + newEndDate.getDate()).slice(-2) + let newEndMonth = ("0" + (newEndDate.getMonth() + 1)).slice(-2) + let newEndYear = newEndDate.getFullYear() + let formattedEndDate = `${newEndYear}-${newEndMonth}-${newEndDay}` + + return ( +
    + + + + + + TripCollab + + + + +
    +

    + Click to copy this link, and share it with your friends! +

    + + + +
    + +     + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +  Visit our Github! + +

    + © WDI-13 Singapore
    + Back to Top +

    +
    + +     +     + + + The trip URL has been copied to your clipboard! + + +
    + ); + } +} + +export default App; diff --git a/tripcollab-client/src/components/Dates.js b/tripcollab-client/src/components/Dates.js new file mode 100644 index 00000000..d645f99e --- /dev/null +++ b/tripcollab-client/src/components/Dates.js @@ -0,0 +1,149 @@ +import React, { Component } from 'react'; +import { + Input, + Label, + Row, + Col, + Form, + FormGroup +} from 'reactstrap'; +import '../styles/App.css' +import FontAwesome from 'react-fontawesome' + +// Get initial dates and set in constructor +let newStartDate = new Date() +let newStartDay = ("0" + newStartDate.getDate()).slice(-2) +let newStartMonth =("0" + (newStartDate.getMonth() + 1)).slice(-2) +let newStartYear = newStartDate.getFullYear() +let formattedStartDate = `${newStartYear}-${newStartMonth}-${newStartDay}` + +let newEndDate = new Date() +newEndDate.setDate(newEndDate.getDate() + 4) +let newEndDay = ("0" + newEndDate.getDate()).slice(-2) +let newEndMonth = ("0" + (newEndDate.getMonth() + 1)).slice(-2) +let newEndYear = newEndDate.getFullYear() +let formattedEndDate = `${newEndYear}-${newEndMonth}-${newEndDay}` + +class Dates extends Component { +constructor() { + super() + this.state = { + startDate: formattedStartDate, + endDate: formattedEndDate + } +} + +componentDidMount() { + // this.getDate() + this.setDate() +} + +// getDate = async () => { +// console.log("something", this.props.tripID.url); +// const response = await fetch(`/trip/read/${ this.props.tripID.url}`) +// const body = await response.json() +// console.log(body); +// let startDate = body.dateFrom.slice(0,10) +// let endDate = body.dateTo.slice(0,10) +// await this.setState({ startDate, endDate }) +// console.log("Date", this.state.startDate, this.state.endDate); +// } + +setDate() { + let {startDate, endDate} = this.state + if (startDate !== '' && endDate !== '') { + let oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds + + let d1 = new Date(startDate); + let d2 = new Date(endDate); + + let d3 = d2.getTime() - d1.getTime() + let diffDays = d3 / oneDay + if (diffDays >= 0) { + this.props.getNumberOfDays(diffDays + 1) + // this.setState({numberOfDays: diffDays + 1}) + } + + +} +} + + +handleStart = async (e) => { + // write to Express server + await this.setState({startDate: e.target.value}) + var params = { + dateFrom: this.state.startDate, + id: this.props.tripID._id + }; + let response = await fetch(`/trip/updateFrom/${params.id}`, { + method: 'PUT', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }); + this.setDate() +}; + + + + + + handleEnd = async (e) => { + await this.setState({endDate: e.target.value}) + var params = { + dateTo: this.state.endDate, + id: this.props.tripID._id + }; + let response = await fetch(`/trip/updateTo/${params.id}`, { + method: 'PUT', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(params) + }); + this.setDate() + } + + // componentDidMount () { + // this.setDate() + // // this.setInitialStartDate() + // } + + // setInitialStartDate = () => { + // let newStartDate = new Date() + // let newDay = newStartDate.getDate() + // let newMonth = newStartDate.getMonth() + 1 + // let newYear = newStartDate.getFullYear() + // let formattedDate = `${newYear}-${newMonth}-${newDay}` + // } + + render() { + return ( +
    + + + + + + + + + + + + + + + + + +
    + ); + } +} + +export default Dates; diff --git a/tripcollab-client/src/components/DayTable.js b/tripcollab-client/src/components/DayTable.js new file mode 100644 index 00000000..6ca23387 --- /dev/null +++ b/tripcollab-client/src/components/DayTable.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { + TabPane, + Row, + Col, + Table, + Button, +} from 'reactstrap'; + +import FontAwesome from 'react-fontawesome' + + +export default class DayTable extends React.Component { + + handleBlur = (e) => { + e.preventDefault() + } + + render () { + + let currentDayEvents = this.props.events + let events = currentDayEvents.sort((a, b) => { + return a.time.replace(/:/, '') - b.time.replace(/:/, '') + }) + let displayEvents = events.map((event, i) => + + {/* {i + 1} */} + + + + + + + + + + this.props.onAdd({ + id: event._id, + time: this.refs[i + "time"].value, + description: this.refs[i + "text"].value + })}/> + + {event.locationName} + + {event.locationAddress} + +