A focused Docker Compose management web application.
feat: unsaved changes warning
+10
-2
+5
-1
packages/panel/src/routes/(authenticated)/create/+page.svelte
+5
-1
packages/panel/src/routes/(authenticated)/create/+page.svelte
···
1
1
<script lang="ts">
2
2
import { faBan, faCircleInfo, faLayerGroup, faPlus } from "@fortawesome/free-solid-svg-icons";
3
3
import PromiseButton from "$lib/component/PromiseButton.svelte";
4
+
import { beforeNavigate, goto } from "$app/navigation";
4
5
import EditTabs from "../projects/EditTabs.svelte";
5
6
import placeholder from "./placeholder.yml?raw";
6
-
import { goto } from "$app/navigation";
7
7
import { onMount } from "svelte";
8
8
import { api } from "$lib";
9
9
import Fa from "svelte-fa";
···
41
41
return () => {
42
42
window.removeEventListener("keydown", saveKeybind, true);
43
43
};
44
+
});
45
+
46
+
beforeNavigate(({ cancel }) => {
47
+
if (!confirm("You may have unsaved changes. Are you sure you want to leave?")) cancel();
44
48
});
45
49
</script>
46
50
+5
-1
packages/panel/src/routes/(authenticated)/projects/[project]/+page.svelte
+5
-1
packages/panel/src/routes/(authenticated)/projects/[project]/+page.svelte
···
4
4
import { faSave } from "@fortawesome/free-regular-svg-icons";
5
5
import LogTerminal from "$lib/component/LogTerminal.svelte";
6
6
import StatusIcon from "$lib/component/StatusIcon.svelte";
7
+
import { beforeNavigate, goto } from "$app/navigation";
7
8
import StatusTab from "./ProjectStatus.svelte";
8
9
import EditTabs from "../EditTabs.svelte";
9
10
import { getProjects } from "$lib/api";
10
-
import { goto } from "$app/navigation";
11
11
import { api, isMobile } from "$lib";
12
12
import { page } from "$app/state";
13
13
import { onMount } from "svelte";
···
74
74
return () => {
75
75
window.removeEventListener("keydown", saveKeybind, true);
76
76
};
77
+
});
78
+
79
+
beforeNavigate(({ cancel }) => {
80
+
if (unsaved && !confirm("You have unsaved changes. Are you sure you want to leave?")) cancel();
77
81
});
78
82
</script>
79
83