Advertisement
Guest User

DollarFootball

a guest
Nov 28th, 2016
175
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let url = "https://baas.kinvey.com/appdata/kid_BJe588Szx/football-matches";
  2. let headers = {
  3.     "Authorization": "Basic Z3Vlc3Q6Z3Vlc3Q=",
  4.     "Content-Type": "application/json"
  5. };
  6.  
  7. let myBets = [];
  8.  
  9. function doStuff() {
  10.     let BetsTable = React.createClass({
  11.         render: function () {
  12.             let elements = this.props.elements;
  13.             elements = elements.map(function (element, ind) {
  14.                 return <tr key={ind}>
  15.                     <td>{element.homeTeam}</td>
  16.                     <td>{element.awayTeam}</td>
  17.                     <td>{element.time}</td>
  18.                     <td>{element.betType}</td>
  19.                     <td>{element.betRatio}</td>
  20.                     <td>{element.betValue}</td>
  21.                     <td>{element.estimatedWin}</td>
  22.                 </tr>
  23.             });
  24.  
  25.             return <table>
  26.                 <thead>
  27.                 <tr>
  28.                     <th>Home Team</th>
  29.                     <th>Away Team</th>
  30.                     <th>Start</th>
  31.                     <th>Bet On</th>
  32.                     <th>Ratio</th>
  33.                     <th>Value</th>
  34.                     <th>Estimated Winnings</th>
  35.                 </tr>
  36.                 </thead>
  37.                 <tbody>{elements}</tbody>
  38.             </table>
  39.         }
  40.     });
  41.  
  42.     let MatchesTable = React.createClass({
  43.         placeBet: function (ev) {
  44.             let currentId = Number($(ev.target).parent().attr('id').replace('match-', '').replace('-button', ''));
  45.             let value = Number($('#match-' + currentId + '-bet input').val());
  46.             let betType = $('#match-' + currentId + '-bet-type select option:selected').text().toString().toLowerCase();
  47.  
  48.             let ratio = Number($('#match-' + currentId + '-' + betType).text());
  49.  
  50.             let homeTeam = $('#match-' + currentId + '-home').text();
  51.             let awayTeam = $('#match-' + currentId + '-away').text();
  52.             let time = $('#match-' + currentId + '-time').text();
  53.  
  54.             let bet = {
  55.                 id: currentId,
  56.                 homeTeam: homeTeam,
  57.                 awayTeam: awayTeam,
  58.                 time: time,
  59.                 betType: betType,
  60.                 betRatio: ratio,
  61.                 betValue: value,
  62.                 estimatedWin: (ratio * value).toFixed(2)
  63.             };
  64.  
  65.             myBets.push(bet);
  66.  
  67.             this.setState({
  68.                 elements: this.transformer(this.props.elements)
  69.             })
  70.         },
  71.         refresh: function () {
  72.             this.render();
  73.         },
  74.         getInitialState: function () {
  75.             return {
  76.                 elements: this.transformer(this.props.elements)
  77.             };
  78.         },
  79.         transformer: function (arr) {
  80.             let that = this;
  81.             function sorter(elem1, elem2) {
  82.                 let time1 = elem1.time.split(" ")[0];
  83.                 let format1 = elem1.time.split(" ")[1];
  84.  
  85.                 let time2 = elem2.time.split(" ")[0];
  86.                 let format2 = elem2.time.split(" ")[1];
  87.  
  88.                 let hour1 = Number(time1.split(":")[0]);
  89.                 let minutes1 = Number(time1.split(":")[1]);
  90.  
  91.                 let hour2 = Number(time2.split(":")[0]);
  92.                 let minutes2 = Number(time2.split(":")[1]);
  93.  
  94.                 let result = format1.localeCompare(format2);
  95.  
  96.                 if (result == 0) {
  97.                     result = hour1 - hour2;
  98.                 }
  99.  
  100.                 if (result == 0) {
  101.                     result = minutes1 - minutes2;
  102.                 }
  103.  
  104.                 return result;
  105.             }
  106.             function mapper(elem, ind) {
  107.                 let matchId = `match-${elem.id}`;
  108.                 let homeId = `match-${elem.id}-home`;
  109.                 let awayId = `match-${elem.id}-away`;
  110.                 let timeId = `match-${elem.id}-time`;
  111.                 let winId = `match-${elem.id}-win`;
  112.                 let drawId = `match-${elem.id}-draw`;
  113.                 let loseId = `match-${elem.id}-lose`;
  114.                 let betId = `match-${elem.id}-bet`;
  115.                 let betTypeId = `match-${elem.id}-bet-type`;
  116.                 let buttonId = `match-${elem.id}-button`;
  117.  
  118.                 let hasBet = false;
  119.  
  120.                 myBets.forEach(function (myBet) {
  121.                     if (myBet.id == elem.id) {
  122.                         hasBet = true;
  123.                     }
  124.                 });
  125.  
  126.                 if (!hasBet)
  127.                     return <tr key={ind}>
  128.                         <td id={matchId}>{elem.id}</td>
  129.                         <td id={homeId}>{elem.home}</td>
  130.                         <td id={awayId}>{elem.away}</td>
  131.                         <td id={timeId}>{elem.time}</td>
  132.                         <td id={winId}>{elem.ratio['1']}</td>
  133.                         <td id={drawId}>{elem.ratio['x']}</td>
  134.                         <td id={loseId}>{elem.ratio['2']}</td>
  135.                         <td id={betId}>
  136.                             <input type="number" min="1" max="1000000"/>
  137.                         </td>
  138.                         <td id={betTypeId}>
  139.                             <select>
  140.                                 <option>Win</option>
  141.                                 <option>Draw</option>
  142.                                 <option>Lose</option>
  143.                             </select>
  144.                         </td>
  145.                         <td id={buttonId}>
  146.                             <button onClick={that.placeBet}>Bet</button>
  147.                         </td>
  148.                     </tr>;
  149.  
  150.                 return <tr key={ind}>
  151.                     <td id={matchId}>{elem.id}</td>
  152.                     <td id={homeId}>{elem.home}</td>
  153.                     <td id={awayId}>{elem.away}</td>
  154.                     <td id={timeId}>{elem.time}</td>
  155.                     <td id={winId}>{elem.ratio['1']}</td>
  156.                     <td id={drawId}>{elem.ratio['x']}</td>
  157.                     <td id={loseId}>{elem.ratio['2']}</td>
  158.                     <td id={betId}>
  159.                         <input type="number" min="1" max="1000000" disabled/>
  160.                     </td>
  161.                     <td id={betTypeId}>
  162.                         <select disabled />
  163.                     </td>
  164.                     <td id={buttonId}>
  165.                         <button disabled>Bet</button>
  166.                     </td>
  167.                 </tr>
  168.             }
  169.             arr = arr.sort(sorter).map(mapper);
  170.             return arr;
  171.         },
  172.         render: function () {
  173.             let that = this;
  174.  
  175.             return <table>
  176.                 <thead>
  177.                 <tr>
  178.                     <th>Id</th>
  179.                     <th>Home Team</th>
  180.                     <th>Away Team</th>
  181.                     <th>Start</th>
  182.                     <th>Win</th>
  183.                     <th>Draw</th>
  184.                     <th>Lose</th>
  185.                     <th>Bet</th>
  186.                     <th>Bet On</th>
  187.                     <th>Submit</th>
  188.                 </tr>
  189.                 </thead>
  190.                 <tbody>{this.state.elements}</tbody>
  191.             </table>
  192.         }
  193.     });
  194.  
  195.     let ButtonControls = React.createClass({
  196.         showMyBets: function () {
  197.             ReactDOM.render(
  198.                 <BetsTable elements={myBets}/>,
  199.                 $('.content-holder')[0]
  200.             );
  201.         },
  202.         showMatches: function () {
  203.             $.ajax({
  204.                 method: 'GET',
  205.                 url: url,
  206.                 headers: headers,
  207.                 success: function (success) {
  208.                     ReactDOM.render(
  209.                         <MatchesTable elements={success}/>,
  210.                         $('.content-holder')[0]
  211.                     );
  212.                 },
  213.                 error: function (error) {
  214.                     console.log(error);
  215.                 }
  216.             });
  217.         },
  218.         render: function () {
  219.             let that = this;
  220.             return <div className="button-holder">
  221.                 <button id="bets" className="button" onClick={that.showMyBets}>My Bets</button>
  222.                 <button id="matches" className="button" onClick={that.showMatches}>Matches</button>
  223.             </div>
  224.         }
  225.     });
  226.  
  227.     let AppView = React.createClass({
  228.         render: function () {
  229.             return <div className="wrapper">
  230.                 <header>
  231.                     Dollar Football
  232.                 </header>
  233.                 <ButtonControls/>
  234.                 <div className="content-holder"></div>
  235.             </div>
  236.         }
  237.     });
  238.  
  239.     return {AppView, ButtonControls, MatchesTable, BetsTable}
  240. }
  241.  
  242.  
  243. function init() {
  244.     let classes = doStuff();
  245.     ReactDOM.render(
  246.         React.createElement(classes.AppView),
  247.         document.getElementById('root')
  248.     )
  249. }
  250.  
  251. init();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement