Map: change sludge input form

public_html/assets/css/main.css

@@ -1806,4 +1806,44 @@ table.table-search-report .tb-list th {
   justify-content: center;
   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;
+}

public_html/assets/css/mapMAPCSS.css

@@ -725,44 +725,4 @@ position: fixed;
 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;
-}

public_html/doc/customer_detail.php

@@ -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-title-info">Sludge (%)</td>
-              <td class="td-text-info">
+                  <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>
@@ -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>

public_html/lib/order_lib.php

@@ -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>
 
@@ -467,4 +471,26 @@ $(document).ready(function(){
         </div>     	
       </div>
   </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>