feat: side-by-side script diff with before/after tabs
This commit is contained in:
parent
75a87a77ae
commit
1ff4b2c8ff
@ -256,13 +256,28 @@
|
|||||||
|
|
||||||
@if ($isScriptContent)
|
@if ($isScriptContent)
|
||||||
<div class="text-sm text-gray-600 dark:text-gray-300 sm:col-span-2">
|
<div class="text-sm text-gray-600 dark:text-gray-300 sm:col-span-2">
|
||||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Diff</span>
|
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Script</span>
|
||||||
<details class="mt-1">
|
<details class="mt-1">
|
||||||
<summary class="cursor-pointer text-sm text-gray-700 dark:text-gray-200">
|
<summary class="cursor-pointer text-sm text-gray-700 dark:text-gray-200">
|
||||||
View
|
View
|
||||||
</summary>
|
</summary>
|
||||||
|
|
||||||
<pre class="mt-2 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">@php
|
<div x-data="{ tab: 'diff' }" class="mt-2 space-y-3">
|
||||||
|
<div class="flex flex-wrap items-center gap-2">
|
||||||
|
<x-filament::button size="xs" color="gray" type="button" x-on:click="tab = 'diff'" x-bind:class="tab === 'diff' ? 'ring-1 ring-gray-300 dark:ring-white/20' : ''">
|
||||||
|
Diff
|
||||||
|
</x-filament::button>
|
||||||
|
<x-filament::button size="xs" color="gray" type="button" x-on:click="tab = 'before'" x-bind:class="tab === 'before' ? 'ring-1 ring-gray-300 dark:ring-white/20' : ''">
|
||||||
|
Vorher
|
||||||
|
</x-filament::button>
|
||||||
|
<x-filament::button size="xs" color="gray" type="button" x-on:click="tab = 'after'" x-bind:class="tab === 'after' ? 'ring-1 ring-gray-300 dark:ring-white/20' : ''">
|
||||||
|
Nachher
|
||||||
|
</x-filament::button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div x-show="tab === 'diff'" x-cloak>
|
||||||
|
@php
|
||||||
|
$rows = [];
|
||||||
$count = count($ops);
|
$count = count($ops);
|
||||||
|
|
||||||
for ($i = 0; $i < $count; $i++) {
|
for ($i = 0; $i < $count; $i++) {
|
||||||
@ -272,28 +287,99 @@
|
|||||||
$line = (string) ($op['line'] ?? '');
|
$line = (string) ($op['line'] ?? '');
|
||||||
|
|
||||||
if ($type === 'equal') {
|
if ($type === 'equal') {
|
||||||
echo e($line)."\n";
|
$rows[] = [
|
||||||
|
'left' => ['type' => 'equal', 'line' => $line],
|
||||||
|
'right' => ['type' => 'equal', 'line' => $line],
|
||||||
|
];
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($type === 'delete' && is_array($next) && ($next['type'] ?? null) === 'insert') {
|
if ($type === 'delete' && is_array($next) && ($next['type'] ?? null) === 'insert') {
|
||||||
echo '<span class="block bg-danger-50 text-danger-700 dark:bg-danger-950/40 dark:text-danger-200">- '.e($line)."</span>\n";
|
$rows[] = [
|
||||||
echo '<span class="block bg-success-50 text-success-700 dark:bg-success-950/40 dark:text-success-200">+ '.e((string) ($next['line'] ?? ''))."</span>\n";
|
'left' => ['type' => 'delete', 'line' => $line],
|
||||||
|
'right' => ['type' => 'insert', 'line' => (string) ($next['line'] ?? '')],
|
||||||
|
];
|
||||||
$i++;
|
$i++;
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($type === 'delete') {
|
if ($type === 'delete') {
|
||||||
echo '<span class="block bg-danger-50 text-danger-700 dark:bg-danger-950/40 dark:text-danger-200">- '.e($line)."</span>\n";
|
$rows[] = [
|
||||||
|
'left' => ['type' => 'delete', 'line' => $line],
|
||||||
|
'right' => ['type' => 'blank', 'line' => ''],
|
||||||
|
];
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($type === 'insert') {
|
if ($type === 'insert') {
|
||||||
echo '<span class="block bg-success-50 text-success-700 dark:bg-success-950/40 dark:text-success-200">+ '.e($line)."</span>\n";
|
$rows[] = [
|
||||||
|
'left' => ['type' => 'blank', 'line' => ''],
|
||||||
|
'right' => ['type' => 'insert', 'line' => $line],
|
||||||
|
];
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Alt</div>
|
||||||
|
<pre class="mt-1 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">@php
|
||||||
|
foreach ($rows as $row) {
|
||||||
|
$left = $row['left'];
|
||||||
|
$leftType = $left['type'];
|
||||||
|
$leftLine = (string) ($left['line'] ?? '');
|
||||||
|
|
||||||
|
if ($leftType === 'equal') {
|
||||||
|
echo e($leftLine)."\n";
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($leftType === 'delete') {
|
||||||
|
echo '<span class="block bg-danger-50 text-danger-700 dark:bg-danger-950/40 dark:text-danger-200">- '.e($leftLine)."</span>\n";
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo "\n";
|
||||||
|
}
|
||||||
@endphp</pre>
|
@endphp</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Neu</div>
|
||||||
|
<pre class="mt-1 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">@php
|
||||||
|
foreach ($rows as $row) {
|
||||||
|
$right = $row['right'];
|
||||||
|
$rightType = $right['type'];
|
||||||
|
$rightLine = (string) ($right['line'] ?? '');
|
||||||
|
|
||||||
|
if ($rightType === 'equal') {
|
||||||
|
echo e($rightLine)."\n";
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($rightType === 'insert') {
|
||||||
|
echo '<span class="block bg-success-50 text-success-700 dark:bg-success-950/40 dark:text-success-200">+ '.e($rightLine)."</span>\n";
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo "\n";
|
||||||
|
}
|
||||||
|
@endphp</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div x-show="tab === 'before'" x-cloak>
|
||||||
|
<div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Vorher</div>
|
||||||
|
<pre class="mt-1 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">{{ (string) $fromText }}</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div x-show="tab === 'after'" x-cloak>
|
||||||
|
<div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Nachher</div>
|
||||||
|
<pre class="mt-1 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">{{ (string) $toText }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</details>
|
</details>
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user