mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-13 15:07:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(#29): mashup

Browse source 
* update templates to be more responsive
This commit is contained in:
Benjamin Nussbaum 2025-06-06 23:06:31 +02:00
parent ed9d03d0b8
commit 56638b26e8
28 changed files with 1067 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

39
resources/views/flux/icon/mashup-1Lx1R.blade.php Normal file
View file

@ -0,0 +1,39 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
$classes = Flux::classes('shrink-0')
->add(match($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
});
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
default => 2,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 76 44"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<rect width="36.5" height="44" rx="3"/>
<rect x="39.5" width="36.5" height="44" rx="3"/>
</svg>

40
resources/views/flux/icon/mashup-1Lx2R.blade.php Normal file
View file

@ -0,0 +1,40 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
$classes = Flux::classes('shrink-0')
->add(match($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
});
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
default => 2,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 76 44"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<rect width="36.5" height="44" rx="3"/>
<rect x="39.5" width="36.5" height="20.5" rx="3"/>
<rect x="39.5" y="23.5" width="36.5" height="20.5" rx="3"/>
</svg>

39
resources/views/flux/icon/mashup-1Tx1B.blade.php Normal file
View file

@ -0,0 +1,39 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
$classes = Flux::classes('shrink-0')
->add(match($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
});
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
default => 2,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 76 44"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<rect y="23.5" width="76" height="20.5" rx="3"/>
<rect width="76" height="20.5" rx="3"/>
</svg>

38
resources/views/flux/icon/mashup-1x1.blade.php Normal file
View file

@ -0,0 +1,38 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
$classes = Flux::classes('shrink-0')
->add(match($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
});
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
default => 2,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 76 44"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<rect width="76" height="44" rx="3"/>
</svg>

40
resources/views/flux/icon/mashup-2Lx1R.blade.php Normal file
View file

@ -0,0 +1,40 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
$classes = Flux::classes('shrink-0')
->add(match($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
});
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
default => 2,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 76 44"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<rect x="39.5" width="36.5" height="44" rx="3"/>
<rect width="36.5" height="20.5" rx="3"/>
<rect y="23.5" width="36.5" height="20.5" rx="3"/>
</svg>

41
resources/views/flux/icon/mashup-2x2.blade.php Normal file
View file

@ -0,0 +1,41 @@
{{-- Credit: Lucide (https://lucide.dev) --}}
@props([
'variant' => 'outline',
])
@php
$classes = Flux::classes('shrink-0')
->add(match($variant) {
'outline' => '[:where(&)]:size-6',
'solid' => '[:where(&)]:size-6',
'mini' => '[:where(&)]:size-5',
'micro' => '[:where(&)]:size-4',
});
$strokeWidth = match ($variant) {
'outline' => 2,
'mini' => 2.25,
'micro' => 2.5,
default => 2,
};
@endphp
<svg
{{ $attributes->class($classes) }}
data-flux-icon
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 76 44"
fill="none"
stroke="currentColor"
stroke-width="{{ $strokeWidth }}"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
data-slot="icon"
>
<rect x="39.5" width="36.5" height="20.5" rx="3"/>
<rect x="39.5" y="23.5" width="36.5" height="20.5" rx="3"/>
<rect width="36.5" height="20.5" rx="3"/>
<rect y="23.5" width="36.5" height="20.5" rx="3"/>
</svg>

30
resources/views/livewire/playlists/index.blade.php
View file

@ -195,7 +195,19 @@ new class extends Component {
@foreach($playlist->items->sortBy('order') as $item)
<tr data-flux-row>
<td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300">
{{ $item->plugin->name }}
@if($item->isMashup())
<div class="flex items-center gap-2">
<div>
<div class="font-medium">{{ $item->getMashupName() }}</div>
<div class="text-xs text-zinc-500 dark:text-zinc-400">
<flux:icon name="mashup-{{ $item->getMashupLayoutType() }}" class="inline-block pb-1" variant="mini" />
{{ collect($item->getMashupPluginIds())->map(fn($id) => App\Models\Plugin::find($id)->name)->join(' | ') }}
</div>
</div>
</div>
@else
<div class="font-medium">{{ $item->plugin->name }}</div>
@endif
</td>
<td class="py-3 px-3 first:pl-0 last:pr-0 text-sm whitespace-nowrap text-zinc-500 dark:text-zinc-300">
<flux:switch wire:model.live="item.is_active"
@ -219,8 +231,20 @@ new class extends Component {
<flux:modal name="delete-playlist-item-{{ $item->id }}" class="min-w-[22rem] space-y-6">
<div>
<flux:heading size="lg">Delete {{ $item->plugin->name }}?</flux:heading>
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">This will remove this item from the playlist.</p>
<flux:heading size="lg">
@if($item->isMashup())
Delete {{ $item->getMashupName() }}?
@else
Delete {{ $item->plugin->name }}?
@endif
</flux:heading>
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
@if($item->isMashup())
This will remove this mashup from the playlist.
@else
This will remove this item from the playlist.
@endif
</p>
</div>
<div class="flex gap-2">

34
resources/views/livewire/plugins/recipe.blade.php
View file

@ -150,6 +150,7 @@ new class extends Component {
'plugin_id' => $this->plugin->id,
'order' => $maxOrder + 1,
]);
}
$this->reset(['checked_devices', 'playlist_name', 'selected_weekdays', 'active_from', 'active_until', 'selected_playlist']);
@ -200,16 +201,12 @@ HTML;
HTML;
}
public function renderPreview(): void
public function renderPreview($size = 'full'): void
{
abort_unless(auth()->user()->plugins->contains($this->plugin), 403);
try {
if ($this->plugin->render_markup_view) {
$previewMarkup = view($this->plugin->render_markup_view, ['data' => $this->plugin->data_payload])->render();
} else {
$previewMarkup = Blade::render($this->plugin->render_markup, ['data' => $this->plugin->data_payload]);
}
$previewMarkup = $this->plugin->render($size);
$this->dispatch('preview-updated', preview: $previewMarkup);
} catch (\Exception $e) {
$this->dispatch('preview-error', message: $e->getMessage());
@ -237,6 +234,27 @@ HTML;
<flux:modal.trigger name="preview-plugin">
<flux:button icon="eye" wire:click="renderPreview">Preview</flux:button>
</flux:modal.trigger>
<flux:dropdown>
<flux:button icon="chevron-down"></flux:button>
<flux:menu>
<flux:modal.trigger name="preview-plugin">
<flux:menu.item icon="mashup-1Tx1B" wire:click="renderPreview('half_horizontal')">Half-Horizontal
</flux:menu.item>
</flux:modal.trigger>
<flux:modal.trigger name="preview-plugin">
<flux:menu.item icon="mashup-1Lx1R" wire:click="renderPreview('half_vertical')">Half-Vertical
</flux:menu.item>
</flux:modal.trigger>
<flux:modal.trigger name="preview-plugin">
<flux:menu.item icon="mashup-2x2" wire:click="renderPreview('quadrant')">Quadrant</flux:menu.item>
</flux:modal.trigger>
</flux:menu>
</flux:dropdown>
</flux:button.group>
<flux:button.group>
<flux:modal.trigger name="add-to-playlist">
<flux:button icon="play" variant="primary">Add to Playlist</flux:button>
</flux:modal.trigger>
@ -475,7 +493,7 @@ HTML;
@script
<script>
$wire.on('preview-updated', ({ preview }) => {
$wire.on('preview-updated', ({preview}) => {
const frame = document.getElementById('preview-frame');
const frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.open();
@ -483,7 +501,7 @@ HTML;
frameDoc.close();
});
$wire.on('preview-error', ({ message }) => {
$wire.on('preview-error', ({message}) => {
alert('Preview Error: ' + message);
});
</script>

120
resources/views/recipes/day-in-history.liquid
View file

@ -1,79 +1,57 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Inter:300,400,500" rel="stylesheet"/>
<link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css">
<script src="https://usetrmnl.com/js/latest/plugins.js"></script>
<title>plugin</title>
<style>
.trmnl .content .description {
word-break: break-word;
}
</style>
</head>
<body class="environment trmnl">
<div class="screen">
<div class="view view--full">
<div class="layout">
<div class="columns">
<div class="column"
data-list-limit="true"
data-list-max-height="340">
<div class="title center">Events</div>
{% for event in data.metadata.events %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
<div class="content">
<span class="title title--small">{{ data.events[event].year }}</span>
<span class="description clamp--3">{{ data.events[event].text }}</span>
</div>
<div class="view view--{{ size }}">
<div class="layout">
<div class="columns">
<div class="column"
data-list-limit="true"
data-list-max-height="340">
<div class="title center">Events</div>
{% for event in data.metadata.events %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
{% endfor %}
</div>
<div class="column"
data-list-limit="true"
data-list-max-height="340">
<div class="title center">Births</div>
{% for birth in data.metadata.births %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
<div class="content">
<span class="title title--small">{{ data.births[birth].year }}</span>
<span class="description clamp--1">{{ data.births[birth].text }}</span>
</div>
<div class="content">
<span class="title title--small">{{ data.events[event].year }}</span>
<span class="description clamp--3">{{ data.events[event].text }}</span>
</div>
{% endfor %}
<div class="title center">Deaths</div>
{% for death in data.metadata.deaths %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
<div class="content">
<span class="title title--small">{{ data.deaths[death].year }}</span>
<span class="description clamp--1">{{ data.deaths[death].text }}</span>
</div>
</div>
{% endfor %}
</div>
<div class="column"
data-list-limit="true"
data-list-max-height="340">
<div class="title center">Births</div>
{% for birth in data.metadata.births %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
{% endfor %}
</div>
<div class="content">
<span class="title title--small">{{ data.births[birth].year }}</span>
<span class="description clamp--1">{{ data.births[birth].text }}</span>
</div>
</div>
{% endfor %}
<div class="title center">Deaths</div>
{% for death in data.metadata.deaths %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
<div class="content">
<span class="title title--small">{{ data.deaths[death].year }}</span>
<span class="description clamp--1">{{ data.deaths[death].text }}</span>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="title_bar">
<img class="image"
src="https://raw.githubusercontent.com/jvivona/tidbyt-data/refs/heads/main/thisdayinhistwikipedia/thisdayinhist_icon.svg">
<span class="title">This Day in History (Wikipedia)</span>
</div>
<div class="title_bar">
<img class="image"
src="https://raw.githubusercontent.com/jvivona/tidbyt-data/refs/heads/main/thisdayinhistwikipedia/thisdayinhist_icon.svg">
<span class="title">This Day in History (Wikipedia)</span>
<span class="instance">{{ data.metadata.current_date }}</span>
</div>
<span class="instance">{{ data.metadata.current_date }}</span>
</div>
</div>
</body>
</html>

3
resources/views/recipes/home-assistant.blade.php
View file

@ -4,7 +4,8 @@
});
@endphp
<x-trmnl::view>
@props(['size' => 'full'])
<x-trmnl::view size="{{$size}}">
<x-trmnl::layout class="layout--col gap--space-between">
@if($weatherEntity)

333
resources/views/recipes/pollen-forecast-eu.liquid
View file

@ -1,182 +1,167 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Inter:300,400,500" rel="stylesheet"/>
<link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css">
<script src="https://usetrmnl.com/js/latest/plugins.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script>
<title>plugin</title>
<style>
.trmnl .content .description {
word-break: break-word;
}
</style>
</head>
<body class="environment trmnl">
<div class="screen">
<div class="view view--full">
<div class="layout layout--col gap--space-between">
<!-- Current Pollen Stats -->
<div class="grid grid--cols-5">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.birch_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Birch</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.grass_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Grass</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.alder_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Alder</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.mugwort_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Mugwort</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.ragweed_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Ragweed</span>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script>
<div class="view view--{{ size }}">
<div class="layout layout--col gap--space-between">
<!-- Current Pollen Stats -->
<div class="grid grid--cols-5">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.birch_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Birch</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.grass_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Grass</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.alder_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Alder</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.mugwort_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Mugwort</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">{{ data.current.ragweed_pollen }}</span>
<span class="label label--small">grains/m³</span>
<span class="label">Ragweed</span>
</div>
</div>
<!-- Chart Container -->
<div id="chart-pollen" style="width: 100%"></div>
</div>
<div class="title_bar">
<svg width="30px" fill="currentColor" xmlns="http://www.w3.org/2000/svg" id="mdi-flower-pollen" viewBox="0 0 24 24"><path d="M18.4 12.75C18.4 11.37 17.28 10.25 15.9 10.25C15.37 10.25 14.88 10.41 14.5 10.69V10.5C14.5 9.12 13.38 8 12 8S9.5 9.12 9.5 10.5V10.69C9.12 10.41 8.63 10.25 8.1 10.25C6.72 10.25 5.6 11.37 5.6 12.75C5.6 13.74 6.19 14.6 7.03 15C6.19 15.4 5.6 16.25 5.6 17.25C5.6 18.63 6.72 19.75 8.1 19.75C8.63 19.75 9.12 19.58 9.5 19.31V19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5V19.31C14.88 19.58 15.37 19.75 15.9 19.75C17.28 19.75 18.4 18.63 18.4 17.25C18.4 16.25 17.81 15.4 16.97 15C17.81 14.6 18.4 13.74 18.4 12.75M12 17.5C10.62 17.5 9.5 16.38 9.5 15S10.62 12.5 12 12.5 14.5 13.62 14.5 15 13.38 17.5 12 17.5M11 6C11 5.45 11.45 5 12 5S13 5.45 13 6 12.55 7 12 7 11 6.55 11 6M7 8C7 7.45 7.45 7 8 7S9 7.45 9 8 8.55 9 8 9 7 8.55 7 8M5 6C4.45 6 4 5.55 4 5S4.45 4 5 4 6 4.45 6 5 5.55 6 5 6M8 3C8 2.45 8.45 2 9 2S10 2.45 10 3 9.55 4 9 4 8 3.55 8 3M14 3C14 2.45 14.45 2 15 2S16 2.45 16 3 15.55 4 15 4 14 3.55 14 3M20 5C20 5.55 19.55 6 19 6S18 5.55 18 5 18.45 4 19 4 20 4.45 20 5M16 7C16.55 7 17 7.45 17 8S16.55 9 16 9 15 8.55 15 8 15.45 7 16 7Z"></path></svg>
<span class="title">Pollen Forecast Vienna</span>
<span class="instance">Data provided by: Open-Meteo.com</span>
</div>
<!-- Chart Container -->
<div id="chart-pollen" style="width: 100%"></div>
</div>
<script type="text/javascript">
// Build data arrays manually via Liquid
var birchData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.birch_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
var grassData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.grass_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
var alderData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.alder_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
var mugwortData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.mugwort_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
var ragweedData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.ragweed_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
// Function to get max value from data array
function getMaxValue(dataArray) {
return Math.max(...dataArray.map(item => item[1]));
}
// Filter data based on max value threshold
const threshold = 0.2;
const seriesData = [
{ name: "Birch", data: birchData },
{ name: "Grass", data: grassData, dashStyle: "shortdot" },
{ name: "Alder", data: alderData, birchData, dashStyle: "shortdash" },
{ name: "Mugwort", data: mugwortData },
{ name: "Ragweed", data: ragweedData, dashStyle: "shortdash" }
].filter(series => getMaxValue(series.data) > threshold);
// Chartkick config
var createChart = function() {
new Chartkick["LineChart"](
"chart-pollen",
seriesData,
{
adapter: "highcharts",
thousands: ",",
points: false,
curve: true,
colors: ["#111", "#111", "#111", "#111", "#111"],
library: {
chart: { height: 300 },
plotOptions: {
series: {
animation: false,
lineWidth: 5
}
},
yAxis: {
labels: { style: { fontSize: "16px", color: "#000000" }},
gridLineDashStyle: "shortdot",
gridLineWidth: 1,
gridLineColor: "#000000",
tickAmount: 5
},
xAxis: {
type: "datetime",
labels: { style: { fontSize: "16px", color: "#000000" }},
lineWidth: 0,
gridLineDashStyle: "dot",
tickWidth: 1,
tickLength: 0,
gridLineWidth: 1,
gridLineColor: "#000000",
tickPixelInterval: 120,
plotLines: [{
value: new Date().getTime(),
color: '#000000',
width: 2,
dashStyle: 'shortdash',
zIndex: 5
}]
}
}
}
);
};
if ("Chartkick" in window) {
createChart();
} else {
window.addEventListener("chartkick:load", createChart, true);
}
</script>
<div class="title_bar">
<svg width="30px" fill="currentColor" xmlns="http://www.w3.org/2000/svg" id="mdi-flower-pollen"
viewBox="0 0 24 24">
<path
d="M18.4 12.75C18.4 11.37 17.28 10.25 15.9 10.25C15.37 10.25 14.88 10.41 14.5 10.69V10.5C14.5 9.12 13.38 8 12 8S9.5 9.12 9.5 10.5V10.69C9.12 10.41 8.63 10.25 8.1 10.25C6.72 10.25 5.6 11.37 5.6 12.75C5.6 13.74 6.19 14.6 7.03 15C6.19 15.4 5.6 16.25 5.6 17.25C5.6 18.63 6.72 19.75 8.1 19.75C8.63 19.75 9.12 19.58 9.5 19.31V19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5V19.31C14.88 19.58 15.37 19.75 15.9 19.75C17.28 19.75 18.4 18.63 18.4 17.25C18.4 16.25 17.81 15.4 16.97 15C17.81 14.6 18.4 13.74 18.4 12.75M12 17.5C10.62 17.5 9.5 16.38 9.5 15S10.62 12.5 12 12.5 14.5 13.62 14.5 15 13.38 17.5 12 17.5M11 6C11 5.45 11.45 5 12 5S13 5.45 13 6 12.55 7 12 7 11 6.55 11 6M7 8C7 7.45 7.45 7 8 7S9 7.45 9 8 8.55 9 8 9 7 8.55 7 8M5 6C4.45 6 4 5.55 4 5S4.45 4 5 4 6 4.45 6 5 5.55 6 5 6M8 3C8 2.45 8.45 2 9 2S10 2.45 10 3 9.55 4 9 4 8 3.55 8 3M14 3C14 2.45 14.45 2 15 2S16 2.45 16 3 15.55 4 15 4 14 3.55 14 3M20 5C20 5.55 19.55 6 19 6S18 5.55 18 5 18.45 4 19 4 20 4.45 20 5M16 7C16.55 7 17 7.45 17 8S16.55 9 16 9 15 8.55 15 8 15.45 7 16 7Z"></path>
</svg>
<span class="title">Pollen Forecast Vienna</span>
<span class="instance">Data provided by: Open-Meteo.com</span>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// Build data arrays manually via Liquid
var birchData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.birch_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
var grassData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.grass_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
var alderData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.alder_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
var mugwortData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.mugwort_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
var ragweedData = [
{% for i in (0..47) %}
["{{ data.hourly.time[i] }}", {{ data.hourly.ragweed_pollen[i] }}]{% unless forloop.last %},{% endunless %}
{% endfor %}
];
// Function to get max value from data array
function getMaxValue(dataArray) {
return Math.max(...dataArray.map(item => item[1]));
}
// Filter data based on max value threshold
const threshold = 0.2;
const seriesData = [
{name: "Birch", data: birchData},
{name: "Grass", data: grassData, dashStyle: "shortdot"},
{name: "Alder", data: alderData, birchData, dashStyle: "shortdash"},
{name: "Mugwort", data: mugwortData},
{name: "Ragweed", data: ragweedData, dashStyle: "shortdash"}
].filter(series => getMaxValue(series.data) > threshold);
// Chartkick config
var createChart = function () {
new Chartkick["LineChart"](
"chart-pollen",
seriesData,
{
adapter: "highcharts",
thousands: ",",
points: false,
curve: true,
colors: ["#111", "#111", "#111", "#111", "#111"],
library: {
chart: {height: 300},
plotOptions: {
series: {
animation: false,
lineWidth: 5
}
},
yAxis: {
labels: {style: {fontSize: "16px", color: "#000000"}},
gridLineDashStyle: "shortdot",
gridLineWidth: 1,
gridLineColor: "#000000",
tickAmount: 5
},
xAxis: {
type: "datetime",
labels: {style: {fontSize: "16px", color: "#000000"}},
lineWidth: 0,
gridLineDashStyle: "dot",
tickWidth: 1,
tickLength: 0,
gridLineWidth: 1,
gridLineColor: "#000000",
tickPixelInterval: 120,
plotLines: [{
value: new Date().getTime(),
color: '#000000',
width: 2,
dashStyle: 'shortdash',
zIndex: 5
}]
}
}
}
);
};
if ("Chartkick" in window) {
createChart();
} else {
window.addEventListener("chartkick:load", createChart, true);
}
</script>
</div>

73
resources/views/recipes/sunrise-sunset.liquid
View file

@ -1,44 +1,27 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Inter:300,400,500" rel="stylesheet"/>
<link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css">
<script src="https://usetrmnl.com/js/latest/plugins.js"></script>
<title>plugin</title>
<style>
.trmnl .content .description {
word-break: break-word;
}
</style>
</head>
<body class="environment trmnl">
<div class="screen">
<div class="view view--full">
<div class="layout layout--col gap--space-between">
<!-- Top row: 2 columns -->
<div class="grid">
<!-- Sunrise Time - Left column -->
<div class="item col-span-6">
<div class="content text--center flex flex--col flex--center-xy">
<span class="label label--large font--bold text--center">Sunrise</span>
<span class="value value--large text--center font--normal">
{{ data.today.sunrise }}
</span>
</div>
</div>
<!-- Sunset Time - Right column -->
<div class="item col-span-6">
<div class="content text--center flex flex--col flex--center-xy">
<span class="label label--large font--bold text--center">Sunset</span>
<span class="value value--large text--center font--normal">
{{ data.today.sunset }}
</span>
</div>
<div class="view view--{{ size }}">
<div class="layout layout--col gap--space-between">
<!-- Top row: 2 columns -->
<div class="grid">
<!-- Sunrise Time - Left column -->
<div class="item col-span-6">
<div class="content text--center flex flex--col flex--center-xy">
<span class="label label--large font--bold text--center">Sunrise</span>
<span class="value value--large text--center font--normal">
{{ data.today.sunrise }}
</span>
</div>
</div>
<!-- Sunset Time - Right column -->
<div class="item col-span-6">
<div class="content text--center flex flex--col flex--center-xy">
<span class="label label--large font--bold text--center">Sunset</span>
<span class="value value--large text--center font--normal">
{{ data.today.sunset }}
</span>
</div>
</div>
</div>
{% if size == 'full' or size == 'half_vertical' %}
<!-- Bottom row: 2 columns -->
<div class="grid">
<!-- Day Progress - Left column -->
@ -58,12 +41,10 @@
</div>
</div>
</div>
</div>
<!-- Title Bar -->
<div class="title_bar">
<span class="title">Sunrise & Sunset</span>
</div>
{% endif %}
</div>
<!-- Title Bar -->
<div class="title_bar">
<span class="title">Sunrise & Sunset</span>
</div>
</div>
</body>
</html>

3
resources/views/recipes/train-monitor.blade.php
View file

@ -1,4 +1,5 @@
<x-trmnl::view>
@props(['size' => 'full'])
<x-trmnl::view size="{{$size}}">
<x-trmnl::layout>
<x-trmnl::table>
<thead>

5
resources/views/recipes/train.blade.php
View file

@ -1,4 +1,5 @@
<x-trmnl::view>
@props(['size' => 'full'])
<x-trmnl::view size="{{$size}}">
<x-trmnl::layout>
<x-trmnl::table>
<thead>
@ -28,7 +29,7 @@
</td>
@if($journey['isCancelled'])
<td>
<x-trmnl::label variant="inverted">Cancelled</x-trmnl::label>
<x-trmnl::label variant="inverted">Ausfall</x-trmnl::label>
</td>
@else
<td>

25
resources/views/recipes/weather.blade.php
View file

@ -1,15 +1,18 @@
{{--@dump($data)--}}
<x-trmnl::view>
@props(['size' => 'full'])
<x-trmnl::view size="{{$size}}">
<x-trmnl::layout class="layout--col gap--space-between">
<div class="grid" style="gap: 9px;">
<div class="row row--center col--span-3 col--end">
<img class="weather-image" style="max-height: 150px; margin:auto;" src="https://usetrmnl.com/images/plugins/weather/wi-thermometer.svg">
<img class="weather-image" style="max-height: 150px; margin:auto;"
src="https://usetrmnl.com/images/plugins/weather/wi-thermometer.svg">
</div>
<div class="col col--span-3 col--end">
<div class="item h--full">
<div class="col col--span-3 col--center">
<div class="item">
<div class="meta"></div>
<div class="justify-center">
<span class="value value--xxlarge" data-fit-value="true">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.air_temperature', 'N/A')}}</span>
<span class="value @if($size == 'full' || $size == 'half_horizontal') value--xxlarge @else value--medium @endif"
data-fit-value="true">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.air_temperature', 'N/A')}}</span>
<span class="label">Temperature</span>
</div>
</div>
@ -18,10 +21,11 @@
<div class="item">
<div class="meta"></div>
<div class="icon">
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-thermometer.svg">--}}
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-thermometer.svg">--}}
</div>
<div class="content">
<span class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.wind_speed', 'N/A')}}</span>
<span
class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.wind_speed', 'N/A')}}</span>
<span class="label">Wind Speed (km/h)</span>
</div>
</div>
@ -29,7 +33,7 @@
<div class="item">
<div class="meta"></div>
<div class="icon">
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-raindrops.svg">--}}
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-raindrops.svg">--}}
</div>
<div class="content">
<span class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.relative_humidity', 'N/A')}}%</span>
@ -40,10 +44,11 @@
<div class="item">
<div class="meta"></div>
<div class="icon">
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-day-sunny.svg">--}}
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-day-sunny.svg">--}}
</div>
<div class="content">
<span class="value value--xsmall">{{Str::title(Arr::get($data, 'properties.timeseries.0.data.next_1_hours.summary.symbol_code', 'N/A'))}}</span>
<span
class="value value--xsmall">{{Str::title(Arr::get($data, 'properties.timeseries.0.data.next_1_hours.summary.symbol_code', 'N/A'))}}</span>
<span class="label">Right Now</span>
</div>
</div>

5
resources/views/recipes/zen.blade.php
View file

@ -1,9 +1,10 @@
{{--@dump($data)--}}
<x-trmnl::view>
@props(['size' => 'full'])
<x-trmnl::view size="{{ $size }}">
<x-trmnl::layout>
<x-trmnl::layout class="layout--col">
<div class="b-h-gray-1">{{$data[0]['a']}}</div>
@if (strlen($data[0]['q']) < 300)
@if (strlen($data[0]['q']) < 300 && $size != 'quadrant')
<p class="value">{{ $data[0]['q'] }}</p>
@else
<p class="value--small">{{ $data[0]['q'] }}</p>

8
resources/views/trmnl-layouts/mashup.blade.php Normal file
View file

@ -0,0 +1,8 @@
@props(['mashupLayout' => '1Tx1B'])
<x-trmnl::screen>
<x-trmnl::mashup mashup-layout="{{ $mashupLayout }}">
{{-- The slot is used to pass the content of the mashup --}}
{!! $slot !!}
</x-trmnl::mashup>
</x-trmnl::screen>

3
resources/views/trmnl-layouts/single.blade.php Normal file
View file

@ -0,0 +1,3 @@
<x-trmnl::screen>
{!! $slot !!}
</x-trmnl::screen>