v1.2.17

- [CUSTOMER] 오일픽업히스토리 창 추가.
2026-05-08 13:36:47 -04:00 · 2026-05-08 13:36:47 -04:00 · b79f0347a1
parent 9266bb1d71
commit b79f0347a1
2 changed files with 209 additions and 15 deletions
--- a/public_html/assets/css/main.css
+++ b/public_html/assets/css/main.css
@ -251,6 +251,29 @@ section {
  color: var(--color-white);
 }

+.btn-yellow-sub {
+  font-weight: 500;
+  font-size: 20px;
+  letter-spacing: 1px;
+  padding: 10px 10px;
+  border-radius: 5px;
+  transition: 0.5s;
+  background-color: #f39c12;
+  color: #ffffff;           
+  border: 1px solid #f39c12;
+  width: 100%;
+  display: block;
+  text-align: center;
+  cursor: pointer;
+}
+
+.btn-yellow-sub:hover {
+  background-color: #fbc02d; /* 마우스 올렸을 때 살짝 더 밝은 노란색 */
+  color: #ffffff;
+  border: 1px solid #fbc02d;
+}
+
+
 .btn-gray{
  font-weight: 500;
  font-size: 20px;
@ -2444,3 +2467,90 @@ tr.status-X {
  max-width: 300px;
  white-space: normal;
 }
+
+
+/* --- Customer History Panel Custom Styles --- */
+
+/* 1. 패널 자체 설정: 넘침 방지를 해제해야 옆구리 버튼이 보입니다 */
+#customerInfoCanvas {
+    width: 35%;
+    min-width: 450px;
+    height: 100vh !important;
+    overflow: visible !important; 
+    border-left: none;
+    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
+}
+
+/* --- 마우스 오버 시에만 나타나는 닫기 버튼 --- */
+
+/* 1. 기본 상태: 투명하게 숨기기 */
+.panel-close-tab {
+    position: absolute;
+    left: -40px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 40px;
+    height: 80px;
+    background-color: #2A9B56; 
+    color: white;
+    border: none;
+    border-radius: 10px 0 0 10px;
+    box-shadow: -4px 0 8px rgba(0,0,0,0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    
+    /* [포인트] 처음에는 투명도를 0으로 설정 */
+    opacity: 0;
+    /* 부드럽게 나타나도록 애니메이션 추가 */
+    transition: all 0.3s ease;
+}
+
+/* 2. 마우스 오버 상태: 캔버스 전체 혹은 버튼에 마우스가 올라가면 나타남 */
+/* #customerInfoCanvas에 마우스가 올라가면(hover), 내부의 .panel-close-tab을 보여줌 */
+#customerInfoCanvas:hover .panel-close-tab {
+    opacity: 1;
+    left: -40px; /* 위치도 살짝 움직이게 하고 싶다면 조절 가능 */
+}
+
+/* 버튼 자체에 마우스가 올라갔을 때 색상 강조 */
+.panel-close-tab:hover {
+    background-color: #1e7a41;
+}
+
+
+/* 화면 오른쪽 중앙에 상시 거치된 탭 버튼 */
+.history-quick-tab {
+    position: fixed;
+    right: 0;         /* 오른쪽 끝에 고정 */
+    top: 50%;
+    transform: translateY(-50%);
+    width: 25px;      /* 평소엔 얇게 */
+    height: 80px;
+    background-color: #fbc02d; /* HISTORY 버튼과 같은 노란색 (혹은 초록색) */
+    color: #212529;
+    border: none;
+    border-radius: 10px 0 0 10px; /* 왼쪽만 둥글게 */
+    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1040;    /* 패널(1050)보다는 낮게 설정 */
+    transition: all 0.3s ease;
+    opacity: 0.6;     /* 평소엔 살짝 투명하게 */
+}
+
+.history-quick-tab:hover {
+    width: 40px;      /* 마우스 올리면 살짝 튀어나옴 */
+    opacity: 1;
+    background-color: #f9a825;
+}
+
+/* [중요] 패널이 열려 있을 때(show 클래스가 붙었을 때) 탭 버튼을 숨김 */
+body.offcanvas-open .history-quick-tab, 
+#customerInfoCanvas.show ~ .history-quick-tab {
+    display: none;
+}
--- a/public_html/doc/customer_detail.php
+++ b/public_html/doc/customer_detail.php
@ -1267,19 +1267,29 @@ $(document).ready(function()

 <? if ($mode == "update") { ?>
        <div class="wrap-border">
-          <table class="  col-float-right">
-            <tr>
-              <td>
-<? if ($setTag == "ENABLED") { ?>              	
-                <button type="button" id="request-button-id" class="btn-blue-sub btn-width-200" data-bs-toggle="modal" data-bs-target="#request-modal" data-request-type="standard-access">&nbsp;REQUEST&nbsp;</button>
-<? } ?>
-              </td>
-              <td>
-              	<?=$PICKUPstr?>
-              </td>
-            </tr>
-          </table>
-
+        <table class="col-float-right">
+          <tr>
+            <td>
+              <? if ($mode == "update") { ?>
+              <button type="button" 
+                      id="btn-history-open" 
+                      class="btn-yellow-sub btn-width-200" 
+                      data-id="<?=$c_uid?>" 
+                      data-name="<?=htmlspecialchars($c_nameSTR, ENT_QUOTES)?>">
+                &nbsp;OIL HISTORY&nbsp;
+              </button>
+              <? } ?>
+            </td>
+            <td>
+              <? if ($setTag == "ENABLED") { ?>                   
+              <button type="button" id="request-button-id" class="btn-blue-sub btn-width-200" data-bs-toggle="modal" data-bs-target="#request-modal" data-request-type="standard-access">&nbsp;REQUEST&nbsp;</button>
+              <? } ?>
+            </td>
+            <td>
+              <?=$PICKUPstr?>
+            </td>
+          </tr>
+        </table>
        </div><!--wrap-border-->
 <? } ?>

@ -2171,6 +2181,31 @@ if( $total_count < 1 ) {
      </div>
    </div>
    
+  <div class="offcanvas offcanvas-end" tabindex="-1" id="customerInfoCanvas" data-bs-backdrop="false" data-bs-scroll="true">
+    <button type="button" class="panel-close-tab" data-bs-dismiss="offcanvas">
+    <i class="bi bi-chevron-right"></i>
+    </button>
+    <div class="offcanvas-header" style="background: #2A9B56;">
+    <h4 class="offcanvas-title" id="customerCanvasTitle" style="color: #FFFFFF;"></h4>
+    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
+    </div>
+    <div class="offcanvas-body" id="customerInfoBody">
+    </div>
+  </div>
+  
+  <button type="button" class="history-quick-tab" id="btn-history-quick" title="Quick Open History">
+    <i class="bi bi-chevron-left"></i>
+  </button>
+
+
+<style>
+/* 패널 너비 및 선택 효과 커스텀 */
+#customerInfoCanvas { width: 35%; min-width: 450px; height: 100vh !important; }
+.selected-row { outline: 2px solid #2A9B56 !important; outline-offset: -2px; }
+</style>
+
+
+
  </main><!-- End #main -->

 <!-- Image Popup Modal -->
@ -2603,9 +2638,58 @@ $(document).ready(function(){
        
  });

-});
+  // 2. [추가 코드] 오프캔버스 객체 생성 및 버튼 이벤트
+    var canvasEl = document.getElementById("customerInfoCanvas");
+    // 부트스트랩 인스턴스가 이미 있는지 확인 후 생성
+    var customerCanvas = canvasEl ? new bootstrap.Offcanvas(canvasEl) : null;
+
+    $("#btn-history-open").on("click", function() {
+        if(!customerCanvas) return;
+
+        const cid = $(this).data("id");
+        const cname = $(this).data("name");
+
+        // 패널 제목 및 로딩 메시지 설정
+        $("#customerCanvasTitle").text(cname + " - PICKUP HISTORY");
+        $("#customerInfoBody").html(`
+            <div class='text-center p-5'>
+                <div class='spinner-border text-success' role='status'></div>
+                <p class='mt-3'>Loading History...</p>
+            </div>
+        `);
+
+        customerCanvas.show();
+
+        // AJAX 데이터 호출
+        $.ajax({
+            url: "lib/shortInfo_right_lib.php",
+            type: "post",
+            data: { c_uid: cid },
+            success: function(res) {
+                $("#customerInfoBody").html(res);
+            },
+            error: function() {
+                $("#customerInfoBody").html("<p class='text-center p-5 text-danger'>Failed to load history.</p>");
+            }
+        });
+    });
+    
+  // 4. [이벤트] 메인 노란색 HISTORY 버튼 클릭 시
+    $("#btn-history-open").on("click", function() {
+        loadHistoryData(this);
+    });
+
+    // 5. [이벤트 추가] 오른쪽 끝 퀵 탭 버튼 클릭 시
+    // (메인 버튼과 똑같은 데이터-ID와 이름을 가져와야 하므로 trigger를 쓰거나 함수를 호출합니다)
+    $("#btn-history-quick").on("click", function() {
+        // 상단에 이미 있는 #btn-history-open 버튼을 대신 눌러주는 효과를 줍니다.
+        $("#btn-history-open").trigger("click");
+    });        
+
+}); // document.ready 끝
 </script>
  
+
 <div class="container">
  <!-- Modal Input Pickup Form -->
  <div id="input-pickup-modal" class="modal fade customer-info">