extraContent.blade.php 10.5 KB
@inject('webpackAssets', 'FootyRoom\Support\WebpackAssets')
@inject('frConfig', 'FootyRoom\Config')

<div ng-controller="ExtraContentCtrl" ng-click="onClick()" class="extra-content" ng-init='tabs = {!! json_encode($tabs) !!}'>
	<nav id="ec_tab_menu" class="clearfix">
		<ul>
			@if (isset($guide))
				<li class="simple-tab guide-tab-link" ng-class="{active: activeTab === 'guide'}">
					<a ng-click="activeTab = 'guide'">Guide</a>
				</li>
			@endif

			@if ($tables)
				<li class="simple-tab" ng-class="{active: activeTab === 'tables'}">
					<a ng-click="activeTab = 'tables'">Tables</a>
				</li>
			@endif

			@if ($stats)
				<li class="simple-tab" ng-class="{active: activeTab === 'stats'}">
					<a ng-click="activeTab = 'stats'">Stats</a>
				</li>
			@endif

			@if (count($matches) > 0)
				<li class="simple-tab" ng-class="{active: activeTab === 'fixtures'}">
					<a ng-click="activeTab = 'fixtures'">Fixtures</a>
				</li>
			@endif
		</ul>
	</nav>

	<div id="extra_content" ng-cloak>
		@if ($tables)
			<script type="text/javascript">
				DataStore['tables'] = {!! json_encode($tables) !!};
			</script>
			<div id="ec_table" class="ec-slide-shell" ng-if="activeTab === 'tables'">
				<div ng-include src="'standings'"></div>
			</div>
		@endif

		@if (isset($guide))
			@foreach ($guide['webpackAssets'] as $asset)
				<?php $webpackAssets->require($asset); ?>
			@endforeach
			
			<div id="ec_guide" ng-show="activeTab === 'guide'">
				{!! $guide['html'] !!}
			</div>
		@endif
			
		@if (count($matches) > 0)
			<div ng-controller="leagueCalendarCtrl" ng-if="activeTab === 'fixtures'">
				<script>
					DataStore['matchDays'] = {!! json_encode($matchDays) !!};
					DataStore['matches'] = {!! json_encode($matches) !!};
				</script>
				
				<div fr-datepicker options="datepickerOptions"></div>
				
				<div class="calendar-fixtures" ng-class="{closed: matchesCount > 16 && !interacted}">
					<div ng-repeat="dateGroup in matchesByDate">
						<header class="ls-match-group-header ca-date-header">
							<div class="ls-date" ng-bind=":: dateGroup.date | date:'EEEE, d MMMM'"></div>
						</header>
						<div ng-repeat="match in ::dateGroup.matches" class="ls-match ca-match" fr-ca-match="match">
							@include('competition/calendarMatch')
						</div>
					</div>
					<footer class="ca-fixt-footer text-center clearfix">
						<div class="ca-fixt-utc">All times are in UTC</div>
						<a class="update pointer" ng-click="reload()">Update Scores <span class="icn-reload"></span></a>
					</footer>
					<div class="ca-fixt-more pointer">See More <span class="icn-tick-down"></span></div>
				</div>
			</div>
		@endif

		@if ($stats)
			<div class="ec-slide-shell" ng-if="activeTab === 'stats'">
				<div class="ec-stats-wrap">
					<script type="text/javascript">
						DataStore['stage'] = {!! json_encode($stats) !!};
			    	</script>

			    	<div stat-card type="goals" card-title="Goals" data="data.stage.goalsByPlayer"></div>
			    	<div stat-card type="assists" card-title="Assists" data="data.stage.assistsByPlayer"></div>
			    	<div stat-card type="yellow-cards" card-title="Yellow Cards" data="data.stage.yellowCardsByPlayer"></div>
			    	<div stat-card type="red-cards" card-title="Red Cards" data="data.stage.redCardsByPlayer"></div>
			    </div>

			    <div style="margin: 10px 30px; color: #999;">*Showing stats from all stages of the season</div>
			</div>
		@endif
	</div>
