From bc6907ef8d480049cd9c2df3c0ed66b985eb1a40 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 29 May 2021 12:29:22 +0200
Subject: [PATCH] Implement SpinBoxRow

---
 ts/deckoptions/DailyLimits.svelte  | 55 ++++++++++--------------------
 ts/deckoptions/LapseOptions.svelte |  4 +--
 ts/deckoptions/NewOptions.svelte   |  6 ++--
 ts/deckoptions/SpinBoxRow.svelte   | 26 ++++++++++++++
 ts/deckoptions/Warning.svelte      | 18 ++++++++++
 ts/deckoptions/Warnings.svelte     | 20 -----------
 6 files changed, 67 insertions(+), 62 deletions(-)
 create mode 100644 ts/deckoptions/SpinBoxRow.svelte
 create mode 100644 ts/deckoptions/Warning.svelte
 delete mode 100644 ts/deckoptions/Warnings.svelte

diff --git a/ts/deckoptions/DailyLimits.svelte b/ts/deckoptions/DailyLimits.svelte
index d45324f81..4f1eeaa6c 100644
--- a/ts/deckoptions/DailyLimits.svelte
+++ b/ts/deckoptions/DailyLimits.svelte
@@ -3,15 +3,10 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import Warnings from "./Warnings.svelte";
-    import SpinBox from "./SpinBox.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import Warning from "./Warning.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -41,37 +36,23 @@
 </script>
 
 <TitledContainer title={tr.deckConfigDailyLimits()}>
-    <Row>
-        <Col size={7}>
-            {tr.schedulingNewCardsday()}<HelpPopup
-                html={marked(tr.deckConfigNewLimitTooltip() + v3Extra)}
-            />
-        </Col>
-        <Col size={5}>
-            <SpinBox min={0} bind:value={$config.newPerDay} />
-            <RevertButton
-                defaultValue={defaults.newPerDay}
-                bind:value={$config.newPerDay}
-            />
-        </Col>
-    </Row>
+    <SpinBoxRow
+        bind:value={$config.newPerDay}
+        defaultValue={defaults.newPerDay}
+        markdownTooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
+    >
+        {tr.schedulingNewCardsday()}
+    </SpinBoxRow>
 
-    <Warnings warnings={[newCardsGreaterThanParent]} />
+    <Warning warning={newCardsGreaterThanParent} />
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingMaximumReviewsday()}<HelpPopup
-                html={marked(tr.deckConfigReviewLimitTooltip() + v3Extra)}
-            />
-        </Col>
-        <Col size={5}>
-            <SpinBox min={0} bind:value={$config.reviewsPerDay} />
-            <RevertButton
-                defaultValue={defaults.reviewsPerDay}
-                bind:value={$config.reviewsPerDay}
-            />
-        </Col>
-    </Row>
+    <SpinBoxRow
+        bind:value={$config.reviewsPerDay}
+        defaultValue={defaults.reviewsPerDay}
+        markdownTooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
+    >
+        {tr.schedulingMaximumReviewsday()}
+    </SpinBoxRow>
 
-    <Warnings warnings={[reviewsTooLow]} />
+    <Warning warning={reviewsTooLow} />
 </TitledContainer>
diff --git a/ts/deckoptions/LapseOptions.svelte b/ts/deckoptions/LapseOptions.svelte
index c6d529440..37bf3aed4 100644
--- a/ts/deckoptions/LapseOptions.svelte
+++ b/ts/deckoptions/LapseOptions.svelte
@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import TitledContainer from "./TitledContainer.svelte";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import Warnings from "./Warnings.svelte";
+    import Warning from "./Warning.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import EnumSelector from "./EnumSelector.svelte";
@@ -65,7 +65,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </Col>
     </Row>
 
-    <Warnings warnings={[stepsExceedMinimumInterval]} />
+    <Warning warning={stepsExceedMinimumInterval} />
 
     <Row>
         <Col size={7}>
diff --git a/ts/deckoptions/NewOptions.svelte b/ts/deckoptions/NewOptions.svelte
index 736762d40..4ff65a254 100644
--- a/ts/deckoptions/NewOptions.svelte
+++ b/ts/deckoptions/NewOptions.svelte
@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import TitledContainer from "./TitledContainer.svelte";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import Warnings from "./Warnings.svelte";
+    import Warning from "./Warning.svelte";
     import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import StepsInput from "./StepsInput.svelte";
@@ -73,7 +73,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </Col>
     </Row>
 
-    <Warnings warnings={[stepsExceedGraduatingInterval]} />
+    <Warning warning={stepsExceedGraduatingInterval} />
 
     <Row>
         <Col size={7}>
@@ -90,7 +90,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </Col>
     </Row>
 
-    <Warnings warnings={[goodExceedsEasy]} />
+    <Warning warning={goodExceedsEasy} />
 
     <Row>
         <Col size={7}>
diff --git a/ts/deckoptions/SpinBoxRow.svelte b/ts/deckoptions/SpinBoxRow.svelte
new file mode 100644
index 000000000..b55032386
--- /dev/null
+++ b/ts/deckoptions/SpinBoxRow.svelte
@@ -0,0 +1,26 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import marked from "marked";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import SpinBox from "./SpinBox.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
+    export let value: any;
+    export let defaultValue: any;
+    export let markdownTooltip: string;
+</script>
+
+<Row>
+    <Col size={7}>
+        <slot /><HelpPopup html={marked(markdownTooltip)} />
+    </Col>
+    <Col size={5}>
+        <SpinBox min={0} bind:value />
+        <RevertButton {defaultValue} bind:value />
+    </Col>
+</Row>
diff --git a/ts/deckoptions/Warning.svelte b/ts/deckoptions/Warning.svelte
new file mode 100644
index 000000000..e80fdb09c
--- /dev/null
+++ b/ts/deckoptions/Warning.svelte
@@ -0,0 +1,18 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { slide } from "svelte/transition";
+    import Row from "./Row.svelte";
+
+    export let warning: string;
+</script>
+
+{#if warning}
+    <Row>
+        <div class="col-12 alert alert-warning mb-0" in:slide out:slide>
+            {warning}
+        </div>
+    </Row>
+{/if}
diff --git a/ts/deckoptions/Warnings.svelte b/ts/deckoptions/Warnings.svelte
deleted file mode 100644
index 10fe77b01..000000000
--- a/ts/deckoptions/Warnings.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { slide } from "svelte/transition";
-    import Row from "./Row.svelte";
-
-    export let warnings: string[] = [];
-</script>
-
-{#each warnings as warning}
-    {#if warning}
-        <Row>
-            <div class="col-12 alert alert-warning mb-0" in:slide out:slide>
-                {warning}
-            </div>
-        </Row>
-    {/if}
-{/each}