fix read modal and header

app/views/layouts/_header.html.erb

@@ -331,35 +331,24 @@
     // Check Internet Connection status
     document.addEventListener('DOMContentLoaded', function() {
       function updateConnectionStatus() {
-        const statusTextEl = document.querySelector('.connection-status-text');
+        const $statusTextEl = $('.connection-status-text');
-        console.log('checking internet connection');
+        const $icon = $('#connection-status-item i');
-        if (!statusTextEl) {
-          return;
-        }
 
-        statusTextEl.innerText = "Connecting";
+        if ($statusTextEl.length === 0) return;
-        statusTextEl.style.color = "white";
-        document.querySelector('#connection-status-item i').style.color = "white";
 
+        $statusTextEl.text("Connecting").css("color", "white");
+        $icon.css("color", "white");
 
-
+        const img = new Image();
-        fetch("https://www.google.com/generate_204?_=" + new Date().getTime(), {
+        img.onload = function () {
-            method: 'GET',
+          $statusTextEl.text("Online").css("color", "lightgreen");
-            mode: 'no-cors',
+          $icon.css("color", "lightgreen");
-            cache: 'no-store'
+        };
-        })
+        img.onerror = function () {
-        .then(function(res) {
+          $statusTextEl.text("Offline").css("color", "#ffcdd2");
-            console.log(res);
+          $icon.css("color", "#ffcdd2");
-            statusTextEl.innerText = "Online";
+        };
-            statusTextEl.style.color = "lightgreen";
+        img.src = "https://www.google.com/favicon.ico?_=" + new Date().getTime(); // avoid cache
-            document.querySelector('#connection-status-item i').style.color = "lightgreen";
-        })
-        .catch(function(e) {
-            console.log("error", e);
-            statusTextEl.innerText = "Offline";
-            statusTextEl.style.color = "#ffcdd2";
-            document.querySelector('#connection-status-item i').style.color = "#ffcdd2";
-        });
       }
 
       updateConnectionStatus();

app/views/layouts/_read_modal.html.erb

@@ -191,9 +191,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     let selectedPaymentMethodId = null;
     let selectedPaymentMethodLabel = '';
-    const originalProceedButtonText = proceedButton.textContent.trim(); // Store original button text
+    const originalProceedButtonText = proceedButton.textContent.trim();
-
-    // Function to update the "Process" button's state and appearance
     function styleProceedButton(enabled) {
         proceedButton.disabled = !enabled;
 
@@ -201,7 +199,6 @@ document.addEventListener('DOMContentLoaded', function () {
             proceedButton.style.borderColor = '#54A5AF'; // Active/theme color
             proceedButton.style.color = '#54A5AF';
             proceedButton.textContent = `Process with ${selectedPaymentMethodLabel}`;
-            // Opacity and cursor will be handled by :disabled CSS or browser defaults
         } else {
             // Reset to default styles (defined in CSS) when disabled
             proceedButton.style.borderColor = ''; // Reverts to stylesheet's .btn-proceed border-color
@@ -273,53 +270,45 @@ document.addEventListener('DOMContentLoaded', function () {
 
     function initDynamicQrPay() {
         const paymentMethod = 'MMQR';
-      let table_id = $("#table_id").text();
+        const $serverMode = $('#server_mode');
-      let booking_id = $("#booking_id").text();
+        const $createOrderBtn = $('#create_order');
-      let customer_id = $("#customer_id").text();
+        const $createPayOrderBtn = $('#create_pay_order');
-      let second_display_lookup = $("#display_type").val();
 
-      let params = {
+        const params = {
             order_source: "food_court",
             order_type: "dine_in",
-        customer_id: customer_id,
+            customer_id: $("#customer_id").text(),
             guest_info: "",
-        table_id: table_id,
+            table_id: $("#table_id").text(),
             order_items: JSON.stringify(get_order_item_rows()),
             create_type: "create_pay",
         };
 
-      fetch('/foodcourt/addorders/create', {
+        $.ajax({
+            url: '/foodcourt/addorders/create',
             method: 'POST',
+            contentType: 'application/json',
             headers: {
-          'Content-Type': 'application/json',
+                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
-          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
             },
-        body: JSON.stringify(params),
+            data: JSON.stringify(params),
-      })
+            success: function(result) {
-        .then(response => {
+                const booking_id = result.booking_id;
-          if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-          }
-          return response.json();
-        })
-        .then(result => {
-          booking_id = result.booking_id;
-          console.log(result);
                 window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
-
+                if ($serverMode.val() !== "cloud" && $("#display_type").val() === "2") {
-          if (document.getElementById("server_mode").value !== "cloud" && second_display_lookup === 2) {
                     // customer_display_view(null, "reload");
                 }
-        })
+            },
-        .catch(error => {
+            error: function(xhr) {
-          document.getElementById("oqs_loading_wrapper").style.display = "none";
+                $('#oqs_loading_wrapper').hide();
-          document.getElementById("create_order").disabled = false;
+                $createOrderBtn.prop('disabled', false);
-          document.getElementById("create_pay_order").disabled = false;
+                $createPayOrderBtn.prop('disabled', false);
-          swal("Error", "Status: " + error.message, "error");
-        });
 
+                const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
+                swal("Error", errorMsg, "error");
+            }
+        });
     }
-
     function get_order_item_rows(){
       var order_items = [];
       var item_row    = $('.summary-items tbody tr');