From 1196ae54329238bed7e1642870e932c11e024c3e Mon Sep 17 00:00:00 2001
From: Ahmedvolga <alomairi@mail.ru>
Date: Thu, 10 Oct 2024 15:11:09 +0300
Subject: [PATCH] Update Check Serials page

---
 static/check-serials.html |  75 ++++++++------
 static/css/style.css      | 102 ++++++++++++++++++-
 static/js/check.js        | 207 +++++++++++++++++++++++---------------
 3 files changed, 276 insertions(+), 108 deletions(-)
diff --git a/static/check-serials.html b/static/check-serials.html
index 1fb5292..deedc3f 100644
--- a/static/check-serials.html
+++ b/static/check-serials.html
@@ -19,8 +19,8 @@
     <link rel="stylesheet" href="/css/notification.css">
     <link rel="stylesheet" href="/css/navbar.css">
     <link rel="stylesheet" href="/css/options.css">
- 
-    <script src="https://kit.fontawesome.com/e8e55b4ad4.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/fa-icons.css">
+
     <script src="js/jquery-3.5.1.min.js"></script>
     <script src="js/jquery.maphilight.min.js"></script>
     <script src="js/axios.min.js"></script>
@@ -29,30 +29,30 @@
 
 </head>
 
-<body>
- 
+<body style="max-width: 90%;">
+
 
     <nav class="navbar">
         <div class="navbar-brand" href="/" onclick="window.location.href='/';">
             <img src="/images/sv-org-logo.png" alt="Site Logo">
-            <span>СЕРВИС-ВОЛГА</span> <!-- Title as a span for styling -->
+            <span>СЕРВИС-ВОЛГА - Поиск повторяющихся аппаратов</span> <!-- Title as a span for styling -->
         </div>
- 
+
 
         <div class="dropdown">
-            <img  src="/images/sv-org-logo.png" alt="User Photo" class="user-photo" onclick="toggleDropdown(event)">
+            <img src="/images/sv-org-logo.png" alt="User Photo" class="user-photo" onclick="toggleDropdown(event)">
             <div class="dropdown-menu" id="dropdownMenu">
                 <div class="user-details">
                     <img src="/images/sv-org-logo.png" alt="User Photo" class="user-photo"
                         style="width: 60px; height: 60px;"> <!-- Larger photo in dropdown -->
-                    <div id="userName" class="user-name" >Admin</div> <!-- Username -->
+                    <div id="userName" class="user-name">Admin</div> <!-- Username -->
                 </div>
                 <a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>&nbsp Profile</a>
-               
+
 
                 <a class="dropdown-item" href="http://192.168.1.6:2150/"><i class="fa-solid fa-upload"></i>&nbsp Upload
                     xlsx</a>
-              
+
 
                 <div class="dropdown-divider"></div>
                 <a class="dropdown-item" href="/logout"><i class="fa-solid fa-right-from-bracket"></i>&nbsp Logout</a>
@@ -61,7 +61,7 @@
     </nav>
 
 
- 
+
 
     <div class="check-butons">
 
@@ -73,38 +73,57 @@
 
         </div>
         <div class="pageTitle">
-
-            <h3>Поиск повторяющихся аппаратов</h3>
             <span class="counter"> </span>
         </div>
 
 
     </div>
 
-    <div class="searchResult">
 
-        <textarea name="" id="textcopied" class="inputHolder22" cols="15" rows="40"></textarea>
 
-        <div id="tablePlace" class="repeated2">
-            <div class="test"></div>
 
+    <div class="container">
+        <div class="left-panel">
+            <div class="title-section">
+                Input List
+            </div>
+             
+            <textarea id="textcopied" class="inputHoldercheck" rows="15"></textarea>
         </div>
+        <div class="results-panel">
+             
+             
+            <div id="tablePlaceSection" class="result-item">
+                <div class="title-section">
+                    Search Main Database
+                </div>
+                <table id="tablePlace" class="result-item" border="1"></table>
+ 
+                <div class="title-section">
+                    Search Live Database
+                </div>
 
