Update Check Serials page
This commit is contained in:
parent
cb7641ee53
commit
1196ae5432
|
|
@ -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">
|
||||
<link rel="stylesheet" href="/css/fa-icons.css">
|
||||
|
||||
<script src="https://kit.fontawesome.com/e8e55b4ad4.js" crossorigin="anonymous"></script>
|
||||
<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,13 +29,13 @@
|
|||
|
||||
</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>
|
||||
|
||||
|
||||
|
|
@ -73,37 +73,56 @@
|
|||
|
||||
</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="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>
|
||||
|
||||
<div class="test"></div>
|
||||
|
||||
<table id="tablePlace2" class="result-item" border="1"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre id="json-data"></pre>
|
||||
|
||||
|
||||
<div class="total-results">
|
||||
<p class="total-results-title">Total Results</p>
|
||||
<div class="title-section">
|
||||
Results Main Database (from uploaded files XLSX)
|
||||
</div>
|
||||
|
||||
<div class="copy-text">
|
||||
<textarea id="copytablePlace" rows="15" placeholder="Summary of results here..."></textarea>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -486,3 +501,88 @@ 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;
|
||||
}
|
||||
|
|
@ -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,91 +34,139 @@ $('#buttonRest').on('click', () => {
|
|||
});
|
||||
|
||||
|
||||
function check(serialUnchecked) {
|
||||
const serial = keyboardLayoutSwitch(serialUnchecked)
|
||||
if (serial == "") {
|
||||
function check(serialUnchecked, searchLink = 'search2', tablePlace = 'tablePlace') {
|
||||
const serial = keyboardLayoutSwitch(serialUnchecked);
|
||||
|
||||
// alert("Ensure you input a value in both fields!");
|
||||
$('#searchText').text('Empty!')
|
||||
} else {
|
||||
$('#searchText').text(' Sending ... wait')
|
||||
$('#buttonGet').css('background-color', 'yellow')
|
||||
|
||||
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
|
||||
if (serial === "") {
|
||||
displayMessage('Empty!', 'red');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
if( data.length == 0){
|
||||
console.log('empty');
|
||||
appendata(false, serial, response.statusText );
|
||||
}
|
||||
for (var key in data) {
|
||||
displayMessage('Sending ... wait', 'yellow');
|
||||
$('#buttonGet').css('background-color', 'yellow');
|
||||
|
||||
|
||||
console.dir(data[key]);
|
||||
// console.log(data.length);
|
||||
// $('.repeated').append(buildHtmlTable([data[key]]))
|
||||
appendata(data[key], serial, response.statusText, bold ); // The response body
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
$('.counter').text('найден : ' + counter)
|
||||
fetchData(serial, searchLink)
|
||||
.then(data => {
|
||||
updateUIOnSuccess(data, serial, tablePlace);
|
||||
})
|
||||
.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);
|
||||
handleError(error, tablePlace);
|
||||
});
|
||||
|
||||
} //end if else
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
// 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) {
|
||||
// $('#tablePlace').append(buildHtmlTable([data]))
|
||||
let addClass = ''
|
||||
if(bold){addClass = 'bold'}
|
||||
// Create a new row and cells
|
||||
const row = document.createElement('tr');
|
||||
row.className = 'redTable' + (bold ? ' 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>')
|
||||
// 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);
|
||||
|
||||
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
|
||||
// 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);
|
||||
}
|
||||
else{
|
||||
$('#tablePlace').append(' <tr class="greenTable"><td>ОК</td> <td>'+sn+'</td><td colspan="3">Серийный номер не найден в БД</td> <td>'+statusText+'</td></tr> ')
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue