Skip to content

Commit

Permalink
chore: update formatting
Browse files Browse the repository at this point in the history 
Update formatting to match what prettier-svelte 3.2.6 expects.

Signed-off-by: Tim deBoer <[email protected]>
  • Loading branch information
@deboer-tim
deboer-tim committed Jul 19, 2024
1 parent cbfb0cd commit 676165f
Show file tree
Hide file tree
Showing 16 changed files with 111 additions and 113 deletions.
4 changes: 2 additions & 2 deletions packages/frontend/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ onMount(() => {
});
</script>

<Route path="/*" breadcrumb="Bootable Containers" isAppMounted="{isMounted}" let:meta>
<Route path="/*" breadcrumb="Bootable Containers" isAppMounted={isMounted} let:meta>
<main class="flex flex-col w-screen h-screen overflow-hidden bg-[var(--pd-content-bg)]">
<div class="flex flex-row w-full h-full overflow-hidden">
<Route path="/" breadcrumb="Bootable Containers">
Expand All @@ -36,7 +36,7 @@ onMount(() => {
<Build />
</Route>
<Route path="/build/:name/:tag" breadcrumb="Build" let:meta>
<Build imageName="{decodeURIComponent(meta.params.name)}" imageTag="{decodeURIComponent(meta.params.tag)}" />
<Build imageName={decodeURIComponent(meta.params.name)} imageTag={decodeURIComponent(meta.params.tag)} />
</Route>
</div>
</main>
Expand Down
97 changes: 48 additions & 49 deletions packages/frontend/src/Build.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,45 +380,45 @@ export function goToHomePage(): void {

<FormPage
title="Build Disk Image"
inProgress="{buildInProgress}"
showBreadcrumb="{true}"
inProgress={buildInProgress}
showBreadcrumb={true}
breadcrumbLeftPart="Bootable Containers"
breadcrumbRightPart="Build Disk Image"
breadcrumbTitle="Go back to homepage"
on:close="{goToHomePage}"
on:breadcrumbClick="{goToHomePage}">
on:close={goToHomePage}
on:breadcrumbClick={goToHomePage}>
<DiskImageIcon slot="icon" size="30px" />

<div slot="content" class="p-5 min-w-full h-fit">
{#if success}
<EmptyScreen
icon="{DiskImageIcon}"
icon={DiskImageIcon}
title="Build task started"
message="Check your progress by viewing the build container, or clicking the tasks button in the bottom right corner of Podman Desktop.">
<Button
class="py-3"
on:click="{() => {
on:click={() => {
cleanup();
router.goto('/');
}}">
}}>
Go back
</Button>
</EmptyScreen>
{:else if buildErrorMessage}
<EmptyScreen icon="{faTriangleExclamation}" title="Error with image build" message="{buildErrorMessage}">
<EmptyScreen icon={faTriangleExclamation} title="Error with image build" message={buildErrorMessage}>
<Button
class="py-3"
on:click="{() => {
on:click={() => {
cleanup();
router.goto('/');
}}">
}}>
Go back
</Button>
</EmptyScreen>
{:else}
<div
class="bg-[var(--pd-content-card-bg)] pt-5 space-y-6 px-8 sm:pb-6 xl:pb-8 rounded-lg text-[var(--pd-content-card-header-text)]">
<div class="{buildInProgress ? 'opacity-40 pointer-events-none' : ''}">
<div class={buildInProgress ? 'opacity-40 pointer-events-none' : ''}>
<div class="pb-4">
<label for="modalImageTag" class="block mb-2 font-semibold">Bootable container image</label>
<div class="relative">
Expand All @@ -427,7 +427,7 @@ export function goToHomePage(): void {
class="rounded-lg block w-full p-2.5 bg-charcoal-600 pl-8 border-r-8 border-transparent outline-1 outline outline-gray-900 placeholder-gray-700 text-white"
name="imageChoice"
aria-label="image-select"
bind:value="{selectedImage}">
bind:value={selectedImage}>
<!-- Options go here -->
{#if !selectedImage}
<option value="" disabled selected>Select an image</option>
Expand All @@ -436,7 +436,7 @@ export function goToHomePage(): void {
{#each bootcAvailableImages as image}
<!-- Repo tags is an array, only show if it is > 0 and show the first one -->
{#if image.RepoTags && image.RepoTags.length > 0}
<option value="{image.RepoTags[0]}">{image.RepoTags[0]}</option>
<option value={image.RepoTags[0]}>{image.RepoTags[0]}</option>
{/if}
{/each}
{/if}
Expand All @@ -446,14 +446,14 @@ export function goToHomePage(): void {
<Fa
class="absolute left-0 top-0 ml-2 mt-3 text-[var(--pd-state-warning)]"
size="1x"
icon="{faTriangleExclamation}" />
icon={faTriangleExclamation} />
{:else if selectedImage}
<Fa class="absolute left-0 top-0 ml-2 mt-3 text-[var(--pd-state-success)]" size="1x" icon="{faCube}" />
<Fa class="absolute left-0 top-0 ml-2 mt-3 text-[var(--pd-state-success)]" size="1x" icon={faCube} />
{:else}
<Fa
class="absolute left-0 top-0 ml-2 mt-3 text-[var(--pd-state-warning)]"
size="1x"
icon="{faQuestionCircle}" />
icon={faQuestionCircle} />
{/if}
</div>
{#if bootcAvailableImages.length === 0}
Expand All @@ -471,45 +471,45 @@ export function goToHomePage(): void {
<Input
name="path"
id="path"
bind:value="{buildFolder}"
bind:value={buildFolder}
placeholder="Output folder"
class="w-full"
aria-label="folder-select" />
<Button on:click="{() => getPath()}">Browse...</Button>
<Button on:click={() => getPath()}>Browse...</Button>
</div>
</div>
<div class="pt-3 space-y-3 h-fit">
<div class="mb-2">
<span class="text-md font-semibold mb-2 block">Disk image type</span>
<div class="flex flex-col ml-1 space-y-2">
<Checkbox
checked="{buildType.includes('raw')}"
checked={buildType.includes('raw')}
title="raw-checkbox"
on:click="{e => updateBuildType('raw', e.detail)}">
on:click={e => updateBuildType('raw', e.detail)}>
RAW image with partition table (*.raw)
</Checkbox>
<Checkbox
checked="{buildType.includes('qcow2')}"
checked={buildType.includes('qcow2')}
title="qcow2-checkbox"
on:click="{e => updateBuildType('qcow2', e.detail)}">
on:click={e => updateBuildType('qcow2', e.detail)}>
Virtualization Guest Image (*.qcow2)
</Checkbox>
<Checkbox
checked="{buildType.includes('iso')}"
checked={buildType.includes('iso')}
title="iso-checkbox"
on:click="{e => updateBuildType('iso', e.detail)}">
on:click={e => updateBuildType('iso', e.detail)}>
Unattended Baremetal Installer (*.iso)
</Checkbox>
<Checkbox
checked="{buildType.includes('vmdk')}"
checked={buildType.includes('vmdk')}
title="vmdk-checkbox"
on:click="{e => updateBuildType('vmdk', e.detail)}">
on:click={e => updateBuildType('vmdk', e.detail)}>
Virtual Machine Disk image (*.vmdk)
</Checkbox>
<Checkbox
checked="{buildType.includes('ami')}"
checked={buildType.includes('ami')}
title="ami-checkbox"
on:click="{e => updateBuildType('ami', e.detail)}">
on:click={e => updateBuildType('ami', e.detail)}>
Amazon Machine Image (*.ami)
</Checkbox>
</div>
Expand All @@ -519,8 +519,8 @@ export function goToHomePage(): void {
<div class="flex items-center mb-3 space-x-3">
<label for="defaultFs" class="ml-1 flex items-center cursor-pointer" aria-label="default-radio">
<input
bind:group="{buildFilesystem}"
disabled="{fedoraDetected}"
bind:group={buildFilesystem}
disabled={fedoraDetected}
type="radio"
id="defaultFs"
name="filesystem"
Expand All @@ -530,11 +530,11 @@ export function goToHomePage(): void {
<div
class="w-4 h-4 rounded-full border-2 border-[var(--pd-input-checkbox-unchecked)] mr-2 peer-checked:border-[var(--pd-input-checkbox-checked)] peer-checked:bg-[var(--pd-input-checkbox-checked)]">
</div>
<span class="{fedoraDetected ? 'text-[var(--pd-input-field-disabled-text)]' : ''}">Default</span>
<span class={fedoraDetected ? 'text-[var(--pd-input-field-disabled-text)]' : ''}>Default</span>
</label>
<label for="xfsFs" class="ml-1 flex items-center cursor-pointer" aria-label="xfs-radio">
<input
bind:group="{buildFilesystem}"
bind:group={buildFilesystem}
type="radio"
id="xfsFs"
name="filesystem"
Expand All @@ -548,7 +548,7 @@ export function goToHomePage(): void {
</label>
<label for="ext4Fs" class="ml-1 flex items-center cursor-pointer" aria-label="ext4-radio">
<input
bind:group="{buildFilesystem}"
bind:group={buildFilesystem}
type="radio"
id="ext4Fs"
name="filesystem"
Expand All @@ -575,14 +575,14 @@ export function goToHomePage(): void {
<ul class="grid grid-cols-2 gap-x-2 max-w-md">
<li>
<input
bind:group="{buildArch}"
bind:group={buildArch}
type="radio"
id="arm64"
name="arch"
value="arm64"
class="sr-only peer"
aria-label="arm64-select"
disabled="{!availableArchitectures.includes('arm64')}" />
disabled={!availableArchitectures.includes('arm64')} />
<label
for="arm64"
class="h-full flex items-center p-5 cursor-pointer rounded-md bg-[var(--pd-content-card-inset-bg)] focus:outline-none border-[var(--pd-content-card-border-selected)] peer-checked:bg-[var(--pd-content-card-hover-inset-bg)] {availableArchitectures.includes(
Expand All @@ -598,14 +598,14 @@ export function goToHomePage(): void {
</li>
<li>
<input
bind:group="{buildArch}"
bind:group={buildArch}
type="radio"
id="amd64"
name="arch"
value="amd64"
class="sr-only peer"
aria-label="amd64-select"
disabled="{!availableArchitectures.includes('amd64')}" />
disabled={!availableArchitectures.includes('amd64')} />
<label
for="amd64"
class="h-full flex items-center p-5 cursor-pointer rounded-md bg-[var(--pd-content-card-inset-bg)] focus:outline-none border-[var(--pd-content-card-border-selected)] peer-checked:bg-[var(--pd-content-card-hover-inset-bg)] {availableArchitectures.includes(
Expand Down Expand Up @@ -633,8 +633,8 @@ export function goToHomePage(): void {
<span
class="font-semibold mb-2 block cursor-pointer"
aria-label="advanced-options"
on:click="{toggleAdvanced}"
><Fa icon="{showAdvanced ? faCaretDown : faCaretRight}" class="inline-block mr-1" />Advanced Options
on:click={toggleAdvanced}
><Fa icon={showAdvanced ? faCaretDown : faCaretRight} class="inline-block mr-1" />Advanced Options
</span>
{#if showAdvanced}
<!-- Build config -->
Expand All @@ -644,11 +644,11 @@ export function goToHomePage(): void {
<Input
name="buildconfig"
id="buildconfig"
bind:value="{buildConfigFile}"
bind:value={buildConfigFile}
placeholder="Build configuration file (config.toml or config.json)"
class="w-full"
aria-label="buildconfig-select" />
<Button on:click="{() => getBuildConfigFile()}">Browse...</Button>
<Button on:click={() => getBuildConfigFile()}>Browse...</Button>
</div>
<p class="text-sm text-[var(--pd-content-text)] pt-2">
The build configuration file is a TOML or JSON file that contains the build options for the disk
Expand All @@ -667,23 +667,23 @@ export function goToHomePage(): void {

<label for="amiName" class="block mt-2 text-sm font-bold">AMI Name</label>
<Input
bind:value="{awsAmiName}"
bind:value={awsAmiName}
name="amiName"
id="amiName"
placeholder="AMI Name to be used"
class="w-full" />

<label for="awsBucket" class="block mt-2 text-sm font-bold">S3 Bucket</label>
<Input
bind:value="{awsBucket}"
bind:value={awsBucket}
name="awsBucket"
id="awsBucket"
placeholder="AWS S3 bucket"
class="w-full" />

<label for="awsRegion" class="block mt-2 text-sm font-bold">S3 Region</label>
<Input
bind:value="{awsRegion}"
bind:value={awsRegion}
name="awsRegion"
id="awsRegion"
placeholder="AWS S3 region"
Expand All @@ -700,16 +700,15 @@ export function goToHomePage(): void {
</div>
</div>
{#if existingBuild}
<Checkbox class="ml-1" title="overwrite-checkbox" bind:checked="{overwrite}">
Overwrite existing build</Checkbox>
<Checkbox class="ml-1" title="overwrite-checkbox" bind:checked={overwrite}>Overwrite existing build</Checkbox>
{/if}
{#if errorFormValidation}
<ErrorMessage aria-label="validation" error="{errorFormValidation}" />
<ErrorMessage aria-label="validation" error={errorFormValidation} />
{/if}
{#if buildInProgress}
<Button class="w-full" disabled="{true}">Creating build task</Button>
<Button class="w-full" disabled={true}>Creating build task</Button>
{:else}
<Button on:click="{() => buildBootcImage()}" disabled="{errorFormValidation != undefined}" class="w-full"
<Button on:click={() => buildBootcImage()} disabled={errorFormValidation != undefined} class="w-full"
>Build</Button>
{/if}
</div>
Expand Down
24 changes: 12 additions & 12 deletions packages/frontend/src/Homepage.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,36 +112,36 @@ const row = new TableRow<BootcBuildInfo>({
});
</script>

<NavPage bind:searchTerm="{searchTerm}" title="Bootable Containers" searchEnabled="{true}">
<NavPage bind:searchTerm={searchTerm} title="Bootable Containers" searchEnabled={true}>
<svelte:fragment slot="additional-actions">
<Button on:click="{() => gotoBuild()}" icon="{DiskImageIcon}" title="Build">Build</Button>
<Button on:click={() => gotoBuild()} icon={DiskImageIcon} title="Build">Build</Button>
</svelte:fragment>

<svelte:fragment slot="bottom-additional-actions">
{#if selectedItemsNumber > 0}
<Button
on:click="{() => deleteSelectedBuilds()}"
on:click={() => deleteSelectedBuilds()}
title="Delete {selectedItemsNumber} selected items"
inProgress="{bulkDeleteInProgress}"
icon="{faTrash}" />
inProgress={bulkDeleteInProgress}
icon={faTrash} />
<span>On {selectedItemsNumber} selected items.</span>
{/if}
</svelte:fragment>

<div class="flex min-w-full h-full" slot="content">
<Table
kind="disk images"
bind:this="{table}"
bind:selectedItemsNumber="{selectedItemsNumber}"
data="{history}"
columns="{columns}"
row="{row}"
bind:this={table}
bind:selectedItemsNumber={selectedItemsNumber}
data={history}
columns={columns}
row={row}
defaultSortColumn="Name"
on:update="{() => (history = history)}">
on:update={() => (history = history)}>
</Table>

{#if $filtered.length === 0 && searchTerm}
<FilteredEmptyScreen icon="{DiskImageIcon}" kind="disk images" bind:searchTerm="{searchTerm}" />
<FilteredEmptyScreen icon={DiskImageIcon} kind="disk images" bind:searchTerm={searchTerm} />
{:else if history.length === 0}
<BootcEmptyScreen />
{/if}
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/lib/BootcActions.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ async function deleteBuild(): Promise<void> {
}
</script>

<ListItemButtonIcon title="Delete Build" onClick="{() => deleteBuild()}" detailed="{detailed}" icon="{faTrash}" />
<ListItemButtonIcon title="Delete Build" onClick={() => deleteBuild()} detailed={detailed} icon={faTrash} />
2 changes: 1 addition & 1 deletion packages/frontend/src/lib/BootcColumnActions.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ import BootcActions from './BootcActions.svelte';
export let object: BootcBuildInfo;
</script>

<BootcActions object="{object}" on:update />
<BootcActions object={object} on:update />
Loading

0 comments on commit 676165f

Please sign in to comment.