Support editing zone record TTL field

src/components/TTLEditor.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  export let value: number | null;
+
+  const fiveMinutes = 60 * 5; // 300 seconds
+  const oneHour = 60 * 60;
+  const twoHours = oneHour * 2;
+  const oneDay = oneHour * 24;
+  const twoDays = oneDay * 2;
+  const oneWeek = oneDay * 7;
+
+  const ttlOptions = [
+    {value: "default", name: "Default"},
+    {value: "custom", name: "Custom"},
+    {value: fiveMinutes, name: "Five Minutes"},
+    {value: oneHour, name: "One Hour"},
+    {value: twoHours, name: "Two Hours"},
+    {value: oneDay, name: "One Day"},
+    {value: twoDays, name: "Two Days"},
+    {value: oneWeek, name: "One Week"},
+  ];
+
+  let currentPreset: string | number;
+  let newValue: number;
+
+  // Update currentPresent to match the state of value
+  $: {
+    newValue = value ?? 0;
+
+    currentPreset = "custom";
+    if (value === null) {
+      currentPreset = "default";
+    } else {
+      for (const option of ttlOptions) {
+        if (value === option.value) {
+          currentPreset = value;
+          break;
+        }
+      }
+    }
+  }
+
+  function updateOutput() {
+    // Follow the preset
+    if (currentPreset === "default") {
+      value = null;
+      newValue = 0;
+    }
+    if (typeof currentPreset === "number") {
+      value = currentPreset;
+      newValue = currentPreset;
+    }
+  }
+</script>
+
+<div>
+  <select bind:value={currentPreset} on:change={() => updateOutput()}>
+    {#each ttlOptions as option}
+      <option value={option.value}>{option.name}</option>
+    {/each}
+  </select>
+  <span class:hide-custom-input={currentPreset !== "custom"}>
+    <input type="text" class="code-font" bind:value={newValue} on:change={() => updateOutput()} />
+    seconds
+  </span>
+</div>
+
+<style>
+  .hide-custom-input {
+    display: none;
+  }
+</style>

src/components/create-domains/ACreate.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {DnsTypeA, DnsTypeAAAA, type AaaaValue, type ApiRecordFormat, type AValue} from "../../types/records";
   import {IPv4, IPv6, parse as parseAddr} from "ipaddr.js";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<AValue | AaaaValue>;
   export let editMode: boolean;
@@ -30,6 +31,9 @@
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
 
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
+
 <div>IP Address</div>
 <div><input type="text" class="code-font" bind:value size={Math.max(20, value.length + 2)} /></div>
 {#if editItem.type === DnsTypeA}

src/components/create-domains/CaaCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, CaaValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<CaaValue>;
   export let editMode: boolean;
@@ -11,6 +12,8 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Tag</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.tag} size={Math.max(20, editItem.value.tag.length + 2)} /></div>
 <div>Value</div>

src/components/create-domains/CnameCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, CnameValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<CnameValue>;
   export let editMode: boolean;
@@ -11,5 +12,7 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Target</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.target} size={Math.max(20, editItem.value.target.length + 2)} /></div>

src/components/create-domains/MxCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, MxValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<MxValue>;
   export let editMode: boolean;
@@ -11,6 +12,8 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Mail Server</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.target} size={Math.max(20, editItem.value.target.length + 2)} /></div>
 <div>Preference</div>

src/components/create-domains/NsCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, NsValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<NsValue>;
   export let editMode: boolean;
@@ -11,5 +12,7 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Nameserver</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.target} size={Math.max(20, editItem.value.target.length + 2)} /></div>

src/components/create-domains/PtrCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, PtrValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<PtrValue>;
   export let editMode: boolean;
@@ -11,5 +12,7 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Target</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.target} size={Math.max(20, editItem.value.target.length + 2)} /></div>

src/components/create-domains/SrvCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, SrvValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<SrvValue>;
   export let editMode: boolean;
@@ -18,6 +19,8 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Priority</div>
 <div><input type="number" class="code-font" bind:value={editItem.value.priority} /></div>
 <div>Weight</div>

src/components/create-domains/TxtCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {ApiRecordFormat, TxtValue} from "../../types/records";
+  import TTLEditor from "../TTLEditor.svelte";
 
   export let editItem: ApiRecordFormat<TxtValue>;
   export let editMode: boolean;
@@ -15,5 +16,7 @@
 {:else}
   <div><input type="text" class="code-font" bind:value={editItem.name} size={Math.max(20, editItem.name.length + 2)} /></div>
 {/if}
+<div>Time-To-Live</div>
+<TTLEditor bind:value={editItem.ttl} />
 <div>Value</div>
 <div><input type="text" class="code-font" bind:value={editItem.value.text} size={constrain(20, 100, editItem.value.text.length + 2)} /></div>