be-components 5.5.6 → 5.5.7

package/src/GolfScoreboard/index.tsx

@@ -12,8 +12,10 @@ import LeaderBetSelector from './components/LeaderBetSelector';
 import MarketButton from '../MarketComponents/components/MarketButton';
 import { MarketComponentHelpers } from '../MarketComponents/api';
 import { MarketButtonHelpers } from '../MarketComponents/components/MarketButton/api';
+import LeaderBetsList from './components/LeaderBetsList';
 
 type GolfScoreboardProps = {
+    player_id?:string,
     tournament_id:string,
     markets:MarketProps[],
     best_available:BestAvailableOrderProps[],
@@ -21,11 +23,22 @@ type GolfScoreboardProps = {
     onClose:() => void
 }
 
-const scorecard_sections = ['course', 'toggle','search','leaderboard', 'open_bets', 'holes'];
-const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder, onClose }:GolfScoreboardProps) => {
+const scorecard_sections = ['course', 'my_action', 'toggle','search','leaderboard', 'open_bets', 'holes'];
+const GolfScoreboard = ({ player_id, tournament_id, markets, best_available, onOrder, onClose }:GolfScoreboardProps) => {
     const Colors = useColors();
+    const [ module_width, setModuleWidth ] = useState(0);
     const [ active_tab, setActiveTab ] = useState<'scorecard'|'holes'|'bets'>('scorecard');
     const [ search, setSearch ] = useState<string>('');
+    const [ my_data, setMyData ] = useState<{
+        my_loading:boolean,
+        orders:OrderProps[]
+    }>({
+        my_loading: false,
+        orders: []
+    });
+    const { orders } = my_data;
+    let hole_orders = orders.filter(o => markets.filter(mk => mk.length_variable).map(mk => mk.market_id.toString()).includes(o.market_id.toString()));
+    const order_stats = GolfHelpers.calcAllOrderStats(hole_orders);
     const [ hole_details, setHoleDetails ] = useState<number | undefined>(undefined);
     const [ scorecard_state, setScorecard ] = useState<{
         loading:boolean,
@@ -45,6 +58,9 @@ const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder, onClo
     });
     const { loading, tournament, athletes, golf_leaders, golf_course, league, active_round, golf_statistics, prior_year, loaded_timestamp } = scorecard_state;
     const [ active_leader, setActiveLeader ] = useState<string|undefined>(undefined);
+    const [ active_order_leader, setActiveOrderLeader ] = useState<string|undefined>(undefined);
+    const order_leader = golf_leaders.find(l => l.athlete_id == active_order_leader);
+    const order_athlete = athletes.find(a => a.athlete_id == active_order_leader);
     const golf_leader = golf_leaders.find(l => l.athlete_id == active_leader);
     const golf_athlete = athletes.find(a => a.athlete_id == active_leader);
 
@@ -80,8 +96,28 @@ const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder, onClo
             loaded_timestamp: timestamp,
             loading: false
         });
+
+        if(player_id){
+            setMyData({ ...my_data, my_loading:true });
+            let my_action = await GolfApi.getMyAction(tournament_id, 'tournament');
+            //Override orders from the supplied array of orders
+            setMyData({ 
+                ...my_data,
+                my_loading: false,
+                orders: my_action
+             })
+            
+        }
+
         return { golf_leaders : golf_data.golf_leaders, active_round: golf_data.active_round }
     }
+
+    const getColor = (earnings:number) => {
+        if(earnings < 0){ return Colors.text.error }
+        if(earnings == 0){ return Colors.text.descriptionLight }
+        return Colors.text.success
+    }
+
     const validateOrder = async(order:OrderProps, market:MarketProps, loaded?:Moment):Promise<boolean> => {
         if(!market || !market.length_variable){ return false }
         let difference = 100
@@ -109,10 +145,16 @@ const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder, onClo
         const athlete = athletes.find(a => a.athlete_id == data.item.athlete_id);
         if(!athlete){ return <></> }
         let current_round = data.item.leader_rounds.find(r => r.status == 'inprogress');
+        let leader_orders = hole_orders.filter(o => o.side_id == data.item.athlete_id);
+        let order_stats = GolfHelpers.calcAllOrderStats(leader_orders);
         return (
             <View style={{ borderBottomWidth:1, borderColor:Colors.borders.light }}>
                 <View transparent type='row' style={{ padding:5 }}>
-
+                    {data.item.place != 999 ?
+                    <View style={{ padding:5 }}>
+                        <Text theme='description'>{GolfHelpers.formatPlace(data.item.place)}</Text>
+                    </View>
+                    :<></>}
                     <View float style={{ borderRadius:100, padding:2, marginLeft:5 }}>
                         <AthleteImage
                             athlete={athlete}
@@ -124,6 +166,12 @@ const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder, onClo
                         <Text theme='h2'>{athlete.first_name} {athlete.last_name}</Text>
                         <Text theme='description' style={{ marginTop:3 }}>World Rank: {data.item.rank == 999 ? 'NA' : data.item.rank}</Text>
                     </View>
+                    {leader_orders.length > 0 ?
+                    <Button float style={{ padding:10, marginRight:10, marginLeft:10, flexDirection:'row', alignItems:'center' }} onPress={() => setActiveOrderLeader(data.item.athlete_id)}>
+                        <Icons.OrderIcon color={getColor(order_stats.earnings)} size={18}/>
+                        <Text theme='description' style={{ marginLeft:3 }} color={getColor(order_stats.earnings)}>${order_stats.earnings.toFixed(2)}</Text>
+                    </Button>
+                    :<></>}
                     <View>
                         <Text textAlign='right' theme='h2' color={data.item.score < 0 ? Colors.text.error : Colors.text.h1}>{data.item.score_label}</Text>
                         {data.item.tee_time && current_round?.thru == 0 ?
@@ -278,6 +326,34 @@ const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder, onClo
                         </View>
                     </View>
                 )
+            case 'my_action':
+                if(module_width == 0){ return <></> }
+                if(hole_orders.length == 0){ return <></> }
+                let padding = (3 * 10) + 20
+                
+                const kpi_card_width = ((module_width - padding) / 3)
+                return (
+                    <View>
+                        <View style={{ padding:10 }}>
+                            <Text theme='h1'>My Hole By Hole Action</Text>
+                        </View>
+                        <View style={{ flexDirection:'row', padding:10 }}>
+                            <View float style={{ margin:5, padding:10, width:kpi_card_width }}>
+                                <Text theme='h1'>${(order_stats.resolved_stake+order_stats.unresolved_stake).toFixed(2)}</Text>
+                                <Text theme='description' style={{ marginTop:5 }}>Total Bet</Text>
+                            </View>
+                            <View float style={{ margin:5, padding:10, width:kpi_card_width }}>
+                                <Text theme='h1'>${order_stats.unresolved_stake.toFixed(2)}</Text>
+                                <Text theme='description' style={{ marginTop:5 }}>Unresolved Bets</Text>
+                            </View>
+                            <View float style={{ margin:5, padding:10, width:kpi_card_width }}>
+                                <Text theme='h1' color={getColor(order_stats.earnings)}>${order_stats.earnings.toFixed(2)}</Text>
+                                <Text theme='description' style={{ marginTop:5 }} color={getColor(order_stats.earnings)}>Earnings</Text>
+                            </View>
+                        </View>
+
+                    </View>
+                )
             case 'toggle':
                 return (
                     <View style={{ padding:10 }}>
@@ -345,7 +421,10 @@ const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder, onClo
     }
     return (
         <View style={{ flex:1 }}>
-            <View style={{ flex:1 }}>
+            <View style={{ flex:1 }} onLayout={(ev) => {
+                const { width } = ev.nativeEvent.layout
+                setModuleWidth(width);
+            }}>
                 {loading ?
                 <ActivityIndicator
                     style={{ padding:10, alignSelf:'center' }}
@@ -370,6 +449,17 @@ const GolfScoreboard = ({ tournament_id, markets, best_available, onOrder, onClo
                     onPress={() => onClose()}
                 />
             </View>
+            {tournament && order_leader && order_athlete ?
+            <LeaderBetsList
+                markets={markets}
+                orders={hole_orders}
+                active_round={active_round}
+                golf_leader={order_leader}
+                athlete={order_athlete}
+                onClose={() => setActiveOrderLeader(undefined)}
+
+            />
+            :<></>}
             {tournament && golf_leader && golf_course && active_round && golf_athlete ?
             <LeaderBetSelector
                 golf_leader={golf_leader}