mirror of
https://github.com/usetrmnl/byos_laravel.git
synced 2026-01-14 15:37:53 +00:00
feat: add recipe preview
wip wip feat: render preview
This commit is contained in:
parent
f187cabcd9
commit
2906dd9071
1 changed files with 48 additions and 2 deletions
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
use App\Models\Plugin;
|
use App\Models\Plugin;
|
||||||
use Livewire\Volt\Component;
|
use Livewire\Volt\Component;
|
||||||
|
use Illuminate\Support\Facades\Blade;
|
||||||
|
|
||||||
new class extends Component {
|
new class extends Component {
|
||||||
public Plugin $plugin;
|
public Plugin $plugin;
|
||||||
|
|
@ -11,7 +12,7 @@ new class extends Component {
|
||||||
public string $name;
|
public string $name;
|
||||||
public int $data_stale_minutes;
|
public int $data_stale_minutes;
|
||||||
public string $data_strategy;
|
public string $data_strategy;
|
||||||
public string $polling_url;
|
public string|null $polling_url;
|
||||||
public string $polling_verb;
|
public string $polling_verb;
|
||||||
public string|null $polling_header;
|
public string|null $polling_header;
|
||||||
public $data_payload;
|
public $data_payload;
|
||||||
|
|
@ -72,7 +73,7 @@ new class extends Component {
|
||||||
'name' => 'required|string|max:255',
|
'name' => 'required|string|max:255',
|
||||||
'data_stale_minutes' => 'required|integer|min:1',
|
'data_stale_minutes' => 'required|integer|min:1',
|
||||||
'data_strategy' => 'required|string|in:polling,webhook',
|
'data_strategy' => 'required|string|in:polling,webhook',
|
||||||
'polling_url' => 'required|url',
|
'polling_url' => 'required_if:data_strategy,polling|nullable|url',
|
||||||
'polling_verb' => 'required|string|in:get,post',
|
'polling_verb' => 'required|string|in:get,post',
|
||||||
'polling_header' => 'nullable|string|max:255',
|
'polling_header' => 'nullable|string|max:255',
|
||||||
'blade_code' => 'nullable|string',
|
'blade_code' => 'nullable|string',
|
||||||
|
|
@ -199,6 +200,22 @@ HTML;
|
||||||
HTML;
|
HTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function renderPreview(): 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]);
|
||||||
|
}
|
||||||
|
$this->dispatch('preview-updated', preview: $previewMarkup);
|
||||||
|
} catch (\Exception $e) {
|
||||||
|
$this->dispatch('preview-error', message: $e->getMessage());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public function deletePlugin(): void
|
public function deletePlugin(): void
|
||||||
{
|
{
|
||||||
abort_unless(auth()->user()->plugins->contains($this->plugin), 403);
|
abort_unless(auth()->user()->plugins->contains($this->plugin), 403);
|
||||||
|
|
@ -217,6 +234,9 @@ HTML;
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<flux:button.group>
|
<flux:button.group>
|
||||||
|
<flux:modal.trigger name="preview-plugin">
|
||||||
|
<flux:button icon="eye" wire:click="renderPreview">Preview</flux:button>
|
||||||
|
</flux:modal.trigger>
|
||||||
<flux:modal.trigger name="add-to-playlist">
|
<flux:modal.trigger name="add-to-playlist">
|
||||||
<flux:button icon="play" variant="primary">Add to Playlist</flux:button>
|
<flux:button icon="play" variant="primary">Add to Playlist</flux:button>
|
||||||
</flux:modal.trigger>
|
</flux:modal.trigger>
|
||||||
|
|
@ -309,6 +329,16 @@ HTML;
|
||||||
</div>
|
</div>
|
||||||
</flux:modal>
|
</flux:modal>
|
||||||
|
|
||||||
|
<flux:modal name="preview-plugin" class="min-w-[850px] min-h-[480px] space-y-6">
|
||||||
|
<div>
|
||||||
|
<flux:heading size="lg">Preview {{ $plugin->name }}</flux:heading>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-zinc-900 rounded-lg overflow-hidden">
|
||||||
|
<iframe id="preview-frame" class="w-full h-[480px] border-0"></iframe>
|
||||||
|
</div>
|
||||||
|
</flux:modal>
|
||||||
|
|
||||||
<div class="mt-5 mb-5">
|
<div class="mt-5 mb-5">
|
||||||
<h3 class="text-xl font-semibold dark:text-gray-100">Settings</h3>
|
<h3 class="text-xl font-semibold dark:text-gray-100">Settings</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -442,3 +472,19 @@ HTML;
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@script
|
||||||
|
<script>
|
||||||
|
$wire.on('preview-updated', ({ preview }) => {
|
||||||
|
const frame = document.getElementById('preview-frame');
|
||||||
|
const frameDoc = frame.contentDocument || frame.contentWindow.document;
|
||||||
|
frameDoc.open();
|
||||||
|
frameDoc.write(preview);
|
||||||
|
frameDoc.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
$wire.on('preview-error', ({ message }) => {
|
||||||
|
alert('Preview Error: ' + message);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endscript
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue