Map: Header, Button, Link

public_html/assets/css/leftside-modal.css

@@ -102,16 +102,13 @@
 
 
 /*------------------------------*/
-
-
-
-
-
 .close {
-    float: right;
+    z-index: 1;
-    font-size: 22.5px;
+    position: absolute;
-    font-weight: bold;
+    right: 10px;
     line-height: 1;
+    font-size: 75px;
+    font-weight: bold;
     color: #ffffff;
     text-shadow: 0 1px 0 #ffffff;
     /* opacity: 0.2; */
@@ -214,8 +211,12 @@ button.close {
 }
 
 .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
     padding: 15px;
-    border-bottom: 1px solid #e5e5e5
+    border-bottom: 1px solid #e5e5e5;
 }
 
 #sidebar-left .modal-header {
@@ -228,10 +229,18 @@ button.close {
 }
 
 .modal-title {
+    flex: none;
+    width: 300px !important;
+    text-align: left;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow: visible;
     margin: 0;
-    line-height: 1.42857143
+    line-height: 1.42857143;
+    padding-right: 60px;
 }
 
+
 .modal-body {
     position: relative;
     padding: 20px

public_html/assets/css/main.css

@@ -1680,7 +1680,7 @@ table.table-search-report .tb-list th {
     pointer-events: auto;
     cursor: pointer;
     color:var(--color-sub);
-    font-size: 16px;
+    font-size: 30px;
     font-weight: 700;
 }
 
@@ -1689,14 +1689,52 @@ table.table-search-report .tb-list th {
 }
 
 .point-overlay {
-    background-color:white;
-    width:350px;
-    z-index: 1000;
-    cursor:default;
-    pointer-events: auto;
-    padding:5px;
-    border-radius: 5px;
     position: relative;
+    background-color:white;
+    padding: 5px;
+    border-radius: 5px;
+    width: 350px;
+    user-select: none;
+    transform: none !important;
+    cursor:default;
+    position: relative;
+}
+
+.address-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: 0;
+  margin: 0;
+}
+
+.address-title {
+  width: 40%;
+  padding: 5px 10px;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: var(--color-sub);
+  color: #fff;
+  border-right: .5px solid #c9e0d3;
+  border-left: .5px solid #c9e0d3;
+  border-bottom: .5px solid #c9e0d3;
+  display: flex;
+  align-items: center;
+}
+
+.address-content {
+  width: 60%;
+  padding: 5px 10px;
+  font-size: 14px;
+  color: #fff;
+  border-right: .5px solid #c9e0d3;
+  border-bottom: .5px solid #c9e0d3;
+  display: flex;
+  align-items: center;
+}
+
+.address-link {
+  text-decoration: underline;
 }
 
 #popupMessage {

public_html/assets/internal_api.php

