Skip to content

Snira development #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sjumba wants to merge 4 commits into
base: development
Choose a base branch
from
Open

Snira development #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
abe6d71
I have linked the Menu button with its respective menu page and inclu…
sjumba Feb 11, 2019
a8359b6
Unstyled pages for Donation related pages for FE
sjumba Feb 18, 2019
7d8065b
Updated routes in App.js
sjumba Feb 18, 2019
6dc19cc
Unstyled DonationPages in place, I will style them later on.
sjumba Feb 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-flags-select": "^1.1.10",
"react-geocode": "^0.1.2",
"react-motion": "^0.5.2",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
Expand Down
32 changes: 0 additions & 32 deletions src/App.js
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions src/js/components/Books/Book.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.bookCardFrame
min-height: 150px
.minHeight150
min-height: 150px
.noPaddMar
padding: 3px !important;
margin: 0 !important;
69 changes: 47 additions & 22 deletions src/js/components/Books/Bookcard/Bookcard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,61 @@
import React, { Component } from 'react';

import './Bookcard.scss';
import './Bookcard.sass';

class Bookcard extends Component {
render() {
return (
<div className="Bookcard borderYellow col-12">
<div className="row bookcardImage ">
<p>Book Name</p>
<div className="Bookcard ">
<div className="bookcardImage borderYellow ">
Book Name
</div>
<div className="row bookcardAccessory">
<div className="col-8 fontsize8px noPaddMar">
<div className="row">
<div className="noPaddMar">
Book Name
</div>
<div className="noPaddMar">
<i className="far fontsize10px fa-star"></i>
<i className="far fontsize10px fa-star"></i>
<i className="far fontsize10px fa-star"></i>
<i className="far fontsize10px fa-star"></i>
<i className="far fontsize10px fa-star"></i>
</div>
<div className="container-fluid bookcardAccessory borderYellow ">
<div className="row ">
<div className="col-8 fontsize8px noPaddMar">
Book Name
</div>
<div className="col-4 fontsize8px height100">
<i className="far fa-bookmark"></i>
</div>
<div className="col-8 noPaddMar">
<i className="far fontsize10px fa-star"></i>
<i className="far fontsize10px fa-star"></i>
<i className="far fontsize10px fa-star"></i>
<i className="far fontsize10px fa-star"></i>
<i className="far fontsize10px fa-star"></i>
</div>
</div>
<div className="col-4 fontsize14px height100">
<i className="far fa-bookmark"></i>
</div>

</div>
</div>
// <div className="col-12 Bookcard">
// <div className="row bookcarddiv">
// <div className="col-12 bookcardImage colorWhite">
// sdfsf
// </div>
// <div className="col-12 bookcardAccessory">
// <div className="row">
// <div className="col-12 ">
// Book Name
// </div>
// <div className="col-12">
// <div className="row">
// <div className="col-8 borderRed">
// <i className="far fontsize10px fa-star"></i>
// <i className="far fontsize10px fa-star"></i>
// <i className="far fontsize10px fa-star"></i>
// <i className="far fontsize10px fa-star"></i>
// <i className="far fontsize10px fa-star"></i>
// </div>
// <div className="col-4 borderRed">
// <i className="far fa-bookmark"></i>
// </div>
// </div>
// </div>

// </div>
// </div>
// </div>
// </div>
);
}
}
Expand Down
35 changes: 35 additions & 0 deletions src/js/components/CollectionsPage/Collection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@

import React, { Component } from "react";
import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";

class collection extends Component {


render() {
return (
<div>
<h1>Menu</h1>
<nav className="Collection">
<nav horizontal>
<navItem>
<NavLink to="/Books" >Books</NavLink>
</navItem><hr />
<navItem>
<NavLink to="/">Articles</NavLink>
</navItem><hr />
<navItem>
<NavLink to="/">Comics</NavLink>
</navItem><hr />
<navItem>
<NavLink to="/">Animation</NavLink>
</navItem><hr />

</nav>

</nav>
</div>
);
}
}

export default collection;
159 changes: 159 additions & 0 deletions src/js/components/DonationPage/Donation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@

import React, { Component } from "react";
import renderHTML from 'react-render-html';
import { Container, Col,FormGroup, Label, Input, Button, Form} from 'reactstrap';

