diff --git a/frontend/zulu/src/App.css b/frontend/zulu/src/App.css index 401791f..98cc91e 100644 --- a/frontend/zulu/src/App.css +++ b/frontend/zulu/src/App.css @@ -15,6 +15,12 @@ label { padding: 40px 40px; } +.buttons-container { + position: absolute; + z-index: 2; + pointer-events: auto !important; +} + .card { background-color: #f7f7f7; padding: 20px 25px 30px; diff --git a/frontend/zulu/src/components/CardComponent/CardComponent.jsx b/frontend/zulu/src/components/CardComponent/CardComponent.jsx new file mode 100644 index 0000000..769c029 --- /dev/null +++ b/frontend/zulu/src/components/CardComponent/CardComponent.jsx @@ -0,0 +1,90 @@ +import React from "react"; +import Card from "../Card/Card"; +import * as PropTypes from "prop-types"; +import axios from "axios"; +import StoryService from '../../services/story.service' +import storyService from "../../services/story.service"; +const API_URL = "http://localhost:8342/api"; + +export class CommentComponent extends React.Component { + constructor(props) { + super(props);} + render() { + return (
+

comments:

+ {this.props.comments.map(comment => (

{comment.user_name} : {comment.comment}

))} +
) + } +} + +export class CardComponent extends React.Component { + constructor(props) { + super(props); + this.state = {value: '',comments:[]}; + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + componentDidMount() { + storyService.GetStoryComments(this.props.f.pageid).then(response => this.setState({comments:response.data})); + + + } + + handleChange(event) { + this.setState({value: event.target.value}); + } + + async handleSubmit(event) { + storyService.PostUserComment(this.props.f.pageid,this.state.value,true); + } + + parseImagePath(thumbnailPath) { + const lastSlashIndex = thumbnailPath.lastIndexOf("/"); + var path = thumbnailPath.slice(0, lastSlashIndex); + path = path.replace("thumb/", ""); + return path + } + + render() { + return +
+ +

{this.props.f.title}

+ + {this.props.f.hasOwnProperty("thumbnail") ? + + : +

+ } + +

+ + {this.props.f.extract} +

+
+ + +
+ + +
+
+
+ + + ; + } +} + +CardComponent.propTypes = {f: PropTypes.any}; \ No newline at end of file diff --git a/frontend/zulu/src/components/Map/GeoWikipediaLayerFunc.jsx b/frontend/zulu/src/components/Map/GeoWikipediaLayerFunc.jsx index 0f2691c..aa5e2c9 100644 --- a/frontend/zulu/src/components/Map/GeoWikipediaLayerFunc.jsx +++ b/frontend/zulu/src/components/Map/GeoWikipediaLayerFunc.jsx @@ -1,16 +1,16 @@ -import React, {useState, useEffect} from 'react'; -import {Marker, FeatureGroup, Popup} from 'react-leaflet'; +import React, {useEffect, useState} from 'react'; +import {FeatureGroup, Marker, Popup} from 'react-leaflet'; import MarkerClusterGroup from "react-leaflet-markercluster"; -import Card from '../Card/Card' -import { iconWiki } from '../../Icons/Icon.Wiki'; +import {iconWiki} from '../../Icons/Icon.Wiki'; import "./GeoWiki.css"; +import {CardComponent} from "../CardComponent/CardComponent"; var fetchData = function fetchData(lat, lng, maxDist, options) { const url = "https://en.wikipedia.org/w/api.php?action=query&generator=geosearch&prop=coordinates%7C" + - "pageimages%7Cextracts&exintro=&explaintext=true&ggscoord=" + lat + "%7C" + lng + "&ggsradius=" + maxDist + "&format=json" + "pageimages%7Cextracts&exintro=&explaintext=true&ggscoord=" + lat + "%7C" + lng + "&ggsradius=" + maxDist + "&format=json" var request = fetch(url, options).then(r => r.json()); - + return request.then(r => { if (r.hasOwnProperty("query")){ @@ -19,18 +19,15 @@ var fetchData = function fetchData(lat, lng, maxDist, options) { else{ return []; } - }); + }); } - -function parseImagePath(thumbnailPath) { - const lastSlashIndex = thumbnailPath.lastIndexOf("/"); - var path = thumbnailPath.slice(0, lastSlashIndex); - path = path.replace("thumb/", ""); - return path +function get_comments(){ + return ["thats amazing!","unbelivable!"] } + export default function GeoWikipediaLayer({lat, lng, maxDist, cluster}) { const [data, setData] = useState([]); @@ -38,7 +35,7 @@ export default function GeoWikipediaLayer({lat, lng, maxDist, cluster}) { if (lat && lng && maxDist) { const abortController = new AbortController(); - fetchData(lat,lng, maxDist, {signal: abortController.signal}).then(data => { + fetchData(lat,lng, maxDist, {signal: abortController.signal}).then(data => { setData(data); }); @@ -62,29 +59,11 @@ export default function GeoWikipediaLayer({lat, lng, maxDist, cluster}) { icon={iconWiki} > - - - -
- - -

{f.title}

- - { f.hasOwnProperty('thumbnail') ? - - : -

- } - -

- -{f.extract} -

-
+ - + - + diff --git a/frontend/zulu/src/components/Map/GeojsonLayerFunc.jsx b/frontend/zulu/src/components/Map/GeojsonLayerFunc.jsx index 60081c6..37fb721 100644 --- a/frontend/zulu/src/components/Map/GeojsonLayerFunc.jsx +++ b/frontend/zulu/src/components/Map/GeojsonLayerFunc.jsx @@ -7,8 +7,8 @@ import StoryService from '../../services/story.service' function parseImagePath(imageId) { - // TODO: use the StoryService - return "http://localhost:8342/api/story/image?id=" + imageId; + // TODO: use the StoryService + return "http://localhost:8342/api/story/image?image_id=" + imageId; } @@ -42,8 +42,8 @@ export default function GeojsonLayer({lat, lng, maxDist, cluster}) { -

{f.story.title}

-

Added by {f.user_id}

+

{f.story.title}

+
Added by {f.user_id}
{ f.story.hasOwnProperty('image_id') && f.story.image_id != null ? : diff --git a/frontend/zulu/src/components/Map/MapGeojsonMarkers.jsx b/frontend/zulu/src/components/Map/MapGeojsonMarkers.jsx index 53fda7d..5082b5a 100644 --- a/frontend/zulu/src/components/Map/MapGeojsonMarkers.jsx +++ b/frontend/zulu/src/components/Map/MapGeojsonMarkers.jsx @@ -1,15 +1,20 @@ -import React from "react"; +import React, {Component} from "react"; import L from 'leaflet'; import {Map, TileLayer, Marker, Popup} from "react-leaflet"; import Basemap from './Basemaps'; import GeojsonLayer from './GeojsonLayerFunc'; import GeoWikipediaLayer from './GeoWikipediaLayerFunc'; +import StoryService from '../../services/story.service'; import './Map.css'; +import {Container} from "react-floating-action-button"; +import {Fab} from '@material-ui/core'; +import {FaPlus} from "react-icons/fa"; import { MyLocationIcon } from "../../Icons/Icon.MyLocation"; +import axios from "axios"; L.Icon.Default.imagePath = "https://unpkg.com/leaflet@1.5.0/dist/images/"; -class MapComponent extends React.Component { +class MapComponent extends Component { constructor(props) { super(props); @@ -20,9 +25,14 @@ class MapComponent extends React.Component { basemap: 'dark', time: Date.now(), geojsonvisible: false, - + showModal:false, + storyTitle: "", + storyBody: "", }; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.fileInput = React.createRef(); } onBMChange = (bm) => { @@ -36,7 +46,7 @@ class MapComponent extends React.Component { this.setState({ geojsonvisible: e.currentTarget.checked }); - } + }; onError = (error) => { console.log(error) @@ -61,18 +71,76 @@ class MapComponent extends React.Component { ); } + + handleChange(event) { + var target = event.target; + var value = target.value; + var name = target.name; + + this.setState({ + [name]: value + }); + } + + async handleSubmit(event) { + event.preventDefault(); + let file = this.fileInput?.current?.files[0]; + let hasFile = (typeof file !== 'undefined'); + + let imageId = null; + + if (hasFile) { // todo get photo id + let formData = new FormData(); + formData.append('image', file); + + await StoryService.postImage( + formData + ).then(function (response) { + //handle success + imageId = response.data.image_id; + console.log(response); + }) + .catch(function (response) { + //handle error + console.log(response); + alert('there was a problem adding your image, please try again soon.'); + }); + } + + let lng = this.state.lng; + let lat = this.state.lat; + let title = this.state.storyTitle; + let content = this.state.storyBody; + + StoryService.postUserStory( + lng, lat, title, content, imageId + ).then(function (response) { + //handle success + alert('Successfully posted story!'); + console.log(response); + }) + .catch(function (response) { + //handle error + alert('there was a problem posting this story, please try again soon.'); + console.log(response); + }); + + } + componentDidMount() { - + this.setLocationState(); // TODO: figure out why this causes all points at GeoJsonLayer // component to re-render this.selfLocationInterval = setInterval(() => { - this.setLocationState(); - }, + this.setLocationState(); + }, 15000); }; - + showModal = () => { + this.setState({showModal: true}) + }; render() { var center = [this.state.lat, this.state.lng]; @@ -85,6 +153,46 @@ class MapComponent extends React.Component { return ( +
+ + + + + +
+ {this.state.showModal&& + +
+

Add your Story.

+ +