@@ -84,7 +84,9 @@ class API extends CONF {
                                 IFNULL(DATE_FORMAT(tc.c_lastpickupdate,'%Y-%m-%d'),'') as c_lastpickupdate,
                                 IFNULL(DATE_FORMAT(tc.c_lastpaiddate,'%Y-%m-%d'),'') as c_lastpaiddate,
                                 IFNULL(tc.c_geolat,'') as lat,
-                                IFNULL(tc.c_geolon,'') as lon
+                                IFNULL(tc.c_geolon,'') as lon,
+                                td.d_ruid,
+                                td.r_note
                             FROM
                                 (SELECT
                                     c_uid,
@@ -110,17 +112,21 @@ class API extends CONF {
                                 FROM
                                     tbl_customer) tc,
                                 (SELECT
-                                    d_uid,
+                                    td.d_uid,
-                                    d_customeruid,
+                                    td.d_ruid,
-                                    d_orderdate,
+                                    tr.r_note,
-                                    d_quantity,
+                                    td.d_customeruid,
-                                    d_estquantity,
+                                    td.d_orderdate,
-                                    d_ordertype,
+                                    td.d_quantity,
-                                    d_driveruid,
+                                    td.d_estquantity,
-                                		d_createruid,
+                                    td.d_ordertype,
-                                    d_status
+                                    td.d_driveruid,
+                                		td.d_createruid,
+                                    td.d_status
                                 FROM
-                                    tbl_daily) td
+                                    tbl_daily td
+                                LEFT OUTER JOIN tbl_request tr 
+                                ON td.d_ruid = tr.r_uid) td
                             WHERE
                                 tc.c_uid = td.d_customeruid
                                 AND td.d_driveruid = ".(int)$_POST['driver']."
@@ -190,6 +196,8 @@ class API extends CONF {
                 "last_pickup_date" => $rstOptionPoint['c_lastpickupdate'],
                 "last_paid_date" => $rstOptionPoint['c_lastpaiddate'],
                 "duid" => $rstOptionPoint['d_uid'],
+                "druid" => $rstOptionPoint['d_ruid'],
+                "rnote" => $rstOptionPoint['r_note'],
                 "orderFlag" => $orderFlag
             );
             if(strlen($uidList) > 0){
@@ -943,6 +951,7 @@ class API extends CONF {
   	
         try {
             $sqShortInfo = qry("SELECT
+                                    c_name,
                                     c_paymenttype,
                                     c_comment_ri,
                                     c_location
@@ -984,6 +993,7 @@ class API extends CONF {
             
             $result = array(
                 "id" => $_POST['id'],
+                "name" => $rstShortInfo['c_name'],
                 "payment_type" => $rstShortInfo['c_paymenttype'],
                 "paymentstring" => $d_paystatusSTR,
                 "comment" => $rstShortInfo['c_comment_ri'],

public_html/doc/map.php

@@ -404,9 +404,15 @@ function popup(){
                 </tr>
 
                 <tr>
-                  <td class="td-title-info">Sludge</td>
+                  <td class="td-title-info">Sludge (%)</td>
                   <td class="td-text-info">
-                    <input type="text" class="d_sludge" placeholder="50">
+
+                    <div class="number-input">
+                      <button class="left" type="button">▼</button>
+                        <input type="number" class="d_sludge" value="50" min="0" max="100" placeholder="50">
+                      <button class="right" type="button">▲</button>
+                    </div>
+                    
                   </td>
                 </tr>
 
@@ -598,6 +604,10 @@ function popup(){
             <input type="hidden" name="mode" class="mode" value="update">
             <table class="tb-info-box">
               <tbody>
+                <tr>
+                  <td class="td-title-info">Restaurant Name</td>
+                  <td class="td-text-info shortinfo-store-name">Name</td>
+                </tr>
                 <tr>
                   <td class="td-title-info">Payment Type</td>
                   <td class="td-text-info shortinfo-payment-type">Cheque</td>
@@ -1639,6 +1649,8 @@ function popup(){
                           lastPickupDate: json.result[i]['last_pickup_date'],
                           lastPaidDate: json.result[i]['last_paid_date'],
                           duid: json.result[i]['duid'],
+                          druid: json.result[i]['druid'],
+                          rnote: json.result[i]['rnote'],
 
 <? if ($_SESSION['ss_LEVEL'] == 9) { ?>
 													orderFlag: json.result[i]['orderFlag']
@@ -1986,6 +1998,7 @@ function popup(){
 
   var rstInqShortInfo = function(json) {
     jQuery("#customerShortInfo .c_uid").val(json.result['id']);
+    jQuery("#customerShortInfo .shortinfo-store-name").text(json.result['name']);
     jQuery("#customerShortInfo .shortinfo-payment-type").text(json.result['payment_type']);
     jQuery("#customerShortInfo .shortinfo-payment-string").text(json.result['paymentstring']);
     jQuery("#customerShortInfo #c_comment_ri").val(json.result['comment']).attr("disabled",false);
@@ -2134,20 +2147,6 @@ function popup(){
                     <span>${property.phone}</span>
                   </td>
                 </tr>
-
-                <tr>
-                  <td class="td-title-info">Address</td>
-                  <td class="td-text-info">
-                    <a 
-                      href="https://www.google.com/maps?q=${encodeURIComponent(property.address)}" 
-                      target="_blank" 
-                      style="color: inherit; text-decoration: underline; cursor: pointer;"
-                    >
-                      <span>${property.address}</span>
-                    </a>
-                  </td>
-                </tr>
-
                 <tr>
                   <td class="td-title-info">Forecast</td>
                   <td class="td-text-info">
@@ -2167,20 +2166,32 @@ function popup(){
                   </td>
                 </tr>                
               </table>
+              
+              <div class="address-row">
+                <div class="address-title">Address</div>
+                <div class="address-content">
+                  <a href="https://maps.google.com/?q=${encodeURIComponent(property.address)}"
+                    class="address-link"
+                    target="_blank" 
+                    rel="noopener noreferrer">
+                    ${property.address}
+                  </a>
+                </div>
+              </div>
               <br>
 
               <div class="text-center map-grid-layout-col-3">
                 <button type="button" class="mapBtn btn-info-modal" onClick="javscript:showShortInfo(${property.customerid});" data-toggle="modal" data-target="#map-modal-info"><i class="fa-solid fa-question"></i><br>Info</button>
                 <button type="submit" class="mapBtn btn-grey-modal" onClick="javascript:initHistory(${property.customerid});" data-toggle="modal" data-target="#map-modal-history"><i class="bi bi-folder2-open"></i><br>History</button>`;
       if(`${property.date}` === 'null') {
-        innerHtml += `<button type="button" class="mapBtn btn-primary-modal addOrderBtn_${property.index}" data-toggle="modal" onClick="javascript:initAddOrder(${property.customerid},${property.index});"><i class="fa-solid fa-plus"></i><br>Add Order</button>`;
+        innerHtml += `<button type="button" class="mapBtn btn-primary-modal addOrderBtn_${property.index}" data-toggle="modal" onClick="javascript:initAddOrder(${property.customerid},${property.index});"><i class="fa-solid fa-plus"></i><br>Add</button>`;
-        innerHtml += `<button type="button" class="mapBtn btn-red-modal hidden removeOrderBtn_${property.index}" data-toggle="modal" data-target="#modal-confirm" onClick="javascript:removeOrder(${property.customerid},${property.duid},${property.index});"><i class="fa-solid fa-xmark"></i><br>Remove Order</button>`; 
+        innerHtml += `<button type="button" class="mapBtn btn-red-modal hidden removeOrderBtn_${property.index}" data-toggle="modal" data-target="#modal-confirm" onClick="javascript:removeOrder(${property.customerid},${property.duid},${property.index});"><i class="fa-solid fa-xmark"></i><br>Remove</button>`; 
       }else{
-        innerHtml += `<button type="button" class="mapBtn btn-primary-modal addOrderBtn_${property.index} hidden" data-toggle="modal" onClick="javascript:initAddOrder(${property.customerid},${property.index});"><i class="fa-solid fa-plus"></i><br>Add Order</button>`;
+        innerHtml += `<button type="button" class="mapBtn btn-primary-modal addOrderBtn_${property.index} hidden" data-toggle="modal" onClick="javascript:initAddOrder(${property.customerid},${property.index});"><i class="fa-solid fa-plus"></i><br>Add</button>`;
-        innerHtml += `<button type="button" ${property.orderFlag} class="mapBtn btn-red-modal removeOrderBtn_${property.index}" data-toggle="modal" data-target="#modal-confirm" onClick="javascript:removeOrder(${property.customerid},${property.duid},${property.index});"><i class="fa-solid fa-xmark"></i><br>Remove Order</button>`;        
+        innerHtml += `<button type="button" ${property.orderFlag} class="mapBtn btn-red-modal removeOrderBtn_${property.index}" data-toggle="modal" data-target="#modal-confirm" onClick="javascript:removeOrder(${property.customerid},${property.duid},${property.index});"><i class="fa-solid fa-xmark"></i><br>Remove</button>`;        
       }
       innerHtml += `<button type="submit" class="mapBtn btn-nearby" onClick="javascript:inqNearby('${property.lat}:${property.lon}');"><i class="fa-solid fa-diamond-turn-right"></i><br>Nearby</button>
-                <button type="submit" class="mapBtn btn-orange-modal"  data-toggle="modal" data-target="#map-modal-note" onClick="javscript:showShortNotice(${property.duid});"><i class="fa fa-thumb-tack"></i><br>Notice</button>
+                <button type="submit" class="mapBtn btn-orange-modal ${(property.rnote !== null && property.rnote.trim() !== '') ? 'blink' : '' }"  data-toggle="modal" data-target="#map-modal-note" onClick="javscript:showShortNotice(${property.duid});"><i class="fa fa-thumb-tack"></i><br>Notice</button>
                 <button type="submit" class="mapBtn btn-purple-modal"  data-toggle="modal" data-target="#map-modal-input" onClick="javascript:initInput(${property.customerid});"><i class="bi bi-truck"></i><br>Input</button>
               </div>
           </div>
@@ -2206,3 +2217,26 @@ function popup(){
   }
   
 </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>