</div>

{{-- Angular Templates --}}

<script type="text/ng-template" id="stage-table">
	<div ng-repeat="table in stage.standings" class="league-table">

		<h2 class="table-title" ng-show="isGroups && stage.type == 'group'">@{{ stage.name }}</h2>
		<h2 class="table-title" ng-show="table.conference">@{{ table.conference }} Conference</h2>
		
		<div class="table-row table-head clearfix">
			<div class="table-cell pointer table-cell--rank" ng-class="{sorted: sortie == 'adjustedRank'}" ng-click="sortBy('adjustedRank', 'asc')">#</div>
			<div class="table-cell table-cell--name"></div>
			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.played.value'}" ng-click="sortBy('data.played.value')">P</div>
			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.wins.value'}" ng-click="sortBy('data.wins.value')">W</div>
			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.draws.value'}" ng-click="sortBy('data.draws.value')">D</div>
			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.defeats.value'}" ng-click="sortBy('data.defeats.value')">L</div>
			<div class="table-cell pointer hidden-xs" ng-class="{sorted: sortie == 'data.goalsfor.value'}" ng-click="sortBy('data.goalsfor.value')">GF</div>
			<div class="table-cell pointer hidden-xs" ng-class="{sorted: sortie == 'data.goalsagainst.value'}" ng-click="sortBy('data.goalsagainst.value')">GA</div>
			<div class="table-cell pointer" ng-class="{sorted: sortie == goalDifference}" ng-click="sortBy(goalDifference)">GD</div>
			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.points.value'}" ng-click="sortBy('data.points.value')">Pts</div>
			<div class="table-cell table-cell--form hidden-xs">Form</div>
			<div class="table-cell table-cell--next hidden-xs">Next</div>
		</div>

		<div class="table-body">
			<div class="table-row clearfix" ng-repeat="team in table.participants | orderBy:sortie:reversed">
				<div class="table-cell table-cell--rank" ng-class="{sorted: sortie == 'adjustedRank'}"><span class="table-rank legend" ng-class="team.spots.join(' ')">@{{team.adjustedRank}}</span></div>
				<div class="table-cell table-cell--name">
					<span title="Previous Rank @{{ team.data.previousRound.rank }}" 
							ng-class="{
								'table-movement table-movement--up icn-tick-up': team.data.currentRound.rank < team.data.previousRound.rank, 
								'table-movement table-movement--down icn-tick-down': team.data.currentRound.rank > team.data.previousRound.rank, 
								'table-movement table-movement--still': team.data.currentRound.rank == team.data.previousRound.rank || !team.data.previousRound.rank}">
					</span>
					<img class="table-badge" ng-src="https://@{{ ds.imagesHost }}/badges/@{{ team.teamId }}" />
					@{{team.name}}
				</div>
				<div class="table-cell" ng-class="{sorted: sortie == 'data.played.value'}">@{{team.data.played.value || 0}}</div>
				<div class="table-cell" ng-class="{sorted: sortie == 'data.wins.value'}">@{{team.data.wins.value || 0}}</div>
				<div class="table-cell" ng-class="{sorted: sortie == 'data.draws.value'}">@{{team.data.draws.value || 0}}</div>
				<div class="table-cell" ng-class="{sorted: sortie == 'data.defeats.value'}">@{{team.data.defeats.value || 0}}</div>
				<div class="table-cell hidden-xs" ng-class="{sorted: sortie == 'data.goalsfor.value'}">@{{team.data.goalsfor.value || 0}}</div>
				<div class="table-cell hidden-xs" ng-class="{sorted: sortie == 'data.goalsagainst.value'}">@{{team.data.goalsagainst.value || 0}}</div>
				<div class="table-cell" ng-class="{sorted: sortie == goalDifference}">@{{goalDifference(team) || 0}}</div>
				<div class="table-cell" ng-class="{sorted: sortie == 'data.points.value'}">@{{team.data.points.value || 0}}</div>
				<div class="table-cell table-cell--form hidden-xs">
					<a ng-href="/matches/@{{ form.matchId }}/-/review"
						class="table-form table-form--@{{ form.result }}"
						ng-repeat="form in team.form"
						title="@{{ form.homeTeam.name }} @{{ form.homeScore }} - @{{ form.awayScore }} @{{ form.awayTeam.name }}">
						@{{ form.result }}
					</a>
				</div>
				<div class="table-cell table-cell--next hidden-xs">
					<a ng-if="team.next" class="table-next-link" ng-href="/matches/@{{ team.next.matchId }}/-/review" title="@{{ team.next.homeTeam.name }} - @{{ team.next.awayTeam.name }}">
						<img class="table-badge table-badge--next" ng-if="team.next.homeTeam.id != team.teamId" src="https://@{{ ds.imagesHost }}/badges/@{{ team.next.homeTeam.id }}" /> 
						<img class="table-badge table-badge--next" ng-if="team.next.awayTeam.id != team.teamId" src="https://@{{ ds.imagesHost }}/badges/@{{ team.next.awayTeam.id }}" />
					</a>
					<span ng-if="!team.next">—</span>
				</div>
			</div>
		</div>

		<div class="table-legend" ng-show="table.legend.length > 0">
			<div class="table-legend-item" ng-repeat="spot in table.legend">
				<span class="table-legend-mark legend" ng-class="spot.code"></span> @{{ spot.name }}
			</div>
		</div>
	
	</div>	