-        <pre id="json-data"></pre>
-
-
+                <div class="test"></div>
+                <table id="tablePlace2" class="result-item" border="1"></table>
+            </div>
+        </div>
     </div>
+   
+    
+    <div class="total-results">
+        <p class="total-results-title">Total Results</p>
+        <div class="title-section">
+            Results Main Database (from uploaded files XLSX)
+        </div>
+        
+        <textarea id="copytablePlace" rows="15" placeholder="Summary of results here..."></textarea>
 
-    <div class="copy-text">
-         
-<textarea name="" id="copyPlace" cols="130" rows="50"></textarea>
+        <div class="title-section">
+            Results Live Database
+        </div>
+        <textarea id="copytablePlace2" rows="15" placeholder="Summary of results here..."></textarea>
     </div>
 
-    <br>
-    <br>
-    <br>
-    <br>
-
     <footer>
 
         <a> Check Serials <span id="version"></span> © 2024 Ал Омаири Ахмед </a>
diff --git a/static/css/style.css b/static/css/style.css
index 3e25ea8..13c9622 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -255,7 +255,19 @@ footer {
   text-decoration: none !important;
 }
 
-.searchResult {}
+/* .searchResult {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+
+}
+.left-panel{
+  width: 20%;
+}
+.right-panel{
+  width: 80%;
+} */
 
 .check-butons {
   margin-left: 10px;
@@ -297,6 +309,9 @@ footer {
   color: red;
 }
 
+.redTable td {
+  padding: 1px 3px;
+}
 
 .bold {
   font-weight: bold;
@@ -485,4 +500,89 @@ color: red;
 
 .searchpriomtable{
 color: green;
+}
+
+
+
+
+
+
+
+
+
+
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 9fr; /* Left panel is 1 part, results panel is 3 parts */
+  /* height: calc(100vh - 150px); Adjust height for footer space */
+  height: calc(87vh - 150px);
+  padding: 10px;
+  gap: 10px; /* Space between columns */
+}
+
+.left-panel {
+  background-color: #ffffff;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 15px;
+}
+
+.inputHoldercheck {
+  width: 100%;
+  height: 96%;
+  resize: vertical; /* Allow vertical resizing */
+}
+
+.results-panel {
+  background-color: #ffffff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 15px;
+  overflow-y: auto; /* Allows scrolling if content exceeds */
+}
+
+ 
+.result-item {
+  font-family: Calibri, sans-serif;
+  font-size: 13px;
+  text-align: center;
+  border-style: none;
+  border-collapse: collapse;
+  min-width: 680px;
+  margin-bottom: 20px;
+}
+
+.test {
+  max-width: 14ch; /* Limit width to 14 characters */
+  overflow: hidden; /* Prevent overflow */
+  white-space: nowrap; /* No line breaks */
+  text-overflow: ellipsis; /* Add ellipsis for overflow */
+}
+
+.total-results {
+  background-color: #e9ecef;
+  padding: 5px;
+  padding-bottom: 54px;
+  border-top: 2px solid #ccc;
+  /* position: sticky; */
+  bottom: 0;
+  width: 100%;
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.total-results textarea {
+  width: 100%;
+  resize: none; /* Disable resizing */
+}
+
+.total-results-title{
+  padding: 0;
+    margin: 0;
+    font-weight: bold;
+}
+
+.title-section{
+  padding: 3px;
+    margin: 0;
 }
\ No newline at end of file
diff --git a/static/js/check.js b/static/js/check.js
index bdf4a7c..d6b3838 100644
--- a/static/js/check.js
+++ b/static/js/check.js
@@ -6,12 +6,13 @@ document.getElementById("buttonGet").onclick = function () {
     const serialsList = data.value.split("\n")
     console.log(serialsList);
 
-    $('#tablePlace').append('<tr><th>Модель</th><th>Сер.номер</th><th>Заявленная неисправность</th><th>Произведенная работа</th><th>Файл</th><th>Сервер</th></tr>')
+    // $('#tablePlace').append('<tr><th>Модель</th><th>Сер.номер</th><th>Заявленная неисправность</th><th>Произведенная работа</th><th>Файл</th><th>Сервер</th></tr>')
     
     serialsList.forEach(element => {
         if (element) {
             // console.log(element);
-            check(element)
+            check(element);
+            check(element, 'searchLive', 'tablePlace2');
         }
     });
 
@@ -33,96 +34,144 @@ $('#buttonRest').on('click', () => {
 });
 
 
-function check(serialUnchecked) {
-    const serial = keyboardLayoutSwitch(serialUnchecked)
-    if (serial == "") {
-        
-        // alert("Ensure you input a value in both fields!");
-        $('#searchText').text('Empty!')
-    } else {
-        $('#searchText').text(' Sending ... wait')
-        $('#buttonGet').css('background-color', 'yellow')
+function check(serialUnchecked, searchLink = 'search2', tablePlace = 'tablePlace') {
+    const serial = keyboardLayoutSwitch(serialUnchecked);
+    
+    if (serial === "") {
+        displayMessage('Empty!', 'red');
+        return;
+    }
 
-        axios.get('http://'+serverEnv.ip+'/search2?sn=' + serial)
-            .then(response => {
-                console.log(response);
-                counter = counter + response.data.length
-                if(response.statusText == 'OK'){
-                    $('#searchText').text('Search') 
-                    
-                    $('#buttonGet').css('background-color', 'chartreuse')
-                 }
-                const data = response.data
-                let bold = false
-                if (response.data.length > 1) {
-                    bold = true
-                }
-                
-                console.log(data);
-                if( data.length == 0){
-                    console.log('empty');
-                    appendata(false, serial, response.statusText );
-                }
-                for (var key in data) {
-                    
-                     
-                        console.dir(data[key]);
-                        // console.log(data.length);
-                        // $('.repeated').append(buildHtmlTable([data[key]]))
-                        appendata(data[key], serial, response.statusText, bold ); // The response body
-                        
-                    
-                }
+    displayMessage('Sending ... wait', 'yellow');
+    $('#buttonGet').css('background-color', 'yellow');
 
-                
-
-                $('.counter').text('найден : ' + counter) 
-            })
-            .catch(error => {
-                
-                $('#tablePlace').append('<tr class="redTable"><td>error !</td>  <td colspan="4"> No answer from server , try again or ask Ahmed !</td> <td>'+error.code+'</td>  </tr>')
-
-                $('#searchText').text(error.message) 
-                $('#buttonGet').css('background-color', 'orangered')
-
-                console.error(error);
-            });
-
-    } //end if else
+    fetchData(serial, searchLink)
+        .then(data => {
+            updateUIOnSuccess(data, serial, tablePlace);
+        })
+        .catch(error => {
+            handleError(error, tablePlace);
+        });
 }
 
+function fetchData(serial, searchLink) {
+    return axios.get(`http://${serverEnv.ip}/${searchLink}?sn=${serial}`)
+        .then(response => {
+            if (response.statusText !== 'OK') {
+                throw new Error('Server responded with an error');
+            }
+            // counter = counter + response.data.length
+            return response.data;
+        });
+}
+
+function updateUIOnSuccess(data, serial, tablePlace) {
+    let bold = data.length > 1;
+    console.log(data);
+    
+    if (data.length === 0) {
+        appendData(false, serial, 'No results found', bold, tablePlace);
+    } else {
+        data.forEach(item => {
+            appendData(item, serial, 'Search successful', bold, tablePlace);
+        });
+    }
+
+    counter = counter + data.length;
+    $('.counter').text(`найден : ${counter}`);
+    $('#searchText').text('Search');
+    $('#buttonGet').css('background-color', 'chartreuse');
+}
+
+function handleError(error, tablePlace) {
+    $('#' + tablePlace).append('<tr class="redTable"><td>error !</td>  <td colspan="4"> No answer from server , try again or ask Ahmed !</td> <td>' + error.code + '</td></tr>');
+    $('#searchText').text(error.message);
+    $('#buttonGet').css('background-color', 'orangered');
+    console.error(error);
+}
+
+function displayMessage(message, color) {
+    $('#searchText').text(message);
+    $('#buttonGet').css('background-color', color);
+}
 
 const list = document.getElementById("json-data");
 
- 
-function appendata(data,sn,statusText, bold) {
+function appendData(data, sn, statusText, bold, tablePlace) {
     console.log(data);
-    if(data){
-        // $('#tablePlace').append(buildHtmlTable([data]))
-        let addClass = ''
-        if(bold){addClass = 'bold'}
-
-        $('#tablePlace').append('<tr class="redTable '+ addClass +'"><td>'+data.Model+'</td><td>'+data.SerialNumber+'</td> <td>'+data.Problem+'</td> <td>'+ data.Details +'</td> <td>'+data.filename+'</td><td>'+statusText+'</td> </tr>')
-
-        const xlsxFormat = data.Model + '	' + data.SerialNumber + '	' + data.Problem + '	' + data.Details + '	' + data.filename + '\n'
-        console.log('thsi data texarea is: ', xlsxFormat);
-        $('#copyPlace').append(xlsxFormat).attr('rows', '5')   // Set the number of 
-
-
-         
-
-    }
-    else{
-        $('#tablePlace').append(' <tr class="greenTable"><td>ОК</td> <td>'+sn+'</td><td colspan="3">Серийный номер не найден в БД</td> <td>'+statusText+'</td></tr> ')
-
-        
-    }
     
+    // Check if the table exists; if not, create it
+    let table = document.getElementById(tablePlace);
+    if (!table) {
+        table = document.createElement('table');
+        table.id = tablePlace;
+        document.body.appendChild(table); // or append to a specific parent element
+    }
+
+    if (data) {
+        // Create a new row and cells
+        const row = document.createElement('tr');
+        row.className = 'redTable' + (bold ? ' bold' : '');
+
+        // Create cells for each piece of data
+        const modelCell = createCell(data.Model);
+        const serialNumberCell = createCell(data.SerialNumber);
+        const problemCell = createCell(data.Problem);
+        const detailsCell = createCell(data.Details);
+        const filenameCell = createCell(data.filename);
+        const statusCell = createCell(statusText);
+
+        // Append cells to the row
+        row.appendChild(modelCell);
+        row.appendChild(serialNumberCell);
+        row.appendChild(problemCell);
+        row.appendChild(detailsCell);
+        row.appendChild(filenameCell);
+        row.appendChild(statusCell);
+
+        // Append the row to the table
+        table.appendChild(row);
+
+        // Prepare xlsx format string
+        const xlsxFormat = `${data.Model}\t${data.SerialNumber}\t${data.Problem}\t${data.Details}\t${data.filename}\n`;
+        console.log('This data textarea is: ', xlsxFormat);
+        const copyTextarea = document.getElementById(`copy${tablePlace}`);
+        copyTextarea.value += xlsxFormat;  // Append to the textarea
+        copyTextarea.setAttribute('rows', '15'); // Set the number of rows
+    } else {
+        // Create a new row for the "not found" state
+        const row = document.createElement('tr');
+        row.className = 'greenTable';
+
+        const okCell = createCell('ОК');
+        const serialNotFoundCell = createCell(sn);
+        const messageCell = createCell('Серийный номер не найден в БД', { colSpan: 3 });
+        const statusNotFoundCell = createCell(statusText);
+
+        // Append cells to the row
+        row.appendChild(okCell);
+        row.appendChild(serialNotFoundCell);
+        row.appendChild(messageCell);
+        row.appendChild(statusNotFoundCell);
+
+        // Append the row to the table
+        table.appendChild(row);
+    }
+}
+
+// Helper function to create a cell
+function createCell(content, options) {
+    const cell = document.createElement('td');
+    cell.textContent = content;
+    if (options && options.colSpan) {
+        cell.colSpan = options.colSpan;
+    }
+    return cell;
 }
 
  
 
-
+ 
 $(document).ready(function(){
     // your code
     $('#version').text(serverEnv.version)
