From ab7709b0cb146b5ae3b606824fe88924cc4aa043 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 5 Apr 2023 19:21:13 +0200
Subject: [PATCH] minor schedule nits

---
 frontend/src/lib/components/CronInput.svelte  | 22 ++++++++++++++-----
 .../(logged)/flows/get/[...path]/+page.svelte |  4 ++--
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index 764980195b..e8c9a41dd5 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { ScheduleService } from '$lib/gen'
 	import { emptyString, formatCron } from '$lib/utils'
+	import Badge from './Badge.svelte'
 	import { Tab } from './common/index.js'
 	import Tabs from './common/tabs/Tabs.svelte'
 	// @ts-ignore
@@ -162,7 +163,7 @@
 
 					<div class="w-full flex gap-4">
 						<div class="w-full flex flex-col gap-1">
-							<select name="execute_every" id="execute_every" bind:value={executeEvery}>
+							<select {disabled} name="execute_every" id="execute_every" bind:value={executeEvery}>
 								<option value="second">Second(s)</option>
 								<option value="minute">Minute(s)</option>
 								<option value="hour">Hour(s)</option>
@@ -174,13 +175,13 @@
 
 						<div class="w-full flex flex-col gap-1 justify-center">
 							{#if executeEvery == 'second'}
-								<input type="number" min="0" max="59" bind:value={seconds} />
+								<input {disabled} type="number" min="0" max="59" bind:value={seconds} />
 								<small>Valid range 0-59</small>
 							{:else if executeEvery == 'minute'}
-								<input type="number" min="0" max="59" bind:value={minutes} />
+								<input {disabled} type="number" min="0" max="59" bind:value={minutes} />
 								<small>Valid range 0-59</small>
 							{:else if executeEvery == 'hour'}
-								<input type="number" min="0" max="23" bind:value={hours} />
+								<input {disabled} type="number" min="0" max="23" bind:value={hours} />
 								<small>Valid range 0-23</small>
 							{:else if executeEvery == 'day-month'}
 								<!-- <div class="w-full flex">
@@ -200,6 +201,7 @@
 					{#if executeEvery == 'month'}
 						<div class="w-full flex flex-col">
 							<Multiselect
+								{disabled}
 								bind:selected={monthsOfYear}
 								options={monthsOfYearOptions}
 								selectedOptionsDraggable={false}
@@ -211,6 +213,7 @@
 					{#if executeEvery == 'day-week'}
 						<div class="w-full flex flex-col">
 							<Multiselect
+								{disabled}
 								bind:selected={daysOfWeek}
 								options={daysOfWeekOptions}
 								selectedOptionsDraggable={false}
@@ -227,6 +230,7 @@
 							<div class="w-full flex gap-4">
 								<div class="w-full flex">
 									<Multiselect
+										{disabled}
 										bind:selected={daysOfMonth}
 										options={daysOfMonthOptions}
 										selectedOptionsDraggable={false}
@@ -252,7 +256,7 @@
 					{#if executeEvery == 'day-month' || executeEvery == 'month' || executeEvery == 'day-week'}
 						<div class="w-full flex flex-col gap-1">
 							<small class="font-bold">At UTC Time</small>
-							<input type="time" name="atUTCTime" id="atUTCTime" bind:value={UTCTime} />
+							<input {disabled} type="time" name="atUTCTime" id="atUTCTime" bind:value={UTCTime} />
 						</div>
 					{/if}
 				</div>
@@ -285,7 +289,13 @@
 			<div class="w-full flex flex-col gap-1">
 				<small class="font-bold">Timezone</small>
 
-				<TimezonePicker {timezone} on:update={(e) => (timezone = e.detail.timezone)} />
+				{#if disabled}
+					<div>
+						<Badge>{timezone}</Badge>
+					</div>
+				{:else}
+					<TimezonePicker {timezone} on:update={(e) => (timezone = e.detail.timezone)} />
+				{/if}
 
 				<!-- <select name="timezone" id="timezone" bind:value={offset}>
 					<option value={-11 * 60}>UTC-11</option>
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 83e8d59e74..6cb2d7f042 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -326,7 +326,7 @@
 						></Tooltip
 					></h2
 				>
-				<div class="box max-w-2xl">
+				<div class="box max-w-5xl">
 					<div class="flex w-full flex-justify-between mb-1">
 						<a
 							on:click={(e) => {
@@ -411,7 +411,7 @@
 						<div class="max-w-lg">
 							<JobArgs args={schedule.args ?? {}} />
 						</div>
-						<div class="box max-w-lg mt-2">
+						<div class="box max-w-5xl mt-2">
 							<CronInput
 								disabled={true}
 								edit={true}