<!-- Error rendering component -->
<!-- TwigException: Unable to parse '=> "data-#{k}=#{v}")|join(' ') ~ ' ' : ''' at template position71 -->
<!-- Error: TwigException: Unable to parse '=> "data-#{k}=#{v}")|join(' ') ~ ' ' : ''' at template position71
at /builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/twig/src/adapter.js:156:24
at new Promise (<anonymous>)
at TwigAdapter.render (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/twig/src/adapter.js:134:16)
at ComponentSource._renderVariant (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
at _renderVariant.next (<anonymous>)
at onFulfilled (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/co/index.js:65:19) -->
{# @var scoreboard ThemeViews\Organisms\scoreboard\ScoreboardViewModel #}
{% extends '@atoms/section/section.twig' %}
{% set className = "scoreboard full" %}
{% block content %}
<div class="container px-0">
{% include '@organisms/introBlock/intro_block.twig' with {
intro_block: {
manual_mode: true,
icon: 'scoreboard',
headline: t('Scoreboard')
}
} only %}
</div>
{% include '@organisms/galleryImageSlider/gallery_image_slider.twig' with {
gallery_image_slider: {
slides: scoreboard.view_model.galleryImages
}
} %}
<div class="wrap container px-0 sm:px-1">
{% if scoreboard.match.stadium is defined %}
<a class="no-underline" href="{{ scoreboard.match.stadium.link }}">
{% endif %}
{% include '@atoms/copy/copy.twig' with {
text: scoreboard.match.intro ~ (scoreboard.match.stadium is defined ? ' | ' ~ scoreboard.match.stadium.name : ''),
className: 'intro'
} only %}
{% if scoreboard.match.stadium is defined %}
</a>
{% endif %}
<div class="flex justify-between items-center border-b border-b-white">
<div class="flex basis-1/12 justify-start">
<div class="board">HOME</div>
</div>
<div class="grid grid-cols-12 basis-10/12">
<div class="col-span-4 pl-1">
{% include '@molecules/teamLogoTitle/team_logo_title--linked.twig' with scoreboard.match.home only %}
</div>
<div class="col-span-4 flex items-center justify-center">
{% if scoreboard.match.finished and scoreboard.match.hasScore %}
{% include '@atoms/headline/headline.twig' with {
headline: scoreboard.match.score,
type: 'h3',
className: 'text-center'
} only %}
{% else %}
{% include '@atoms/headline/headline.twig' with {
headline: 'VS'
} only %}
{% endif %}
</div>
<div class="col-span-4 pr-1">
{% include '@molecules/teamLogoTitle/team_logo_title--linked.twig' with scoreboard.match.away only %}
</div>
</div>
<div class="flex basis-1/12 justify-end">
<div class="board">AWAY</div>
</div>
</div>
{% if scoreboard.match.finished %}
<div class="flex flex-col items-start justify-center flex-wrap">
<div
class="text-center mx-auto"
data-vue="rating"
data-rating-id="{{ scoreboard.match.rating.rating_id }}"
data-rating="{{ scoreboard.match.rating.rating }}"
data-area="football_match"
></div>
<div
class="text-center mx-auto"
data-vue="upload-bar"
data-button-type="x-btn--primary"
data-upload-route="{{ route('upload.create.' ~ getLang(), {id: scoreboard.post_id}) }}"
data-post-id="{{ scoreboard.post_id }}"
></div>
</div>
{% endif %}
</div>
{% endblock %}
{
"match": {
"intro": "February 13th | Sun Life Stadium",
"home": {
"name": "Denver Broncos",
"logo": ""
},
"away": {
"name": "San Francisco Giants",
"logo": ""
},
"score": "11 - 6",
"rating": {
"rating": 3,
"canRate": true
}
}
}
<?php
namespace Theme\Views\Organisms\scoreboard;
use ACFToolkit\Types\CustomOrganism;
use Theme\Views\Atoms\headline\Headline;
use Theme\Views\Molecules\rating\Rating;
use Theme\Views\Molecules\teamLogoTitle\TeamLogoTitle;
class Scoreboard extends CustomOrganism
{
public string $name = 'scoreboard';
public string $label = 'Scoreboard';
public int $needsJs = 0;
public int $needsVue = 0;
public int $needsVueInitialisation = 0;
public function __construct($name = '', $title = '', $children = [])
{
parent::__construct($name, $title);
$this->addChildren(array_merge($children, [
]));
}
}
<?php
namespace Theme\Views\Organisms\scoreboard;
use ACFToolkit\Types\Block;
class ScoreboardBlock extends Block
{
protected string $organismClassName = Scoreboard::class;
protected string $blockName = 'scoreboard';
protected string $blockTitle = 'Scoreboard';
public string $category = 'Football Match - Detail';
protected string $icon = '';
public function register()
{
\Filter::add('register_block_type_args', function ($block){
$block['uses_context'][] = 'match';
return $block;
});
parent::register(); // TODO: Change the autogenerated stub
}
}
<?php
namespace Theme\Views\Organisms\scoreboard;
use ACFToolkit\ViewModels\BaseViewModel;
use App\Http\Resources\FootballMatchTeaserResource;
use App\Models\FootballMatch;
class ScoreboardViewModel extends BaseViewModel
{
public function model()
{
return $this->data['match'] ?? new FootballMatch;
}
public function post_id()
{
$model = $this->model();
return $model->post_id ?? 1;
}
public function match()
{
$match = $this->data['match'] ?? FootballMatch::with(['homeObject', 'awayObject', 'stadiumObject'])->inRandomOrder()->first();
return FootballMatchTeaserResource::make($match)->resolve();
}
public function view_model()
{
return $this->getData('viewModel');
}
}
.scoreboard {
.wrap {
@apply bg-lighter;
}
.intro {
@apply block border-b border-white py-0.75 px-0.5 font-roboto-light;
font-size: 10px;
}
.board {
width: 4ch;
line-height: .8;
word-break: break-all;
@apply font-teko-semibold text-white bg-primary py-1.5 px-0.5 text-center;
}
.team-logo-title {
@apply sm:px-1;
}
.rating {
@apply pt-1.5 pb-0.75;
}
.gallery-image-slider.n-1 {
@apply pb-0;
}
}
{% include '@organisms/scoreboard/scoreboard.twig' with {
} only %}Fields away -> molecule
away -> molecule
rating -> molecule
score -> atom