A focused Docker Compose management web application.
feat: unsaved changes detector
+29
-4
+29
-4
packages/panel/src/routes/(authenticated)/projects/[project]/+page.svelte
+29
-4
packages/panel/src/routes/(authenticated)/projects/[project]/+page.svelte
···
1
1
<script lang="ts">
2
-
import { faCircleInfo, faLayerGroup, faPencil } from "@fortawesome/free-solid-svg-icons";
2
+
import { faCircleInfo, faClockRotateLeft, faLayerGroup, faPencil } from "@fortawesome/free-solid-svg-icons";
3
3
import ComposeEditor from "$lib/component/ComposeEditor.svelte";
4
+
import { faSave } from "@fortawesome/free-regular-svg-icons";
4
5
import LogTerminal from "$lib/component/LogTerminal.svelte";
5
6
import StatusIcon from "$lib/component/StatusIcon.svelte";
6
-
import Tabs from "$lib/component/Tabs.svelte";
7
7
import StatusTab from "./ProjectStatus.svelte";
8
+
import Tabs from "$lib/component/Tabs.svelte";
8
9
import { getProjects } from "$lib/api";
9
10
import { page } from "$app/state";
10
11
import { isMobile } from "$lib";
···
12
13
13
14
let project = $derived(getProjects()[page.params.project!]);
14
15
let { data } = $props();
16
+
17
+
// svelte-ignore state_referenced_locally
18
+
let copy = $state({
19
+
name: project.name,
20
+
compose: data.compose,
21
+
});
22
+
23
+
// Watch for changes to set unsaved state
24
+
let unsaved = $state(false);
25
+
$effect(() => {
26
+
unsaved = copy.name !== project.name || copy.compose !== data.compose;
27
+
});
15
28
</script>
16
29
17
30
<div class="flexc gap-10">
···
46
59
{#snippet compose()}
47
60
<div>
48
61
<label for="name">Name</label>
49
-
<input required id="name" type="text" value={project.name} />
62
+
<input required id="name" type="text" bind:value={copy.name} />
50
63
</div>
51
64
52
65
<h2>Compose</h2>
53
-
<ComposeEditor bind:content={data.compose} />
66
+
<ComposeEditor bind:content={copy.compose} />
54
67
{/snippet}
68
+
69
+
{#if unsaved}
70
+
<div style="color: var(--peach); margin-bottom: 10px;">* Unsaved changes</div>
71
+
<div class="flexr gap-10">
72
+
<button class="flexr gap-5 center">
73
+
<Fa icon={faSave} /> Save
74
+
</button>
75
+
<button class="flexr gap-5 center">
76
+
<Fa icon={faClockRotateLeft} /> Revert
77
+
</button>
78
+
</div>
79
+
{/if}
55
80
56
81
<style lang="scss">
57
82
// Modify h2 of all child components