Rewrite PointListModal with svelte5 runes. fixes reactivity
This commit is contained in:
ThePetrovich
parent
0f79cefdac
commit
1a89d49e8a
4 changed files with 136 additions and 60 deletions
|
|
@ -18,16 +18,37 @@ export async function fetchAPI<T>(endpoint: string, options: RequestInit = {}):
|
|||
try {
|
||||
const response = await fetch(url, options);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
let errorText = await response.json();
|
||||
if (
|
||||
errorText &&
|
||||
typeof errorText === "object" &&
|
||||
("detail" in errorText || "field_errors" in errorText || "non_field_errors" in errorText)
|
||||
) {
|
||||
// Handle structured error responses
|
||||
if ("detail" in errorText) {
|
||||
errorText = errorText.detail;
|
||||
} else if ("field_errors" in errorText) {
|
||||
errorText = Object.values(errorText.field_errors).join(", ");
|
||||
} else if ("non_field_errors" in errorText) {
|
||||
errorText = errorText.non_field_errors.join(", ");
|
||||
}
|
||||
} else {
|
||||
errorText = `Unexpected error: ${response.statusText}`;
|
||||
}
|
||||
throw new Error(`${errorText}`);
|
||||
}
|
||||
if (response.status === 204) {
|
||||
// No content response
|
||||
return {} as T; // Return an empty object for 204 responses
|
||||
}
|
||||
return await response.json() as T;
|
||||
return (await response.json()) as T;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching ${url}:`, error);
|
||||
throw error;
|
||||
if (error instanceof Error) {
|
||||
// If the error is an instance of Error, rethrow it
|
||||
return Promise.reject(new Error(`${error.message}`));
|
||||
}
|
||||
return Promise.reject(new Error(`${error}`));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,8 +40,6 @@
|
|||
|
||||
$: $SavedPointsStore, setCoordinatesFromSavedPoint();
|
||||
|
||||
$: inputLat, inputLng, setToCustomOnChange();
|
||||
|
||||
function setCoordinatesFromSavedPoint() {
|
||||
console.log("Start point changed:", startPoint);
|
||||
|
||||
|
|
@ -135,6 +133,7 @@
|
|||
console.log("Launch position updated:", lat, lng);
|
||||
inputLat = lat.toFixed(6).toString();
|
||||
inputLng = lng.toFixed(6).toString();
|
||||
setToCustomOnChange();
|
||||
};
|
||||
|
||||
export const getElement = () => {
|
||||
|
|
@ -253,9 +252,9 @@
|
|||
<FormGroup spacing="mb-2">
|
||||
<Label for="latitude" class="form-label">Широта/Долгота:</Label>
|
||||
<InputGroup size="sm">
|
||||
<Input id="latitude" type="text" bind:value={inputLat} placeholder="Latitude" />
|
||||
<Input id="latitude" type="text" bind:value={inputLat} placeholder="Latitude" on:change={setToCustomOnChange} />
|
||||
<InputGroupText>/</InputGroupText>
|
||||
<Input id="longitude" type="text" bind:value={inputLng} placeholder="Longitude" />
|
||||
<Input id="longitude" type="text" bind:value={inputLng} placeholder="Longitude" on:change={setToCustomOnChange} />
|
||||
<Button color="success" size="sm" on:click={applyCoordinatesFromInput} title="Apply Coordinates"
|
||||
>✓</Button
|
||||
>
|
||||
|
|
@ -278,6 +277,7 @@
|
|||
type="number"
|
||||
id="startHeight"
|
||||
class="form-control-sm"
|
||||
on:change={setToCustomOnChange}
|
||||
bind:value={$FlightParametersStore.launch_altitude}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,57 @@
|
|||
<script lang="ts">
|
||||
import { TableHandler, Datatable } from '@vincjo/datatables'
|
||||
import { TableHandler } from '@vincjo/datatables';
|
||||
import { Modal,
|
||||
Button,
|
||||
FormGroup,
|
||||
Label,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputGroupText,
|
||||
Alert,
|
||||
Icon,
|
||||
Pagination,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
} from '@sveltestrap/sveltestrap';
|
||||
} from '@sveltestrap/sveltestrap';
|
||||
import { onMount } from 'svelte';
|
||||
import { addToast } from '$lib/components/Toast.svelte';
|
||||
import type { SavedPoint } from '$lib/types';
|
||||
import { SavedPointsStore } from '$lib/stores';
|
||||
import { getSavedPoints, savePoint, updatePoint, deletePoint } from '$lib/api/points';
|
||||
|
||||
export let isOpen: boolean = false;
|
||||
export let onClose: () => void = () => {};
|
||||
// Props
|
||||
let { isOpen = $bindable(false), onClose = () => {} } = $props();
|
||||
|
||||
let points: SavedPoint[] = [];
|
||||
const table = new TableHandler($SavedPointsStore, { rowsPerPage: 10 })
|
||||
// Runes
|
||||
let points = $state<SavedPoint[]>([]);
|
||||
let selectedPoint = $state<SavedPoint | null>(null);
|
||||
let newPoint = $state<SavedPoint>({ id: 0, name: '', lat: 0, lon: 0, alt: 0 });
|
||||
let isEditing = $state(false);
|
||||
let isAlertVisible = $state(false);
|
||||
let alertText = $state('');
|
||||
|
||||
let selectedPoint: SavedPoint | null = null;
|
||||
let newPoint: SavedPoint = { id: 0, name: '', lat: 0, lon: 0, alt: 0 };
|
||||
let isEditing: boolean = false;
|
||||
let modalTitle: string = 'Сохраненные точки';
|
||||
// Derived state
|
||||
let modalTitle = $derived(isEditing ? 'Редактирование точки' : 'Сохраненные точки');
|
||||
|
||||
// Table handler
|
||||
let table = $derived(new TableHandler(points, { rowsPerPage: 10 }));
|
||||
|
||||
// Sync with store
|
||||
$effect(() => {
|
||||
points = $SavedPointsStore || [];
|
||||
});
|
||||
|
||||
// On mount, fetch points
|
||||
onMount(async () => {
|
||||
points = await getSavedPoints();
|
||||
const pts = await getSavedPoints();
|
||||
points = pts;
|
||||
SavedPointsStore.set(points);
|
||||
});
|
||||
|
||||
// Modal controls
|
||||
export function openModal() {
|
||||
isOpen = true;
|
||||
modalTitle = 'Сохраненные точки';
|
||||
}
|
||||
|
||||
export function closeModal() {
|
||||
function closeModal() {
|
||||
isOpen = false;
|
||||
onClose();
|
||||
}
|
||||
|
|
@ -48,13 +60,20 @@
|
|||
selectedPoint = point;
|
||||
newPoint = { ...point };
|
||||
isEditing = true;
|
||||
modalTitle = 'Редактирование точки';
|
||||
}
|
||||
|
||||
function handleDeletePoint(point: SavedPoint) {
|
||||
deletePoint(point.id).then(() => {
|
||||
points = points.filter(p => p.id !== point.id);
|
||||
SavedPointsStore.set(points);
|
||||
addToast({
|
||||
header: 'Точка удалена',
|
||||
body: `Точка "${point.name}" успешно удалена.`,
|
||||
color: 'success',
|
||||
});
|
||||
}).catch(error => {
|
||||
showAlert(`Ошибка при удалении точки: ${error.message}`);
|
||||
console.error('Ошибка при удалении точки:', error);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -63,39 +82,57 @@
|
|||
updatePoint(newPoint).then(updatedPoint => {
|
||||
points = points.map(p => (p.id === updatedPoint.id ? updatedPoint : p));
|
||||
SavedPointsStore.set(points);
|
||||
table.setRows(points);
|
||||
resetForm();
|
||||
addToast({
|
||||
header: 'Точка обновлена',
|
||||
body: `Точка "${updatedPoint.name}" успешно обновлена.`,
|
||||
color: 'success',
|
||||
});
|
||||
}).catch(error => {
|
||||
showAlert(`Ошибка при обновлении точки: ${error.message}`);
|
||||
});
|
||||
} else {
|
||||
savePoint(newPoint).then(savedPoint => {
|
||||
points.push(savedPoint);
|
||||
points = [...points]; // Trigger reactivity
|
||||
points = [...points, savedPoint];
|
||||
SavedPointsStore.set(points);
|
||||
table.setRows(points);
|
||||
resetForm();
|
||||
addToast({
|
||||
header: 'Точка сохранена',
|
||||
body: `Точка "${savedPoint.name}" успешно сохранена.`,
|
||||
color: 'success',
|
||||
});
|
||||
}).catch(error => {
|
||||
showAlert(`Ошибка при сохранении точки: ${error.message}`);
|
||||
console.error('Ошибка при сохранении точки:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function showAlert(message: string) {
|
||||
isAlertVisible = true;
|
||||
alertText = message;
|
||||
}
|
||||
|
||||
export function hideAlert() {
|
||||
isAlertVisible = false;
|
||||
alertText = '';
|
||||
}
|
||||
|
||||
export function resetForm() {
|
||||
selectedPoint = null;
|
||||
newPoint = { id: 0, name: '', lat: 0, lon: 0, alt: 0 };
|
||||
isEditing = false;
|
||||
modalTitle = 'Сохраненные точки';
|
||||
}
|
||||
|
||||
$: if (isOpen) {
|
||||
SavedPointsStore.set(points);
|
||||
hideAlert();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal isOpen={isOpen} toggle={closeModal} size="lg" fade={false} backdrop={true} scrollable>
|
||||
<Modal {isOpen} toggle={closeModal} size="lg" fade={false} backdrop={true} scrollable>
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{modalTitle}</h5>
|
||||
<button type="button" class="btn-close" on:click={closeModal} aria-label="Close"></button>
|
||||
<button type="button" class="btn-close" onclick={closeModal} aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" >
|
||||
<Datatable {table}>
|
||||
<div class="modal-body">
|
||||
<div bind:this={table.element}>
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -107,17 +144,17 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each points as point (point.id)}
|
||||
{#each table.rows as row}
|
||||
<tr>
|
||||
<td>{point.name}</td>
|
||||
<td>{point.lat}</td>
|
||||
<td>{point.lon}</td>
|
||||
<td>{point.alt}</td>
|
||||
<td>{row.name}</td>
|
||||
<td>{row.lat}</td>
|
||||
<td>{row.lon}</td>
|
||||
<td>{row.alt}</td>
|
||||
<td class="fit">
|
||||
<Button color="primary" size="sm" on:click={() => handleEditPoint(point)}>
|
||||
<Button color="primary" size="sm" onclick={() => handleEditPoint(row)}>
|
||||
<Icon name="pencil" />
|
||||
</Button>
|
||||
<Button color="danger" size="sm" on:click={() => handleDeletePoint(point)}>
|
||||
<Button color="danger" size="sm" onclick={() => handleDeletePoint(row)}>
|
||||
<Icon name="trash" />
|
||||
</Button>
|
||||
</td>
|
||||
|
|
@ -125,25 +162,32 @@
|
|||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</Datatable>
|
||||
<Pagination aria-label="Page navigation">
|
||||
</div>
|
||||
<Pagination aria-label="Page navigation" size="sm">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous on:click={() => table.setPage("previous")} />
|
||||
<PaginationLink previous onclick={() => table.setPage("previous")} />
|
||||
</PaginationItem>
|
||||
{#each table.pagesWithEllipsis as page}
|
||||
<PaginationItem active={table.currentPage === page}>
|
||||
<PaginationLink on:click={() => table.setPage(page)}>{page}</PaginationLink>
|
||||
<PaginationLink onclick={() => table.setPage(page)}>{page}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/each}
|
||||
<PaginationItem>
|
||||
<PaginationLink next on:click={() => table.setPage("next")} />
|
||||
<PaginationLink next onclick={() => table.setPage("next")} />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Form for adding/editing points -->
|
||||
<div class="mt-2">
|
||||
<div>
|
||||
<h5>{isEditing ? 'Редактирование точки' : 'Добавить новую точку'}</h5>
|
||||
<form on:submit|preventDefault={handleSavePoint}>
|
||||
<Alert color="danger" isOpen={isAlertVisible} toggle={() => (isAlertVisible = false)} fade={false}
|
||||
class="mb-2">
|
||||
<Icon name="exclamation-triangle" class="me-2" />
|
||||
{alertText}
|
||||
</Alert>
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSavePoint(); }}>
|
||||
<div class="mb-2">
|
||||
<Label for="name" class="small">Имя:</Label>
|
||||
<Input class="form-control-sm" type="text" id="name" bind:value={newPoint.name} required />
|
||||
|
|
@ -151,31 +195,30 @@
|
|||
<div class="d-flex gap-2">
|
||||
<FormGroup class="flex-grow-1">
|
||||
<Label for="lat" class="small">Широта:</Label>
|
||||
<Input class="form-control-sm" type="number" id="lat" bind:value={newPoint.lat} required />
|
||||
<Input class="form-control-sm" type="number" step="any" id="lat" bind:value={newPoint.lat} required />
|
||||
<span class="form-text">Градусы</span>
|
||||
</FormGroup>
|
||||
<FormGroup class="flex-grow-1">
|
||||
<Label for="lon" class="small">Долгота:</Label>
|
||||
<Input class="form-control-sm" type="number" id="lon" bind:value={newPoint.lon} required />
|
||||
<Input class="form-control-sm" type="number" step="any" id="lon" bind:value={newPoint.lon} required />
|
||||
<span class="form-text">Градусы</span>
|
||||
</FormGroup>
|
||||
<FormGroup class="flex-grow-1">
|
||||
<Label for="alt" class="small">Высота:</Label>
|
||||
<Input class="form-control-sm" type="number" id="alt" bind:value={newPoint.alt} required />
|
||||
<Input class="form-control-sm" type="number" step="any" id="alt" bind:value={newPoint.alt} required />
|
||||
<span class="form-text">Метры над ур. моря</span>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" color="success">
|
||||
{isEditing ? 'Обновить точку' : 'Сохранить точку'}
|
||||
</Button>
|
||||
{#if isEditing}
|
||||
<Button type="button" color="secondary" on:click={resetForm} class="ms-2">Отмена</Button>
|
||||
<Button type="button" color="secondary" onclick={resetForm} class="ms-2">Отмена</Button>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<Button color="secondary" on:click={closeModal}>Закрыть</Button>
|
||||
<Button color="secondary" onclick={closeModal}>Закрыть</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,17 @@
|
|||
/** @type {import('svelte/store').Writable<ToastMessage[]>} */
|
||||
export const toasts = writable([]);
|
||||
|
||||
const TOAST_ICONS = {
|
||||
primary: 'info-circle-fill',
|
||||
secondary: 'info-circle-fill',
|
||||
success: 'check-circle-fill',
|
||||
danger: 'exclamation-triangle-fill',
|
||||
warning: 'exclamation-circle-fill',
|
||||
info: 'info-circle-fill',
|
||||
light: 'lightbulb',
|
||||
dark: 'question'
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds a new toast to the list.
|
||||
* @param {Omit<ToastMessage, 'id'>} toast
|
||||
|
|
@ -48,7 +59,7 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
import { Toast, ToastBody, ToastHeader } from '@sveltestrap/sveltestrap';
|
||||
import { Toast, ToastBody, ToastHeader, Icon } from '@sveltestrap/sveltestrap';
|
||||
|
||||
/**
|
||||
* Removes a toast from the list by its ID.
|
||||
|
|
@ -80,7 +91,8 @@
|
|||
color={toast.color || 'info'}
|
||||
on:close={() => removeToast(toast.id)}
|
||||
>
|
||||
<ToastHeader toggle={() => removeToast(toast.id)}>
|
||||
<ToastHeader toggle={() => removeToast(toast.id)} class={`text-${toast.color || 'text-info'}`}>
|
||||
<Icon slot="icon" name={TOAST_ICONS[toast.color ? toast.color : 'info']} class="me-2" color={toast.color || 'info'} />
|
||||
{toast.header}
|
||||
</ToastHeader>
|
||||
<ToastBody>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue