Skip to content

Commit 7d7ada5

Browse files
krvspacetimekrvspacetime
committed
fix: Fix checkbox and other input state resetting after form submition
- Add 'use_manual_input' and 'size_unit' to the initial context in 'index.py' GET route - Add a function called 'restoreFormState' to properly keep form and input values after a successful form submition - Remove unused variable minp in 'utils.js' - Add 'default_file_size_manual', 'use_manual_input' and 'size_unit' as new context values in the HTMLResponse in the home page
1 parent fb2500a commit 7d7ada5

File tree

4 files changed

+65
-37
lines changed

4 files changed

+65
-37
lines changed

‎src/server/query_processor.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ async def process_query(
7878
"pattern_type": pattern_type,
7979
"pattern": pattern,
8080
"use_manual_input": "true" if is_file_size_manual else "false",
81-
"max_file_size_manual": str(slider_position) if is_file_size_manual else "",
81+
"max_file_size_manual": slider_position if is_file_size_manual else None,
8282
"size_unit": size_unit,
8383
}
8484

‎src/server/routers/index.py‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ async def home(request: Request) -> HTMLResponse:
3737
"request": request,
3838
"examples": EXAMPLE_REPOS,
3939
"default_file_size": 243,
40+
"default_file_size_manual": 50,
41+
"use_manual_input": "false",
42+
"size_unit": "kb",
4043
},
4144
)
4245

‎src/server/templates/components/git_form.jinja‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,6 @@
1515
}
1616
1717
changeFilesizeInputType(checkbox);
18-
19-
const slider = document.getElementById('file_size');
20-
const sizeValueDisplay = document.getElementById('size_value');
21-
if (slider && sizeValueDisplay) {
22-
updateSliderDisplay(slider.value);
23-
}
2418
});
2519
2620
function changePattern(element) {
@@ -48,17 +42,11 @@
4842
const hiddenSizeInput = document.getElementById('max_file_size_manual');
4943
const sizeUnitInput = document.getElementById('size_unit_input');
5044
51-
if (sizeUnitInput.value === 'mb') {
52-
document.getElementById('size-mb').checked = true;
53-
} else {
54-
document.getElementById('size-kb').checked = true;
55-
}
56-
5745
hiddenInput.value = element.checked ? "true" : "false";
5846
5947
if (element.checked) {
60-
sliderContainer.classList.add('hidden');
61-
manualSizeInput.classList.remove('hidden');
48+
sliderContainer.style.display = "none";
49+
manualSizeInput.style.display = "flex";
6250
const sizeUnit = sizeUnitInput.value;
6351
const maxValue = sizeUnit === 'kb' ? 100 * 1024 : 100;
6452
manualSizeValueInput.max = maxValue;
@@ -67,8 +55,9 @@
6755
}
6856
hiddenSizeInput.value = manualSizeValueInput.value || "1024";
6957
} else {
70-
sliderContainer.classList.remove('hidden');
71-
manualSizeInput.classList.add('hidden');
58+
manualSizeInput.style.display = "none";
59+
sliderContainer.style.display = "flex";
60+
sliderContainer.style.flexDirection = "column";
7261
7362
const sliderValue = document.getElementById('file_size').value;
7463
hiddenSizeInput.value = sliderValue;
@@ -96,21 +85,10 @@
9685
manualSizeValueInput.value = 100;
9786
hiddenSizeInput.value = 100;
9887
}
99-
100-
console.log("Size unit changed to: " + sizeUnit.toUpperCase());
10188
}
102-
103-
document.getElementById('max_file_size_manual_input').addEventListener('input', function() {
104-
const maxValue = parseInt(this.max);
105-
const currentValue = parseInt(this.value);
106-
107-
if (currentValue > maxValue) {
108-
this.value = maxValue;
109-
}
110-
});
11189
</script>
11290
<div class="relative">
113-
<div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
91+
<div class="w-full lg:h-[90%] sm:h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
11492
<div class="rounded-xl relative z-20 pl-8 sm:pl-10 pr-8 sm:pr-16 py-8 border-[3px] border-gray-900 bg-[#fff4da]">
11593
<img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
11694
class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">
@@ -186,18 +164,17 @@
186164
</div>
187165
</div>
188166
</div>
189-
<div class="flex items-center gap-4 h-[50px]">
167+
<div class="flex items-center gap-4 h-[40px]">
190168
<div class="mt-4">
191169
<label class="flex flex-col items-center cursor-pointer">
192170
<input type="checkbox"
193171
id="use_manual_input"
194172
name="use_manual_input"
195-
value="false"
196173
class="sr-only peer w-12"
197174
onchange="changeFilesizeInputType(this)">
198175
<div class="relative w-12 h-6 bg-[#ebdbb7] peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#FE4A60]/30 rounded-full peer border-[2px] border-gray-900 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-5 after:transition-all peer-checked:bg-[#FE4A60]">
199176
</div>
200-
<p class="ms-1 text-sm font-medium text-gray-900">Manual</p>
177+
<p class="ms-1 text-xs font-medium text-gray-900">Manual</p>
201178
</label>
202179
</div>
203180
<div id="slider_container" class="w-[200px] sm:w-[200px] mt-3">
@@ -213,15 +190,15 @@
213190
value="{{ default_file_size }}"
214191
class="w-full h-3 bg-[#FAFAFA] bg-no-repeat bg-[length:50%_100%] bg-[#ebdbb7] appearance-none border-[3px] border-gray-900 rounded-sm focus:outline-none bg-gradient-to-r from-[#FE4A60] to-[#FE4A60] [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-7 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-gray-900 [&::-webkit-slider-thumb]:shadow-[3px_3px_0_#000]">
215192
</div>
216-
<div id="manual_size_input_container" class="hidden mt-3 flex gap-2">
193+
<div id="manual_size_input_container" class="mt-3 flex gap-2">
217194
<div>
218195
<label for="max_file_size_manual_input" class="block text-gray-700 mb-1">Include files under:</label>
219196
<input type="number"
220197
id="max_file_size_manual_input"
221198
name="max_file_size_manual"
222199
min="1"
223200
max="{{ '102400' if size_unit == 'kb' else '100' }}"
224-
value="{{ max_file_size_manual }}"
201+
value="{{ default_file_size_manual }}"
225202
class="lg:w-[150px] sm:w-[100px] border-[3px] border-gray-900 rounded-sm focus:outline-none bg-[#ebdbb7] appearance-none indent-2"
226203
style="-webkit-appearance: none;
227204
color: #333"
@@ -235,8 +212,7 @@
235212
name="size_unit"
236213
class="w-4 h-4"
237214
{% if size_unit == 'kb' %}checked{% endif %}
238-
onchange="updateSizeUnit(this)"
239-
style="background-color:red">
215+
onchange="updateSizeUnit(this)">
240216
<label for="size-kb" class="ms-2 text-sm font-medium text-gray-900">KB</label>
241217
</div>
242218
<div class="flex items-center mt-1">

