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/notification.css">
|
||||||
<link rel="stylesheet" href="/css/navbar.css">
|
<link rel="stylesheet" href="/css/navbar.css">
|
||||||
<link rel="stylesheet" href="/css/options.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-3.5.1.min.js"></script>
|
||||||
<script src="js/jquery.maphilight.min.js"></script>
|
<script src="js/jquery.maphilight.min.js"></script>
|
||||||
<script src="js/axios.min.js"></script>
|
<script src="js/axios.min.js"></script>
|
||||||
|
|
@ -29,30 +29,30 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body style="max-width: 90%;">
|
||||||
|
|
||||||
|
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="navbar-brand" href="/" onclick="window.location.href='/';">
|
<div class="navbar-brand" href="/" onclick="window.location.href='/';">
|
||||||
<img src="/images/sv-org-logo.png" alt="Site Logo">
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<div class="dropdown">
|
<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="dropdown-menu" id="dropdownMenu">
|
||||||
<div class="user-details">
|
<div class="user-details">
|
||||||
<img src="/images/sv-org-logo.png" alt="User Photo" class="user-photo"
|
<img src="/images/sv-org-logo.png" alt="User Photo" class="user-photo"
|
||||||
style="width: 60px; height: 60px;"> <!-- Larger photo in dropdown -->
|
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>
|
</div>
|
||||||
<a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>  Profile</a>
|
<a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>  Profile</a>
|
||||||
|
|
||||||
|
|
||||||
<a class="dropdown-item" href="http://192.168.1.6:2150/"><i class="fa-solid fa-upload"></i>  Upload
|
<a class="dropdown-item" href="http://192.168.1.6:2150/"><i class="fa-solid fa-upload"></i>  Upload
|
||||||
xlsx</a>
|
xlsx</a>
|
||||||
|
|
||||||
|
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a class="dropdown-item" href="/logout"><i class="fa-solid fa-right-from-bracket"></i>  Logout</a>
|
<a class="dropdown-item" href="/logout"><i class="fa-solid fa-right-from-bracket"></i>  Logout</a>
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="check-butons">
|
<div class="check-butons">
|
||||||
|
|
||||||
|
|
@ -73,38 +73,57 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="pageTitle">
|
<div class="pageTitle">
|
||||||
|
|
||||||
<h3>Поиск повторяющихся аппаратов</h3>
|
|
||||||
<span class="counter"> </span>
|
<span class="counter"> </span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<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">
|
<div class="title-section">
|
||||||
|
Results Live Database
|
||||||
<textarea name="" id="copyPlace" cols="130" rows="50"></textarea>
|
</div>
|
||||||
|
<textarea id="copytablePlace2" rows="15" placeholder="Summary of results here..."></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
||||||
<a> Check Serials <span id="version"></span> © 2024 Ал Омаири Ахмед </a>
|
<a> Check Serials <span id="version"></span> © 2024 Ал Омаири Ахмед </a>
|
||||||
|
|
|
||||||
|
|
@ -255,7 +255,19 @@ footer {
|
||||||
text-decoration: none !important;
|
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 {
|
.check-butons {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
|
@ -297,6 +309,9 @@ footer {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.redTable td {
|
||||||
|
padding: 1px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.bold {
|
.bold {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -485,4 +500,89 @@ color: red;
|
||||||
|
|
||||||
.searchpriomtable{
|
.searchpriomtable{
|
||||||
color: green;
|
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")
|
const serialsList = data.value.split("\n")
|
||||||
console.log(serialsList);
|
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 => {
|
serialsList.forEach(element => {
|
||||||
if (element) {
|
if (element) {
|
||||||
// console.log(element);
|
// console.log(element);
|
||||||
check(element)
|
check(element);
|
||||||
|
check(element, 'searchLive', 'tablePlace2');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -33,96 +34,144 @@ $('#buttonRest').on('click', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
function check(serialUnchecked) {
|
function check(serialUnchecked, searchLink = 'search2', tablePlace = 'tablePlace') {
|
||||||
const serial = keyboardLayoutSwitch(serialUnchecked)
|
const serial = keyboardLayoutSwitch(serialUnchecked);
|
||||||
if (serial == "") {
|
|
||||||
|
if (serial === "") {
|
||||||
// alert("Ensure you input a value in both fields!");
|
displayMessage('Empty!', 'red');
|
||||||
$('#searchText').text('Empty!')
|
return;
|
||||||
} else {
|
}
|
||||||
$('#searchText').text(' Sending ... wait')
|
|
||||||
$('#buttonGet').css('background-color', 'yellow')
|
|
||||||
|
|
||||||
axios.get('http://'+serverEnv.ip+'/search2?sn=' + serial)
|
displayMessage('Sending ... wait', 'yellow');
|
||||||
.then(response => {
|
$('#buttonGet').css('background-color', 'yellow');
|
||||||
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
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
fetchData(serial, searchLink)
|
||||||
|
.then(data => {
|
||||||
$('.counter').text('найден : ' + counter)
|
updateUIOnSuccess(data, serial, tablePlace);
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
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);
|
|
||||||
});
|
|
||||||
|
|
||||||
} //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");
|
const list = document.getElementById("json-data");
|
||||||
|
|
||||||
|
function appendData(data, sn, statusText, bold, tablePlace) {
|
||||||
function appendata(data,sn,statusText, bold) {
|
|
||||||
console.log(data);
|
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(){
|
$(document).ready(function(){
|
||||||
// your code
|
// your code
|
||||||
$('#version').text(serverEnv.version)
|
$('#version').text(serverEnv.version)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue