From 328f1af8db9a51f9cff2adb7b44d9d130ab9f9cd Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sat, 17 Apr 2021 22:53:47 +1000
Subject: [PATCH] add text to describe deckconfig warnings

---
 ts/deckconfig/ConfigEditor.svelte  |  4 ----
 ts/deckconfig/ConfigEntry.svelte   |  8 ++++++++
 ts/deckconfig/NewOptions.svelte    | 26 ++++++++++++++++----------
 ts/deckconfig/SpinBox.svelte       | 13 +++----------
 ts/deckconfig/StepsInput.svelte    | 11 +++--------
 ts/deckconfig/deckconfig-base.scss |  1 +
 6 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/ts/deckconfig/ConfigEditor.svelte b/ts/deckconfig/ConfigEditor.svelte
index 400f4d94a..270a86e73 100644
--- a/ts/deckconfig/ConfigEditor.svelte
+++ b/ts/deckconfig/ConfigEditor.svelte
@@ -16,10 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     :global(h2) {
         margin-top: 1em;
     }
-
-    :global(.warn) {
-        background-color: var(--flag1-bg);
-    }
 </style>
 
 <div>
diff --git a/ts/deckconfig/ConfigEntry.svelte b/ts/deckconfig/ConfigEntry.svelte
index a6cbe75f0..2b33e6691 100644
--- a/ts/deckconfig/ConfigEntry.svelte
+++ b/ts/deckconfig/ConfigEntry.svelte
@@ -9,6 +9,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let subLabel = "";
     export let value: any;
     export let defaultValue: any;
+    /// empty strings will be ignored
+    export let warnings: string[] = [];
 </script>
 
 <style lang="scss">
@@ -33,4 +35,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <div class="inner">
         <slot />
     </div>
+
+    {#each warnings as warning}
+        {#if warning}
+            <div class="alert alert-warning">{warning}</div>
+        {/if}
+    {/each}
 </div>
diff --git a/ts/deckconfig/NewOptions.svelte b/ts/deckconfig/NewOptions.svelte
index 49f34d54a..c8bfe4827 100644
--- a/ts/deckconfig/NewOptions.svelte
+++ b/ts/deckconfig/NewOptions.svelte
@@ -21,20 +21,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tr.schedulingShowNewCardsInRandomOrder(),
     ];
 
-    let stepsExceedGraduatingInterval: boolean;
+    $: newCardsGreaterThanParent =
+        $config.newPerDay > $parentLimits.newCards
+            ? `Daily limit will be capped to parent limit of ${$parentLimits.newCards}`
+            : "";
+
+    let stepsExceedGraduatingInterval: string;
     $: {
         const lastLearnStepInDays = $config.learnSteps.length
             ? $config.learnSteps[$config.learnSteps.length - 1] / 60 / 24
             : 0;
         stepsExceedGraduatingInterval =
-            lastLearnStepInDays > $config.graduatingIntervalGood;
+            lastLearnStepInDays > $config.graduatingIntervalGood
+                ? "Your last learning step is greater than the graduating interval."
+                : "";
     }
 
     $: goodExceedsEasy =
-        $config.graduatingIntervalGood > $config.graduatingIntervalEasy;
-
-    // fixme: change impl; support warning messages
-    $: newCardsGreaterThanParent = $config.newPerDay > $parentLimits.newCards;
+        $config.graduatingIntervalGood > $config.graduatingIntervalEasy
+            ? "The Good interval should not be larger than the Easy interval."
+            : "";
 </script>
 
 <div>
@@ -43,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <StepsInput
         label="Learning steps"
         subLabel="Learning steps, separated by spaces."
-        warn={stepsExceedGraduatingInterval}
+        warnings={[stepsExceedGraduatingInterval]}
         defaultValue={defaults.learnSteps}
         value={$config.learnSteps}
         on:changed={(evt) => ($config.learnSteps = evt.detail.value)} />
@@ -59,21 +65,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         label={tr.schedulingNewCardsday()}
         subLabel="The maximum number of new cards to introduce in a day."
         min={0}
-        warn={newCardsGreaterThanParent}
+        warnings={[newCardsGreaterThanParent]}
         defaultValue={defaults.newPerDay}
         bind:value={$config.newPerDay} />
 
     <SpinBox
         label={tr.schedulingGraduatingInterval()}
         subLabel="Days to wait after answering Good on the last learning step."
-        warn={stepsExceedGraduatingInterval || goodExceedsEasy}
+        warnings={[stepsExceedGraduatingInterval, goodExceedsEasy]}
         defaultValue={defaults.graduatingIntervalGood}
         bind:value={$config.graduatingIntervalGood} />
 
     <SpinBox
         label={tr.schedulingEasyInterval()}
         subLabel="Days to wait after answering Easy on the first learning step."
-        warn={goodExceedsEasy}
+        warnings={[goodExceedsEasy]}
         defaultValue={defaults.graduatingIntervalEasy}
         bind:value={$config.graduatingIntervalEasy} />
 
diff --git a/ts/deckconfig/SpinBox.svelte b/ts/deckconfig/SpinBox.svelte
index 0693771fd..786d51251 100644
--- a/ts/deckconfig/SpinBox.svelte
+++ b/ts/deckconfig/SpinBox.svelte
@@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let value: number;
     export let min = 1;
     export let max = 9999;
-    export let warn = false;
+    export let warnings: string[] = [];
     export let defaultValue: number = 0;
 
     function blur() {
@@ -22,13 +22,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ConfigEntry {label} {subLabel} bind:value {defaultValue}>
-    <input
-        type="number"
-        {min}
-        {max}
-        bind:value
-        on:blur={blur}
-        class:warn
-        class="form-control" />
+<ConfigEntry {label} {subLabel} {warnings} bind:value {defaultValue}>
+    <input type="number" {min} {max} bind:value on:blur={blur} class="form-control" />
 </ConfigEntry>
diff --git a/ts/deckconfig/StepsInput.svelte b/ts/deckconfig/StepsInput.svelte
index 2cc257bfb..4c366da3d 100644
--- a/ts/deckconfig/StepsInput.svelte
+++ b/ts/deckconfig/StepsInput.svelte
@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let subLabel: string;
     export let value: number[];
     export let defaultValue: number[];
-    export let warn: boolean = false;
+    export let warnings: string[] = [];
 
     const dispatch = createEventDispatcher();
 
@@ -35,11 +35,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<ConfigEntry {label} {subLabel} {value} {defaultValue} on:revert={revert}>
-    <input
-        type="text"
-        value={stringValue}
-        on:blur={update}
-        class:warn
-        class="form-control" />
+<ConfigEntry {label} {subLabel} {value} {defaultValue} {warnings} on:revert={revert}>
+    <input type="text" value={stringValue} on:blur={update} class="form-control" />
 </ConfigEntry>
diff --git a/ts/deckconfig/deckconfig-base.scss b/ts/deckconfig/deckconfig-base.scss
index 840bb5e28..3f65f0344 100644
--- a/ts/deckconfig/deckconfig-base.scss
+++ b/ts/deckconfig/deckconfig-base.scss
@@ -7,6 +7,7 @@
 @import "ts/sass/bootstrap/button-group";
 @import "ts/sass/bootstrap/modal";
 @import "ts/sass/bootstrap/close";
+@import "ts/sass/bootstrap/alert";
 
 .night-mode {
     @include scrollbar.night-mode;