Git update 2024-04-26

.gitignore

@@ -0,0 +1,3 @@
+/**/node_modules/*
+package-lock.json
+

React/odds-webspace/src/.script_temp/2s87tni.csx

@@ -0,0 +1 @@
+matchTableBody

React/odds-webspace/src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 20vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,7 +32,19 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
+.matchTableHeader {
+  background-color: aqua;
+  border: 2px solid black;
+}
+
+.matchTableCell {
+  border: 1px solid black;
+}
+
+.matchTableRow {}

React/odds-webspace/src/App.js

@@ -8,8 +8,7 @@ class App extends Component {
         return (
             <div className='App'>
                 <header className='App-header'>
-                    <img src={logo} className='App-Logo' alt="logo" />
-                    <h1 className='App-title'>Welcome to React</h1>
+                    <h1 className='App-title'>Odds Better</h1>
                 </header>
                 <p className='App-intro'>
                     To get started, edit <code>src/App.js</code> and save to reload.

React/odds-webspace/src/FirstComponent.js

@@ -1,20 +1,96 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
 
 export default class FirstComponent extends Component {
 
-    //   constructor(props) {
-    //       super(props);
-    //   }
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            prioMatches: this.getMatchData(),
+            DataIsLoaded: false,
+            bank: '300.0'
+        }
+
+        this.handleBankChange = this.handleBankChange.bind(this)
+    }
+
+    handleBankChange(event) {
+        this.setState({ bank: event.target.value })
+    }
 
     render() {
+        const { DataIsLoaded, prioMatches } = this.state;
+        if (!DataIsLoaded) {
+            return (
+                <div>
+                    <h1> LOADING ... </h1>
+                </div>
+            )
+        }
+
         const element = (<div>Test from Element</div>)
         return (<div className='comptext'>
             <h3>First Component</h3>
             {this.props.displaytext}
             {element}
+            <label htmlFor='bank'>Bank:</label>
+            <input id='bank' value={this.state.bank} type='text' onChange={this.handleBankChange}></input>
+            <h2>Match data</h2>
+            <table className='matchTable'>
+                <tbody>
+                    <tr>{this.createMatchTableHeader()}</tr>
+                    {this.createMatchTable()}
+                </tbody>
+            </table>
+            <p>Match data end</p>
         </div>)
     }
+
+    getMatchData() {
+        fetch('http://nordh.xyz:8666/?what=getPrioMatches')
+            .then((res) => res.json())
+            .then((json) => {
+                this.setState({
+                    prioMatches: json,
+                    DataIsLoaded: true,
+                })
+            });
+    }
+
+    createMatchTableHeader() {
+        let header = Object.keys(this.state.prioMatches[0])
+ 
+        const handleSortChange = (accessor) => {
+//            const sortOrder = accessor === sortField && order === "asc" ? "desc" : "asc";
+//            setSortField(accessor);
+//            setOrder(sortOrder);
+//            handleSorting(accessor, sortOrder);
+           };
+
+        return header.map((key, index) => {
+            return <th key={index} className='matchTableHeader' onClick={handleSortChange(index)}>{key.toUpperCase()}</th>
+        })
+    }
+
+    createMatchTable() {
+        return this.state.prioMatches.map((match, index) => {
+            const { id, date, league, country, homeTeam, awayTeam, odds1, oddsX, odds2, analysisValue } = match
+            return (<tr key={id} className='matchTableRow'>
+                <td className='matchTableCell'>{id}</td>
+                <td className='matchTableCell'>{date}</td>
+                <td className='matchTableCell'>{country}</td>
+                <td className='matchTableCell'>{league}</td>
+                <td className='matchTableCell'>{homeTeam}</td>
+                <td className='matchTableCell'>{awayTeam}</td>
+                <td className='matchTableCell'>{odds1}</td>
+                <td className='matchTableCell'>{oddsX}</td>
+                <td className='matchTableCell'>{odds2}</td>
+                <td className='matchTableCell'>{analysisValue}</td>
+            </tr>)
+        })
+    }
 }
 
 FirstComponent.propTypes = {

React/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "axion": "^0.1.0",
+    "axios": "^1.6.7"
+  }
+}