Skip to content

Commit

Permalink
Merge pull request #21 from sherifsarhan/gh-pages
Browse files Browse the repository at this point in the history 
HW8
  • Loading branch information
Marwane Boudriga authored Nov 3, 2016
2 parents 2460e53 + 9324ce7 commit 848da94
Show file tree
Hide file tree
Showing 8 changed files with 304 additions and 193 deletions.
48 changes: 10 additions & 38 deletions public/CSS/map.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,16 @@ html, body{
right:0;
}

.nav-item{
position:relative;
height:10%
}

nav {
height: 56px;
line-height: 56px;
}

nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
height: 56px;
line-height: 56px;
}

nav .button-collapse i {
height: 56px;
line-height: 56px;
}

nav .brand-logo {
font-size: 1.6rem;
}

@media only screen and (min-width: 601px){
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
height: 56px;
line-height: 56px;
}
color: #fff;
background-color: #ee6e73;
width: 100%;
height: 100%;
line-height: 100%;
}

#login{
navbar-height:10%;
height:6%;
}

.row .col{
Expand All @@ -48,20 +25,19 @@ nav .brand-logo {

#page-container{
width:100%;
height:90%;
height:94%;
margin:0;
}

#map-container{
.map-container{
width:100%;
height:100%;
margin:0;
}

#map{
position:absolute;
width:75%;
height:90%;
width:100%;
height:100%;
}

#foodItems img{
Expand All @@ -77,10 +53,6 @@ nav .brand-logo {

}

/*#list-container{*/
/*height:100%;*/
/*}*/

div.sidebar{
height:100%;
overflow-y:scroll;
Expand Down
12 changes: 7 additions & 5 deletions public/JS/login-react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,19 +152,21 @@ class NavBar extends React.Component{

render() {
return(
<div>
<div style={{height:"100%"}}>
<nav className="navbar navbar-light bg-faded">
<ul className="nav navbar-nav">
<li className="nav-item">
<ul className="nav navbar-nav" style={{height:"100%", position: "relative"}}>
<li className="nav-item" style={{height:"100%"}}>
{this.state.loginState ?
<a className="nav-link whitetext" onClick={this.handleLogout}>
<a style={{position: "absolute", top: "50%", transform: "translateY(-50%)"}}
className="nav-link whitetext" onClick={this.handleLogout}>
{this.state.currentUser} (Logout)
</a>
:
<Modal className="loginModal" id="modal1"
header='Login and Registration'
trigger={
<Button ref="lgnRegBtn" className="lgnRegBtn" waves='light'>Login and Registration</Button>
<Button style={{position: "absolute", top: "50%", transform: "translateY(-50%)"}}
ref="lgnRegBtn" className="lgnRegBtn" waves='light'>Login and Registration</Button>
}>
<LoginBox loginHandler={this.loginHandler} registerHandler = {this.registerHandler}
email={this.state.email} onEmailChange={this.onEmailChange}
Expand Down
14 changes: 8 additions & 6 deletions public/JS/login-react.min.js
View file

Large diffs are not rendered by default.

110 changes: 80 additions & 30 deletions public/JS/map-react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,60 @@ var ReactTestUtils = require('react-addons-test-utils');

var fireRef = firebase.database().ref('foodshare');
fireRef.on("child_added", function(v){
if(v.val().img) createFood(v.val().text, v.val().img);
if(v.val().img) createFood(v.val().food, v.val().img, v.val().lat, v.val().lng);
});

function createFood(text, img)

$('#foodItems').on('click', "#selectCardImage", function () {
//only one food item description should be open at time
var closeButtonParent = $(this).find('div.card-content').child;
$('i.material-icons.right').filter(function () {
return $(this).text() == 'close' && $(this).parent() != closeButtonParent;
}).trigger('click');
pos = {
lat: $(this).data('lat'),
lng: $(this).data('lng')
};
map.setCenter(pos);
});

function createFood(text, img, lat, lng)
{
if(img)
{
$('#foodItems').append(
'<div id="foodItem" class="foodItem"><img src="'+img+'" /><br/>'+text+'</div>'
$('#foodItems').prepend(
'<div id="foodItem" class="foodItem">' +
'<div class="card">'+
'<div id="selectCardImage" data-lat='+lat+' data-lng='+lng+' class="card-image waves-effect waves-block waves-light">'+
'<img class="activator" src="'+img+'">'+
'</div>'+
'<div class="card-content">'+
'<span class="card-title activator grey-text text-darken-4">'+text+'<i class="material-icons right">more_vert</i></span>'+
'<p><a href="#">This is a link</a></p>'+
'</div>'+
'<div class="card-reveal">'+
'<span class="card-title grey-text text-darken-4">'+text+'<i class="material-icons right">close</i></span>'+
'<p>Here is some more information about this product that is only revealed once clicked on.</p>'+
'</div>'+
'</div>'+
'</div>'
);
console.log("added img");
// console.log("added img");
}
else
$('#foodItems').append(
'<div class="foodItem">'+text+'</div>'
$('#foodItems').prepend(
'<div id="foodItem" class="foodItem">' +
'<div class="card">'+
'<div class="card-content">'+
'<span class="card-title activator grey-text text-darken-4">'+text+'<i class="material-icons right">more_vert</i></span>'+
'<p><a href="#">This is a link</a></p>'+
'</div>'+
'<div class="card-reveal">'+
'<span class="card-title grey-text text-darken-4">'+text+'<i class="material-icons right">close</i></span>'+
'<p>Here is some more information about this product that is only revealed once clicked on.</p>'+
'</div>'+
'</div>'+
'</div>'
);
}
$('#newItemForm').submit(function(e)
Expand All @@ -46,11 +85,9 @@ var FoodListItems = React.createClass({
}
});

// var itemsHash = {};
// var idxCount = 0;
var FoodListApp = React.createClass({
getInitialState: function() {
return {items: [], text: '', tag: ''};
return {items: [], text: '', tag: '', img: '', imgPreview: false};
},
componentDidMount: function(){
getFoodList(this);
Expand All @@ -69,11 +106,10 @@ var FoodListApp = React.createClass({
// }
// e.preventDefault(); // This is, by default, submit button by form. Make sure it isn't submitted.
var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
// itemsHash[count] = this.state.text;
var nextText = '';
this.setState({items: nextItems, text: nextText});
addUpdateMarker(this.state.text, this.state.tag);
this.setState({tag: ''});
addUpdateMarker(this.state.text, this.state.tag, this.state.img);
this.setState({tag: '', imgPreview: false});
},
handleAddHelper: function(){
// commented out for now because firebase posting shouldn't be allowed without login
Expand All @@ -88,9 +124,11 @@ var FoodListApp = React.createClass({
delete this.state.items[deleteItem];
},
submission: function(e) {
this.handleAdd(e);
e.preventDefault();
},
handleImageChange: function(image) {
this.setState({img: image, imgPreview: true})
},
render: function() {
return (
<div>
Expand All @@ -99,12 +137,13 @@ var FoodListApp = React.createClass({
<Input id="foodInfo" className="col s6" placeholder="Enter food info" type="text" onChange={this.onChange} value={this.state.text} />
<Input id="foodTag" className="col s6" placeholder="Enter tag" type="text" onChange={this.onTagChange} value={this.state.tag} />

<ImageUpload handleImageChange={this.handleImageChange} imgPreview={this.state.imgPreview}></ImageUpload>

<Row>
<Button type="button" className="col s6 addBtn" onClick={this.handleAdd}>Add</Button>
<Button type="button" className="col s6 delBtn" onClick={this.handleDelete}>Delete</Button>
<Button type="submit" className="col s6 addBtn" onClick={this.handleAdd}>Add</Button>
<Button type="submit" className="col s6 delBtn" onClick={this.handleDelete}>Delete</Button>
</Row>
</form>
{/*<ImageUpload></ImageUpload>*/}
</div>
);
}
Expand All @@ -114,21 +153,26 @@ var FoodListApp = React.createClass({
class ImageUpload extends React.Component {
constructor(props) {
super(props);
this.state = {file: '',imagePreviewUrl: ''};
this.state = {file: '',
imagePreviewUrl: '',
foodText: 'test'
};
}

_handleSubmit(e) {
e.preventDefault();
// food: do something with -> this.state.file
console.log('handle uploading-', this.state.file);
// console.log('handle uploading-', this.state.file);
var formData = new FormData();
formData.append('photo', this.state.file, this.state.file.name);
console.log(formData);
formData.append('img', this.state.file, this.state.file.name);
formData.append('foodText',this.state.foodText);
// console.log(formData);
$.ajax({
url: "http://localhost:5000/uploadPic",
url: "/food",
type: "POST",
data: formData,
processData: false
processData: false,
contentType: false
});
}

Expand All @@ -143,27 +187,33 @@ class ImageUpload extends React.Component {
file: file,
imagePreviewUrl: reader.result
});
this.props.handleImageChange(this.state.file);
};

reader.readAsDataURL(file);

}

render() {
let {imagePreviewUrl} = this.state;
let $imagePreview = null;
if (imagePreviewUrl) {
$imagePreview = (<img src={imagePreviewUrl} />);
if (this.props.imgPreview) {
$imagePreview = (<img style={{width: "100%",height: "100%",display: "block", margin: "auto"}}
src={imagePreviewUrl} />);
$('#getFile').val(this.state.file.filename);

} else {
$imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
$('#getFile').val("");
}

return (
<div className="previewComponent">
<form id="foodForm" encType="multipart/form-data" onSubmit={(e)=>this._handleSubmit(e)}>
<input className="fileInput" type="file" name="foodText" onChange={(e)=>this._handleImageChange(e)} />
<button className="submitButton" type="submit" onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>
</form>
<div className="imgPreview">
{/*<form id="foodForm" encType="multipart/form-data" onSubmit={(e)=>this._handleSubmit(e)}>*/}
<input id="getFile" className="fileInput" type="file" name="foodText" onChange={(e)=>this._handleImageChange(e)} />
{/*<button className="submitButton" type="submit" onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>*/}
{/*</form>*/}
<div className="imgPreview foodItem">
{$imagePreview}
</div>
</div>
Expand Down
Loading

0 comments on commit 848da94

Please sign in to comment.