From c9cb0c719c531d5fcf15c355de6a6110773d5cfa Mon Sep 17 00:00:00 2001
From: rxdn <29165304+rxdn@users.noreply.github.com>
Date: Thu, 20 Jun 2024 17:10:16 +0100
Subject: [PATCH] limit to 255 for short answers

---
 .../src/components/form/DoubleRangeSlider.svelte |  2 ++
 .../src/components/manage/FormInputRow.svelte    | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/form/DoubleRangeSlider.svelte b/frontend/src/components/form/DoubleRangeSlider.svelte
index a7730b5..dc88f8f 100644
--- a/frontend/src/components/form/DoubleRangeSlider.svelte
+++ b/frontend/src/components/form/DoubleRangeSlider.svelte
@@ -89,6 +89,8 @@
     let rightOffset = 0;
 
     $: {
+        console.log(end)
+
         if (prevWidth !== width) {
             leftOffset = (width - (sliderDiameter / 2)) * ((start - min) / (max - min));
             rightOffset = (width - (sliderDiameter / 2)) * ((end - min) / (max - min));
diff --git a/frontend/src/components/manage/FormInputRow.svelte b/frontend/src/components/manage/FormInputRow.svelte
index f91b6af..698283a 100644
--- a/frontend/src/components/manage/FormInputRow.svelte
+++ b/frontend/src/components/manage/FormInputRow.svelte
@@ -30,14 +30,18 @@
            placeholder="Placeholder text for the field, just like this text" />
     <div class="col-2 properties-group">
       <div class="row">
-        <Dropdown col2={true} label="Style" bind:value={data.style}>
+        <Dropdown col2={true} label="Style" bind:value={data.style} on:change={updateStyle}>
           <option value=1 selected>Short</option>
           <option value=2>Multi-line</option>
         </Dropdown>
       </div>
       <div class="row" style="gap: 10px">
         <Checkbox label="Required" bind:value={data.required}/>
-        <DoubleRangeSlider label="Answer Length Range" bind:start={data.min_length} bind:end={data.max_length} min={0} max={1024} />
+        {#if data.style == 1}
+          <DoubleRangeSlider label="Answer Length Range" bind:start={data.min_length} bind:end={data.max_length} min={0} max={255} />
+        {:else}
+          <DoubleRangeSlider label="Answer Length Range" bind:start={data.min_length} bind:end={data.max_length} min={0} max={1024} />
+        {/if}
       </div>
     </div>
   </div>
@@ -117,6 +121,14 @@
   function forwardMove(direction) {
     dispatch('move', {direction: direction});
   }
+
+  function updateStyle(e) {
+      if (e.target.value == 1) { // Short
+          if (data.max_length > 255) {
+              data.max_length = 255
+          }
+      }
+  }
 </script>
 
 <style>