From 7876c7ab3f432e8c4571e4af8ce6cc9501be635f Mon Sep 17 00:00:00 2001 From: salam Date: Sun, 30 Aug 2026 19:05:31 +0200 Subject: [PATCH] wip animate dezimalstellen --- app/Filament/Widgets/StatsMedianAverage.php | 17 +++++++---- resources/js/number-animator.js | 16 +++++++++-- resources/js/number-animator2.js | 31 --------------------- 3 files changed, 25 insertions(+), 39 deletions(-) delete mode 100644 resources/js/number-animator2.js diff --git a/app/Filament/Widgets/StatsMedianAverage.php b/app/Filament/Widgets/StatsMedianAverage.php index c7d9b663..00f8e11e 100644 --- a/app/Filament/Widgets/StatsMedianAverage.php +++ b/app/Filament/Widgets/StatsMedianAverage.php @@ -148,6 +148,10 @@ class StatsMedianAverage extends StatsOverviewWidget } } + // i box 1 3 4 5 devono sempre avere 1 decimale, se il valore รจ 12 fai scrivere 12.0 + // il box 2 sempre un numero intero + // il box 6 sempre a due decimali, se trovi 2 fai scrivere 2.00 + $boxes = []; if ($similar_past_matches != 'none') { @@ -163,7 +167,7 @@ class StatsMedianAverage extends StatsOverviewWidget $boxes[] = Stat::make('Average '.$statistic_type, self::template_box3('Home', 'Away', $value_home, $value_away)) ->description('Team '.$team_position) ->extraAttributes([ - 'x-init' => "animate('average_home', $value_home); animate('average_away', $value_away)", + 'x-init' => "animate('average_home', $value_home, 1); animate('average_away', $value_away, 1)", 'class' => 'box-success', ]); // BOX 6 @@ -179,7 +183,7 @@ class StatsMedianAverage extends StatsOverviewWidget $boxes[] = Stat::make($statistic_type, self::template_box1($expectations_home, $expectations_away)) ->description('Expected Values') ->extraAttributes([ - 'x-init' => "animate('expectations_home', $expectations_home); animate('expectations_away', $expectations_away)", + 'x-init' => "animate('expectations_home', $expectations_home, 1); animate('expectations_away', $expectations_away, 1)", 'class' => 'box-yellow', ]); @@ -197,7 +201,7 @@ class StatsMedianAverage extends StatsOverviewWidget $boxes[] = Stat::make('Average '.$statistic_type, self::template_box3($home_team, $away_team, $value_home, $value_away)) ->description('Team '.$team_position) ->extraAttributes([ - 'x-init' => "animate('average_home', $value_home); animate('average_away', $value_away)", + 'x-init' => "animate('average_home', $value_home, 1); animate('average_away', $value_away, 1)", 'class' => 'box-success', ]); @@ -205,7 +209,7 @@ class StatsMedianAverage extends StatsOverviewWidget $boxes[] = Stat::make('Average '.$statistic_type, self::template_box4($home_team, $away_team, $average_team_home, $average_team_away)) ->description('Team Season') ->extraAttributes([ - 'x-init' => "animate('av_team_home', $average_team_home); animate('av_team_away', $average_team_away)", + 'x-init' => "animate('av_team_home', $average_team_home, 1); animate('av_team_away', $average_team_away, 1)", 'class' => 'box-success', ]); @@ -213,7 +217,7 @@ class StatsMedianAverage extends StatsOverviewWidget $boxes[] = Stat::make('Average '.$statistic_type, self::template_box5('Home', 'Away', $average_league_home, $average_league_away)) ->description('League Season') ->extraAttributes([ - 'x-init' => "animate('av_league_home', $average_league_home); animate('av_league_away', $average_league_away)", + 'x-init' => "animate('av_league_home', $average_league_home, 1); animate('av_league_away', $average_league_away, 1)", 'class' => 'box-success', ]); @@ -221,7 +225,7 @@ class StatsMedianAverage extends StatsOverviewWidget $boxes[] = Stat::make('Odds', self::templateOdds($data, $win, $draw, $lost)) ->description($team_position) ->extraAttributes([ - 'x-init' => "animate('win', $win); animate('draw', $draw); animate('lost', $lost)", + 'x-init' => "animate('win', $win, 2); animate('draw', $draw, 2); animate('lost', $lost, 2)", 'class' => 'box-purple', ]); } @@ -236,6 +240,7 @@ class StatsMedianAverage extends StatsOverviewWidget return $boxes; } + // TEAMPLATE BOX 1 protected function template_box1(float $expectations_home, float $expectations_away): HtmlString diff --git a/resources/js/number-animator.js b/resources/js/number-animator.js index 69e9e137..bd39f3d2 100644 --- a/resources/js/number-animator.js +++ b/resources/js/number-animator.js @@ -1,4 +1,5 @@ -function animate(element, end, duration = 500) { +function animate(element, end, dezimal = 0) { + var duration = 500; var element = document.getElementById(element); const startTime = performance.now(); @@ -20,7 +21,18 @@ function animate(element, end, duration = 500) { // Calculate current value and round to integer const currentCount = Math.round(end * easedProgress * 100) / 100; - element.innerHTML = currentCount; + switch (dezimal) { + case 1: + element.innerHTML = currentCount.toFixed(1); + break; + case 2: + element.innerHTML = currentCount.toFixed(2); + break; + + default: + element.innerHTML = currentCount; + break; + } if (progress < 1) { requestAnimationFrame(updateCount); diff --git a/resources/js/number-animator2.js b/resources/js/number-animator2.js deleted file mode 100644 index 043981ce..00000000 --- a/resources/js/number-animator2.js +++ /dev/null @@ -1,31 +0,0 @@ -function animateValue(id, start, end, duration) { - // assumes integer values for start and end - - var obj = document.getElementById(id); - var range = end - start; - // no timer shorter than 50ms (not really visible any way) - var minTimer = 50; - // calc step time to show all interediate values - var stepTime = Math.abs(Math.floor(duration / range)); - - // never go below minTimer - stepTime = Math.max(stepTime, minTimer); - - // get current time and calculate desired end time - var startTime = new Date().getTime(); - var endTime = startTime + duration; - var timer; - - function run() { - var now = new Date().getTime(); - var remaining = Math.max((endTime - now) / duration, 0); - var value = Math.round(end - remaining * range); - obj.innerHTML = value; - if (value == end) { - clearInterval(timer); - } - } - - timer = setInterval(run, stepTime); - run(); -}