//import { validatePassword, validateEmail, validateUsername } from './Validators.js';
import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";
/* <form>
Amount : <input type="text" id="AmountID" /><br/>
Organisation : <input type="checkbox" id="Org_One" /><Button variant="secondary"> View more </Button><br/>
Organisation : <input type="checkbox" id="Org_One" /><Button variant="secondary">View more </Button><br/>
</form>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<label>Payment </label>
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="WR3NGAATKPUWS" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_ZA/i/scr/pixel.gif" width="1" height="1" />
</form>
*/
class donation extends Component {
constructor(props){
super(props);
this.state ={
"cardNumber": "",
"nameonCard": "",
"expirationDate": "",
"cvc": "",
"country": "",
"state": "",
"city": "",
"postal": "",
"email": "",
}

// this.onChange=this.onChange.bind(this);
//this.onSubmit=this.onSubmit.bind(this);
}

Payment(){

const RequestObject = {
"cardNumber": this.state.cardNumber,
"nameonCard": this.state.nameonCard,
"expirationDate": this.state.expirationDate,
"cvc": this.state.cvc,
"country": this.state.country,
"state": this.state.state,
"city": this.state.city,
"postal": this.state.emailValue,
"email": this.state.email,
}
fetch("https://localhost:44311/api/PayPal", {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(RequestObject)
}).then(function(response) {
return response.json();
}).catch(function(data) {
});

}

render() {
return (

<div className="App">
<div>

<form>
<h>Donation details</h><br/>
Amount &nbsp;<input type="text" name="Amount" placeholder="R50.00"/><br/>


<p><b>Organisation</b><br/> Please choose your organisation of choice</p>

<br/>
Organisation Name &nbsp;<input type="checkbox" name="SecondOrganisation" size="50%" />&nbsp;
<navItem>
<NavLink to="/register" ><button>view more</button></NavLink>
</navItem><br/><br/>
Organisation Name &nbsp;<input type="checkbox" name="SecondOrganisation" size="50%" />&nbsp;
<navItem>
<NavLink to="/register" ><button>view more</button></NavLink>
</navItem>
</form>


<form>
<h>Payments</h><br/>
Credit card number&nbsp;<input type="number" name="card number" placeholder="1234567890"/><br/><br/>
Expiration date&nbsp;<input type="date" name="ExpDate" placeholder="1234567890"/><br/><br/>
Security code&nbsp;<input type="password" name="SecurityCode" placeholder="****"/><br/><br/>
<nav>
<navItem>
<NavLink to="/donationSuccess" ><button>pay</button></NavLink>
</navItem><hr />
</nav>

</form>
</div>
</div>
);
}
}

export default donation;
{/* <form>
<FormGroup controlId="CardNumber" >
<label>Card Number</label>
<input type="text" name="cardNumber" id="us" placeholder="Card number" />

</FormGroup>
<FormGroup controlId="nameonCard" >
<label>Nameoncard</label>
<input type="text" name="nameonCard" id="us" placeholder="Name on Card" />

</FormGroup>
<FormGroup controlId="nameonCardID" >
<label>Experation Date</label>
<input type="text" name="expirationDate" id="us" placeholder="Expiration Date" />

</FormGroup>
<FormGroup controlId="cvcID" >
<label>CVC</label>
<input type="text" name="cvc" id="us" placeholder="CVC" />

</FormGroup>
<FormGroup controlId="Country">
<label>Country</label>
<input name="country" name="cvc" id="us" placeholder="Country " />

</FormGroup>
<FormGroup controlId="State">
<label>State</label>
<input name="state" type="text" id="us" placeholder="State" />

</FormGroup>
<FormGroup controlId="City">
<label>city</label>
<input name="city" type="text" id="us" placeholder="City" />

</FormGroup>
<FormGroup controlId="Postal">
<label>Postal</label>
<input type="text" name="postal" id="us" placeholder="Postal" />

</FormGroup>
<FormGroup controlId="Email">
<label>Email</label>
<input type="text" name="email" id="us" placeholder="name@mail.com" />

</FormGroup>
<Button onClick={this.Payment} >Submit</Button>
</form> */}
37 changes: 37 additions & 0 deletions src/js/components/DonationPage/DonationSuccess.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@

import React, { Component } from "react";

import renderHTML from 'react-render-html';
import { Container, Col,FormGroup, Label, Input, Button, Form} from 'reactstrap';
//import { validatePassword, validateEmail, validateUsername } from './Validators.js';
import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";
/* <form>
Amount : <input type="text" id="AmountID" /><br/>
Organisation : <input type="checkbox" id="Org_One" /><Button variant="secondary"> View more </Button><br/>
Organisation : <input type="checkbox" id="Org_One" /><Button variant="secondary">View more </Button><br/>
</form>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<label>Payment </label>
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="WR3NGAATKPUWS" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_ZA/i/scr/pixel.gif" width="1" height="1" />
</form>
*/
class donationSuccess extends Component {


render() {
return (

<div className="App">
<div>
<h>Thank you</h><br/>
<button type="submit" variant="primary">Browse Books</button><br/><button type="submit" variant="primary">Share</button>
</div>
</div>
);
}
}
export default donationSuccess;
Loading