mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-13 23:18:10 +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

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>