revert Map: change sludge input form
This commit is contained in:
hyojin.ahn 2025-10-31 13:48:30 -04:00
parent 2b9e2d4780
commit 93d0f662ba
4 changed files with 51 additions and 105 deletions

View File

@ -1807,43 +1807,3 @@ table.table-search-report .tb-list th {
align-items: center;
z-index: 999;
}
/* Input > Sludge */
.number-input {
display: flex;
align-items: center;
gap: 5px;
}
.number-input input {
width: 100%;
text-align: center;
}
.number-input button {
padding: 5px 10px;
cursor: pointer;
}
/* 기본 화살표 제거 */
.d_sludge::-webkit-inner-spin-button,
.d_sludge::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.d_sludge {
-moz-appearance: textfield;
}
.left, .right {
background: none;
border: none;
color: #77B469;
font-weight: bold;
cursor: pointer;
padding: 0;
margin: 0;
appearance: none;
box-shadow: none;
outline: none;
}

View File

@ -726,3 +726,43 @@ bottom: 0px;
width: 100%;
z-index: 34;
}
/* Map > Input > Sludge */
.number-input {
display: flex;
align-items: center;
gap: 5px;
}
.number-input input {
width: 100%;
text-align: center;
}
.number-input button {
padding: 5px 10px;
cursor: pointer;
}
/* 기본 화살표 제거 */
.d_sludge::-webkit-inner-spin-button,
.d_sludge::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.d_sludge {
-moz-appearance: textfield;
}
.left, .right {
background: none;
border: none;
color: #77B469;
font-weight: bold;
cursor: pointer;
padding: 0;
margin: 0;
appearance: none;
box-shadow: none;
outline: none;
}

View File

@ -1820,22 +1820,17 @@ $(document).ready(function(){
<tr>
<td class="td-title-info">Oil Quantity</td>
<td class="td-text-info">
<input type="number" id="d_quantity" name="d_quantity" placeholder="500" value="<?=$d_quantity?>" required='required' minlength="1" maxlength="10">
<input type="text" id="d_quantity" name="d_quantity" placeholder="500" value="<?=$d_quantity?>" required='required' minlength="1" maxlength="10">
</td>
</tr>
<tr>
<td class="td-title-info">Sludge (%)</td>
<td class="td-text-info">
<td class="td-title-info">Sludge</td>
<td class="td-text-info">
<input type="text" id="d_sludge" name="d_sludge" value="<?=$d_sludge?>" placeholder="50">
</td>
</tr>
<div class="number-input">
<button class="left" type="button"></button>
<input type="number" id="d_sludge" name="d_sludge" class="d_sludge" value="<?=$d_sludge?>" placeholder="50" min="0" max="100">
<button class="right" type="button"></button>
</div>
</td>
</tr>
<? if ($d_paymenttype =="CA") { ?>
<tr>
<td class="td-title-info">Cash</td>
@ -2005,26 +2000,3 @@ $(document).ready(function(){
$("#signature64").val('');
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.number-input').forEach(container => {
const input = container.querySelector('.d_sludge');
const leftBtn = container.querySelector('.left');
const rightBtn = container.querySelector('.right');
const step = 5;
leftBtn.addEventListener('click', () => {
const min = input.min ? parseInt(input.min) : -Infinity;
let value = parseInt(input.value || 0);
if (value - step >= min) input.value = value - step;
});
rightBtn.addEventListener('click', () => {
const max = input.max ? parseInt(input.max) : Infinity;
let value = parseInt(input.value || 0);
if (value + step <= max) input.value = value + step;
});
});
});
</script>

View File

@ -376,13 +376,9 @@ $(document).ready(function(){
</tr>
<tr>
<td class="td-title-info">Sludge (%)</td>
<td class="td-title-info">Sludge</td>
<td class="td-text-info">
<div class="number-input">
<button class="left" type="button"></button>
<input type="number" class="d_sludge" id="d_sludge" name="d_sludge" value="<?=$rt_sludge['c_sludge']?>" placeholder="50" min="0" max="100">
<button class="right" type="button"></button>
</div>
<input type="text" id="d_sludge" name="d_sludge" value="<?=$rt_sludge['c_sludge']?>" placeholder="50">
</td>
</tr>
@ -472,25 +468,3 @@ $(document).ready(function(){
</div>
</div>
</div>
<script>
document.querySelectorAll('.number-input').forEach(container => {
const input = container.querySelector('.d_sludge');
const leftBtn = container.querySelector('.left');
const rightBtn = container.querySelector('.right');
const step = 5;
leftBtn.addEventListener('click', () => {
const min = input.min ? parseInt(input.min) : -Infinity;
let value = parseInt(input.value || 0);
if (value - step >= min) input.value = value - step;
});
rightBtn.addEventListener('click', () => {
const max = input.max ? parseInt(input.max) : Infinity;
let value = parseInt(input.value || 0);
if (value + step <= max) input.value = value + step;
});
});
</script>