@@ -1,5 +1,5 @@ | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<html lang="en" style="margin: 0; height: 100%;"> | |||
<head> | |||
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"> | |||
<meta charset="utf-8"> | |||
@@ -9,18 +9,20 @@ | |||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png"> | |||
<title>Breakups</title> | |||
</head> | |||
<header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 90px; left: 0px; top: 0px; right: 0px; color: white;"> | |||
<h1 style="margin-top: 10px; margin-bottom: 0px; -webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1> | |||
<h4 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3> | |||
</header> | |||
<body> | |||
<noscript> | |||
You need to enable JavaScript to run this app. | |||
</noscript> | |||
<div id="root"></div> | |||
<body style="margin: 0; height: 100%;"> | |||
<header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 90px; left: 0px; top: 0px; right: 0px; color: white;"> | |||
<h1 style="margin-top: 10px; margin-bottom: 0px; -webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1> | |||
<h4 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3> | |||
</header> | |||
<main style="min-height: 100%; margin-top: -90px; padding-top: 90px; box-sizing: border-box;"> | |||
<noscript> | |||
You need to enable JavaScript to run this app. | |||
</noscript> | |||
<div id="root"></div> | |||
</main> | |||
<footer style="padding-top: 3px; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;"> | |||
<h3 style="margin-bottom: 0px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a></h3> | |||
<h5 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Icons made by <a href="http://www.freepik.com" title="Freepik" style="color:cyan">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon" style="color:cyan">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank" style="color:cyan">CC 3.0 BY</a></h5> | |||
</footer> | |||
</body> | |||
<footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;"> | |||
<h3 style="margin-bottom: 0px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a></h3> | |||
<h5 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Icons made by <a href="http://www.freepik.com" title="Freepik" style="color:cyan">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon" style="color:cyan">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank" style="color:cyan">CC 3.0 BY</a></h5> | |||
</footer> | |||
</html> |
@@ -21,7 +21,6 @@ | |||
} | |||
.PaymentChain { | |||
margin-bottom: 80px; | |||
} | |||
.personInput { | |||
@@ -1,6 +1,7 @@ | |||
import React, { Component } from 'react'; | |||
import People from './Components/People'; | |||
import PaymentChain from './Components/PaymentChain'; | |||
import Message from './Components/Message'; | |||
import './App.css'; | |||
var https = require('https'); | |||
class App extends Component { | |||
@@ -10,7 +11,8 @@ class App extends Component { | |||
peoples: [], | |||
info: [], | |||
paymentChain: [], | |||
actionButtons:[] | |||
actionButtons:[], | |||
showResults:false | |||
} | |||
} | |||
@@ -27,7 +29,8 @@ class App extends Component { | |||
</div> | |||
<br/> | |||
{this.state.actionButtons} | |||
<PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} /> | |||
{this.state.showResults ? <Message /> : <PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} /> } | |||
<br/> | |||
</div> | |||
); | |||
} | |||
@@ -47,10 +50,14 @@ class App extends Component { | |||
users.push(user); | |||
} | |||
request.users = users; | |||
let existingState = this.state; | |||
existingState.showResults = true; | |||
this.setState(existingState); | |||
this.httpsPost(request, result => { | |||
let existingState = this.state; | |||
existingState.paymentChain = JSON.parse("[" + result + "]")[0]; | |||
existingState.showResults = false; | |||
this.setState(existingState); | |||
}) | |||
} | |||
@@ -84,7 +91,7 @@ class App extends Component { | |||
httpsPost(data, callback) { | |||
var post_options = { | |||
host: 'breakups.herokuapp.com', | |||
host: 'api.breakups.life', | |||
path: '/paymentChain', | |||
method: 'POST', | |||
headers: { | |||
@@ -0,0 +1,15 @@ | |||
import React, { Component } from 'react'; | |||
class Message extends Component { | |||
render() { | |||
return ( | |||
<div className="Message"> | |||
<br/> | |||
Calculating... | |||
<br/> | |||
</div> | |||
) | |||
} | |||
} | |||
export default Message; |
@@ -14,7 +14,6 @@ class PaymentChain extends Component { | |||
return ( | |||
<div className="PaymentChain"> | |||
<br/> | |||
{payments} | |||
<br/> | |||
</div> | |||
@@ -22,4 +21,4 @@ class PaymentChain extends Component { | |||
} | |||
} | |||
export default PaymentChain; | |||
export default PaymentChain; |