Quotering berekenen

client/src/App.css

@@ -1,3 +1,20 @@
 .card {
   padding: 1em;
+}
+
+.quotering {
+  border-width: 1px;
+  width: 150px;
+  border-style: solid;
+  text-align: center;
+  font-size: 14px;
+}
+
+.quotering:hover {
+  background-color: grey;
+  cursor: pointer;
+}
+
+.checked {
+  background-color: grey;
 }

client/src/App.js

@@ -2,11 +2,16 @@ import React, { Component } from "react";
 import SimpleStorageContract from "./contracts/SimpleStorage.json";
 import getWeb3 from "./utils/getWeb3";
 import getWeather from "./Weather";
+import getForeCastWeather from "./ForeCastWeather";
+import getOdds from "./Odds"
+import getPreviewBets from "./PreviewBet"
+import getPreviewOdds from "./PreviewOdds.js";
 
 import "./App.css";
 
 class App extends Component {
-  state = { storageValue: 0, web3: null, accounts: null, contract: null, weather: null };
+  state = { storageValue: 0, web3: null, accounts: null, contract: null, weather: null, forecastWeather: null, date: null, odds: null, bet: null, previewBets: null, previewOdds: null };
+  city = "Rotterdam";
   componentDidMount = async () => {
     try {
       // Get network provider and web3 instance.
@@ -21,11 +26,18 @@ class App extends Component {
         SimpleStorageContract.abi,
         deployedNetwork && deployedNetwork.address,
       );
-      const weather = await getWeather("Rotterdam");
+      const weather = await getWeather(this.city);
       this.setState({ weather });
+      this.state.date = weather[0].dt_txt;
+      this.state.forecastWeather = await getForeCastWeather(this.state.date, this.city);
+      this.state.odds = await getOdds(Math.round(this.state.forecastWeather), this.state.bet, this.state.weather, this.state.date)
+      this.state.previewBets = await getPreviewBets(Math.round(this.state.forecastWeather));
+      this.state.previewOdds = await getPreviewOdds(this.state.previewBets, this.state.forecastWeather, this.state.weather, this.state.date);
+      console.log(this.state.previewOdds);
+
       // Set web3, accounts, and contract to the state, and then proceed with an
       // example of interacting with the contract's methods.
-      this.setState({ web3, accounts, contract: instance }, this.runExample);
+      this.setState({ web3, accounts, contract: instance });
     } catch (error) {
       // Catch any errors for any of the above operations.
       alert(
@@ -37,22 +49,38 @@ class App extends Component {
 
   onChangeCity = async (e) => {
     let {value} = e.target;
+    this.city = value;
     const weather = await getWeather(value);
     this.setState({ weather });
+    const forecastWeather = await getForeCastWeather(this.state.date, this.city);
+    this.setState({ forecastWeather });
+    const odds = await getOdds(Math.round(forecastWeather), this.state.bet, weather, this.state.date);
+    this.setState({ odds });
+    const previewBets =  await getPreviewBets(Math.round(forecastWeather));
+    this.setState({ previewBets });
   }
 
-  runExample = async () => {
-    const { accounts, contract } = this.state;
-
-    // Stores a given value, 5 by default.
-    await contract.methods.set(5).send({ from: accounts[0], gas: 2000000 });
-
-    // Get the value from the contract to prove it worked.
-    const response = await contract.methods.get().call();
+  onChangeDate = async (e) => {
+    let {value} = e.target;
+    const date = value;
+    this.setState({ date })
+    const forecastWeather = await getForeCastWeather(date, this.city);
+    this.setState({ forecastWeather });
+    const odds = await getOdds(Math.round(forecastWeather), this.state.bet, this.state.weather, date);
+    this.setState({ odds });
+    const previewBets =  await getPreviewBets(Math.round(forecastWeather));
+    this.setState({ previewBets });
+  }
 
-    // Update state with the result.
-    this.setState({ storageValue: response });
-  };
+  onChangeTemperatuur = async (e) => {
+    let {value} = e.target;
+    const bet = value;
+    this.setState({ bet });
+    const odds = await getOdds(Math.round(this.state.forecastWeather), bet, this.state.weather, this.state.date);
+    this.setState({ odds });
+    const previewBets =  await getPreviewBets(Math.round(this.state.forecastWeather));
+    this.setState({ previewBets });
+  }
 
   render() {
     if (!this.state.web3) {
@@ -84,23 +112,48 @@ class App extends Component {
                 </div>
                 <div className="form-group">
                   <label>Datum</label>
-                  <select className="form-control">
-                    <option>6-6-2019 12:00</option>
-                    <option>7-6-2019 12:00</option>
-                    <option>8-6-2019 12:00</option>
-                    <option>9-6-2019 12:00</option>
+                  <select className="form-control" onChange={this.onChangeDate}>
+                {this.state.weather.map((weather, index) => {
+                  return <option key={index}>{weather.dt_txt}</option>
+                })}
                   </select>
                 </div>
+                <label>Temperatuur</label>
+                <div className="form-group">
+                  <input type="number" className="form-control" placeholder="Temperatuur" onChange={this.onChangeTemperatuur} required />
+                </div>
+                <label>Quotering</label>
+                <div className="form-group">
+                  {this.state.odds.toFixed(2)}
+                </div>
+                <div>
+                  <div className="form-group">
+                    <table>
+                      <tbody>
+                        <tr>
+                          {this.state.previewBets.map((previewBets, index) => {
+                            return <td className="quotering" key ={index}>{previewBets} C°</td>
+                          })}
+                        </tr>
+                          {this.state.previewOdds.map((previewOdds, index) => {
+                            return <td className="quotering" key ={index}>{previewOdds}</td>
+                          })}
+                        <tr>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
                 <div style={{ display: 'flex' }}>
                   <button type="button" className="btn btn-secondary">Annuleren</button>
                   <button type="button" className="btn btn-primary">Plaats weddenschap</button>
                 </div>
               </div>
-              <div>
-                <h4>Het is nu</h4>
-                <h1>{Math.round(this.state.weather.main.temp)} C°</h1>
-                <h3>in {this.state.weather.name}</h3>
-              </div>
+            <div>
+              <h4>Verwachte temperatuur op {this.state.date}</h4>
+              <h1>{Math.round(this.state.forecastWeather)} C°</h1>
+              <h3>in {this.city}</h3>
+            </div>
             </form>
           </div>
           <div className="col-1">

client/src/ForeCastWeather.js

@@ -0,0 +1,21 @@
+const getForeWeather = async (date, city) => {
+    const URL = `http://api.openweathermap.org/data/2.5/forecast?q=${city},nl&units=metric&APPID=55e3d06cfe25b54ec349eae880b98d57`;
+
+    try {
+        const res = await fetch(`${URL}`);
+        const data = await res.json();
+        const list = data.list.slice(16,40);
+        for (let index = 0; index < list.length; index++) {
+            const element = list[index].dt_txt;
+            if (element === date) {
+                return list[index].main.temp
+            }
+        }
+
+    } catch (error) {
+
+    }
+
+}
+
+export default getForeWeather;

client/src/Odds.js

@@ -0,0 +1,40 @@
+const getOdds = async (forecast, bet, weather, date) => {
+    try {
+        if (bet === null){
+            return 1.00;
+        }
+        let difference = null;
+        let spanTimeFactor = 1.00;
+        let differenceFactor = 1.00;
+        let oddFactor = 1.01;
+
+        if (forecast > bet) {
+            difference = forecast - bet
+        } else {
+            difference = bet - forecast
+        }
+
+        for (let index = 0; index < weather.length; index++) {
+            const element = weather[index].dt_txt;
+            if (element === date) {
+                if (index !== 0) {
+                    spanTimeFactor =  index * Math.pow(1.03, index) / index;
+                }
+            }
+        }
+        if (difference !== 0) {
+            differenceFactor = difference * Math.pow(1.1, difference) / difference;
+            const diff = oddFactor * differenceFactor * spanTimeFactor
+            return diff.toFixed(2);
+        } else {
+            const diff = oddFactor * spanTimeFactor
+            return diff.toFixed(2);
+        }
+
+    } catch (error) {
+
+    }
+
+}
+
+export default getOdds;

client/src/PreviewBet.js

@@ -0,0 +1,24 @@
+const getPreviewBets = async (forecastWeather) => {
+    function range(start, end, step = 1) {
+        if (start > end) {
+          step = -step;
+        }
+
+        const length = Math.floor(Math.abs((end - start) / step)) + 1;
+
+        return Array.from(Array(length), (x, index) => start + index * step);
+      }
+
+    try {
+        const startTemperature = forecastWeather - 2;
+        const lastTemperature = forecastWeather + 2;
+        let previewBets = range(startTemperature, lastTemperature);
+
+        return previewBets;
+
+    } catch (error) {
+
+    }
+}
+
+export default getPreviewBets;

client/src/PreviewOdds.js

@@ -0,0 +1,28 @@
+import getOdds from "./Odds"
+
+const getPreviewOdds = async (previewBets, forecastWeather, weather, date) => {
+
+
+    try {
+      let items = [];
+      if (previewBets != null) {
+        for (let index = 0; index < previewBets.length; index++) {
+          const result = await getOdds(forecastWeather, previewBets[index], weather, date);
+          Promise.all([result]).then(function(values) {
+            setTimeout(() => {
+              items.push(Number(values[0]));
+            });
+
+          })
+        }
+      }
+      console.log(items)
+
+      return items;
+
+    } catch (error) {
+
+    }
+}
+
+export default getPreviewOdds;

client/src/Weather.js

@@ -1,15 +1,16 @@
 const getWeather = async (city) => {
-    const URL = `http://api.openweathermap.org/data/2.5/weather?q=${city},nl&units=metric&APPID=55e3d06cfe25b54ec349eae880b98d57`;
+    const URL = `http://api.openweathermap.org/data/2.5/forecast?q=${city},nl&units=metric&APPID=55e3d06cfe25b54ec349eae880b98d57`;
 
     try {
         const res = await fetch(`${URL}`);
         const data = await res.json();
-        return data;
-
+
+        return data.list.slice(16,40);
+
     } catch (error) {
-        
+
     }
-    
+
 }
 
 export default getWeather;