Skip to content

Instantly share code, notes, and snippets.

@lajennylove

lajennylove/example-ajax-enqueue.php

Forked from devinsays/example-ajax-enqueue.php
Last active December 24, 2022 07:57
Show Gist options
  • Save lajennylove/14a0eebc0d4454f61d646240f8181e3a to your computer and use it in GitHub Desktop.
Save lajennylove/14a0eebc0d4454f61d646240f8181e3a to your computer and use it in GitHub Desktop.
Download ZIP
Synced via Snip
Raw
example-ajax-enqueue.php
<?php
function example_ajax_enqueue() {
// Enqueue javascript on the frontend.
wp_enqueue_script(
'example-ajax-script',
get_template_directory_uri() . '/js/simple-ajax-example.js',
array( 'jquery' )
);
// The wp_localize_script allows us to output the ajax_url path for our script to use.
wp_localize_script(
'example-ajax-script',
'example_ajax_obj',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'example-nonce' )
)
);
}
add_action( 'wp_enqueue_scripts', 'example_ajax_enqueue' );
Raw
simple-ajax-example.js
git remote add origingithub [email protected]:lajennylove/sportsanddata.git
Fix the columns and integration of HTML into app.js of SD-18
[https://sportsdatadev.wpengine.com/widgets/dist/sd-18.html]
 
const fn167052046563921e91639eg = new pdWidget({
selector: ".headerOdds_fn167052046563921e91639ef",
widget: "sd2",
endpoint: "GetLatestOdds",
sportName: "football",
leagueName: "nfl",
env: "https://sportsanddata.lndo.site"
});
gameDate.replace(/-/g,"/")
Highly detailed picture of mexican angela using prescription glasses stephen bliss, unreal engine, fantasy art by greg rutkowski, loish, rhads, ferdinand knab, makoto shinkai and lois van baarle, ilya kuvshinov, rossdraws, tom bagshaw, alphonse mucha, global illumination, radiant light, detailed and intricate environment
leagueName=nfl,sportName=football,homeTeamShortName=PHI,awayTeamShortName=TEN,gameDate=2022-12-04
leagueName=nhl,sportName=hockey,homeTeamShortName=OTT,awayTeamShortName=MON,gameDate=2022-12-14
leagueName=nba,sportName=basketball,homeTeamShortName=CHO,awayTeamShortName=DET,gameDate=2022-12-14
leagueName=ncaab,sportName=basketball,homeTeamShortName=MSST,awayTeamShortName=JKST,gameDate=2022-12-14
leagueName=wc,sportName=soccer,homeTeamShortName=ARG,awayTeamShortName=CRO,gameDate=2022-12-13
leagueName=wc,sportName=soccer,homeTeamShortName=ARG,awayTeamShortName=CRO,gameDate=2022-12-13
<div class="tw-w-full">
<div class="tw-w-full tw-flex tw-flex-row tw-font-base">
<div class="tw-w-full tw-flex tw-flex-row">
<div class="tw-w-1/4" style="background:${ awayTeamColor };">&nbsp;</div>
<div class="tw-w-3/4 tw-flex tw-items-center tw-justify-center tw-py-2">
<div class="tw-block md:tw-hidden"> ${ away[0].awayTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ away[0].awayTeamName } </div>
</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row">
<div class="tw-w-1/4" style="background:${ homeTeamColor };">&nbsp;</div>
<div class="tw-w-3/4 tw-flex tw-items-center tw-justify-center tw-py-2">
<div class="tw-block md:tw-hidden"> ${ away[0].homeTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ away[0].homeTeamName } </div>
</div>
</div>
</div>
</div>
Raw
simple-ajax-example.php
/*
*
*
*
*
*/
class pdWidget {
/**
* Create a Widget.
* @param {Object} options - Optional settings object.
*/
constructor( options ) {
// Merge defaults with user's settings
this.config = pdWidget.mergeSettings(options);
// Resolve selector's type
this.selector = typeof this.config.selector === 'string' ? document.querySelector(this.config.selector) : this.config.selector;
// Early throw if selector doesn't exists
if ( this.selector === null ) {
throw new Error('Something wrong with your selector 😭');
}
// Assign id and class to the selector element
this.selector.id = this.makeid(10);
this.selector.classList.add('sdwidget');
this.selector.classList.add('tw-leading-4');
// Custom user configs for class
Object.keys( options ).some( key => key === 'class' ) ? this.config.class = options.class : this.config.class = '';
if ( this.config.class !== '' ) this.selector.classList.add( this.config.class );
// Custom user configs for env
Object.keys( options ).some( key => key === 'env' ) ? this.config.env = options.env : this.config.env = '';
// Set environment
this.app = pdWidget.setEnv( this.config.env );
// Set sports
this.sports = [
['nfl', 'football', 1],
['nba' , 'basketball', 1],
['mlb' , 'baseball', 0],
['nhl' , 'hockey', 1],
['ncaab', 'basketball', 1],
['ncaaf', 'football', 1],
['wc', 'soccer', 0],
];
this.init();
}
/**
* @param {number} length - Optional length needed for the id.
* @returns {string} - Returns a random string.
*
*/
makeid( length ) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
/**
* Overrides default settings with custom ones.
* @param {Object} options - Optional settings object.
* @returns {Object} - Custom sdwidgets settings.
*/
static mergeSettings( options ) {
const settings = {
selector: '.sdwidget',
action: 'apiService',
theme: 'default',
transientExpirationTime: 'default',
};
const userSttings = options;
for (const attrname in userSttings) {
settings[attrname] = userSttings[attrname];
}
return settings;
}
/**
* @param {String} localenv - Optional local environment.
* @returns {array} - Returns the API's environment settings.
*
*/
static setEnv( localenv ){
// instance of the environment variable
let env;
let dev = [
'https://sportsanddata.lndo.site',
'http://localhost/wpsports'
];
let stg = 'https://sportsdatadev.wpengine.com';
let prod = 'https://sportsanddata.com';
let url;
let api;
if ( localenv != '' ) prod = localenv;
else prod = 'https://sportsanddata.com';
// select the environment based on the url
switch(window.location.hostname) {
case 'sportsanddata.lndo.site': env = 'dev'; break;
case 'localhost': env = 'dev'; break;
default: env = 'prod'; break;
}
// Resolve api url by environment
if ( env === 'dev' ) {
let uri = dev.filter(url => url.includes(window.location.hostname))[0];
url = uri + ( document.location.port !== '' ? ':' + document.location.port : '' )+ '/widgets/dist/';
api = uri + ( document.location.port !== '' ? ':' + document.location.port : '' ) + '/wp-admin/admin-ajax.php';
} else if ( localenv != '' ) {
url = prod + '/widgets/dist/';
api = prod + '/wp-admin/admin-ajax.php';
} else {
url = prod + '/widgets/dist/';
api = prod + '/widgets/ajax/';
}
const app = {
env: env,
url: url,
api: api,
};
return app;
}
/**
* @returns {Object} - Returns the API's data set.
*
*/
loadFromApi() {
// instanciate new promise
return new Promise(
(resolve, reject) => {
// initializing variables
const xhr = new XMLHttpRequest();
let params = '';
// excluding the settings no required for the api query
const excludes = ['selector', 'action', 'filter', 'filterValue', 'widget', 'theme', 'class', 'env', 'homeTeamColor', 'awayTeamColor', 'resultsPerPage'];
Object.entries( this.config ).forEach( ([key, val]) => {
if ( excludes.includes( key ) ) {
} else {
params += key + '=' + encodeURIComponent(val) + '&';
}
});
params += `action=${this.config.action}`;
xhr.open('POST', this.app.api, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.onload = () => {
// if the request is successful process the response
if (xhr.status === 200) {
// if the response is empty show an error message
if (xhr.responseText === 'Error' || xhr.responseText === 'No data found') {
this.message = 'No Data Found';
reject(this.message);
}
else {
// store the response in the message variable
this.message = xhr.responseText;
resolve(this.message);
}
}
// if the request is not successful show an error message
else {
this.message = 'No Data Found';
reject(this.message);
}
};
xhr.send(params);
});
}
/**
* @returns {void} - Selects the method to call based on the endpoint.
*
*/
methodSelector() {
// Selecting the method to call based on the endpoint
this[ this.config.widget ]();
}
sd0() {
const filterValue = this.config.filterValue;
switch (filterValue) {
case 'loading': // load data from the api
this.loadingMessage(300);
break;
case 'error': // show an error message
this.errorInResponse();
break;
}
}
/**
* SD1 - Doughnut Win Prediction Widget
*
*/
async sd1() {
const theme = this.config.theme;
const url = this.app.url;
const canvasID = 'canvas' + this.selector.id;
// load data from the api
this.loadingMessage( 340 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const data = JSON.parse(this.message);
let html = '';
let awayTeamWinProbability,homeTeamWinProbability, awayTeamShortName, homeTeamShortName;
let awayTeamColor = (this.config.awayTeamColor != undefined ? this.config.awayTeamColor : '#CCCCCC');
let homeTeamColor = (this.config.homeTeamColor != undefined ? this.config.homeTeamColor : '#999999');
// Exit if no data found
if ( data == 'Error' || data == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(data.length > 0) {
// loop through the filtered response and create the html to be rendered
data.forEach( function(item) {
awayTeamShortName = item.awayTeamShortName;
homeTeamShortName = item.homeTeamShortName;
awayTeamWinProbability = item.awayTeamWinProbability;
homeTeamWinProbability = item.homeTeamWinProbability;
// Create the UI for the response in html format
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-max-w-3xl tw-flex tw-flex-col tw-mx-auto tw-mb-1 tw-py-1 font-mulish tw-text-[10px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
<div class="tw-w-full tw-text-center">
<div class="font-mulish tw-w-full tw-font-bold tw-text-[10px] tw-p-2 tw-text-center tw-border-b tw-bg-neutral-200 tw-border-b-slate-300 ${ ( theme != 'default' ? 'dark:tw-text-white dark:tw-border-b-[#56585B] dark:tw-bg-[#56585B]' : '' )}">
WIN PROBABILITY
</div>
</div>
<div class="tw-max-w-[185px] md:tw-max-w-[285px] tw-mx-auto tw-pt-5">
<canvas id="${ canvasID }" class="${ canvasID } tw-font-bold" width="400" height="400"></canvas>
</div>
<div class="tw-w-full tw-h-20 md:tw-h-32 tw-flex tw-place-content-around tw-top-[-127px] md:tw-top-[-200px] tw-mb-[-80px] md:tw-mb-[-130px]" style="position:relative; float: left;">
<div class="tw-mx-auto tw-text-right tw-font-semibold md:tw-font-bold tw-text-xl md:tw-text-3xl md:tw-text-center"> ${ homeTeamWinProbability } % </div>
<div class="tw-w-auto tw-flex tw-font-semibold tw-text-base md:tw-text-xl">
<div class="tw-w-full tw-flex tw-items-center tw-px-2 tw-ml-[4px] md:tw-ml-[7px] tw-border-r-2 tw-border-b-slate-300"> ${ homeTeamShortName } </div>
<div class="tw-w-full tw-flex tw-items-center tw-px-2 "> ${ awayTeamShortName } </div>
</div>
<div class="tw-mx-auto tw-flex tw-items-end tw-text-left tw-font-semibold md:tw-font-bold tw-text-xl md:tw-text-3xl md:tw-text-center"> ${ awayTeamWinProbability } % </div>
</div>
</div>
</div>`;
});
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
// initialize the chart awayTeamShortName + ' ' + awayTeamWinProbability + '%' , homeTeamShortName + ' ' + homeTeamWinProbability + '%'
this.waitForElm( '.' + canvasID ).then((elm) => {
const data = {
//labels: [awayTeamShortName , homeTeamShortName ],
datasets: [{
data: [ awayTeamWinProbability, homeTeamWinProbability ],
backgroundColor: [
awayTeamColor,
homeTeamColor
],
borderColor: [
awayTeamColor,
homeTeamColor
],
borderWidth: ( window.innerWidth < 765 ? 2 : 4 ),
borderColor: '#ffffff'
}]
};
const config = {
type: 'doughnut',
data: data,
options: {
cutout: ( window.innerWidth < 765 ? 55 : 95 ),
responsive: true,
maintainAspectRatio: true,
showScale: false,
plugins: {
legend: {
labels: {
// This more specific font property overrides the global property
font: {
weight: 'bold'
}
}
}
}
}
};
const myChart = new Chart(
document.getElementById( canvasID ),
config
);
});
}
/**
* SD2 - Header Odds Widget
*
*/
async sd2() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 80 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const data = JSON.parse(this.message);
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const id = this.selector.id;
const sports = this.sports;
let leagues = '';
let html = '';
let games = '';
let filteredData;
// Exit if no data found
if ( data == 'Error' || data =='No Data Found' ) {
this.errorInResponse();
return;
}
// creating an array of distinc unique item.gameDateTime from the response
const options = { year: 'numeric', month: 'numeric', day: 'numeric' };
const dates = [...new Set(data.map(item => new Date(item.gameDateTime).toLocaleDateString("en-US", options)))];
// Creating the dynamic dropdown menu for the leagues
sports.forEach(function (sport) {
if ( sport[2] == 1) {
leagues += `<div id="${ sport[0] }" class="league tw-text-center tw-border tw-rounded tw-border-transparent hover:tw-drop-shadow-md hover:tw-border-[#D1D1D2] hover:tw-cursor-pointer ${ ( leagueName == sport[0] ? 'tw-block' : 'tw-hidden' ) }">
<img loading="lazy" class="tw-w-5 tw-h-5 tw-mx-auto tw-my-1" src="${ url }img/${ sport[1].toLowerCase() }/${ sport[0] }.png">
<div class="tw-w-full">${ sport[0] == 'wc' ? 'FIFA' : sport[0].toUpperCase() }</div>
</div>`;
}
});
// if the filtered response not empty process the response into html
if(data.length > 0 && data != 'No data found') {
dates.forEach(function (date, index) {
// filtering the data by date
filteredData = data.filter(item => new Date(item.gameDateTime).toLocaleDateString("en-US", options) == date);
if ( filteredData.length > 0 && index < 3 ) {
// loop through the filtered response and create the html to be rendered
filteredData.forEach(function (item) {
let date_options = { }; // weekday: "short", month: "short", day: "numeric"
let time_options = { hour:"numeric", minute:"numeric"};
let game_date = new Date(item.gameDateTime);
// Create the UI for the response in html format
games += `<div class="game-dates tw-w-[152px] tw-snap-start tw-flex-shrink-0 tw-h-full tw-rounded-[5px] tw-max-h-[100px] tw-text-center">
<div class="tw-w-full tw-flex tw-py-2 tw-mb-1 tw-place-content-around tw-text-[10px] tw-rounded-t-[5px] tw-bg-[#F3F3F3] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337]' : '' )}">
<div class="${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}"> ${ game_date.toLocaleDateString("en-US", date_options) } </div>
<div class="tw-font-bold ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">${ game_date.toLocaleTimeString("en-US", time_options) } EST</div>
</div>
<div class="teamNames tw-h-auto tw-flex tw-gap-1 tw-uppercase tw-text-[11px] ${ ( theme != 'default' ? ' dark:tw-text-white' : '' )}">
<div class="tw-flex-1 tw-h-auto tw-py-2 tw-rounded-bl-[5px] tw-bg-white ${ ( theme != 'default' ? ' dark:tw-bg-[#484A4E]' : '' )}">
<div> ${ item.awayTeamShortName } </div>
<div> ${ item.homeTeamShortName } </div>
</div>
<div class="spread tw-flex-1 tw-h-auto tw-py-2 tw-bg-white ${ ( theme != 'default' ? ' dark:tw-bg-[#484A4E]' : '' )}">
<div> ${ ( !item.awaySpread ? '' : ( item.awaySpread >= 0 ? '&nbsp;&nbsp;' + item.awaySpread : item.awaySpread ) ) } </div>
<div> ${ ( !item.homeSpread ? '' : ( item.homeSpread >= 0 ? '&nbsp;&nbsp;' + item.homeSpread : item.homeSpread ) ) } </div>
</div>
<div class="tw-flex tw-flex-1 tw-h-auto tw-items-center tw-align-middle tw-rounded-br-[5px] tw-bg-white ${ ( theme != 'default' ? ' dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-w-full tw-mx-auto tw-text-center ">${ ( !item.totalPoints ? '' : ( item.totalPoints > 0 ? '+' + item.totalPoints : item.totalPoints ) ) }</div>
</div>
</div>
</div>`;
});
}
});
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
games = '<div class="tw-max-w-3xl tw-grow tw-rounded-[5px] tw-mx-auto tw-bg-white tw-my-4 tw-px-6 tw-py-2 tw-md:px-0">No Data Found</div>';
}
html += `<div class="tw-w-full tw-h-[100px] tw-mx-auto tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-full tw-h-auto tw-grow tw-mx-auto tw-flex tw-flex-row tw-my-2 tw-pl-2 tw-py-2">
<div class="switchbutton tw-w-20 tw-h-auto tw-py-2 tw-flex tw-flex-col tw-flex-none tw-mx-auto tw-place-content-around tw-uppercase tw-z-50 tw-font-bold tw-items-center tw-text-[12px] tw-rounded-[5px] tw-border-[1px] tw-bg-[#F3F3F3] tw-border-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-border-[#5E6063] dark:tw-text-[#D1D1D2]' : '' )}">
${ leagues }
<img loading="lazy" id="leagueSwitch-${ id }" data-menu="closed" class="tw-w-2.5 tw-h-1 tw-mx-auto tw-mt-1 tw-cursor-pointer hover:tw-border-[#D1D1D2]" src="${ url }img/ic_arrow_drop_up_24px.png">
</div>
<div class="arrows tw-hidden md:tw-block tw-w-10 tw-h-[40px] tw-mx-1 tw-mt-5">
<div id="lottie_scroll_l" class="tw-w-[30px] tw-h-[30px] tw-items-center tw-rotate-90 tw-cursor-pointer tw-rounded-full tw-bg-opacity-10 tw-bg-black">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-auto tw-my-1" src="${ url }img/animation_200_l95p6pzk.gif">
</div>
</div>
<div id="scroll_container" class="tw-w-auto tw-h-full tw-ml-1 md:tw-ml-0 tw-flex tw-overflow-x-auto tw-space-x-2 tw-scrollbar-hide tw-snap-x">
${games}
</div>
<div class="arrows tw-hidden md:tw-block tw-h-[40px] tw-mx-1 tw-mt-5">
<div id="lottie_scroll_r" class="tw-w-[30px] tw-h-[30px] tw-items-center tw-rotate-[270deg] tw-relative tw-cursor-pointer tw-rounded-full tw-bg-opacity-10 tw-bg-black">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-auto tw-my-1" src="${ url }img/animation_200_l95p6pzk.gif">
</div>
</div>
</div>
</div>`;
this.message = html;
this.render();
this.addListeners();
}
/**
* SD3 - Bet on Stats/Bet Against Stats Widget
*
*/
async sd3() {
// Instantiate the variables
let html = ``;
let headingTabs = ``;
let rows = ``;
let counter = 1;
let colour = ``;
const theme = this.config.theme;
const url = this.app.url;
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const endpoint = this.config.endpoint;
// GetLeagueTeams from the api
this.loadingMessage( 290 ); // Show the loading message
await this.loadFromApi();
const teams = JSON.parse(this.message);
// Exit if no data found
if ( teams == 'Error' || teams == 'No Data Found' ) {
this.errorInResponse();
return;
}
headingTabs += `<div class="tw-max-w-3xl tw-bg-white tw-mx-auto tw-my-4 tw-md:px-0 ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="font-mulish tw-text-[10px] tw-w-full tw-flex tw-flex-row tw-bg-white tw-font-bold tw-uppercase tw-text-center dark:tw-text-[#D1D1D2] tw-border-y tw-border-gray-300 ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#484A4E]' : '' )}">
<div id="ml" class="tabs tw-w-1/3 tw-py-3 tw-cursor-pointer tw-text-[#176D8C] tw-font-extrabold tw-border-b-2 tw-border-[#176D8C] ${ ( theme != 'default' ? 'dark:tw-text-[#23C4FD] dark:tw-border-[#23C4FD]' : '' )} ">
<div class="tw-block tw-w-full tw-mx-auto md:tw-hidden"> ML </div>
<div class="tw-hidden tw-w-full tw-mx-auto md:tw-block"> MONEY LINE </div>
</div>
<div id="sp" class="tabs tw-w-1/3 tw-py-3 tw-cursor-pointer hover:tw-border-b-2 hover:tw-text-[#176D8C] hover:tw-border-[#176D8C] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<div class="tw-block tw-w-full tw-mx-auto md:tw-hidden"> ATS </div>
<div class="tw-hidden tw-w-full tw-mx-auto md:tw-block"> SPREAD </div>
</div>
<div id="total" class="tabs tw-w-1/3 tw-py-3 tw-cursor-pointer hover:tw-border-b-2 hover:tw-text-[#176D8C] hover:tw-border-[#176D8C] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<div class="tw-block tw-w-full tw-mx-auto"> TOTAL </div>
</div>
</div>
</div>`;
// if the filtered response not empty process the response into html
if(teams.length > 0) {
// loop through the filtered response and create the html to be rendered
teams.forEach( function(item) {
if ( counter % 2 == 0 ) colour = ` tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063]' : '' )}`;
else colour = ` tw-bg-[#F3F3F3] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-border-[#5E6063]' : '' )}`;
// Create the UI for the response in html format
rows += `<div class="contenttab ml font-exo tw-flex tw-w-full tw-flex-row tw-gap-2 tw-pb-2 font-exo tw-font-regular tw-text-[12px] tw-px-3">
<div class="tw-w-1/3 tw-flex tw-uppercase tw-text-[15px] tw-items-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.teamShortNameML }.png">
<div class="tw-block md:tw-hidden"> ${ item.teamShortNameML } </div>
<div class="tw-hidden md:tw-block"> ${ item.teamNameML } </div>
</div>
<div class="tw-w-1/3 tw-py-1 tw-text-center tw-rounded-[5px] tw-border-[1px] tw-border-[#e3e3e3] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )} ${ colour }"> ${ item.totalWonML + ' - ' + item.totalLostML } </div>
<div class="tw-w-1/3 tw-py-1 tw-text-center tw-rounded-[5px] tw-border-[1px] tw-border-[#e3e3e3] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )} ${ colour }"> ${ ( endpoint == 'GetTopNBetAgainstStats' ? item.betAgainstRoiML : item.betOnRoiML ) } %</div>
</div>
<div class="contenttab sp font-exo tw-hidden tw-w-full tw-flex-row tw-gap-2 tw-pb-2 font-exo tw-font-regular tw-text-[12px] tw-px-3">
<div class="tw-w-1/3 tw-flex tw-uppercase tw-text-[15px] tw-items-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.teamShortNameATS }.png">
<div class="tw-block md:tw-hidden"> ${ item.teamShortNameATS } </div>
<div class="tw-hidden md:tw-block"> ${ item.teamNameATS } </div>
</div>
<div class="tw-w-1/3 tw-py-1 tw-text-center tw-rounded-[5px] tw-border-[1px] tw-border-[#e3e3e3] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )} ${ colour }"> ${ item.totalWonATS + ' - ' + item.totalTieATS + ' - ' + item.totalLostATS } </div>
<div class="tw-w-1/3 tw-py-1 tw-text-center tw-rounded-[5px] tw-border-[1px] tw-border-[#e3e3e3] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )} ${ colour }"> ${ ( endpoint == 'GetTopNBetAgainstStats' ? item.betAgainstRoiATS : item.betOnRoiATS ) } %</div>
</div>
<div class="contenttab total font-exo tw-hidden tw-w-full tw-flex-row tw-gap-2 tw-pb-2 font-exo tw-font-regular tw-text-[12px] tw-px-3">
<div class="tw-w-1/3 tw-flex tw-uppercase tw-text-[15px] tw-items-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.teamShortNameTotal }.png">
<div class="tw-block md:tw-hidden"> ${ item.teamShortNameTotal } </div>
<div class="tw-hidden md:tw-block"> ${ item.teamNameTotal } </div>
</div>
<div class="tw-w-1/3 tw-py-1 tw-text-center tw-rounded-[5px] tw-border-[1px] tw-border-[#e3e3e3] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )} ${ colour }"> ${ item.totalWonTotal + ' - ' + item.totalTieTotal + ' - ' + item.totalLostTotal } </div>
<div class="tw-w-1/3 tw-py-1 tw-text-center tw-rounded-[5px] tw-border-[1px] tw-border-[#e3e3e3] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )} ${ colour }"> ${ ( endpoint == 'GetTopNBetAgainstStats' ? item.betUnderRoiTotal : item.betOverRoiTotal ) } %</div>
</div>`;
counter++;
});
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
rows = '<div class="tw-max-w-3xl tw tw-rounded-[5px]-mx-auto tw-my-4 tw-px-6 tw-py-2 tw-md:px-0 tw-bg-white">No Data Found</div>';
}
// Create the UI for the response in html format
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#FFFFFF] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-max-w-3xl tw-overflow-y-auto tw-max-h-auto tw-mx-auto tw-my-5">
${ headingTabs }
<div class="tw-max-w-3xl tw-mx-auto tw-my-4 tw-md:px-0 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-gap-2 tw-border-t-[1px] tw-border-b-[1px] tw-broder-gray-400 tw-mb-2 tw-py-1 tw-font-bold tw-uppercase tw-text-center tw-text-[9px] tw-bg-[#E4E4E4] ${ ( theme != 'default' ? ' dark:tw-bg-[#313337] dark:tw-border-[#484A4E] dark:tw-text-[#D1D1D2]' : '' )}">
<div class="tw-w-1/3">Team</div>
<div class="tw-w-1/3">Record </div>
<div class="tw-w-1/3">ROI&nbsp;&nbsp;</div>
</div>
${ rows }
</div>
</div>
</div>`;
this.message = html;
this.render();
this.addListeners();
}
/**
* SD4 - Game Odds Widget
*
*/
async sd4() {
// load data from the api
this.loadingMessage( 123 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const theme = this.config.theme;
const url = this.app.url;
const filter = this.config.filter;
const filterValue = this.config.filterValue;
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const data = JSON.parse(this.message);
let html = '';
// Exit if no data found
if ( data == 'Error' || data == 'No Data Found' ) {
this.errorInResponse();
return;
}
// filtering the response based on the filter and filter value
const filtered = data.filter( function(item) {
let teams;
switch (filter) {
case 'byGame': // split the filterValue into an array of teams, first param is home, second param is away
teams = filterValue.split(':');
if ( item.homeTeamShortName === teams[0] && item.awayTeamShortName === teams[1]) { return item; }
break;
case 'byGames': // split the filterValue into an array of teams, first param is home, second param is away
teams = filterValue.split(':');
if (
(item.homeTeamShortName === teams[0] && item.awayTeamShortName === teams[1])
||
(item.homeTeamShortName === teams[1] && item.awayTeamShortName === teams[0])
) { return item; }
break;
case 'byTeam': // return all games for the team
if ( item.homeTeamShortName === filterValue || item.awayTeamShortName === filterValue ) { return item; } break;
default: // return all games in the league
return item;
}
});
//console.log(filtered);
// if the filtered response not empty process the response into html
if( filtered.length > 0 ) {
// loop through the filtered response and create the html to be rendered
filtered.forEach( function(item) {
let date_options = { }; // weekday: "short", month: "short", day: "numeric"
let time_options = { hour:"numeric", minute:"numeric"};
let game_date = new Date(item.gameDateTime);
// Create the UI for the response in html format
html += `<div class="tw-w-full tw-h-auto tw-mx-auto">
<div class="tw-max-w-3xl tw-bg-white tw-mx-auto tw-mb-4 tw-md:px-0 ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-full tw-flex tw-flex-row tw-justify-between tw-bg-[#F3F3F3] tw-py-1 tw-font-bold tw-text-[13px] ${ ( theme != 'default' ? 'dark:tw-bg-[#56585B]' : '' )}">
<div class="tw-w-1/2 tw-pl-3 tw-text-left tw-uppercase tw-text-[9px] tw-font-bold ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">${ game_date.toLocaleDateString("en-US", date_options) }</div>
<div class="tw-w-1/2 tw-pr-3 tw-text-right tw-uppercase tw-text-[9px] tw-font-bold ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">${ game_date.toLocaleTimeString("en-US", time_options) } EST</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-bg-[#E4E4E4] tw-gap-2 tw-border-t-[1px] tw-border-b-[1px] tw-broder-gray-400 tw-mb-2 tw-py-1 tw-font-medium tw-text-[13px] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#484A4E]' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/2 tw-text-center tw-uppercase tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">Team</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-text-center tw-uppercase tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">Spread</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-text-center tw-uppercase tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">
<div class="tw-block md:tw-hidden">M L</div>
<div class="tw-hidden md:tw-block">Money Line</div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-text-center tw-uppercase tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">Total</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-gap-2 tw-pb-2 tw-text-[13px] tw-px-3">
<div class="tw-w-1/3 md:tw-w-1/2 tw-uppercase tw-font-bold tw-mt-1 tw-flex tw-items-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.awayTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ item.awayTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ item.awayTeamName } </div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-font-bold tw-text-center tw-border-[#e3e3e3] tw-bg-[#F8F8F8]">
${ item.awaySpread } ${ ( item.awaySpreadAmount == 100 ? 'Ev' : item.awaySpreadAmount ) }
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-font-bold tw-text-center tw-border-[#e3e3e3] tw-bg-[#F8F8F8">
${ ( !item.awayMoneyLine ? '-' : ( item.awayMoneyLine > 0 ? '+'+item.awayMoneyLine : item.awayMoneyLine ) ) }
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-font-bold tw-text-center tw-border-[#e3e3e3] tw-bg-[#F8F8F8]">
${ ( !item.totalPoints ? '' : ( item.totalPoints > 0 ? '+' + item.totalPoints : item.totalPoints ) ) }
${ ( !item.overTotalPointsAmount ? '' : ( item.overTotalPointsAmount > 0 ? '+' + item.overTotalPointsAmount + 'o' : item.overTotalPointsAmount + 'o' ) ) }
</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-gap-2 tw-pb-2 tw-text-[13px] tw-px-3">
<div class="tw-w-1/3 md:tw-w-1/2 tw-uppercase tw-font-bold tw-mt-1 tw-flex tw-items-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.homeTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ item.homeTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ item.homeTeamName } </div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-font-bold tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white dark:tw-border-[#5E6063]' : '' )}">
${ item.homeSpread } ${ ( item.homeSpreadAmount == 100 ? 'Ev' : item.homeSpreadAmount ) }
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-font-bold tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white dark:tw-border-[#5E6063]' : '' )}">
${ ( !item.homeMoneyLine ? '-' : ( item.homeMoneyLine > 0 ? '+'+item.homeMoneyLine : item.homeMoneyLine ) ) }
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-font-bold tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white dark:tw-border-[#5E6063]' : '' )}">
${ ( !item.totalPoints ? '' : ( item.totalPoints > 0 ? '+' + item.totalPoints : item.totalPoints ) ) }
${ ( !item.underTotalPointsAmount ? '' : ( item.underTotalPointsAmount > 0 ? '+' + item.underTotalPointsAmount + 'o' : item.underTotalPointsAmount + 'u' ) ) }
</div>
</div>
</div>
</div>`;
});
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-transparent ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
}
/**
* SD5 - Week Odds Widget
*
*/
async sd5() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 213 ); // Show the loading message. min: 3
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const data = JSON.parse(this.message);
const tabs = [];
let html = '';
let headingTabs = ``;
let contentTabs = ``;
let colorOne = `tw-bg-[#F3F3F3] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-border-[#5E6063]' : '' )}`;
let colorTwo = `tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063]' : '' )}`;
// Exit if no data found
if ( data == 'Error' || data == 'No Data Found' ) {
this.errorInResponse();
return;
}
// creating an array of distinc unique item.gameDateTime from the response
const options = { year: 'numeric', month: 'numeric', day: 'numeric' };
let date_options = { weekday: "short", month: "short", day: "numeric" };
const dates = [...new Set(data.map(item => new Date(item.gameDateTime).toLocaleDateString("en-US", options)))];
//console.log(dates);
// if the dates array is not empty, create the html for the heading tabs
if ( dates.length > 1 ) {
// looping through the dates array to create the headingTabs
dates.forEach(function (date, index) {
let game_date = new Date(date);
let today = new Date().toLocaleDateString("en-US", date_options);
//console.log("today " + today);
//console.log("game_date " + game_date.toLocaleString("en-US"));
if (index == 0) headingTabs += `<div id="tab_${ index }" class="tab tw-w-1/3 tw-py-3 tw-cursor-pointer tw-border-b-2 tw-font-extrabold tw-text-[#176D8C] tw-border-[#176D8C] ${ ( theme != 'default' ? 'dark:tw-text-[#23C4FD] dark:tw-border-[#23C4FD]' : '' )}">${ (game_date.toLocaleDateString("en-US", date_options) == today ? 'Today' : game_date.toLocaleDateString("en-US", date_options) ) }</div>`;
if (index > 0 && index < 3) headingTabs += `<div id="tab_${ index }" class="tab tw-w-1/3 tw-py-3 tw-cursor-pointer hover:tw-text-[#176D8C] hover:tw-border-b-2 hover:tw-border-[#176D8C] ${ ( theme != 'default' ? 'dark:tw-text-[#FFFFFF]' : '' )}">${ game_date.toLocaleDateString("en-US", date_options) }</div>`;
});
} else headingTabs += `<div class="tw-w-1/3 tw-py-3 tw-cursor-pointer tw-text-[#176D8C] tw-font-extrabold tw-border-b-2 tw-border-[#176D8C] ${ ( theme != 'default' ? 'dark:tw-text-[#23C4FD] dark:tw-border-[#23C4FD]' : '' )}">TODAY</div>`;
// looping through the dates array to filter the data by date
dates.forEach(function (date, index) {
// filtering the data by date
let filteredData = data.filter(item => new Date(item.gameDateTime).toLocaleDateString("en-US", options) == date);
// if the filtered data is not empty, create the html for the games
if ( filteredData.length > 0 && index < 3 ) {
// counting the number of tabs are created.
tabs.push("tab_" + index);
// splitting the results into tabs
contentTabs += `<div data-tab="${ tabs[index] }" class="tabcontent ${ ( index > 0 ? 'tw-hidden' : 'tw-block' ) }">`;
// looping through the filtered data to create the games
filteredData.forEach(function (item) {
let date_options = { }; // weekday: "short", month: "short", day: "numeric"
let time_options = { hour:"numeric", minute:"numeric"};
let game_date = new Date(item.gameDateTime);
// Create the UI for the response in html format
contentTabs += `<div class="tw-max-w-3xl tw-bg-white tw-mx-auto tw-mb-4 tw-md:px-0 ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-full tw-flex tw-flex-row tw-justify-between tw-bg-[#F3F3F3] tw-py-1 tw-font-medium tw-text-[13px] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-1/2 tw-pl-3 tw-text-left tw-uppercase tw-font-bold tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">${ game_date.toLocaleDateString("en-US", date_options) }</div>
<div class="tw-w-1/2 tw-pr-3 tw-text-right tw-uppercase tw-font-bold tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">${ game_date.toLocaleTimeString("en-US", time_options) } EST</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-bg-[#E4E4E4] tw-gap-2 tw-border-t-[1px] tw-border-b-[1px] tw-broder-gray-400 tw-mb-2 tw-py-1 tw-font-medium tw-text-[13px] ${ ( theme != 'default' ? ' dark:tw-bg-[#313337] dark:tw-border-[#484A4E]' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/2 tw-text-center tw-uppercase tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">Team</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-text-center tw-uppercase tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">Spread</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-text-center tw-uppercase tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">
<div class="tw-block md:tw-hidden">M L</div>
<div class="tw-hidden md:tw-block">Money Line</div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-text-center tw-uppercase tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">Total&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-gap-2 tw-pb-2 tw-font-semibold tw-text-[13px] tw-px-3">
<div class="tw-w-1/3 md:tw-w-1/2 tw-uppercase tw-mt-1 tw-flex tw-items-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.awayTeamShortName }.png">
<div class="tw-block md:tw-hidden">${ item.awayTeamShortName }</div>
<div class="tw-hidden md:tw-block">${ item.awayTeamName }</div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] ${ colorOne } tw-text-center">
${ item.awaySpread } ${ ( item.awaySpreadAmount == 100 ? 'Ev' : item.awaySpreadAmount ) }
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] ${ colorOne } tw-text-center">
${ ( !item.awayMoneyLine ? '-' : ( item.awayMoneyLine > 0 ? '+'+item.awayMoneyLine : item.awayMoneyLine ) ) }
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] ${ colorOne } tw-text-center">
${ ( !item.totalPoints ? '' : ( item.totalPoints > 0 ? '+' + item.totalPoints : item.totalPoints ) ) }
${ ( !item.overTotalPointsAmount ? '' : ( item.overTotalPointsAmount > 0 ? '+' + item.overTotalPointsAmount + 'o' : item.overTotalPointsAmount + 'o' ) ) }
</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-gap-2 tw-pb-2 tw-font-semibold tw-text-[13px] tw-px-3">
<div class="tw-w-1/3 md:tw-w-1/2 tw-uppercase tw-mt-1 tw-flex tw-items-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.homeTeamShortName }.png">
<div class="tw-block md:tw-hidden">${ item.homeTeamShortName }</div>
<div class="tw-hidden md:tw-block">${ item.homeTeamName }</div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] ${ colorTwo } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white dark:tw-border-[#5E6063]' : '' )}">
${ item.homeSpread } ${ ( item.homeSpreadAmount == 100 ? 'Ev' : item.homeSpreadAmount ) }
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] ${ colorTwo } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white dark:tw-border-[#5E6063]' : '' )}">
${ ( !item.homeMoneyLine ? '-' : ( item.homeMoneyLine > 0 ? '+'+item.homeMoneyLine : item.homeMoneyLine ) ) }
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-border-[1px] tw-rounded-[5px] tw-border-[#e3e3e3] ${ colorTwo } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white dark:tw-border-[#5E6063]' : '' )}">
${ ( !item.totalPoints ? '' : ( item.totalPoints > 0 ? '+' + item.totalPoints : item.totalPoints ) ) }
${ ( !item.underTotalPointsAmount ? '' : ( item.underTotalPointsAmount > 0 ? '+' + item.underTotalPointsAmount + 'o' : item.underTotalPointsAmount + 'u' ) ) }
</div>
</div>
</div>`;
});
contentTabs += `</div>`;
}
});
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-bg-[#FFFFFF] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-max-w-3xl tw-overflow-y-auto tw-max-h-auto tw-mx-auto tw-mb-5">
<div class="tw-max-w-3xl tw-bg-white tw-mx-auto tw-my-4 tw-md:px-0 ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="font-mulish tw-text-[10px] tw-w-full tw-flex tw-flex-row tw-bg-white tw-font-bold tw-uppercase tw-text-center tw-border-y tw-border-gray-300 ${ ( theme != 'default' ? 'dark:tw-border-[#484A4E] dark:tw-text-[#D1D1D2] dark:tw-bg-[#313337]' : '' )}"">
${ headingTabs }
</div>
</div>
${ contentTabs }
</div>
</div>`;
this.message = html;
this.render();
this.config.addListeners = tabs;
this.addListeners();
}
/**
* SD6 - Horizontal bar Win Prediction Widget
*
*/
async sd6() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 200 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const data = JSON.parse(this.message);
let html = '';
let awayTeamColor = this.config.awayTeamColor;
let homeTeamColor = this.config.homeTeamColor;
// Exit if no data found
if ( data == 'Error' || data == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(data.length > 0) {
// loop through the filtered response and create the html to be rendered
data.forEach( function(item) {
let reference = item.awayTeamWinProbability >= item.homeTeamWinProbability ? 'away' : 'home';
let bigger, smaller;
switch (reference) {
case 'away': // Calculate if away is bigger, then away = 100% and home = (home * 100) / away
bigger = item.awayTeamWinProbability;
smaller = (item.homeTeamWinProbability * 100) / item.awayTeamWinProbability;
break;
case 'home': // Calculate if home is bigger, then home = 100% and away = (away * 100) / home
bigger = item.homeTeamWinProbability;
smaller = (item.awayTeamWinProbability * 100) / item.homeTeamWinProbability;
break;
}
// Create the UI for the response in html format
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-max-w-3xl tw-flex tw-flex-col tw-mx-auto tw-mb-1 tw-py-1 font-mulish tw-text-[10px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
<div class="tw-w-full tw-text-center">
<div class="font-mulish tw-w-full tw-font-bold tw-text-[10px] tw-p-2 tw-text-center tw-border-b tw-border-solid tw-border-b-slate-300 tw-bg-neutral-200 ${ ( theme != 'default' ? 'dark:tw-text-white dark:tw-border-b-[#56585B] dark:tw-bg-[#56585B]' : '' )}">
PREDICTED SCORE
</div>
</div>
<div class="tw-w-full tw-pt-5">
<div class="tw-w-full tw-px-2 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-text-white dark:tw-bg-[#484A4E]' : '' ) }">
<div class="font-exo tw-w-full tw-flex tw-flex-row">
<div class="tw-w-[61px] tw-h-40 tw-flex tw-flex-col tw-place-content-around tw-px-3 tw-py-4 tw-text-lg tw-text-left tw-font-bold tw-text-slate-900 ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<div class="tw-h-11 tw-flex tw-items-center"> ${ item.awayTeamShortName } </div>
<div class="tw-h-11 tw-flex tw-items-center"> ${ item.homeTeamShortName } </div>
</div>
<div class="tw-w-full tw-h-40 tw-flex tw-flex-col tw-place-content-around tw-py-4 tw-text-center tw-border-l tw-border-solid tw-border-l-neutral-300">
<div class="tw-w-full tw-h-11 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-flex tw-h-11 tw-items-center tw-justify-center tw-rounded-r-full tw-font-bold tw-text-xl md:tw-text-3xl tw-text-white ${ ( awayTeamColor === '' ? 'tw-bg-neutral-400' : 'tw-bg-transparent') }" style="width: ${ ( reference == 'away' ? bigger : smaller ) }%; background: ${ ( awayTeamColor === '' ? '' : awayTeamColor ) };">
${ item.awayTeamWinProbability }
</div>
</div>
<div class="tw-w-full tw-h-11 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-flex tw-h-11 tw-items-center tw-justify-center tw-rounded-r-full tw-font-bold tw-text-xl md:tw-text-3xl tw-text-white ${ ( homeTeamColor === '' ? 'tw-bg-stone-300' : 'tw-bg-transparent') }" style="width: ${ ( reference == 'home' ? bigger : smaller ) }%; background: ${ ( homeTeamColor === '' ? '' : homeTeamColor ) };">
${ item.homeTeamWinProbability }
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;
});
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
}
/**
* SD7 - Consensus picks Widget
*
*/
async sd7() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 500 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const awayTeamShortName = this.config.awayTeamShortName;
const homeTeamShortName = this.config.homeTeamShortName;
const data = JSON.parse(this.message);
let html = '';
let awayTeamColor = this.config.awayTeamColor;
let homeTeamColor = this.config.homeTeamColor;
// Exit if no data found
if ( data == 'Error' || data == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(data.length > 0) {
const away = data.filter( item => item.chosenTeamShortName == awayTeamShortName );
const home = data.filter( item => item.chosenTeamShortName == homeTeamShortName );
// Create the UI for the response in html format
html += `<div class="tw-mt-5 tw-full tw-h-auto tw-text-black tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-max-w-3xl tw-h-auto tw-mx-auto tw-py-2">
<div class="tw-w-full tw-text-center">
<div class="font-mulish tw-w-full tw-font-bold tw-text-[10px] tw-p-2 tw-text-center tw-border-b-[1px] tw-text-black tw-bg-[#E4E4E4] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#56585B] dark:tw-bg-[#56585B]' : '' )}">
CONSENSUS PICKS
</div>
</div>
<div class="tw-full tw-mx-auto tw-my-4 tw-md:px-0 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#56585B]' : '' )}">
<div class="font-mulish tw-text-[10px] tw-w-full tw-flex tw-flex-row tw-font-bold tw-uppercase tw-text-center tw-border-b tw-border-gray-300 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#313337]' : '' )}">
<div id="tab-content-bet-percent" class="tabs tw-w-1/2 tw-py-3 tw-font-extrabold tw-text-[#176D8C] tw-border-b-2 tw-border-[#176D8C] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">BET %</div>
<div id="tab-content-money-percent" class="tabs tw-w-1/2 tw-py-3 tw-font-extrabold tw-text-black hover:tw-border-b-2 hover:tw-text-[#176D8C] hover:tw-border-[#176D8C] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">MONEY %</div>
</div>
</div>
<div class="contenttab tab-content-bet-percent tw-h-[400px] tw-max-w-3xl tw-flex tw-flex-row tw-mx-auto tw-mb-4 tw-md:px-0 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white ' : '' )}">
<div class="consensus-picks-ml tw-w-1/3 tw-pt-5">
<div class="tw-w-full tw-flex tw-flex-row">
<div class="tw-flex tw-items-end tw-w-1/2 tw-px-2 tw-font-medium tw-h-[300px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-flex tw-items-end tw-align-text-bottom tw-w-full tw-text-lg md:tw-text-2xl tw-text-center tw-justify-center tw-pb-3 tw-rounded-t-full tw-text-[#ffffff] ${ ( homeTeamColor === '' ? 'tw-bg-stone-300' : 'tw-bg-transparent') }" style="height: ${ parseInt(away[0].mlBetPercentage) }%; background:${ awayTeamColor };"> ${ parseInt(away[0].mlBetPercentage) }% </div>
</div>
<div class="tw-flex tw-items-end tw-w-1/2 tw-px-2 tw-font-medium tw-h-[300px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-flex tw-items-end tw-w-full tw-rounded-t-full tw-text-lg md:tw-text-2xl tw-text-center tw-justify-center tw-pb-3 tw-text-[#ffffff] ${ ( awayTeamColor === '' ? 'tw-bg-neutral-400' : 'tw-bg-transparent') }" style="height: ${ parseInt(home[0].mlBetPercentage) }%; background:${ homeTeamColor };"> ${ parseInt(home[0].mlBetPercentage) }% </div>
</div>
</div>
<div class="tw-w-full tw-pt-6 tw-pl-3 tw-text-center tw-text-lg tw-text-[#031C2E] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<div class="tw-block md:tw-hidden"> ML </div>
<div class="tw-hidden md:tw-block"> MoneyLine </div>
</div>
</div>
<div class="consensus-picks-ats tw-w-1/3 tw-pt-5">
<div class="tw-w-full tw-flex tw-flex-row">
<div class="tw-flex tw-items-end tw-w-1/2 tw-px-2 tw-font-medium tw-h-[300px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-flex tw-items-end tw-align-text-bottom tw-w-full tw-text-lg md:tw-text-2xl tw-text-center tw-justify-center tw-pb-3 tw-rounded-t-full tw-text-[#ffffff] ${ ( homeTeamColor === '' ? 'tw-bg-stone-300' : 'tw-bg-transparent') }" style="height: ${ parseInt(away[0].atsBetPercentage) }%; background:${ awayTeamColor };"> ${ parseInt(away[0].atsBetPercentage) }% </div>
</div>
<div class="tw-flex tw-items-end tw-w-1/2 tw-px-2 tw-font-medium tw-h-[300px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-flex tw-items-end tw-w-full tw-rounded-t-full tw-text-lg md:tw-text-2xl tw-text-center tw-justify-center tw-pb-3 tw-text-[#ffffff] ${ ( awayTeamColor === '' ? 'tw-bg-neutral-400' : 'tw-bg-transparent') }" style="height: ${ parseInt(home[0].atsBetPercentage) }%; background:${ homeTeamColor };"> ${ parseInt(home[0].atsBetPercentage) }% </div>
</div>
</div>
<div class="tw-w-full tw-pt-6 tw-pl-3 tw-text-center tw-text-lg tw-text-[#031C2E] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<div class="tw-block md:tw-hidden"> ATS </div>
<div class="tw-hidden md:tw-block"> Spread </div>
</div>
</div>
<div class="consensus-picks-ou tw-w-1/3 tw-pt-5">
<div class="tw-w-full tw-flex tw-flex-row">
<div class="tw-flex tw-items-end tw-w-1/2 tw-px-2 tw-font-medium tw-h-[300px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-flex tw-items-end tw-align-text-bottom tw-w-full tw-text-lg md:tw-text-2xl tw-text-center tw-justify-center tw-pb-3 tw-rounded-t-full tw-text-[#ffffff] tw-bg-stone-300" style="height: ${ parseInt(away[0].mlBetPercentage) }%;"> ${ parseInt(away[0].mlBetPercentage) }% </div>
</div>
<div class="tw-flex tw-items-end tw-w-1/2 tw-px-2 tw-font-medium tw-h-[300px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-flex tw-items-end tw-w-full tw-rounded-t-full tw-text-lg md:tw-text-2xl tw-text-center tw-justify-center tw-pb-3 tw-text-[#ffffff] tw-bg-neutral-400" style="height: ${ parseInt(home[0].mlBetPercentage) }%;"> ${ parseInt(home[0].mlBetPercentage) }% </div>
</div>
</div>
<div class="tw-w-full tw-pt-6 tw-pl-3 tw-text-center tw-text-lg tw-text-[#031C2E] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<div class="tw-block md:tw-hidden"> O/U </div>
<div class="tw-hidden md:tw-block"> Over/Under </div>
</div>
</div>
</div>
<div class="contenttab tab-content-money-percent tw-max-w-3xl tw-h-[370px] tw-hidden tw-flex-row tw-mx-auto ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="consensus-picks-ml tw-w-full tw-px-9">
<div class="tw-w-1/2 tw-mx-auto tw-flex tw-flex-row">
<div class="tw-flex tw-items-end tw-justify-center tw-w-1/2 tw-px-2 tw-font-medium tw-h-[300px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-flex tw-items-end tw-max-w-[112px] tw-w-full tw-rounded-t-full tw-text-lg md:tw-text-2xl tw-text-center tw-justify-center tw-pb-3 tw-text-white ${ ( homeTeamColor === '' ? 'tw-bg-stone-300' : 'tw-bg-transparent') }" style="height: ${ parseInt(away[0].moneyPercentage) }%; background:${ awayTeamColor };"> ${ parseInt(away[0].moneyPercentage) }% </div>
</div>
<div class="tw-flex tw-items-end tw-justify-center tw-w-1/2 tw-px-2 tw-font-medium tw-h-[300px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-flex tw-items-end tw-max-w-[112px] tw-w-full tw-rounded-t-full tw-text-lg md:tw-text-2xl tw-text-center tw-justify-center tw-pb-3 tw-text-white ${ ( awayTeamColor === '' ? 'tw-bg-neutral-400' : 'tw-bg-transparent') }" style="height: ${ parseInt(home[0].moneyPercentage) }%; background:${ homeTeamColor };"> ${ parseInt(home[0].moneyPercentage) }% </div>
</div>
</div>
</div>
</div>
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
this.addListeners();
}
/**
* SD11 - ROI Widget
*
*/
async sd11() {
const theme = this.config.theme;
const url = this.app.url;
const canvasID = 'canvas' + this.selector.id;
// load data from the api
this.loadingMessage( 1002 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
let teamName = '';
const data = JSON.parse(this.message);
let html = '';
let games = '';
let even = 0;
const atsRoi = [];
const mlRoi = [];
const overRoi = [];
const underRoi = [];
const gameDateTime = [];
this.config.endpoint = 'GetWagerOfLastNGames';
this.config.transientExpirationTime = 24;
const wager = JSON.parse( await this.loadFromApi() );
let ml, ats, over, under, teamShortName;
// Exit if no data found
if ( data == 'Error' || data == 'No data found' || wager == 'Error' || wager == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if ( data.length <= 0 || wager.length <= 0 ) {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
// loop through the filtered response and create the html to be rendered
wager.forEach( function(item) {
// generating dataset for the chart
switch ( item.wagerType ) {
case 'Money Line': ml = item.roi;
break;
case 'Spread': ats = item.roi;
break;
case 'Total': if ( item.ouIndicator == "U" ) under = item.roi;
else over = item.roi;
break;
}
teamName = item.teamName;
});
data.forEach( function(item) {
let date_options = { month: "short", day: "numeric" }; // weekday: "short", month: "short", day: "numeric"
let date_options_chart = { month: "short", day: "numeric" };
let time_options = { hour:"numeric", minute:"numeric"};
let game_date = new Date(item.gameDateTime);
// generating dataset for the chart
atsRoi.push( item.atsRoi.toFixed(0) );
mlRoi.push( item.mlRoi.toFixed(0) );
overRoi.push( item.totalOverRoi.toFixed(0) );
underRoi.push( item.totalUnderRoi.toFixed(0) );
gameDateTime.push( game_date.toLocaleDateString('en-US', date_options_chart) );
games += `<div class="font-exo tw-max-w-3xl tw-min-w-min tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-border-b-[1px] ${ ( even == 0 ? 'tw-bg-[#f3f3f3]' : 'tw-bg-[#e8e9ea]' ) } tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? ( even == 0 ? 'dark:tw-bg-[#1B1D22]' : 'dark:tw-bg-[#2D2F34]' ) + 'dark:tw-bg-[#1B1D22] dark:tw-text-[#D1D1D2] dark:tw-border-b-[#5E6063]' : '' )}">
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center"> ${ game_date.toLocaleDateString("en-US", date_options) }, ${ game_date.toLocaleTimeString("en-US", time_options) } </div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center"> ${ ( item.awayTeamShortName == teamShortName ? item.homeTeamShortName : item.awayTeamShortName ) } </div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center"> ${ item.score } </div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center"><img loading="lazy" src="${ url }img/${ ( item.mlAchieved ? 'icon-checkmark-green' : 'icon-circle-gray' ) }.png" /></div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center"><img loading="lazy" src="${ url }img/${ ( item.atsAchieved ? 'icon-checkmark-green' : 'icon-circle-gray' ) }.png" /></div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center">${ ( item.totalOver ? 'Over' : 'Under' ) }</div>
</div>`;
even = even == 0 ? 1 : 0;
});
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-text-zinc-900 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-max-w-3xl tw-flex tw-flex-col tw-mx-auto tw-mb-1 tw-py-1 font-mulish tw-text-[10px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
<div class="tw-flex tw-flex-wrap tw-items-end">
<div class="tw-flex-1">
<h3 class="tw-text-lg tw-text-zinc-900 tw-font-semibold tw-leading-tight">ROI of ${ teamName }</h3>
</div>
</div>
<div>
<canvas id="${ canvasID }" class="${ canvasID } tw-w-full tw-h-auto tw-py-4"></canvas>
</div>
</div>
<div class="tw-max-w-3xl tw-mx-auto tw-my-4 tw-bg-white tw-text-zinc-900 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-full tw-flex tw-flex-row tw-px-3 tw-gap-2 tw-py-2 font-exo tw-font-regular tw-text-[18px] tw-text-[#1B1D22]">
<div class="tw-flex tw-flex-col tw-items-center tw-w-1/2 tw-py-2 tw-border-[1px] tw-border-[#D1D1D2] tw-rounded-[5px] tw-bg-[#E8E8E9] tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063] dark:tw-text-white' : '' )}">
<span class="tw-w-full tw-pb-2 tw-font-bold tw-text-[22px]"> ${ ml.toFixed(2) } % </span>
<span class="tw-w-full tw-text-[#27c1a3]"> &#9679; ML </span>
</div>
<div class="tw-flex tw-flex-col tw-items-center tw-w-1/2 tw-py-2 tw-border-[1px] tw-border-[#D1D1D2] tw-rounded-[5px] tw-bg-[#E8E8E9] tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063] dark:tw-text-white' : '' )}">
<span class="tw-w-full tw-pb-2 tw-font-bold tw-text-[22px]"> ${ ats.toFixed(2) } % </span>
<span class="tw-w-full tw-text-[#1f98ff]"> &#9679; ATS </span>
</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-px-3 tw-gap-2 tw-py-2 font-exo tw-font-regular tw-text-[18px]">
<div class="tw-flex tw-flex-col tw-items-center tw-w-1/2 tw-py-2 tw-border-[1px] tw-border-[#D1D1D2] tw-rounded-[5px] tw-bg-[#E8E8E9] tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063] dark:tw-text-white' : '' )}">
<span class="tw-w-full tw-pb-2 tw-font-bold tw-text-[22px]"> ${ over.toFixed(2) } % </span>
<span class="tw-w-full tw-text-[#fdc408]"> &#9679; OVER </span>
</div>
<div class="tw-flex tw-flex-col tw-items-center tw-w-1/2 tw-py-2 tw-border-[1px] tw-border-[#D1D1D2] tw-rounded-[5px] tw-bg-[#E8E8E9] tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063] dark:tw-text-white' : '' )}">
<span class="tw-w-full tw-pb-2 tw-font-bold tw-text-[22px]"> ${ under.toFixed(2) } % </span>
<span class="tw-w-full tw-text-[#dd104b]"> &#9679; UNDER </span>
</div>
</div>
<div id="scroll_container" class="horizontal-table-scroll tw-w-full tw-h-auto tw-flex tw-flex-col tw-overflow-x-auto tw-scrollbar-hide">
<div class="font-exo tw-max-w-3xl tw-min-w-min tw-flex tw-flex-row tw-font-medium tw-uppercase tw-text-center tw-text-[12px] tw-text-[#1B1D22] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-[#D1D1D2]' : '' )}">
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center">DATE</div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center">OPP</div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center">SCORE</div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center">ML</div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center">ATS</div>
<div class="tw-w-32 tw-py-2 tw-px-1 tw-flex tw-items-center tw-mx-auto tw-justify-center tw-text-center">O/U</div>
</div>
${ games }
</div>
</div>
</div>`;
this.message = html;
this.render();
// initialize the chart
this.waitForElm( '.' + canvasID ).then((elm) => {
let xValues = gameDateTime;
new Chart(canvasID, {
type: "line",
data: {
labels: xValues,
datasets: [
{
data: mlRoi,
backgroundColor: "rgba(39, 193, 163, 0.25)",// COLOR VERDE
borderColor: "rgba(39, 193, 163, 1)",// COLOR VERDE
pointBackgroundColor: "rgba(39, 193, 163, 1)",// COLOR VERDE
fill: true,
label: "ML",
},
{
data: atsRoi,
backgroundColor: "rgba(31, 152, 255, 0.25)",// COLOR AZUL
borderColor: "rgba(31, 152, 255, 1)",// COLOR AZUL
pointBackgroundColor: "rgba(31, 152, 255, 1)",// COLOR AZUL
fill: true,
label: "ATS",
},
{
data: overRoi,
backgroundColor: "rgba(221, 16, 75, 0.25)",// COLOR ROJO
borderColor: "rgba(221, 16, 75, 1)",// COLOR ROJO
pointBackgroundColor: "rgba(221, 16, 75, 1)",// COLOR ROJO
fill: true,
label: "OVER",
},
{
data: underRoi,
backgroundColor: "rgba(253, 196, 8, 0.25)",// COLOR AMARILLO "rgba(253, 296, 8, 0.25)"
borderColor: "rgba(253, 196, 8, 0.25)",// COLOR AMARILLO "rgba(253, 296, 8, 1)"
pointBackgroundColor: "rgba(253, 196, 8, 0.25)",// COLOR AMARILLO
fill: true,
label: "UNDER",
}
]
},
layout: {
padding: {
right: 10
}
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
y: {
ticks: {
callback: (label) => `${label} %`,
},
grid: {
display: false
}
}
},
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 10
}
},
elements: {
line: {
borderJoinStyle: 'round',
tension: 0.2
}
}
}
});
});
}
/**
* SD12 - Records Widget
*
*/
async sd12() {
const theme = this.config.theme;
const url = this.app.url;
// initialize the variables to process the response
let html = '';
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const teams = {
homeTeamShortName: this.config.homeTeamShortName,
awayTeamShortName: this.config.awayTeamShortName
};
// delete the variables that are not needed
delete this.config.homeTeamShortName;
delete this.config.awayTeamShortName;
// load homeTeam's data from the api
this.config.teamShortName = teams.homeTeamShortName;
this.loadingMessage( 230 );
await this.loadFromApi();
const homeData = JSON.parse(this.message);
if ( homeData == 'Error' || homeData == 'No data found' ) {
this.errorInResponse();
return;
}
// load awayTeam's data from the api
this.config.teamShortName = teams.awayTeamShortName;
this.loadingMessage( 230 );
await this.loadFromApi();
const awayData = JSON.parse(this.message);
if ( awayData == 'Error' || awayData == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(homeData.length > 0 && awayData.length > 0) {
// Create the UI for the response in html format
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-max-w-3xl tw-flex tw-flex-col tw-mx-auto tw-mb-1 tw-py-1 font-mulish tw-text-[10px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
<div class="tw-w-full tw-text-center">
<div class="font-mulish tw-w-full tw-font-bold tw-text-[10px] tw-p-2 tw-text-center tw-border-b-[1px] tw-text-black tw-bg-[#E4E4E4] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#56585B] dark:tw-bg-[#56585B]' : '' )}">
RECORDS
</div>
</div>
<div class="tw-w-full tw-mx-auto tw-my-2 md:tw-px-0 tw-bg-white">
<div class="font-mulish tw-text-[10px] tw-w-full tw-flex tw-flex-row tw-font-bold tw-uppercase tw-text-center tw-border-b tw-text-black tw-bg-white tw-border-gray-300 ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#313337]' : '' )}">
<div id="tab-ml" class="tabs tw-w-1/3 tw-py-3 tw-font-extrabold tw-border-b-2 tw-text-[#176D8C] tw-border-[#176D8C]">ML</div>
<div id="tab-ats" class="tabs tw-w-1/3 tw-py-3 hover:tw-text-[#176D8C] hover:tw-border-b-2 hover:tw-border-[#176D8C]">ATS</div>
<div id="tab-ou" class="tabs tw-w-1/3 tw-py-3 hover:tw-text-[#176D8C] hover:tw-border-b-2 hover:tw-border-[#176D8C]">O/U</div>
</div>
</div>
<div class="tab-content-ml font-mulish tw-w-full tw-mx-auto tw-mb-4 tw-text-base tw-text-black ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-full tw-text-center tw-flex tw-py-2">
<div class="tw-w-1/3 tw-uppercase tw-mt-1 tw-flex tw-items-center tw-justify-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ teams.awayTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ teams.awayTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ awayData[0].teamFirstName + ` ` + awayData[0].teamNickName } </div>
</div>
<div class="tw-w-1/3 tw-flex tw-items-center tw-justify-center">&nbsp;</div>
<div class="tw-w-1/3 tw-uppercase tw-mt-1 tw-flex tw-items-center tw-justify-center ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ teams.homeTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ teams.homeTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ homeData[0].teamFirstName + ` ` + homeData[0].teamNickName } </div>
</div>
</div>
<div class="contenttab tab-ml tw-w-full tw-flex">
<div class="tw-w-full tw-text-center tw-snap-center tw-text-black tw-bg-transparent ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white' : '' )}">
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#e8e9ea] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].mlOverAllWon } - ${ awayData[0].mlOverAllLost } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Overall</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].mlOverAllWon } - ${ homeData[0].mlOverAllLost } </div>
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#f3f3f3] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#2D2F34]' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].mlAwayWon } - ${ awayData[0].mlAwayLost } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Away/Home</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].mlAwayWon } - ${ homeData[0].mlAwayLost } </div>
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#e8e9ea] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].mlUdogWon } - ${ awayData[0].mlUdogLost } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Dog/Fav</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].mlUdogWon } - ${ homeData[0].mlUdogLost } </div>
</div>
</div>
</div>
<div class="contenttab tab-ats tw-w-full tw-hidden">
<div class="tw-w-full tw-text-center tw-snap-center tw-text-black tw-bg-transparent ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white' : '' )}">
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#e8e9ea] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].atsOverAllWon } - ${ awayData[0].atsOverAllLost } - ${ awayData[0].atsOverAllTie } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Overall</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].atsOverAllWon } - ${ homeData[0].atsOverAllLost } - ${ homeData[0].atsOverAllTie } </div>
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#f3f3f3] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#2D2F34]' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].atsAwayWon } - ${ awayData[0].atsAwayLost } - ${ awayData[0].atsAwayTie } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Away/Home</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].atsAwayWon } - ${ homeData[0].atsAwayLost } - ${ homeData[0].atsAwayTie } </div>
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#e8e9ea] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].atsUdogWon } - ${ awayData[0].atsUdogLost } - ${ awayData[0].atsUdogTie } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Dog/Fav</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].atsUdogWon } - ${ homeData[0].atsUdogLost } - ${ homeData[0].atsUdogTie } </div>
</div>
</div>
</div>
<div class="contenttab tab-ou tw-w-full tw-hidden">
<div class="tw-w-full tw-text-center tw-snap-center tw-text-black tw-bg-transparent ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white' : '' )}">
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#e8e9ea] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].ouOverAllWon } - ${ awayData[0].ouOverAllLost } - ${ awayData[0].ouOverAllTie } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Overall</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].ouOverAllWon } - ${ homeData[0].ouOverAllLost } - ${ homeData[0].ouOverAllTie } </div>
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#f3f3f3] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#2D2F34]' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].ouAwayWon } - ${ awayData[0].ouAwayLost } - ${ awayData[0].ouAwayTie } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Away/Home</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].ouAwayWon } - ${ homeData[0].ouAwayLost } - ${ homeData[0].ouAwayTie } </div>
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-bg-[#e8e9ea] tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ awayData[0].ouUdogWon } - ${ awayData[0].ouUdogLost } - ${ awayData[0].ouUdogTie } </div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Dog/Fav</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center"> ${ homeData[0].ouUdogWon } - ${ homeData[0].ouUdogLost } - ${ homeData[0].ouUdogTie } </div>
</div>
</div>
</div>
</div>
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
this.addListeners();
}
/**
* SD14 - Head to head Widget
*
*/
async sd14() {
const theme = this.config.theme;
const url = this.app.url;
// initialize the variables to process the response
let html = '';
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const teams = {
homeTeamShortName: this.config.homeTeamShortName,
awayTeamShortName: this.config.awayTeamShortName,
awayTeamColor : this.config.awayTeamColor,
homeTeamColor : this.config.homeTeamColor,
};
const fields = [
['pointsPerGame', 'Points par Game (PPG)'],
['yardsPerGame', 'Yards par Game (YPG)'],
['passingYardsPerGame', 'Passing Yards par Game'],
['rushingYardsPerGame', 'Rushing Yards par Game'],
['turnoversCommitted', 'Turnovers Committed'],
['pointsPerGameAllowed', 'Points par Game Allowed'],
['yardsPerGameAllowed', 'Yards par Game Allowed'],
['passingYardsPerGameAllowed', 'Passing Yards par Game Allowed'],
['rushingYardsPerGameAllowed', 'Rushing Yards par Game Allowed'],
['turnoversForced', 'Turnovers Forced'],
]; //console.log(fields);
// delete the variables that are not needed
delete this.config.homeTeamShortName;
delete this.config.awayTeamShortName;
delete this.config.awayTeamColor;
delete this.config.homeTeamColor;
// load homeTeam's data from the api
this.config.teamShortName = teams.homeTeamShortName;
this.loadingMessage( 230 );
await this.loadFromApi();
const homeData = JSON.parse(this.message);
if ( homeData == 'Error' || homeData == 'No data found' ) {
this.errorInResponse();
return;
}
// load awayTeam's data from the api
this.config.teamShortName = teams.awayTeamShortName;
this.loadingMessage( 230 );
await this.loadFromApi();
const awayData = JSON.parse(this.message);
if ( awayData == 'Error' || awayData == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(homeData.length > 0 && awayData.length > 0) {
const teamStatsName = [...new Set(homeData.map(item => item.teamStatsName))]; console.log( teamStatsName );
// Create the UI for the response in html format
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-text-black tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-max-w-3xl tw-flex tw-flex-col tw-mx-auto tw-mb-1 tw-py-1 font-mulish tw-text-[10px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
<div class="tw-w-full tw-text-center">
<div class="font-mulish tw-w-full tw-font-bold tw-text-[10px] tw-p-2 tw-text-center tw-border-b-[1px] tw-bg-[#E4E4E4] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#56585B] dark:tw-bg-[#56585B]' : '' )}">HEAD TO HEAD</div>
</div>
<div class="tab-content-ml tw-w-full tw-mx-auto tw-mb-4 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-full tw-text-center tw-flex tw-py-3 tw-text-base">
<div class="tw-w-1/2 tw-uppercase tw-mt-1 tw-flex tw-items-center tw-justify-start tw-pl-5 ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ teams.awayTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ teams.awayTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ awayData[0].teamFirstName + ` ` + awayData[0].teamNickName } </div>
</div>
<div class="tw-w-1/2 tw-uppercase tw-mt-1 tw-flex tw-items-center tw-justify-end tw-pr-5 ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ teams.homeTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ teams.homeTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ homeData[0].teamFirstName + ` ` + homeData[0].teamNickName } </div>
</div>
</div>
<div class="h2h-param font-exo tw-font-regular tw-text-[10px] tw-w-full tw-py-3 tw-flex tw-flex-row tw-text-center tw-snap-center tw-bg-[#F3F3F3] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 tw-p-2 tw-text-center tw-flex tw-items-center tw-justify-center">116.3</div>
<div class="tw-w-4/6">
<div class="font-exo tw-font-semibold tw-w-full tw-text-[11px] tw-text-center tw-items-center tw-justify-center">Points Per Game (PPG)</div>
<div class="tw-w-full tw-flex tw-p-0 tw-pt-2">
<div class="head-to-head-team-a-color-bar tw-h-[8px] tw-w-1/2 tw-text-center tw-border-r-[1px] tw-border-r-[#ffffff] ${ ( teams.homeTeamColor === '' ? 'tw-bg-stone-300' : 'tw-bg-transparent') }" style="width: 30%; background:${ teams.homeTeamColor }"></div>
<div class="head-to-head-team-b-color-bar tw-h-[8px] tw-w-1/2 tw-text-center tw-border-l-[1px] tw-border-l-[#ffffff] ${ ( teams.awayTeamColor === '' ? 'tw-bg-neutral-400' : 'tw-bg-transparent') }" style="width: 70%; background:${ teams.awayTeamColor }"></div>
</div>
</div>
<div class="tw-w-1/6 tw-p-2 tw-text-center tw-flex tw-items-center tw-justify-center">112.8</div>
</div>
</div>
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
}
/**
* SD17 - Game Schedule Widget
*
*/
async sd17() {
// load data from the api
this.loadingMessage( 123 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const theme = this.config.theme;
const filter = this.config.filter;
const filterValue = this.config.filterValue;
const resultsPerPage = this.config.resultsPerPage;
const data = JSON.parse(this.message);
let html = '';
let matches = '';
let currentBlock;
// Exit if no data found
if ( data == 'Error' || data == 'No Data Found' ) {
this.errorInResponse();
return;
}
// filtering the response based on the filter and filter value
const filtered = data.filter( function(item) {
let teams;
switch (filter) {
case 'byGame': // split the filterValue into an array of teams, first param is home, second param is away
teams = filterValue.split(':');
if ( item.homeTeamShortName === teams[0] && item.awayTeamShortName === teams[1]) { return item; }
break;
case 'byGames': // split the filterValue into an array of teams, first param is home, second param is away
teams = filterValue.split(':');
if (
(item.homeTeamShortName === teams[0] && item.awayTeamShortName === teams[1])
||
(item.homeTeamShortName === teams[1] && item.awayTeamShortName === teams[0])
) { return item; }
break;
case 'byTeam': // return all games for the team
if ( item.homeTeamShortName === filterValue || item.awayTeamShortName === filterValue ) { return item; }
break;
default: // return all games in the league
return item;
break;
}
});
// if the filtered response not empty process the response into html
if( filtered.length > 0 ) {
// Calculate pagination
currentBlock = ( resultsPerPage <= filtered.length ? 1 : this.pagination( filtered.length, resultsPerPage ) );
// loop through the filtered response
this.config.filtered = filtered;
matches = this.matchList( currentBlock );
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-max-w-3xl tw-mx-auto tw-px-3 tw-mb-4 tw-md:px-0 tw-text-zinc-900 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-full tw-flex tw-flex-row tw-justify-between tw-bg-[#E4E4E4] tw-font-bold tw-text-[13px] ${ ( theme != 'default' ? 'dark:tw-bg-[#56585B]' : '' )}">
<div class="prev tw-w-1/2 tw-pl-3 tw-py-1 tw-text-left tw-uppercase tw-text-[10px] ${ ( currentBlock <= 1 ? 'tw-text-stone-400' : 'tw-cursor-pointer' ) }">PREV ${ resultsPerPage } </div>
<div class="next tw-w-1/2 tw-pr-3 tw-py-1 tw-text-right tw-uppercase tw-text-[10px] ${ ( (currentBlock * resultsPerPage) < filtered.length ? 'tw-cursor-pointer' : 'tw-text-stone-400' ) }">NEXT ${ resultsPerPage } </div>
</div>
<div class="tw-w-full tw-mx-auto tw-px-3">
<div class="tw-w-full tw-flex tw-flex-row tw-border-t-[1px] tw-border-b-[1px] tw-text-[9px] ${ ( theme != 'default' ? 'dark:tw-border-t-[#5E6063] dark:tw-border-b-[#5E6063] dark:tw-bg-[#313337]' : '' )}">
<div class="tw-w-2/6 tw-py-1 tw-text-center tw-uppercase">DATE</div>
<div class="tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">&nbsp;</div>
<div class="tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">OPP</div>
<div class="tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">&nbsp;</div>
<div class="tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">TIME</div>
</div>
</div>
<div data-set="${ currentBlock }" class="matches tw-w-full tw-mx-auto tw-px-3">
${ matches }
</div>
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-transparent ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
this.addListeners();
}
/**
* SD18 - Standings Widget
*
*/
async sd18() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 500 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const data = JSON.parse(this.message);
let html = '';
// Exit if no data found
if ( data == 'Error' || data == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(data.length > 0) {
let teams = '';
let stats = '';
const colors = {
even : `tw-bg-gray-200 tw-border-b-neutral-300 ${ ( theme != 'default' ? 'dark:tw-text-stone-50 dark:tw-border-b-zinc-700 dark:tw-bg-zinc-900' : '' )}`,
odd : `tw-bg-zinc-100 tw-border-b-neutral-300 ${ ( theme != 'default' ? 'dark:tw-text-stone-50 dark:tw-border-b-zinc-700 dark:tw-bg-neutral-800' : '' )}`,
};
switch (leagueName) {
case 'nfl': case 'ncaaf':
// Generate the dataset for the teams
const teamStandingsName = [...new Set(data.map(item => item.teamStandingsName))];
const teamShortName = [...new Set(data.map(item => item.teamShortName))];
stats += ` <div class="tw-w-full tw-min-w-min tw-flex tw-flex-row tw-py-2 tw-text-sm tw-uppercase tw-text-zinc-900 ${ ( theme != 'default' ? 'dark:tw-text-stone-50 dark:tw-bg-zinc-800' : '' )}">
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">W</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">L</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">PCT</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">PF</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">PA</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">HOME</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">AWAY</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">DIV</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">CONF</div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto tw-text-center">STRK</div>
</div>`;
teamShortName.forEach( (item, index) => {
const teamData = {
teamFullName: data.filter(team => team.teamShortName == item)[0].teamFirstName + ' ' + data.filter(team => team.teamShortName == item)[0].teamNickName,
wins : parseInt( data.filter(team => team.teamStandingsName == 'games_won' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup=='league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
losses : parseInt( data.filter(team => team.teamStandingsName == 'games_lost' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup=='league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
ties : parseInt( data.filter(team => team.teamStandingsName == 'games_tied' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup=='league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
winsHome : parseInt( data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup == 'home-league-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup == 'home-league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
lossesHome : parseInt( data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup == 'home-league-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup == 'home-league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
tiesHome : parseInt( data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup == 'home-league-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup == 'home-league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
winsAway : parseInt( data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup == 'away-league-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup == 'away-league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
lossesAway : parseInt( data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup == 'away-league-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup == 'away-league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
tiesAway : parseInt( data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup == 'away-league-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup == 'away-league-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
lossesDivision : parseInt( data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup == 'division-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup == 'division-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
tiesDivision : parseInt( data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup == 'division-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup == 'division-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
winsDivision : parseInt( data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup == 'division-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup == 'division-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
winsConference : parseInt( data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup == 'conference-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_won' && team.standingsGroup == 'conference-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
lossesConference: parseInt( data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup == 'conference-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_lost' && team.standingsGroup == 'conference-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
tiesConference : parseInt( data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup == 'conference-standings' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'games_tied' && team.standingsGroup == 'conference-standings' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
points_for: data.filter(team => team.teamStandingsName == 'points_for' && team.standingsGroup == 'league-standings' && team.teamShortName == item)[0].teamStandingsValue,
points_against: data.filter(team => team.teamStandingsName == 'points_against' && team.standingsGroup == 'league-standings' && team.teamShortName == item)[0].teamStandingsValue,
win_streak: parseInt( data.filter(team => team.teamStandingsName == 'win_streak' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'win_streak' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
loss_streak: parseInt( data.filter(team => team.teamStandingsName == 'loss_streak' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'loss_streak' && team.teamShortName == item)[0].teamStandingsValue : 0 ),
tie_streak: parseInt( data.filter(team => team.teamStandingsName == 'tie_streak' && team.teamShortName == item).length > 0 ? data.filter(team => team.teamStandingsName == 'tie_streak' && team.teamShortName == item)[0].teamStandingsValue : 0 )
};
let streak = [
[teamData.win_streak, 'W'],
[teamData.loss_streak, 'L'],
[teamData.tie_streak, 'T']
];
let strk = (streak.filter( item => Math.max(...streak.map(item => item[0])) == item[0] )[0]).reverse().join('');
teams += ` <div class="tw-w-full tw-h-[41px] tw-flex tw-flex-row tw-py-2 tw-items-center tw-text-xs tw-font-medium tw-border-b ${ ( index % 2 == 0 ? colors.even : colors.odd )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item }.png">
<div class="tw-block md:tw-hidden"> ${ item } </div>
<div class="tw-hidden md:tw-block"> ${ teamData.teamFullName } </div>
</div>`;
stats += ` <div class="tw-w-full tw-h-[41px] tw-min-w-min tw-flex tw-flex-row tw-items-center tw-py-2 tw-text-xs tw-text-center tw-border-b ${ ( index % 2 == 0 ? colors.even : colors.odd )}">
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ teamData.wins } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ teamData.losses } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ ( teamData.wins / ( teamData.wins + teamData.losses + teamData.ties ) ).toFixed(3) } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ teamData.points_for } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ teamData.points_against } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ teamData.winsHome } - ${ teamData.lossesHome } - ${ teamData.tiesHome } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ teamData.winsAway } - ${ teamData.lossesAway } - ${ teamData.tiesAway } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ teamData.winsDivision } - ${ teamData.lossesDivision } - ${ teamData.tiesDivision } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ teamData.winsConference } - ${ teamData.lossesConference } - ${ teamData.tiesConference } </div>
<div class="tw-w-24 tw-shrink-0 tw-mx-auto"> ${ strk } </div>
</div>`;
});
break;
}
// Create the UI for the response in html format
html += `<div class="tw-mt-5 tw-full tw-h-auto tw-text-black tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-max-w-3xl tw-h-auto tw-mx-auto tw-py-2 tw-px-2 tw-leading-6">
<div class="tw-w-full tw-text-center">
<div class="font-mulish tw-w-full tw-font-bold tw-text-[10px] tw-p-2 tw-text-center tw-border-b tw-bg-[#E4E4E4] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-bg-[#56585B] dark:tw-border-b-[#5E6063] dark:tw-text-white' : '' )}">
NCAAF STANDINGS
</div>
<div class="tw-w-full tw-py-1 tw-my-2 tw-border tw-rounded-[5px] tw-text-center tw-border-[#D1D1D2] tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-border-[#5E6063] dark:tw-bg-[#1B1D22] dark:tw-text-white' : '' )}">
<span class="tw-font-bold tw-text-[22px]">{DropDown "Season 2021 - 2022"}</span>
</div>
<div class="tw-w-full tw-py-1 tw-my-2 tw-border tw-rounded-[5px] tw-text-center tw-border-[#D1D1D2] tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-border-[#5E6063] dark:tw-bg-[#1B1D22] dark:tw-text-white' : '' )}">
<span class="tw-font-bold tw-text-[22px]">{DropDown "Conference"}</span>
</div>
<div class="font-mulish tw-w-full tw-font-bold tw-text-[10px] tw-p-2 tw-text-center tw-bg-[#E4E4E4] ${ ( theme != 'default' ? 'dark:tw-bg-[#56585B] dark:tw-text-white' : '' )}">AMERICAN ATHLETIC</div>
</div>
<!-- widdget table -->
<div class="tw-w-full tw-h-auto tw-flex">
<div class="tw-w-1/3 tw-h-auto">
<div class="tw-w-full tw-py-2 tw-text-sm ${ ( theme != 'default' ? 'dark:tw-bg-zinc-800 dark:tw-text-white' : '' )}">&nbsp;</div>
${ teams }
</div>
<div class="tw-w-2/3 tw-h-auto tw-overflow-x-auto">
${ stats }
</div>
</div>
<!-- /widdget table -->
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
this.addListeners();
}
/**
* SD19 - Single Matchup Results Widget
*
*/
async sd19() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 90 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const homeTeamShortName = this.config.homeTeamShortName;
const awayTeamShortName = this.config.awayTeamShortName;
const gameDate = this.config.gameDate.replace(/-/g,"/");
let awayTeamName = '';
let homeTeamName = '';
const data = JSON.parse(this.message);
let html = '';
let gameStats = '';
let leaders = '';
// Exit if no data found
if ( data == 'Error' || data == 'No data found' ) {
this.errorInResponse();
return;
}
// GetGamePlayerStats from the api
this.config.endpoint = 'GetGamePlayerStats';
const playerStats = JSON.parse( await this.loadFromApi() );
// Exit if no data found
if ( playerStats == 'Error' || playerStats == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(data.length > 0 && playerStats.length > 0) {
// set the date options
let date_options = { weekday: "short", month: "short", day: "2-digit" }; // weekday: "short", month: "short", day: "numeric"
let game_date = new Date(gameDate);
// set the game stats
const game = {
points: data.filter( item => item.gameTeamStatsName == 'points' ),
games_lost: data.filter( item => item.gameTeamStatsName == 'games_lost' ),
games_won: data.filter( item => item.gameTeamStatsName == 'games_won' ),
penalties: data.filter( item => item.gameTeamStatsName == 'penalties' ),
};
const gamePlayerStatsName = [...new Set(playerStats.map(item => item.gamePlayerStatsName))];
console.log( leagueName );
console.log( gamePlayerStatsName );
const gameStatsName = [...new Set(data.map(item => item.gameStatsName))];
console.log( gameStatsName );
// set the team names
awayTeamName = data[0].awayTeamFirstName + ' ' + data[0].awayTeamNickName;
homeTeamName = data[0].homeTeamFirstName + ' ' + data[0].homeTeamNickName;
switch (sportName) {
case 'football': // Football game stats
const football = {
...structuredClone(game),
points_quarter_1: data.filter( item => item.gameTeamStatsName == 'points_quarter_1' ),
points_quarter_2: data.filter( item => item.gameTeamStatsName == 'points_quarter_2' ),
points_quarter_3: data.filter( item => item.gameTeamStatsName == 'points_quarter_3' ),
points_quarter_4: data.filter( item => item.gameTeamStatsName == 'points_quarter_4' ),
}; //console.log(football);
gameStats = ` <div class="tw-w-full tw-flex tw-flex-row tw-border-t-[1px] tw-border-b-[1px] tw-font-bold tw-text-[13px] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063] dark:tw-text-white' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/2 tw-py-1 tw-text-center tw-uppercase"></div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">1</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">2</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">3</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">4</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase tw-bg-[#f1f1f1] ${ ( theme != 'default' ? 'dark:tw-bg-[#47494D] dark:tw-text-white' : '' )}">T</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-font-normal tw-text-[13px] tw-border-b ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-border-[#5E6063]' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/2 tw-uppercase tw-flex tw-items-center tw-mt-1 tw-pl-2">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ awayTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ awayTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ awayTeamName } </div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ football.points_quarter_1.length > 0 ? ( football.points_quarter_1[0].awayTeamStatsValue != null ? football.points_quarter_1[0].awayTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ football.points_quarter_2.length > 0 ? ( football.points_quarter_2[0].awayTeamStatsValue != null ? football.points_quarter_2[0].awayTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ football.points_quarter_3.length > 0 ? ( football.points_quarter_3[0].awayTeamStatsValue != null ? football.points_quarter_3[0].awayTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ football.points_quarter_4.length > 0 ? ( football.points_quarter_4[0].awayTeamStatsValue != null ? football.points_quarter_4[0].awayTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-font-bold tw-bg-[#f1f1f1] ${ ( theme != 'default' ? 'dark:tw-bg-[#47494D]' : '' )}">
${ game.points.length > 0 ? ( game.points[0].awayTeamStatsValue != null ? game.points[0].awayTeamStatsValue : 0 ) : 0 }
</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-font-normal tw-text-[13px] tw-border-b ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-border-[#5E6063]' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/2 tw-uppercase tw-flex tw-items-center tw-mt-1 tw-pl-2">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ homeTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ homeTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ homeTeamName } </div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ football.points_quarter_1.length > 0 ? ( football.points_quarter_1[0].homeTeamStatsValue != null ? football.points_quarter_1[0].homeTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ football.points_quarter_2.length > 0 ? ( football.points_quarter_2[0].homeTeamStatsValue != null ? football.points_quarter_2[0].homeTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ football.points_quarter_3.length > 0 ? ( football.points_quarter_3[0].homeTeamStatsValue != null ? football.points_quarter_3[0].homeTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ football.points_quarter_4.length > 0 ? ( football.points_quarter_4[0].homeTeamStatsValue != null ? football.points_quarter_4[0].homeTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-font-bold tw-bg-[#f1f1f1] ${ ( theme != 'default' ? 'dark:tw-bg-[#47494D]' : '' )}">
${ game.points.length > 0 ? ( game.points[0].homeTeamStatsValue != null ? game.points[0].homeTeamStatsValue : 0 ) : 0 }
</div>
</div>`;
// awayPlayerStats
leaders += ` <div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Passing:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ awayTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Rushing:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ awayTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white tw-border-b tw-pb-2 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Receiving:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ awayTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>`;
// homePlayerStats
leaders += ` <div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Passing:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ homeTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Rushing:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ homeTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white tw-border-b tw-pb-2 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Receiving:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ homeTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>`;
break;
case 'baseball': // Baseball game stats
const baseball = {
...structuredClone(game),
//runs_inning_1: data.filter( item => item.gameTeamStatsName == 'runs_inning_1' ),
runs_inning_1: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_1' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_1') : 0 ),
runs_inning_2: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_2' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_2') : 0 ),
runs_inning_3: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_3' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_3') : 0 ),
runs_inning_4: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_4' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_4') : 0 ),
runs_inning_5: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_5' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_5') : 0 ),
runs_inning_6: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_6' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_6') : 0 ),
runs_inning_7: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_7' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_7') : 0 ),
runs_inning_8: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_8' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_8') : 0 ),
runs_inning_9: ( data.filter( function(item) { if ( item.gameTeamStatsName == 'runs_inning_9' ) return item; else return 0; } ).length > 0 ? data.filter ( item => item.gameTeamStatsName == 'runs_inning_9') : 0 ),
};
//console.log( baseball );
gameStats = ` <div class="tw-w-full tw-flex tw-flex-row tw-border-t-[1px] tw-border-b-[1px] tw-font-bold tw-text-[13px] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063] dark:tw-text-white' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/2 tw-py-1 tw-text-center tw-uppercase"></div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">1</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">2</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">3</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase">4</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-uppercase tw-bg-[#f1f1f1] ${ ( theme != 'default' ? 'dark:tw-bg-[#47494D] dark:tw-text-white' : '' )}">T</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-font-normal tw-text-[13px] tw-border-b ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-border-[#5E6063]' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/2 tw-uppercase tw-flex tw-items-center tw-mt-1 tw-pl-2">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ awayTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ awayTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ awayTeamName } </div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ baseball.runs_inning_1.length > 0 ? ( baseball.runs_inning_1[0].awayTeamStatsValue != null ? baseball.runs_inning_1[0].awayTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ baseball.runs_inning_2.length > 0 ? ( baseball.runs_inning_2[0].awayTeamStatsValue != null ? baseball.runs_inning_2[0].awayTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ baseball.runs_inning_3.length > 0 ? ( baseball.runs_inning_3[0].awayTeamStatsValue != null ? baseball.runs_inning_3[0].awayTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ baseball.runs_inning_4.length > 0 ? ( baseball.runs_inning_4[0].awayTeamStatsValue != null ? baseball.runs_inning_4[0].awayTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-font-bold tw-bg-[#f1f1f1] ${ ( theme != 'default' ? 'dark:tw-bg-[#47494D]' : '' )}">
${ game.points.length > 0 ? ( game.points[0].awayTeamStatsValue != null ? game.points[0].awayTeamStatsValue : 0 ) : 0 }
</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-font-normal tw-text-[13px] tw-border-b ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-border-[#5E6063]' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/2 tw-uppercase tw-flex tw-items-center tw-mt-1 tw-pl-2">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ homeTeamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ homeTeamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ homeTeamName } </div>
</div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ baseball.runs_inning_1.length > 0 ? ( baseball.runs_inning_1[0].homeTeamStatsValue != null ? baseball.runs_inning_1[0].homeTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ baseball.runs_inning_2.length > 0 ? ( baseball.runs_inning_2[0].homeTeamStatsValue != null ? baseball.runs_inning_2[0].homeTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ baseball.runs_inning_3.length > 0 ? ( baseball.runs_inning_3[0].homeTeamStatsValue != null ? baseball.runs_inning_3[0].homeTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center"> ${ baseball.runs_inning_4.length > 0 ? ( baseball.runs_inning_4[0].homeTeamStatsValue != null ? baseball.runs_inning_4[0].homeTeamStatsValue : 0 ) : 0 } </div>
<div class="tw-w-1/3 md:tw-w-1/6 tw-py-1 tw-text-center tw-font-bold tw-bg-[#f1f1f1] ${ ( theme != 'default' ? 'dark:tw-bg-[#47494D]' : '' )}">
${ game.points.length > 0 ? ( game.points[0].homeTeamStatsValue != null ? game.points[0].homeTeamStatsValue : 0 ) : 0 }
</div>
</div>`;
//const gamePlayerStatsName = [...new Set(playerStats.map(item => item.gamePlayerStatsName))];
//console.log( gamePlayerStatsName );
// awayPlayerStats
leaders += ` <div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Passing:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ awayTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Rushing:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ awayTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white tw-border-b tw-pb-2 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Receiving:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ awayTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>`;
// homePlayerStats
leaders += ` <div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Passing:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ homeTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Rushing:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ homeTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-mt-2 tw-px-2 tw-font-medium tw-text-[13px] tw-bg-white tw-border-b tw-pb-2 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-w-1/6 md:tw-w-1/6 tw-py-1tw-text-center"><img src="${ url }img/player-placeholder.png" /></div>
<div class="tw-w-5/6 md:tw-w-5/6 tw-py-1 tw-pl-2 tw-text-left">Receiving:<br><span class="name tw-font-bold">D. Prescott</span> ( ${ homeTeamShortName } ) 28<br />42-58. 403 YDS. 3TD.</div>
</div>`;
break;
}
html += ` <div class="tw-mt-5 tw-w-full tw-h-auto tw-mx-auto tw-text-black tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-max-w-3xl tw-h-auto tw-mx-auto tw-py-5 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-mx-auto tw-mb-4 tw-md:px-0">
<div class="tw-w-full tw-flex tw-flex-row tw-justify-between tw-font-bold tw-text-[13px] tw-bg-[#E4E4E4] ${ ( theme != 'default' ? 'dark:tw-bg-[#56585B] dark:tw-text-white' : '' )}">
<div class="tw-w-1/2 tw-pl-3 tw-py-1 tw-text-left tw-uppercase tw-text-[10px]">FINAL</div>
<div class="tw-w-1/2 tw-pr-3 tw-py-1 tw-text-right tw-uppercase tw-text-[10px]">${ game_date.toLocaleDateString("en-US", date_options) }</div>
</div>
${ gameStats }
<div class="tw-w-full tw-flex tw-flex-row tw-py-4 tw-px-2 tw-font-medium tw-text-[13px] tw-border-b tw-bg-white tw-border-[#DCDDDF] ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-border-[#5E6063] dark:tw-text-[#D1D1D2]' : '' )}">
<div class="tw-w-1/3 md:tw-w-1/3 tw-text-center"><a class="tw-underline tw-font-bold" href="#">Box Score</a></div>
<div class="tw-w-1/3 md:tw-w-1/3 tw-text-center"><a class="tw-underline tw-font-bold" href="#">Recap</a></div>
<div class="tw-w-1/3 md:tw-w-1/3 tw-text-center"><a class="tw-underline tw-font-bold" href="#">Play By Play</a></div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-justify-between tw-mt-5 tw-px-2 tw-font-bold tw-text-[13px] tw-bg-white tw-pb-2 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<h2>COMPLETE LEADERS</h2>
</div>
${ leaders }
</div>
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
}
/**
* SD23 - Team Stats Widget
*
*/
async sd23() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 500 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const teamShortName = this.config.teamShortName;
const data = JSON.parse(this.message);
let html = '';
// Exit if no data found
if ( data == 'Error' || data == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(data.length > 0) {
// Create the UI for the response in html format
html += `<div class="tw-mt-5 tw-full tw-h-auto tw-text-black tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-max-w-3xl tw-h-auto tw-mx-auto tw-py-3">
<div class="tw-w-full tw-text-center">
<div class="font-mulish tw-w-full tw-font-bold tw-text-[10px] tw-p-2 tw-text-center tw-border-b-[1px] tw-bg-[#E4E4E4] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#56585B] dark:tw-text-white' : '' )}">
<strong>TEAM RANKED STATS 2021-2022</strong> REGULAR SEASON
</div>
</div>
<div class="tw-w-full tw-text-black tw-bg-white tw-mx-auto tw-my-4 ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="font-mulish tw-text-[10px] tw-w-full tw-flex tw-flex-row tw-bg-white tw-font-bold tw-uppercase tw-text-center tw-border-b tw-border-gray-300 ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#313337] dark:tw-text-white' : '' )}">
<div id="tab-ofense" class="tabs tw-w-1/2 tw-py-3 tw-text-[#176D8C] tw-font-extrabold tw-border-b-2 tw-border-[#176D8C]">OFFENSE</div>
<div id="tab-defense" class="tabs tw-w-1/2 tw-py-3 hover:tw-text-[#176D8C] hover:tw-border-b-2 hover:tw-border-[#176D8C]">DEFENSE</div>
</div>
</div>
<div class="tw-w-full tw-pb-3 tw-flex-shrink-0 tw-h-full tw-text-center tw-snap-center tw-text-black ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-white' : '' )}">
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-medium tw-uppercase tw-text-center tw-text-[#1B1D22] tw-text-[12px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">
<div class="tw-w-1/3 grow-0 tw-p-2 tw-text-left">STAT</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">RECORD</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">RANK</div>
</div>
<div class="contenttab tab-ofense tw-w-full tw-flex tw-flex-col tw-flex-shrink-0">
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-border-b-[1px] tw-bg-[#e8e9ea] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22] dark:tw-text-white' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-left">Points Per Game</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">134.55</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Rk 26th</div>
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-border-b-[1px] tw-bg-[#f3f3f3] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22] dark:tw-text-white' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-left">Touch downs Per Game</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">134.55</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Rk 26th</div>
</div>
</div>
<div class="contenttab tab-defense tw-w-full tw-hidden tw-flex-col tw-flex-shrink-0">
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-border-b-[1px] tw-bg-[#e8e9ea] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22] dark:tw-text-white' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-left">Fumbles Per Game</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">134.55</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Rk 26th</div>
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-font-regular tw-text-[12px] tw-border-b-[1px] tw-bg-[#f3f3f3] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22] dark:tw-text-white' : '' )}">
<div class="tw-w-1/3 tw-p-2 tw-text-left">Points Per Game</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">134.55</div>
<div class="tw-w-1/3 tw-p-2 tw-text-center">Rk 26th</div>
</div>
</div>
</div>
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
this.addListeners();
}
/**
* SD25 - Injuries Widget
*
*/
async sd25() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 434 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const data = JSON.parse(this.message);
const leagues = [ 'NHL', 'NBA', 'NFL' ];
const validLeague = leagues.indexOf(leagueName.toUpperCase()) > -1; //console.log(leagueName, validLeague);
let html = '';
let injuries = '';
// Exit if no data found
if ( data == 'Error' || data == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(data.length > 0) {
// loop through the filtered response and create the html to be rendered
data.forEach( function(item) {
let date_options = { }; // weekday: "short", month: "short", day: "numeric"
let time_options = { hour:"numeric", minute:"numeric"};
let game_date = new Date(item.injuryStartDate);
// Create the UI for the response in html format
injuries += ` <div class="tw-font-medium tw-text-[14px] tw-py-2 tw-border-b-[1px] tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063]' : '' )}">
<div class="tw-w-full tw-flex tw-flex-row tw-font-bold tw-text-sm tw-text-zinc-900 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-[#ffffff]' : '' )}">
<div class="${ ( validLeague ? 'tw-w-1/6' : 'tw-hidden' ) } tw-text-center">
<div class="${ ( validLeague ? 'tw-w-full' : 'tw-hidden' ) } tw-text-center">
<img loading="lazy" class="${ ( leagueName.toUpperCase() === item.leagueName.toUpperCase() ? 'tw-block' : 'tw-hidden' ) } tw-w-10 tw-h-10 tw-mx-auto tw-my-1" src="${ url }img/football/nfl.png">
<!-- img loading="lazy" class="${ ( leagueName.toUpperCase() === item.leagueName.toUpperCase() ? 'tw-block' : 'tw-hidden' ) } tw-w-10 tw-h-10 tw-mx-auto tw-my-1" src="${ url }img/basketball/nba.png" -->
</div>
</div>
<div class="${ ( validLeague ? 'tw-w-2/6 ' : 'tw-w-3/6 ' ) } tw-flex tw-items-center tw-text-left"> ${ item.playerFirstName + ' ' + item.playerLastName } </div>
<div class="tw-w-1/6 tw-flex tw-items-center tw-justify-center tw-text-center tw-font-bold"> ${ item.playerPositionTypeShort } </div>
<div class="tw-w-2/6 tw-flex tw-items-center tw-text-left tw-font-medium tw-text-cyan-700 ${ ( theme != 'default' ? 'dark:tw-text-cyan-400 ' : '' )}">
${ item.injuryLocation + ' ' + item.injuryStatus }
</div>
</div>
<div class="tw-w-full tw-text-sm tw-text-zinc-900 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-[#ffffff]' : '' )}">
<div class="tw-w-full tw-text-left"><strong>Status:</strong> ${ game_date.toLocaleDateString("en-US", date_options) } </div>
<div class="tw-w-full tw-text-left"><strong>Notes:</strong> ${ item.injuryNote } </div>
</div>
</div>`;
});
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-3 tw-px-2 tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#484A4E] dark:tw-text-white' : '' )}">
<div class="tw-max-w-3xl tw-overflow-y-auto tw-max-h-auto tw-mx-auto tw-my-5">
<div class="tw-w-full tw-text-center">
<div class="font-mulish tw-w-full tw-font-bold tw-text-base tw-text-center tw-text-zinc-900 tw-border-b tw-bg-neutral-200 tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#56585B] dark:tw-text-white' : '' )}">
INJURIES
</div>
<div class="font-exo tw-w-full tw-flex tw-flex-row tw-py-1 tw-font-medium tw-uppercase tw-text-center tw-text-[12px] tw-text-[#1B1D22] tw-border-b tw-border-b-[#D1D1D2] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-text-[#D1D1D2]' : '' )}">
<div class="${ ( validLeague ? 'tw-w-1/6' : 'tw-hidden' ) } tw-flex tw-items-center tw-text-left">
${ ( validLeague ? 'PLAYER' : '' ) }
</div>
<div class="${ ( validLeague ? 'tw-w-2/6 ' : 'tw-w-3/6 ' ) } tw-flex tw-items-center tw-text-left">
${ ( validLeague ? '' : 'PLAYER' ) }
</div>
<div class="tw-w-1/6 tw-flex tw-items-center tw-justify-center tw-text-center">POS</div>
<div class="tw-w-2/6 tw-flex tw-items-center tw-text-left">INJURY</div>
</div>
</div>
<div class="tw-w-full tw-max-h-80 tw-overflow-auto tw-mx-auto font-mulish thin-scrollbar">
${ injuries }
</div>
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-text-zinc-900 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
}
/**
* SD29 - Game Consensus Widget
*
*/
async sd29() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 230 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const filter = this.config.filter;
const filterValue = this.config.filterValue;
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const odds = JSON.parse(this.message);
let colorOne = `tw-bg-[#F3F3F3] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22] dark:tw-border-[#5E6063]' : '' )}`;
let colorTwo = `tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#313337] dark:tw-border-[#5E6063]' : '' )}`;
let html = '';
let awayTeamShortName;
let homeTeamShortName;
let gameDateTime;
let venueLocationCity;
let favoriteTeam;
// Exit if no data found
if ( odds == 'Error' || odds == 'No Data Found' ) {
this.errorInResponse();
return;
}
// filtering the response based on the filter and filter value
const filtered = odds.filter( function(item) {
let teams;
switch (filter) {
case 'byGame': // split the filterValue into an array of teams, first param is home, second param is away
teams = filterValue.split(':');
if ( item.homeTeamShortName === teams[0] && item.awayTeamShortName === teams[1]) {
awayTeamShortName = item.awayTeamShortName;
homeTeamShortName = item.homeTeamShortName;
gameDateTime = item.gameDateTime;
venueLocationCity = item.venueLocationCity;
return item;
}
break;
case 'byGames': // split the filterValue into an array of teams, first param is home, second param is away
teams = filterValue.split(':');
if (
(item.homeTeamShortName === teams[0] && item.awayTeamShortName === teams[1])
||
(item.homeTeamShortName === teams[1] && item.awayTeamShortName === teams[0])
) { return item; }
break;
case 'byTeam': // return all games for the team
if ( item.homeTeamShortName === filterValue || item.awayTeamShortName === filterValue ) { return item; } break;
default: // return all games in the league
return item;
}
});
// customizing the date format
let date_options = { }; // weekday: "short", month: "short", day: "numeric"
let time_options = { hour:"numeric", minute:"numeric"};
let game_date = new Date(gameDateTime);
// GetBetByGame to get the team's bet for the game
this.config.awayTeamShortName = awayTeamShortName;
this.config.homeTeamShortName = homeTeamShortName;
this.config.endpoint = 'GetBetByGame';
await this.loadFromApi();
const bets = JSON.parse(this.message);
// Exit if no data found
if ( bets == 'Error' || bets == 'No Data Found' ) {
this.errorInResponse();
return;
}
// GetWeather to get the game's weather
delete this.config.seasonName;
delete this.config.gameDateTime;
delete this.config.sportName;
delete this.config.leagueName;
delete this.config.awayTeamShortName;
delete this.config.homeTeamShortName;
this.message = '';
this.config.endpoint = 'GetWeather';
this.config.fromDate = game_date.getFullYear() + '-' + ( ( game_date.getMonth() + 1 ) < 10 ? '0' + ( game_date.getMonth() + 1 ) : ( game_date.getMonth() + 1 ) ) + '-' + ( game_date.getDate() < 10 ? '0' + game_date.getDate() : game_date.getDate() ) + ' ' + ( game_date.getHours() < 10 ? '0' + game_date.getHours() : game_date.getHours() ) + ':' + ( game_date.getMinutes() < 10 ? '0' + game_date.getMinutes() : game_date.getMinutes() ) + ':' + ( game_date.getSeconds() < 10 ? '0' + game_date.getSeconds() : game_date.getSeconds() );
//console.log(this.config.fromDate);
this.config.toDate = game_date.getFullYear() + '-' + ( ( game_date.getMonth() + 1 ) < 10 ? '0' + ( game_date.getMonth() + 1 ) : ( game_date.getMonth() + 1 ) ) + '-' + ( game_date.getDate() < 10 ? '0' + game_date.getDate() : game_date.getDate() ) + ' ' + ( ( game_date.getHours() + 1 ) < 10 ? '0' + ( game_date.getHours() + 1 ) : ( game_date.getHours() + 1 ) ) + ':' + ( game_date.getMinutes() < 10 ? '0' + game_date.getMinutes() : game_date.getMinutes() ) + ':' + ( game_date.getSeconds() < 10 ? '0' + game_date.getSeconds() : game_date.getSeconds() );
//console.log(this.config.toDate);
this.config.cityName = venueLocationCity;
this.config.transientRequired = 'false';
//this.loadFromApi();
//const schedule = JSON.parse(this.message); console.log(schedule);
// if the filtered response not empty process the response into html
if(filtered.length > 0) {
// loop through the filtered response and create the html to be rendered
filtered.forEach( function(item) {
// get the favorite team's bet
if ( item.awaySpread < item.homeSpread ) { favoriteTeam = item.awayTeamShortName; }
else { favoriteTeam = item.homeTeamShortName; }
// Create the UI for the response in html format
html += `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-max-w-3xl tw-flex tw-flex-row tw-mx-auto tw-mb-1 tw-py-1 font-mulish tw-font-bold tw-text-[10px] tw-bg-[#F3F3F3] ${ ( theme != 'default' ? 'dark:tw-bg-[#56585B]' : '' )}">
<div class="tw-w-1/2 tw-pl-3 tw-text-left tw-uppercase tw-text-[#484A4E] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">
${ game_date.toLocaleDateString("en-US", date_options) }
<span class="tw-text-[#1B1D22] ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}"> | ${ game_date.toLocaleTimeString("en-US", time_options) } EST </span>
</div>
<div class="tw-w-1/2 tw-pr-3 tw-text-right tw-text-[#484A4E] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">Wind: 11 mph &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 81&deg; <i class="fas fa-sun"></i></div>
</div>
<div class="tw-max-w-3xl tw-flex tw-flex-row tw-mx-auto tw-py-2 font-mulish tw-font-bold tw-text-[10px] tw-bg-[#F3F3F3] tw-text-[#484A4E] ${ ( theme != 'default' ? 'dark:tw-text-white dark:tw-bg-[#56585B]' : '' )}">
<div class="tw-w-full tw-pl-3 tw-text-center"> ${ item.venueName } </div>
</div>
<div class="tw-max-w-3xl tw-flex tw-mx-auto tw-bg-white ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-28 tw-mx-auto tw-text-center tw-uppercase font-exo tw-font-medium tw-text-[15px] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2]' : '' )}">
<div class="tw-w-full">
<div class="tw-py-1 tw-mb-3 tw-text-[#484A4E] tw-text-center font-exo tw-font-bold tw-text-[9px] tw-border-b-[1px] tw-border-b-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2] dark:tw-bg-[#313337]' : '' )}">
Team
</div>
<div class="tw-flex tw-py-2 tw-items-center">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.awayTeamShortName }.png">
${ item.awayTeamShortName }
</div>
<div class="tw-flex tw-py-2 tw-items-center">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.homeTeamShortName }.png">
${ item.homeTeamShortName }
</div>
</div>
</div>
<div class="tw-w-full tw-flex tw-overflow-x-auto tw-scrollbar-hide tw-snap-x">
<div class="tw-w-full tw-flex tw-flex-col tw-text-center">
<div class="tw-w-full tw-flex tw-mb-3 tw-text-center font-exo tw-font-regular tw-text-[9px] tw-uppercase">
<div class="tw-w-full tw-min-w-[100px] tw-py-1 tw-border-b-[1px] tw-border-b-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2] dark:tw-bg-[#313337]' : '' )}">Spread</div>
<div class="tw-w-full tw-min-w-[100px] tw-py-1 tw-border-b-[1px] tw-border-b-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2] dark:tw-bg-[#313337]' : '' )}">ML</div>
<div class="tw-w-full tw-min-w-[100px] tw-py-1 tw-border-b-[1px] tw-border-b-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2] dark:tw-bg-[#313337]' : '' )}">Total</div>
<div class="tw-w-full tw-min-w-[100px] tw-py-1 tw-border-b-[1px] tw-border-b-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2] dark:tw-bg-[#313337]' : '' )}">Bet%</div>
<div class="tw-w-full tw-min-w-[100px] tw-py-1 tw-border-b-[1px] tw-border-b-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2] dark:tw-bg-[#313337]' : '' )}">Money%</div>
<div class="tw-w-full tw-min-w-[100px] tw-py-1 tw-mr-2 tw-border-b-[1px] tw-border-b-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-text-[#D1D1D2] dark:tw-bg-[#313337]' : '' )}">Consensus</div>
</div>
<div class="tw-w-full tw-flex tw-py-1 tw-mb-3 tw-text-center tw-gap-1 font-exo tw-font-bold tw-text-[12px] tw-text-black ${ ( theme != 'default' ? 'dark:tw-text-white' : '' )}">
<div class="tw-w-full tw-min-w-[100px]">
<div class="tw-py-2 tw-mb-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorOne } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
${ item.awaySpread } ${ ( item.awaySpreadAmount == 100 ? 'Ev' : item.awaySpreadAmount ) }
</div>
<div class="tw-py-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorTwo } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337]' : '' )}">
${ item.homeSpread } ${ ( item.homeSpreadAmount == 100 ? 'Ev' : item.homeSpreadAmount ) }
</div>
</div>
<div class="tw-w-full tw-min-w-[100px]">
<div class="tw-py-2 tw-mb-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorOne } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
${ ( !item.awayMoneyLine ? '-' : ( item.awayMoneyLine > 0 ? '+'+item.awayMoneyLine : item.awayMoneyLine ) ) }
</div>
<div class="tw-py-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorTwo } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337]' : '' )}">
${ ( !item.homeMoneyLine ? '-' : ( item.homeMoneyLine > 0 ? '+'+item.homeMoneyLine : item.homeMoneyLine ) ) }
</div>
</div>
<div class="tw-w-full tw-min-w-[100px]">
<div class="tw-py-2 tw-mb-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorOne } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
${ ( !item.totalPoints ? '' : ( item.totalPoints > 0 ? '' + item.totalPoints : item.totalPoints ) ) }
${ ( !item.overTotalPointsAmount ? '' : ( item.overTotalPointsAmount > 0 ? '+' + item.overTotalPointsAmount + 'o' : item.overTotalPointsAmount + 'o' ) ) }
</div>
<div class="tw-py-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorTwo } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337]' : '' )}">
${ ( !item.totalPoints ? '' : ( item.totalPoints > 0 ? '' + item.totalPoints : item.totalPoints ) ) }
${ ( !item.underTotalPointsAmount ? '' : ( item.underTotalPointsAmount > 0 ? '+' + item.underTotalPointsAmount + 'o' : item.underTotalPointsAmount + 'u' ) ) }
</div>
</div>
<div class="tw-w-full tw-min-w-[100px]">
<div class="tw-py-2 tw-mb-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorOne } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
${ bets.filter( team => awayTeamShortName == team.chosenTeamShortName )[0].betPercentage }%
</div>
<div class="tw-py-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorTwo } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337]' : '' )}">
${ bets.filter( team => homeTeamShortName == team.chosenTeamShortName )[0].betPercentage }%
</div>
</div>
<div class="tw-w-full tw-min-w-[100px]">
<div class="tw-py-2 tw-mb-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorOne } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
${ bets.filter( team => awayTeamShortName == team.chosenTeamShortName )[0].moneyPercentage }%
</div>
<div class="tw-py-2 tw-border-[1px] tw-rounded-[5px] tw-border-[#D1D1D2] ${ colorTwo } tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-[#313337]' : '' )}">
${ bets.filter( team => homeTeamShortName == team.chosenTeamShortName )[0].moneyPercentage }%
</div>
</div>
<div class="tw-w-full tw-min-w-[100px]">
<div class="img-consensus tw-h-full tw-py-2 tw-mr-2 tw-border tw-rounded-[5px] tw-border-[#D1D1D2] tw-bg-[#F3F3F3] tw-text-center ${ ( theme != 'default' ? 'dark:tw-bg-transparent' : '' )}">
<div class="tw-inline-block tw-leading-[21px]">
<img loading="lazy" class="tw-w-9 tw-h-9 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ favoriteTeam }.png">
${ bets.filter( team => team.homeTeamName == team.chosenTeamName )[0].consensus }%
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;
});
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
}
/**
* SD45 - Next Games Widget
*
*/
async sd45() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 400 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const id = this.selector.id;
const data = JSON.parse(this.message);
const sports = this.sports;
let leagues = '';
let html = '';
let teams = '';
// Exit if no data found
if ( data == 'Error' || data == 'No Data Found' ) {
this.errorInResponse();
return;
}
// Creating the dynamic dropdown menu for the leagues
sports.forEach(function (sport) {
if ( sport[2] == 1) {
leagues += `<div id="${ sport[0] }" class="league tw-flex tw-justify-around tw-text-center tw-border tw-rounded tw-border-transparent hover:tw-drop-shadow-md hover:tw-border-[#D1D1D2] hover:tw-cursor-pointer ${ ( leagueName == sport[0] ? 'tw-block' : 'tw-hidden' ) }">
<div class="tw-flex"><img loading="lazy" class="tw-w-9 tw-h-9 tw-mx-auto tw-my-1" src="${ url }img/${ sport[1].toLowerCase() }/${ sport[0] }.png"></div>
<div class="tw-flex tw-grow tw-h-auto tw-mx-3 tw-align-middle tw-items-center tw-text-left">${ sport[0] == 'wc' ? 'FIFA' : sport[0].toUpperCase() }</div>
</div>`;
}
});
// if the filtered response not empty process the response into html
if ( data.length > 0 ) {
if ( data != 'No Data Found') {
// loop through the filtered response and create the html to be rendered
data.forEach( function(item) {
let date_options = { }; // weekday: "short", month: "short", day: "numeric"
let game_date = new Date(item.gameDateTime);
let time_options = { hour:"numeric", minute:"numeric"};
// Create the UI for the response in html format
teams += ` <div class="tw-max-w-3xl tw-bg-white tw-mx-auto tw-mb-3 ${ ( theme != 'default' ? ' dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-w-full tw-flex tw-flex-row tw-justify-between tw-py-1 tw-font-medium tw-text-[10px] tw-bg-[#F3F3F3] ${ ( theme != 'default' ? ' dark:tw-bg-[#313337]' : '' )}">
<div class="tw-w-1/2 tw-pl-3 tw-text-left tw-uppercase ${ ( theme != 'default' ? ' dark:tw-text-[#D1D1D2]' : '' )}">${ game_date.toLocaleDateString("en-US", date_options) }</div>
<div class="tw-w-1/2 tw-pr-3 tw-text-right tw-uppercase ${ ( theme != 'default' ? ' dark:tw-text-[#FFFFFF]' : '' )}">${ game_date.toLocaleTimeString("en-US", time_options) } EST</div>
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-gap-2 tw-px-3 tw-py-2 font-exo tw-font-regular tw-text-[12px]">
<div class="tw-w-1/2 tw-flex tw-uppercase ${ ( theme != 'default' ? ' dark:tw-text-white' : '' )}">
<div class="tw-w-full tw-flex tw-text-center tw-items-center tw-font-bold">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.awayTeamShortName }.png">
<div class="tw-block md:tw-hidden">${ item.awayTeamShortName }</div>
<div class="tw-hidden md:tw-block">${ item.awayTeamNickName }</div>
</div>
</div>
<div class="tw-w-1/2 tw-py-1 tw-text-right ${ ( theme != 'default' ? ' dark:tw-text-white' : '' )}"> ${ item.awayTeamWins + ' - ' + item.awayTeamTies + ' - ' + item.awayTeamLosses } </div>
</div>
<div class="tw-w-[90%] tw-h-px tw-mx-auto tw-border-b tw-border-gray-300 ${ ( theme != 'default' ? 'dark:tw-border-[#484A4E]' : '' )}">
</div>
<div class="tw-w-full tw-flex tw-flex-row tw-gap-2 tw-px-3 tw-py-2 font-exo tw-font-regular tw-text-[12px] tw-border-b tw-border-gray-300 ${ ( theme != 'default' ? ' dark:tw-border-[#484A4E]' : '' )}">
<div class="tw-w-1/2 tw-flex tw-uppercase ${ ( theme != 'default' ? ' dark:tw-text-white' : '' )}">
<div class="tw-w-full tw-flex tw-text-center tw-items-center tw-font-bold">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.hometeamShortName }.png">
<div class="tw-block md:tw-hidden">${ item.hometeamShortName }</div>
<div class="tw-hidden md:tw-block">${ item.homeTeamNickName }</div>
</div>
</div>
<div class="tw-w-1/2 tw-py-1 tw-text-right ${ ( theme != 'default' ? ' dark:tw-text-white' : '' )}"> ${ item.homeTeamWins + ' - ' + item.homeTeamTies + ' - ' + item.homeTeamLosses } </div>
</div>
</div>`;
});
}
else {
teams = '<div class="tw-max-w-3xl tw tw-rounded-[5px]-mx-auto tw-bg-white tw-my-4 tw-px-6 tw-py-2 tw-text-center tw-md:px-0">No Data Found</div>';
}
html += ` <div class="tw-w-[285px] tw-h-[418px] tw-mx-auto tw-py-2 tw-bg-[#FFFFFF] ${ ( theme != 'default' ? ' dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-max-w-3xl tw-overflow-y-auto tw-max-h-auto tw-mx-auto tw-my-5">
<div class="barbutton tw-flex tw-px-4 tw-py-2 tw-mb-2 tw-text-center font-montserrat tw-font-bold tw-text-[14px] tw-border tw-rounded-[5px] tw-border-[#D1D1D2] tw-bg-[#F3F3F3] ${ ( theme != 'default' ? ' dark:tw-bg-[#1B1D22] tw-text-[#1B1D22] dark:tw-text-[#FAF5F5]' : '' )}">
<div class="tw-grow">
${ leagues }
</div>
<div class="tw-w-5 tw-h-full tw-mx-auto tw-cursor-pointer">
<img loading="lazy" id="leagueSwitch-${ id }" data-menu="closed" class="tw-w-5 tw-h-4 tw-mx-auto tw-mt-4 tw-p-1 tw-cursor-pointer tw-border tw-rounded tw-border-transparent hover:tw-drop-shadow-md hover:tw-border-[#D1D1D2]" src="${ url }img/ic_arrow_drop_up_24px.png">
</div>
</div>
<div class="tw-w-full tw-max-h-80 tw-overflow-auto tw-mx-auto tw-px-2 thin-scrollbar">
${ teams }
</div>
</div>
</div>`;
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
this.addListeners();
}
/**
* SD46 - Betting Trends Widget
*
*/
async sd46() {
const theme = this.config.theme;
const url = this.app.url;
// load data from the api
this.loadingMessage( 90 ); // Show the loading message
await this.loadFromApi();
// initialize the variables to process the response
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const data = JSON.parse(this.message);
let html = '';
// Exit if no data found
if ( data == 'Error' || data == 'No data found' ) {
this.errorInResponse();
return;
}
// if the filtered response not empty process the response into html
if(data.length > 0) {
// loop through the filtered response and create the html to be rendered
data.forEach( function(item) {
// Create the UI for the response in html format
html += `<div class="tw-w-full tw-mx-auto tw-py-5 tw-bg-[#FFFFFF] ${ ( theme != 'default' ? ' dark:tw-bg-[#484A4E]' : '' )}">
<div class="tw-my-5 tw-mx-2">
<div class="tw-flex-nowrap tw-gap-2 tw-mx-auto md:tw-flex">
<div class="tw-py-4 tw-mb-2 md:tw-w-1/2 tw-w-full tw-flex-nowrap tw-bg-[#F3F3F3] tw-border-b-8 tw-border-[#CE1141] tw-rounded-t-[5px] tw-text-center font-exo ${ ( theme != 'default' ? 'dark:tw-text-white dark:tw-bg-[#56585B]' : '' )}">
<div class="tw-w-full tw-flex tw-justify-center tw-text-center tw-font-bold tw-text-[18px]">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ item.teamShortName }.png">
<div class="tw-block md:tw-hidden"> ${ item.teamShortName } </div>
<div class="tw-hidden md:tw-block"> ${ item.teamName } </div>
</div>
<div class="tw-w-full tw-font-semibold tw-text-[12px]"> ${ item.trends } </div>
</div>
</div>
</div>
</div>`;
});
}
// if the filtered response is empty, create the html "No data found" to be rendered
else {
html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
}
this.message = html;
this.render();
}
/**
* Add the event listeners to the widgets
*
*/
addListeners() {
let selector = this.selector.id;
const leagueName = this.config.leagueName;
switch ( this.config.widget ) {
case 'sd2': // event listener to open/close the league switcher menu
const switchbutton = document.getElementById( selector ).querySelector('.switchbutton');
switchbutton.addEventListener('click', (e) => {
this.openLeagueMenu( selector );
});
// event listener to render the selected league
const leagues = document.getElementById( selector ).querySelectorAll('.league');
leagues.forEach( league => {
if ( league.id != leagueName ) {
league.addEventListener('click', (e) => {
this.reloadWidget( league.id, 'sd2' );
});
}
});
// Activate the scroll navigation with mouse wheel for Windows
document.addEventListener('wheel', (e) => {
if (navigator.appVersion.indexOf('Mac') != -1) return;
else document.getElementById('scroll_container').scrollLeft += e.deltaY;
});
// Button to scroll to the right
document.getElementById('lottie_scroll_r').addEventListener('click', (e) => {
document.getElementById('scroll_container').scrollLeft += 100;
});
// Button to scroll to the left
document.getElementById('lottie_scroll_l').addEventListener('click', (e) => {
document.getElementById('scroll_container').scrollLeft += -100;
});
break;
case 'sd3': // event listener to select betOn/betAgainst's tabs
const tabs = document.getElementById(selector).querySelectorAll('.tabs');
tabs.forEach( tab => {
tab.addEventListener('click', () => {
this.tabSelector( tab.id, selector ); //console.log('Selecting: ' + selector +' ' + tab.id );
});
});
break;
case 'sd5': // event listener to select date's tabs
let arr = this.config.addListeners;
arr.forEach( item => {
// Read the dom object and add the click event listener
const element = document.getElementById( item );
element.addEventListener('click', () => {
this.selectTab( item );
});
});
break;
case 'sd7': // event listener to select bet percentage or money percentage's tabs
const tabOptions = document.getElementById(selector).querySelectorAll('.tabs');
tabOptions.forEach( tab => {
tab.addEventListener('click', () => {
//console.log('Selecting: ' + selector +' ' + tab.id );
this.tabSelector( tab.id, selector );
});
});
break;
case 'sd12': // event listener to select ml, ats or o/u's records tabs
const tabsOptions = document.getElementById(selector).querySelectorAll('.tabs');
tabsOptions.forEach( tab => {
tab.addEventListener('click', () => {
//console.log('Selecting: ' + selector +' ' + tab.id );
this.tabSelector( tab.id, selector );
});
});
break;
case 'sd17': // listener for prev and next buttons
const prev = document.getElementById( selector ).querySelector('.prev');
const next = document.getElementById( selector ).querySelector('.next');
prev.addEventListener('click', () => {
this.prevNext( selector, 'prev' );
});
next.addEventListener('click', () => {
this.prevNext( selector, 'next' );
});
break;
case 'sd23': // event listener to select ml, ats or o/u's records tabs
const tabsranked = document.getElementById(selector).querySelectorAll('.tabs');
tabsranked.forEach( tab => {
tab.addEventListener('click', () => {
//console.log('Selecting: ' + selector +' ' + tab.id );
this.tabSelector( tab.id, selector );
});
});
break;
case 'sd45': // event listener to open/close the league switcher menu
const barbutton = document.getElementById( selector ).querySelector('.barbutton');
barbutton.addEventListener('click', (e) => {
this.openLeagueMenu( selector );
});
// read all the .league elements and add event listener to each of them, send the league.id to sd45Reload()
const leagueOptions = document.getElementById( selector ).querySelectorAll('.league');
leagueOptions.forEach( item => {
if ( item.id != leagueName ) {
item.addEventListener('click', (e) => {
this.reloadWidget( item.id, 'sd45' );
});
}
});
break;
}
}
/**
* @param {number} resultsLength - The total number of results in the dataset
* @param {number} resultsPerPage - The number of results per page
* @returns {number} - The number of blocks
*
*/
pagination( resultsLength, resultsPerPage ) {
// Variables
let result, mod, block, fwd;
// Calculate the number of blocks
result = resultsLength / resultsPerPage;
mod = resultsLength % resultsPerPage;
fwd = parseInt(result) + 1;
block = mod == 0 ? result : fwd;
return parseInt(block);
}
/**
* @param {string} selector - The id of the widget
* @param {string} direction - The direction of the pagination {prev|next}
* @returns {void}
*
*/
prevNext( selector, direction ) {
let currentBlock;
let matches = document.getElementById( selector ).querySelector('.matches');
const dataSet = matches.getAttribute('data-set');
const prev = document.getElementById( selector ).querySelector('.prev');
const next = document.getElementById( selector ).querySelector('.next');
let pagination = this.pagination( this.config.filtered.length, this.config.resultsPerPage ); //console.log('pagination: ' + pagination);
// Calculate pagination
if ( direction == 'next' ) {
currentBlock = parseInt(dataSet) + 1;
if ( currentBlock > 1 ) {
prev.classList.remove('tw-text-stone-400');
prev.classList.add('tw-cursor-pointer');
}
if ( currentBlock >= pagination ) {
next.classList.add('tw-text-stone-400');
next.classList.remove('tw-cursor-pointer');
}
}
if ( direction == 'prev' ) { //console.log('prev');
currentBlock = parseInt(dataSet) - 1;
if ( currentBlock <= 1 ) {
prev.classList.add('tw-text-stone-400');
prev.classList.remove('tw-cursor-pointer');
}
if ( currentBlock < pagination ) {
next.classList.remove('tw-text-stone-400');
next.classList.add('tw-cursor-pointer');
}
}
// avoid to go beyond the pagination
if ( currentBlock < 1 || currentBlock > pagination ) { //console.log('currentBlock: ' + currentBlock + ' is out of range');
}
else {
matches.setAttribute('data-set', currentBlock);
// loop through the filtered response and create the html to be rendered
matches.innerHTML = this.matchList( currentBlock );
}
}
/**
* @param {number} currentBlock - current block of results
* @returns {string} - html with the matches within the currentBlock to be rendered
*
*/
matchList( currentBlock ) {
const theme = this.config.theme;
const url = this.app.url;
const sportName = this.config.sportName;
const leagueName = this.config.leagueName;
const filtered = this.config.filtered;
const resultsPerPage = this.config.resultsPerPage;
const filterValue = this.config.filterValue;
let matches = '';
let cont = 1;
const range = this.calculateRange( currentBlock, resultsPerPage ); //console.log(range);
// loop through the filtered response and create the html to be rendered
filtered.forEach( function(item) {
let date_options = { month: "short", day: "numeric", year: "numeric" };
let time_options = { hour:"numeric", minute:"numeric"};
let game_date = new Date(item.gameDateTime);
// Verify if cont is in rannge
if ( range.indexOf(cont) != -1 ) {
//console.log( cont + " is between (" + range[0] + "," + range[ range.length - 1 ] + ")" );
// Create the UI for the response in html format
matches += `<div class="tw-w-full tw-flex tw-flex-row tw-font-normal tw-text-sm tw-border-b-[1px] tw-text-zinc-900 ${ ( theme != 'default' ? 'dark:tw-border-b-[#5E6063] dark:tw-bg-[#1B1D22]' : '' )}">
<div class="tw-flex tw-items-center tw-w-2/6">
<div class="tw-w-auto tw-mx-auto">${ game_date.toLocaleDateString("en-US", date_options) }</div>
</div>
<div class="tw-w-1/6 tw-py-1 tw-pt-2 tw-text-center tw-text-[9px] tw-bg-[#f8f8f8] ${ ( theme != 'default' ? 'dark:tw-bg-[#2D2E2F]' : '' )}">
${ ( item.awayTeamShortName == filterValue ? 'VS' :'@' ) }
</div>
<div class="tw-w-1/6 tw-py-1 tw-flex tw-items-center tw-bg-[#f8f8f8] ${ ( theme != 'default' ? 'dark:tw-bg-[#2D2E2F]' : '' )}">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-auto" src="${ url }img/${ sportName }/${ leagueName.toLowerCase() }/${ ( item.awayTeamShortName == filterValue ? item.homeTeamShortName : item.awayTeamShortName ) }.png">
</div>
<div class="tw-w-1/6 tw-py-1 tw-text-center tw-bg-[#f8f8f8] ${ ( theme != 'default' ? 'dark:tw-bg-[#2D2E2F]' : '' )}"> ${ ( item.awayTeamShortName == filterValue ? item.homeTeamShortName : item.awayTeamShortName ) } </div>
<div class="tw-w-1/6 tw-flex-1 tw-py-1 tw-text-center">
${ game_date.toLocaleTimeString("en-US", time_options) }
</div>
</div>`;
}
cont++;
});
return matches;
}
/**
* @param {number} currentBlock - current block of the pagination
* @param {number} resultsPerPage - number of results per page
* @returns {array} - array of numbers
*
*/
calculateRange (currentBlock, resultsPerPage) {
let begin = (currentBlock * resultsPerPage - resultsPerPage) < 1 ? 1 : currentBlock * resultsPerPage - resultsPerPage; //console.log('begin: ' + begin);
let end = ( currentBlock * resultsPerPage ); //console.log('end: ' + end);
let arr = [];
for (let i = begin; i <= end; i++) {
arr.push(i);
}
if ( currentBlock >= 2 ) {
arr.splice(0, 1);
}
return arr;
}
/**
* @param {string} selector - selector of the element to be waited
* @returns {Promise} - promise to be resolved
*
*/
waitForElm(selector) {
return new Promise(resolve => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(mutations => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
/**
*
* @param {*} tabId - id of the tab to be activated
* @param {*} selector - id of the parent element
* @returns {void}
*
*/
tabSelector( tabId, selector ) {
const tabs = document.getElementById(selector).querySelectorAll('.tabs');
const contenttab = document.getElementById(selector).querySelectorAll('.contenttab');
// deactivate all the tabs
contenttab.forEach( tab => {
if ( tab.classList.contains('tw-flex') ) {
tab.classList.remove('tw-flex');
tab.classList.add('tw-hidden');
}
});
tabs.forEach( tab => {
if ( tab.classList.contains('tw-font-extrabold') ) {
tab.classList.remove('tw-border-b-2', 'tw-font-extrabold', 'tw-text-[#176D8C]', 'tw-border-[#176D8C]');
tab.classList.add('hover:tw-text-[#176D8C]', 'hover:tw-border-b-2', 'hover:tw-border-[#176D8C]');
}
});
// activate the selected tab
contenttab.forEach( tab => {
if ( tab.classList.contains( tabId ) ) {
tab.classList.remove('tw-hidden');
tab.classList.add('tw-flex');
}
});
tabs.forEach( tab => {
if ( tab.id == tabId ) {
tab.classList.remove('hover:tw-text-[#176D8C]', 'hover:tw-border-b-2', 'hover:tw-border-[#176D8C]');
tab.classList.add('tw-border-b-2', 'tw-font-extrabold', 'tw-text-[#176D8C]', 'tw-border-[#176D8C]');
}
});
}
/**
* @param {string} id - The id of the tab to be selected
* @returns {void}
*
*/
selectTab( id ) {
const tabs = document.getElementsByClassName('tab');
const tabcontent = document.getElementsByClassName('tabcontent');
const active = document.getElementById( id );
const contentactive = document.querySelector('[data-tab="' + id + '"]');
const theme = this.config.theme;
if ( theme != 'default' ) {
for (let i = 0; i < tabcontent.length; i++) {
// remove the active class from all header tabs
if ( tabs[i].classList.contains('tw-font-extrabold') ) tabs[i].classList.remove('tw-border-b-2', 'tw-font-extrabold', 'tw-text-[#176D8C]', 'tw-border-[#176D8C]', 'dark:tw-text-[#23C4FD]', 'dark:tw-border-[#23C4FD]');
tabs[i].classList.add('hover:tw-text-[#176D8C]', 'hover:tw-border-b-2', 'hover:tw-border-[#176D8C]', 'dark:tw-text-[#FFFFFF]');
// remove the active class from all content tabs
tabcontent[i].classList.remove('tw-block');
tabcontent[i].classList.add('tw-hidden');
}
// add the active class to the selected content tab
active.classList.remove('hover:tw-text-[#176D8C]', 'hover:tw-border-b-2', 'hover:tw-border-[#176D8C]', 'dark:tw-text-[#FFFFFF]');
active.classList.add('tw-border-b-2', 'tw-font-extrabold', 'tw-text-[#176D8C]', 'tw-border-[#176D8C]', 'dark:tw-text-[#23C4FD]', 'dark:tw-border-[#23C4FD]');
// add the active class to the selected content tab
contentactive.classList.remove('tw-hidden');
contentactive.classList.add('tw-block');
}
else {
for (let i = 0; i < tabcontent.length; i++) {
// remove the active class from all header tabs
if ( tabs[i].classList.contains('tw-font-extrabold') ) tabs[i].classList.remove('tw-border-b-2', 'tw-font-extrabold', 'tw-text-[#176D8C]', 'tw-border-[#176D8C]', 'dark:tw-text-[#23C4FD]');
tabs[i].classList.add('hover:tw-text-[#176D8C]', 'hover:tw-border-b-2', 'hover:tw-border-[#176D8C]');
// remove the active class from all content tabs
tabcontent[i].classList.remove('tw-block');
tabcontent[i].classList.add('tw-hidden');
}
// add the active class to the selected content tab
active.classList.remove('hover:tw-text-[#176D8C]', 'hover:tw-border-b-2', 'hover:tw-border-[#176D8C]');
active.classList.add('tw-border-b-2', 'tw-font-extrabold', 'tw-text-[#176D8C]', 'tw-border-[#176D8C]');
// add the active class to the selected content tab
contentactive.classList.remove('tw-hidden');
contentactive.classList.add('tw-block');
}
}
/**
* @param {string} id - The id of the league menu to open
* @returns {void}
*
*/
openLeagueMenu( id ) {
const menuOpen = document.getElementById( 'leagueSwitch-' + id ); //console.log(menuOpen);
const leagueOptions = document.getElementById(id).querySelectorAll('.league'); //console.log(leagueOptions);
if ( menuOpen.getAttribute('data-menu') === 'closed' ){
leagueOptions.forEach( item => {
if ( item.id !== this.config.leagueName){
item.classList.remove('tw-hidden');
item.classList.add('tw-block');
}
item.classList.add('tw-mb-1');
});
menuOpen.setAttribute('data-menu', 'open');
menuOpen.classList.add('tw-rotate-180');
}
else {
leagueOptions.forEach( item => {
if ( item.id !== this.config.leagueName){
item.classList.remove('tw-block');
item.classList.add('tw-hidden');
}
item.classList.remove('tw-mb-1');
} );
menuOpen.setAttribute('data-menu', 'closed');
menuOpen.classList.remove('tw-rotate-180');
}
}
/**
* @param {string} leagueName - The name of the league to be displayed
* @param {string} widget - The name of the widget to be displayed
* @returns {void}
*
*/
reloadWidget ( leagueName, widget ) {
const sportnames = this.sports;
// get the sport name when the leagueName matches the leagueName in the sportnames array
let sportName = sportnames.find( item => item[0] === leagueName)[1];
this.config.leagueName = leagueName;
this.config.sportName = sportName;
this[widget]();
}
/**
* @param {number} height - The height of the error message to be displayed without Cumulative Layout Shifting
* @returns {string} - The HTML for the error message
*
*/
errorInResponse( height ) {
const theme = this.config.theme;
const url = this.app.url;
const html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-px-3 tw-text-zinc-900 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
No data found.
</div>
</div>`;
this.message = html;
this.render();
return;
}
/**
* Render the widget's loading message
* @param {number} height - The height of the widget to be rendered without Cumulative Layout Shift
* @returns {string} - The HTML for the loading message
*
*/
loadingMessage( height ) {
const theme = this.config.theme;
const url = this.app.url;
const html = `<div class="tw-w-full tw-h-auto tw-mx-auto tw-py-5 tw-px-3 tw-text-zinc-900 tw-bg-[#E8E8E9] ${ ( theme != 'default' ? 'dark:tw-bg-[#1B1D22]' : '' )}">
<div style="${ ( typeof height !== 'undefined' ? 'min-height:' + height + 'px;' : '') }" class="tw-max-w-3xl tw-mx-auto tw-flex tw-py-2 tw-px-2 tw-rounded-[5px] tw-text-center tw-justify-center tw-items-center tw-bg-white">
<img loading="lazy" class="tw-w-6 tw-h-6 tw-mx-2" src="${ url }img/loading.gif" alt="loading">
Loading data...
</div>
</div>`;
this.message = html;
this.render();
return;
}
/**
* Loads the styles.
* @returns {void}
*/
loadStyles() {
const head = document.getElementsByTagName('head')[0];
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = this.app.url + 'css/app.css';
if ( this.checkSheetLoaded( link ) ) {
//console.log('Loading SD style');
head.appendChild(link);
}
}
/**
* Checks if the stylesheet is loaded.
* @param {string} urlSpec - The stylesheet url.
* @returns {boolean} - True if the stylesheet is loaded, false if not.
*
*/
checkSheetLoaded (urlSpec) {
// get the head element
const head = document.getElementsByTagName('head')[0];
// regex function to find urlSpec in the href value of the links inside the head constant if not found return true
const regex = new RegExp(urlSpec.href.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'i');
const found = Array.prototype.slice.call(head.getElementsByTagName('link')).find(link => regex.test(link.href));
if ( typeof found === 'undefined' ) return true;
return false;
}
/**
* Returns the widget's HTML.
* @returns {string} - The widget's HTML.
*/
render() {
this.selector.innerHTML = this.message;
}
/**
* Inits the Widget.
* @returns {void}
*/
init() {
// Load the embedded styles
this.loadStyles();
// Select the method to be used to render the widget
this.methodSelector();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment