Skip to content

Commit dd652ac

Browse files
peterpeterparkerpeterpeterparker
authored
feat(frontend): top-up, stop and start ufo (#2780)
1 parent 358a4e3 commit dd652ac

14 files changed

Lines changed: 106 additions & 9 deletions

File tree

‎src/frontend/src/lib/components/icons/IconUfo.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
d="M303.091 78.884c80.693 0 152.794 81.242 152.794 143.757s-70.254-1.555-147.941-.607c-75.14.916-149.762 63.79-149.762 1.275S222.399 78.884 303.091 78.884"
2323
transform="translate(14 10)"
2424
/><path
25-
fill="currentColor"
2625
d="M320 344c-13.166 0-24 10.834-24 24s10.834 24 24 24 24-10.834 24-24-10.834-24-24-24m-192-48c-13.166 0-24 10.834-24 24s10.834 24 24 24 24-10.834 24-24-10.834-24-24-24m384 0c-13.166 0-24 10.834-24 24s10.834 24 24 24 24-10.834 24-24-10.834-24-24-24m-21.004-83.799C479.43 128.637 407.26 64 320 64s-159.43 64.637-170.996 148.201C59.721 234.904 0 274.547 0 320c0 70.691 143.27 128 320 128s320-57.309 320-128c0-45.453-59.721-85.096-149.004-107.799M320 96c77.762 0 140.801 62.516 140.801 139.637 0 6.269-1.053 12.256-1.862 18.306A299.65 299.65 0 0 1 320 288a299.65 299.65 0 0 1-138.939-34.057c-.809-6.05-1.862-12.037-1.862-18.306C179.199 158.516 242.238 96 320 96m0 320c-175.807 0-288-56.857-288-96 0-24.01 42.82-54.469 116.059-74.59.543 5.31.126 4.442 1.283 12.772a32.02 32.02 0 0 0 16.926 24.136A333.95 333.95 0 0 0 320 320a333.95 333.95 0 0 0 153.732-37.682 32.02 32.02 0 0 0 16.926-24.136c1.155-8.315.741-7.466 1.283-12.774C565.18 265.529 608 295.99 608 320c0 39.143-112.193 96-288 96"
26+
fill="currentColor"
2727
/></svg
2828
>

‎src/frontend/src/lib/components/modals/Modals.svelte‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
import MissionControlTopUpModal from '$lib/components/modals/cycles/top-up/MissionControlTopUpModal.svelte';
1111
import OrbiterTopUpModal from '$lib/components/modals/cycles/top-up/OrbiterTopUpModal.svelte';
1212
import SatelliteTopUpModal from '$lib/components/modals/cycles/top-up/SatelliteTopUpModal.svelte';
13+
import UfoTopUpModal from '$lib/components/modals/cycles/top-up/UfoTopUpModal.svelte';
1314
import MissionControlTransferCyclesModal from '$lib/components/modals/cycles/transfer/MissionControlTransferCyclesModal.svelte';
1415
import OrbiterTransferCyclesModal from '$lib/components/modals/cycles/transfer/OrbiterTransferCyclesModal.svelte';
1516
import SatelliteTransferCyclesModal from '$lib/components/modals/cycles/transfer/SatelliteTransferCyclesModal.svelte';
@@ -72,6 +73,10 @@
7273
<OrbiterTopUpModal onclose={close} />
7374
{/if}
7475

76+
{#if modal?.type === 'topup_ufo' && nonNullish(modal.detail)}
77+
<UfoTopUpModal detail={modal.detail} onclose={close} />
78+
{/if}
79+
7580
{#if modal?.type === 'add_custom_domain' && nonNullish(modal.detail)}
7681
<CustomDomainModal detail={modal.detail} onclose={close} />
7782
{/if}

‎src/frontend/src/lib/components/modals/cycles/top-up/UfoTopUpModal.svelte‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script lang="ts">
2+
import IconUfo from '$lib/components/icons/IconUfo.svelte';
3+
import CanisterTopUpModal from '$lib/components/modals/cycles/top-up/CanisterTopUpModal.svelte';
4+
import Html from '$lib/components/ui/Html.svelte';
5+
import { i18n } from '$lib/stores/app/i18n.store';
6+
import type { JunoModalDetail, JunoModalTopUpUfoDetail } from '$lib/types/modal';
7+
import { i18nFormat } from '$lib/utils/i18n.utils';
8+
import { metadataUiName } from '$lib/utils/metadata-ui.utils';
9+
10+
interface Props {
11+
detail: JunoModalDetail;
12+
onclose: () => void;
13+
}
14+
15+
let { detail, onclose }: Props = $props();
16+
17+
let { ufo } = $derived(detail as JunoModalTopUpUfoDetail);
18+
</script>
19+
20+
<CanisterTopUpModal
21+
{onclose}
22+
segment={{
23+
segment: 'ufo',
24+
canisterId: ufo.ufo_id.toText(),
25+
label: metadataUiName(ufo)
26+
}}
27+
>
28+
{#snippet intro()}
29+
<h2>
30+
<Html
31+
text={i18nFormat($i18n.canisters.top_up_title, [
32+
{
33+
placeholder: '{0}',
34+
value: metadataUiName(ufo)
35+
}
36+
])}
37+
/>
38+
</h2>
39+
{/snippet}
40+
41+
{#snippet outro()}
42+
<IconUfo />
43+
<p>{$i18n.canisters.top_up_ufo_done}</p>
44+
{/snippet}
45+
</CanisterTopUpModal>

‎src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStart.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
1818
interface Props {
1919
canister: CanisterSyncData;
20-
segment: 'satellite' | 'orbiter';
20+
segment: 'satellite' | 'orbiter' | 'ufo';
2121
onstart: () => void;
2222
}
2323

‎src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStop.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
interface Props {
1717
canister: CanisterSyncData;
1818
monitoringEnabled: boolean;
19-
segment: 'satellite' | 'orbiter';
19+
segment: 'satellite' | 'orbiter' | 'ufo';
2020
onstop: () => void;
2121
}
2222

‎src/frontend/src/lib/components/modules/canister/lifecycle/CanisterStopStart.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
interface Props {
99
canister?: CanisterSyncData | undefined;
1010
monitoringEnabled: boolean;
11-
segment: 'satellite' | 'orbiter';
11+
segment: 'satellite' | 'orbiter' | 'ufo';
1212
onstart: () => void;
1313
onstop: () => void;
1414
}

‎src/frontend/src/lib/components/modules/canister/top-up/TopUp.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
import { missionControlIdNotLoaded } from '$lib/derived/console/account.mission-control.derived';
44
import { i18n } from '$lib/stores/app/i18n.store';
55
import { toasts } from '$lib/stores/app/toasts.store';
6-
import type { JunoModalWithSatellite } from '$lib/types/modal';
6+
import type { JunoModalTopUpUfoDetail, JunoModalWithSatellite } from '$lib/types/modal';
77
import { emit } from '$lib/utils/events.utils';
88
99
interface Props {
10-
type: 'topup_satellite' | 'topup_mission_control' | 'topup_orbiter';
11-
detail?: JunoModalWithSatellite | undefined;
10+
type: 'topup_satellite' | 'topup_mission_control' | 'topup_orbiter' | 'topup_ufo';
11+
detail?: JunoModalWithSatellite | JunoModalTopUpUfoDetail | undefined;
1212
onclose: () => void;
1313
}
1414

‎src/frontend/src/lib/components/ufos/overview/UfoOverview.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import SegmentWithMetadataName from '$lib/components/modules/segments/SegmentWithMetadataName.svelte';
88
import SegmentWithMetadataTags from '$lib/components/modules/segments/SegmentWithMetadataTags.svelte';
99
import UfoOverviewActions from '$lib/components/ufos/overview/UfoOverviewActions.svelte';
10+
import UfoRuntimeActions from '$lib/components/ufos/overview/UfoRuntimeActions.svelte';
1011
import Identifier from '$lib/components/ui/Identifier.svelte';
1112
import Value from '$lib/components/ui/Value.svelte';
1213
import { i18n } from '$lib/stores/app/i18n.store';
@@ -69,7 +70,7 @@
6970
</div>
7071
</div>
7172

72-
TODO
73+
<UfoRuntimeActions {canister} {monitoringEnabled} {ufo} />
7374

7475
<style lang="scss">
7576
.id {

‎src/frontend/src/lib/components/ufos/overview/UfoOverviewActions.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import DetachSegment from '$lib/components/modules/attach-detach/DetachSegment.svelte';
23
import SegmentActions from '$lib/components/modules/segments/SegmentActions.svelte';
34
import SegmentWithMetadataEditDetails from '$lib/components/modules/segments/SegmentWithMetadataEditDetails.svelte';
45
import {
@@ -7,7 +8,6 @@
78
setUfoMetadata
89
} from '$lib/services/metadata.services';
910
import type { Ufo } from '$lib/types/ufo';
10-
import DetachSegment from '$lib/components/modules/attach-detach/DetachSegment.svelte';
1111
1212
interface Props {
1313
ufo: Ufo;

‎src/frontend/src/lib/components/ufos/overview/UfoRuntimeActions.svelte‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts">
2+
import CanisterStopStart from '$lib/components/modules/canister/lifecycle/CanisterStopStart.svelte';
3+
import TopUp from '$lib/components/modules/canister/top-up/TopUp.svelte';
4+
import SegmentActions from '$lib/components/modules/segments/SegmentActions.svelte';
5+
import type { CanisterSyncData as CanisterSyncDataType } from '$lib/types/canister';
6+
import type { Ufo } from '$lib/types/ufo';
7+
8+
interface Props {
9+
ufo: Ufo;
10+
canister: CanisterSyncDataType | undefined;
11+
monitoringEnabled: boolean;
12+
}
13+
14+
let { ufo, canister, monitoringEnabled }: Props = $props();
15+
16+
let detail = $derived({ ufo });
17+
18+
let visible: boolean = $state(false);
19+
const close = () => (visible = false);
20+
</script>
21+
22+
<SegmentActions bind:visible>
23+
{#snippet mainActions()}
24+
<TopUp {detail} onclose={close} type="topup_ufo" />
25+
{/snippet}
26+
27+
{#snippet lifecycleActions()}
28+
<CanisterStopStart
29+
{canister}
30+
{monitoringEnabled}
31+
onstart={close}
32+
onstop={close}
33+
segment="ufo"
34+
/>
35+
{/snippet}
36+
</SegmentActions>

0 commit comments

Comments
 (0)