refactor: remove unused components
This commit is contained in:
@@ -1,253 +0,0 @@
|
||||
<script lang="ts">
|
||||
import IconButton from "$components/ui/IconButton.svelte";
|
||||
import type { Panel } from "$lib/types/panel";
|
||||
import { panelStorage } from "$lib/utils/panelStorage";
|
||||
import { panelStore } from "$stores/panelStore";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
interface Props {
|
||||
onPanelSelect: (panel: Panel) => void;
|
||||
onPanelDelete: (panelId: string) => void;
|
||||
}
|
||||
let { onPanelSelect, onPanelDelete }: Props = $props();
|
||||
|
||||
let panels = $state<Panel[]>([]);
|
||||
let selectedPanelId = $state<string | undefined>(undefined);
|
||||
let errorMessage = $state<string | undefined>(undefined);
|
||||
|
||||
onMount(() => {
|
||||
loadPanels();
|
||||
});
|
||||
|
||||
function loadPanels() {
|
||||
try {
|
||||
errorMessage = undefined;
|
||||
panels = panelStorage.getAllPanels();
|
||||
|
||||
const currentPanel = $panelStore;
|
||||
if (currentPanel) {
|
||||
selectedPanelId = currentPanel.id;
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage = error instanceof Error ? error.message : "Ошибка загрузки панелей";
|
||||
}
|
||||
}
|
||||
|
||||
function handlePanelSelect(panel: Panel) {
|
||||
selectedPanelId = panel.id;
|
||||
onPanelSelect(panel);
|
||||
}
|
||||
|
||||
function handlePanelDelete(panelId: string) {
|
||||
try {
|
||||
errorMessage = undefined;
|
||||
const result = panelStorage.deletePanel(panelId);
|
||||
|
||||
if (result.success) {
|
||||
panels = panels.filter((p) => p.id !== panelId);
|
||||
|
||||
if (selectedPanelId === panelId) {
|
||||
selectedPanelId = undefined;
|
||||
}
|
||||
|
||||
onPanelDelete(panelId);
|
||||
} else {
|
||||
errorMessage = result.error || "Ошибка удаления панели";
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage = error instanceof Error ? error.message : "Ошибка удаления панели";
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date: Date): string {
|
||||
return new Intl.DateTimeFormat("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="panel-list">
|
||||
<div class="panel-list-header">
|
||||
<h2>Сохраненные панели</h2>
|
||||
<IconButton variant="secondary" onclick={loadPanels} ariaLabel="Обновить список">↻</IconButton>
|
||||
</div>
|
||||
|
||||
{#if errorMessage}
|
||||
<div class="error-message">
|
||||
{errorMessage}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if panels.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>Нет сохраненных панелей</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="panels-grid">
|
||||
{#each panels as panel (panel.id)}
|
||||
<button
|
||||
class="panel-card {selectedPanelId === panel.id ? 'selected' : ''}"
|
||||
onclick={() => handlePanelSelect(panel)}
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="panel-preview">
|
||||
{#if panel.backgroundImage}
|
||||
<img src={panel.backgroundImage} alt="Panel preview" class="panel-image" />
|
||||
{:else}
|
||||
<div class="no-image">Нет изображения</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="panel-info">
|
||||
<div class="panel-meta">
|
||||
<span class="panel-id">ID: {panel.id.slice(0, 8)}...</span>
|
||||
<span class="panel-date">{formatDate(panel.updatedAt)}</span>
|
||||
</div>
|
||||
|
||||
<div class="panel-actions">
|
||||
<IconButton
|
||||
variant="danger"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePanelDelete(panel.id);
|
||||
}}
|
||||
ariaLabel="Удалить панель"
|
||||
>
|
||||
🗑️
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.panel-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.panel-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-list-header h2 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #ffebee;
|
||||
color: #c62828;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffcdd2;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
background: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panels-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.panel-card:hover {
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.panel-card.selected {
|
||||
border-color: #007bff;
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.panel-preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 31.25%; /* 320:100 aspect ratio */
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.panel-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.no-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.panel-info {
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.panel-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.panel-id {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user