hyojin.ahn
/
goiintra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Map: change sludge input form

This commit is contained in:
Jaeeun.Cho 2025-10-31 10:44:18 -04:00
parent ecd2cd3c45
commit 2b9e2d4780
4 changed files with 105 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
public_html/assets/css/main.css
View File

@ -1807,3 +1807,43 @@ 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;
}

40
public_html/assets/css/mapMAPCSS.css
View File

@ -726,43 +726,3 @@ 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;
}

40
public_html/doc/customer_detail.php
View File

@ -1820,17 +1820,22 @@ $(document).ready(function(){
<tr>
<td class="td-title-info">Oil Quantity</td>
<td class="td-text-info">
<input type="text" id="d_quantity" name="d_quantity" placeholder="500" value="<?=$d_quantity?>" required='required' minlength="1" maxlength="10">
<input type="number" 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">
<input type="text" id="d_sludge" name="d_sludge" value="<?=$d_sludge?>" placeholder="50">
</td>
</tr>
<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" 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>
@ -2000,3 +2005,26 @@ $(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>

30
public_html/lib/order_lib.php
View File

@ -376,9 +376,13 @@ $(document).ready(function(){
</tr>
<tr>
<td class="td-title-info">Sludge</td>
<td class="td-title-info">Sludge (%)</td>
<td class="td-text-info">
<input type="text" id="d_sludge" name="d_sludge" value="<?=$rt_sludge['c_sludge']?>" placeholder="50">
<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>
</td>
</tr>
@ -468,3 +472,25 @@ $(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>