‎src/static/js/utils.js‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@ function handleSubmit(event, showLoading = false) {
6969
formData.append('pattern', pattern.value);
7070
}
7171

72+
// Save the current state of the form for restoration after response
73+
const useManualInput = document.getElementById('use_manual_input').checked;
74+
const sizeUnit = document.getElementById('size_unit_input').value;
75+
const manualSizeValue = document.getElementById('max_file_size_manual_input')?.value || '';
76+
7277
const originalContent = submitButton.innerHTML;
7378
const currentStars = document.getElementById('github-stars')?.textContent;
7479

@@ -104,6 +109,9 @@ function handleSubmit(event, showLoading = false) {
104109
// Reinitialize slider functionality
105110
initializeSlider();
106111

112+
// Restore form state
113+
restoreFormState(useManualInput, sizeUnit, manualSizeValue);
114+
107115
const starsElement = document.getElementById('github-stars');
108116
if (starsElement && starCount) {
109117
starsElement.textContent = starCount;
@@ -122,6 +130,47 @@ function handleSubmit(event, showLoading = false) {
122130
});
123131
}
124132

133+
// Function to restore form state after receiving response
134+
function restoreFormState(useManualInput, sizeUnit, manualSizeValue) {
135+
const checkbox = document.getElementById('use_manual_input');
136+
const sizeUnitInput = document.getElementById('size_unit_input');
137+
const manualSizeValueInput = document.getElementById('max_file_size_manual_input');
138+
const hiddenInput = document.getElementById('file_size_manual');
139+
const sliderContainer = document.getElementById('slider_container');
140+
const manualSizeInput = document.getElementById('manual_size_input_container');
141+
142+
if (!checkbox || !sizeUnitInput) return;
143+
144+
// Set checkbox state
145+
checkbox.checked = useManualInput;
146+
hiddenInput.value = useManualInput ? "true" : "false";
147+
148+
// Set size unit
149+
sizeUnitInput.value = sizeUnit;
150+
if (sizeUnit === 'mb') {
151+
document.getElementById('size-mb').checked = true;
152+
} else {
153+
document.getElementById('size-kb').checked = true;
154+
}
155+
156+
// Set manual size value if applicable
157+
if (manualSizeValueInput && manualSizeValue) {
158+
manualSizeValueInput.value = manualSizeValue;
159+
}
160+
161+
// Show/hide appropriate containers based on checkbox state
162+
if (useManualInput) {
163+
if (sliderContainer) sliderContainer.style.display = "none";
164+
if (manualSizeInput) manualSizeInput.style.display = "flex";
165+
} else {
166+
if (manualSizeInput) manualSizeInput.style.display = "none";
167+
if (sliderContainer) {
168+
sliderContainer.style.display = "flex";
169+
sliderContainer.style.flexDirection = "column";
170+
}
171+
}
172+
}
173+
125174
function copyFullDigest() {
126175
const directoryStructure = document.getElementById('directory-structure-content').value;
127176
const filesContent = document.querySelector('.result-text').value;
@@ -147,7 +196,6 @@ function copyFullDigest() {
147196

148197
// Add the logSliderToSize helper function
149198
function logSliderToSize(position) {
150-
const minp = 0;
151199
const maxp = 500;
152200
const minv = Math.log(1);
153201
const maxv = Math.log(102400);
@@ -193,6 +241,7 @@ window.copyText = copyText;
193241
window.handleSubmit = handleSubmit;
194242
window.initializeSlider = initializeSlider;
195243
window.formatSize = formatSize;
244+
window.restoreFormState = restoreFormState;
196245

197246
// Add this new function
198247
function setupGlobalEnterHandler() {

0 commit comments

Comments
 (0)