</script>

<script type="text/ng-template" id="stage-tables">
	<div ng-include="'stage-table'" ng-if="(stage.haveTables && (activeTableStage == stage || stage.type == 'group'))"></div>

	<div ng-if="activeTableStage == stage || stage.childrenHaveTables">

		<div ng-repeat="stage in stage.children | orderBy:'name'"
			 ng-include="'stage-tables'"
			 ng-init="tree = treeName(tree, stage.name); showw = (stage.id == currentStage.id || showw == true)">
		</div>
	
	</div>
</script>

<script type="text/ng-template" id="standings-menu">
	<div ng-if="(stage.childrenHaveTables && stage.childrenAreGroups) || (stage.standings && stage.type != 'group')"
		ng-click="setActive(stage)" class="table-select-li">@{{ tree }}</div>
	
	<div ng-repeat="stage in stage.children | orderBy:'name'" ng-init="tree = treeName(tree, stage.name)">
		<div ng-include="'standings-menu'"></div>
	</div>
</script>

<script type="text/ng-template" id="standings">
	<div ng-controller="TablesController">
		<div ng-click="show =! show" class="table-select" ng-show="(data.stages | filter: {childrenHaveTables: true}).length > 1">
			<a href="">@{{ activeTableName }}</a>
		</div>

		<div ng-show="show" class="table-select-ul">
			<div ng-repeat="stage in data.stages | orderBy:'name' | filter:{parent:season.id}" ng-init="tree = stage.name">
				<div ng-include="'standings-menu'"></div>
			</div>
		</div>

		<div ng-repeat="stage in data.stages | orderBy:'name'| filter:{parent:season.id}" ng-init="showw = (stage.id == currentStage.id || currentStage.id == season.id)">
			<div ng-include="'stage-tables'" ng-init="tree = stage.name"></div>
		</div>
	</div>
</script>

<script type="text/ng-template" id="league-stats-table-template">
	<div class="stats-card-wrap" ng-show="data && data.length > 0">
		<div class="stats-card" ng-class="[type]">
			<div class="header">
				<div class="graphic"></div>
				<h3>@{{title}}</h3>
			</div>

			<div class="table-body">
				<div class="table-row clearfix" ng-repeat="stat in data">
					<div class="table-cell" style="flex: 1; justify-content: flex-start;">@{{stat.name}}</div>
					<div class="table-cell" style="flex: none; text-align: right">@{{stat.goals || stat.cards || stat.assists}}</div>
				</div>
			</div>
		</div>
	</div>
</script>