imxyy1soope1/mylinspirer
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

chore(frontend): overflow-x-auto for RulesList

Browse Source
This commit is contained in:
imxyy_soope_
2025-12-01 18:48:22 +08:00
parent f0c5af470e
commit d783cf2591
5 changed files with 84 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
frontend/src/components/RulesList.tsx
View File

@@ -26,6 +26,9 @@ const RulesList: Component = () => {
if (!confirm('Are you sure you want to delete this rule?')) return;
try {
if (id === editingId()) {
setShowEditor(false);
}
await rulesApi.delete(id);
refetch();
} catch (err) {
@@ -126,28 +129,13 @@ const RulesList: Component = () => {
<label class="block text-sm font-medium text-gray-700 mb-1">
Method Name
</label>
<Show
when={editingId() === null}
fallback={
<input
type="text"
value={editingMethod()}
onInput={(e) => setEditingMethod(e.currentTarget.value)}
class="w-full border border-gray-300 rounded-md px-3 py-2"
placeholder="com.linspirer.method.name"
/>
}
>
<select
value={editingMethod()}
onChange={(e) => setEditingMethod(e.currentTarget.value)}
class="w-full border border-gray-300 rounded-md px-3 py-2"
>
<option value="">-- Select Method --</option>
<option value="com.linspirer.tactics.gettactics">Get Tactics</option>
<option value="com.linspirer.device.getcommand">Get Command</option>
</select>
</Show>
<input
type="text"
value={editingMethod()}
onInput={(e) => setEditingMethod(e.currentTarget.value)}
class="w-full border border-gray-300 rounded-md px-3 py-2"
placeholder="com.linspirer.method.name"
/>
</div>
<div>
@@ -190,74 +178,71 @@ const RulesList: Component = () => {
</Show>
<div class="bg-white shadow rounded-lg overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
Method Name
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
Action
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
Status
</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<Show when={!rules.loading} fallback={
<tr><td colspan="4" class="text-center py-4">Loading...</td></tr>
}>
<For each={rules()}>
{(rule) => (
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
{rule.method_name}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class={`px-2 py-1 rounded-full text-xs ${
rule.action === 'replace' ? 'bg-purple-100 text-purple-800' :
rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
'bg-gray-100 text-gray-800'
}`}>
{rule.action}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button
onClick={() => toggleRule(rule)}
class={`px-3 py-1 rounded-md text-sm font-medium ${
rule.is_enabled
? 'bg-green-100 text-green-800'
: 'bg-gray-100 text-gray-800'
}`}
>
{rule.is_enabled ? '✓ Enabled' : '✗ Disabled'}
</button>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
onClick={() => startEdit(rule)}
class="text-indigo-600 hover:text-indigo-900 mr-4"
>
Edit
</button>
<button
onClick={() => deleteRule(rule.id)}
class="text-red-600 hover:text-red-900"
>
Delete
</button>
</td>
</tr>
)}
</For>
</Show>
</tbody>
</table>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
Method Name
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
Action
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
Status
</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<Show when={!rules.loading} fallback={
<tr><td colspan="4" class="text-center py-4">Loading...</td></tr>
}>
<For each={rules()}>
{(rule) => (
<tr>
<td class="px-6 py-4 text-sm font-medium text-gray-900">
{rule.method_name}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class={`px-2 py-1 rounded-full text-xs ${rule.action === 'replace' ? 'bg-purple-100 text-purple-800' :
rule.action === 'modify' ? 'bg-blue-100 text-blue-800' :
'bg-gray-100 text-gray-800'
}`}>
{rule.action}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button
onClick={() => toggleRule(rule)}
class={`px-3 py-1 rounded-md text-sm font-medium ${rule.is_enabled
? 'bg-green-100 text-green-800'
: 'bg-gray-100 text-gray-800'
}`}>
{rule.is_enabled ? '✓ Enabled' : '✗ Disabled'}
</button>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
onClick={() => startEdit(rule)}
class="text-indigo-600 hover:text-indigo-900 mr-4">
Edit
</button>
<button
onClick={() => deleteRule(rule.id)}
class="text-red-600 hover:text-red-900">
Delete
</button>
</td>
</tr>
)}
</For>
</Show>
</tbody>
</table>
</div>
</div>
</div>
);