Confirmations

src/routes/user/templates/+page.svelte

@@ -16,6 +16,8 @@
     import Navbar from "$lib/components/Navbar.svelte";
     import Footer from "$lib/components/Footer.svelte";
     import ConfirmationPrompt from "$lib/components/ConfirmationPrompt.svelte";
+    import PointEditor from "$lib/components/PointEditor.svelte";
+    import ToastContainer from "$lib/components/Toast.svelte";
     import { addToast } from "$lib/components/Toast.svelte";
 
     // TODO: Implement these imports
@@ -35,12 +37,14 @@
     let templatesTable = $derived(new TableHandler($SavedScenarioTemplatesStore, { rowsPerPage: 5 }));
     let templatesSearch = $derived(templatesTable.createSearch(["name"]));
 
+    let editPoint: SavedPoint | null = $state(null);
+
     onMount(async () => {
         // Mock data for demonstration. Replace with API calls.
-        $SavedPointsStore = [
-            { id: 1, name: "Baikonur Cosmodrome", lat: 45.96, lon: 63.3, alt: 90 },
-            { id: 2, name: "Kennedy Space Center", lat: 28.57, lon: -80.64, alt: 3 },
-        ];
+        const pts = await getSavedPoints();
+        $SavedPointsStore = pts;
+        SavedPointsStore.set($SavedPointsStore);
+        
         $SavedFlightProfilesStore = [
             { id: 1, name: "Standard Weather Balloon", rate_profile_data: {ascent_rate: 5, descent_rate: 8, burst_altitude: 30000} },
             { id: 2, name: "High Altitude Probe", rate_profile_data: {ascent_rate: 6, descent_rate: 10, burst_altitude: 40000} },
@@ -115,6 +119,10 @@
             },
         });
     }
+
+    function handleEditPoint(point: SavedPoint) {
+        editPoint = point;
+    }
 </script>
 
 <main class="force-page-height">
@@ -124,7 +132,7 @@
     <div class="container my-4">
         <div class="row">
             <!-- Side Navigation -->
-            <div class="col-md-3 col-lg-2">
+            <div class="col-md-3 col-lg-2 mb-4">
                 <nav class="nav nav-pills flex-column">
                     <a class="nav-link" href="/user/account">Учетная запись</a>
                     <a class="nav-link active" href="/user/templates">Сохраненные сценарии</a>
@@ -141,13 +149,28 @@
                         <h5 class="mb-0">Точки запуска</h5>
                     </CardHeader>
                     <CardBody>
-                        <Input
-                            type="text"
-                            class="form-control-sm mb-2"
-                            placeholder="Поиск по названию..."
-                            bind:value={pointsSearch.value}
-                            oninput={() => pointsSearch.set()}
-                        />
+                        <div class="position-relative mb-2">
+                            <Input
+                                type="text"
+                                class="form-control-sm pe-5"
+                                placeholder="Поиск по названию..."
+                                bind:value={pointsSearch.value}
+                                oninput={() => pointsSearch.set()}
+                            />
+                            <Button
+                                size="sm"
+                                color="white"
+                                class="position-absolute top-50 end-0 translate-middle-y me-2 rounded-circle d-flex align-items-center justify-content-center"
+                                style="width: 16px; height: 16px; border: none; background: var(--bs-secondary); color: var(--bs-white);"
+                                onclick={() => {
+                                    pointsSearch.value = "";
+                                    pointsSearch.set();
+                                }}
+                                disabled={!pointsSearch.value}
+                            >
+                                <Icon name="x" style="font-size: 16px;" />
+                            </Button>
+                        </div>
                         <div class="table-responsive">
                             <table class="table table-sm">
                                 <thead>
@@ -167,6 +190,9 @@
                                             <td>{row.lon.toFixed(4)} °</td>
                                             <td>{row.alt} м</td>
                                             <td class="fit">
+                                                <Button color="primary" size="sm" onclick={() => handleEditPoint(row)}>
+                                                    <Icon name="pencil" />
+                                                </Button>
                                                 <Button
                                                     color="danger"
                                                     size="sm"
@@ -342,4 +368,12 @@
     oncancel={() => (showConfirm = false)}
 >
     <p>{confirmConfig.body}</p>
-</ConfirmationPrompt>
+</ConfirmationPrompt>
+
+<PointEditor
+    point={editPoint}
+    isOpen={editPoint !== null}
+    onClose={() => { editPoint = null; pointsTable.setRows($SavedPointsStore) }}
+/>
+
+<ToastContainer />