gitea
/
POS-Diagnostic-Assist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add city selection

This commit is contained in:
Alomairi 2024-09-02 14:23:57 +00:00
parent 1ebbdbef48
commit d8eacb0d49
13 changed files with 1096 additions and 447 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
main.js
View File

@ -47,7 +47,7 @@ app.use(express.static(path.join(__dirname, 'static')));
app.get('/', function(request, response) {
app.get('/x', function(request, response) {
if (request.session.loggedin) {
// Output username
// response.send('Welcome back, ' + request.session.username + '!');
@ -67,7 +67,7 @@ console.log(request.session.username , 'open main page');
app.get('/login', function(request, response) {
/// Render login template with any message from query parameters
console.log('Message:', request.query.message); // Log the message
response.render('login', { message: request.query.message || '' });
response.render('login', { message: request.query.message || '' });
@ -107,8 +107,11 @@ app.post('/auth', async function(request, response) {
// Authenticate the user
request.session.loggedin = true;
request.session.username = rows[0].username;
request.session.avatar = rows[0].avatar;
// request.session.username = username;
// Redirect to home page
console.log(rows);
response.redirect('/');
} else {
response.redirect('/login?message=Incorrect Username and/or Password!');
@ -126,14 +129,24 @@ app.post('/auth', async function(request, response) {
// http://localhost:3000/home
app.get('/home', function(request, response) {
app.get('/', function(request, response) {
// If the user is loggedin
if (request.session.loggedin) {
// Output username
// response.send('Welcome back, ' + request.session.username + '!');
let avatarSrc = '';
if (request.session.avatar) {
// Convert BLOB to Base64 if it exists
const avatarBase64 = Buffer.from(request.session.avatar).toString('base64');
avatarSrc = `data:image/jpeg;base64,${avatarBase64}`; // Adjust MIME type as necessary
}
// Render home page with username
response.render('home', { username: request.session.username });
response.render('home', {
username: request.session.username,
avatar: avatarSrc
});
} else {
// Not logged in

156
static/css/navbar.css Normal file
View File

@ -0,0 +1,156 @@
body2 {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f8f9fa; /* Light background */
background-color: #4a4e52;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent;
padding: 4px 20px 0px; /* Padding adjustments */
width: auto;
}
.navbar-brand {
display: flex;
align-items: center;
color: white; /* Set text color to white */
font-size: 14px; /* Smaller font size */
text-decoration: none; /* Remove underline */
}
.navbar-brand img {
height: 24px; /* Logo height */
margin-right: 10px; /* Space between logo and title */
}
.user-photo {
width: 24px; /* User photo size */
height: 24px;
border-radius: 50%; /* Circular photo */
cursor: pointer;
position: relative; /* To position dropdown */
}
.user-name {
color: white; font-weight: bold;
}
img.user-photo:hover {
box-shadow: 0px 0px 5px 5px rgb(92 207 255 / 78%);
}
.dropdown-menu {
position: absolute; /* Position it correctly */
display: none; /* Hide dropdown by default */
/* background-color: #343a40; */
background-color: #1e1e1e;
right: 20px; /* Align to the right */
min-width: 200px; /* Minimum width */
z-index: 1000; /* Ensure it appears above other content */
margin-top: 10px; /* Space between photo and menu */
border-radius: 5px; /* Rounded corners */
padding: 15px; /* Padding for dropdown */
/* text-align: center; */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.dropdown-menu.show {
display: block; /* Show when active */
}
.dropdown-item {
cursor: pointer;
padding: 10px;
color: white; /* Color for dropdown items */
text-decoration: none; /* Remove underline */
display: block; /* Block display for easy clicking */
}
.dropdown-item:hover {
background-color: #495057; /* Hover effect */
}
.user-details {
margin-bottom: 10px; /* Space below user details */
text-align: center;
}
.dropdown-divider {
height: 1px;
background-color: rgba(255, 255, 255, 0.12);
margin: 5px 0;
}
/* city details */
select#banksList {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
input#datepicker {
width: 70px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.select-city {
/* position: absolute; */
position: relative;
width: 300px;
display: flex;
height: 24px;
}
#cityInput {
border: 2px solid #ccc;
/* Default border */
padding: 10px;
width: 200px;
box-sizing: border-box;
height: -webkit-fill-available;
}
#cityInput.invalid {
border-color: red;
/* Red border for invalid input */
}
#cityInput.valid {
border-color: green;
/* Green border for valid selection */
}
#cityList {
color: black;
font-size: smaller;
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
display: none;
position: absolute;
background-color: white;
z-index: 1000;
}
.city-item {
padding: 10px;
cursor: pointer;
}
.city-item:hover {
background-color: #f0f0f0;
}
.auto-complete-text {
position: absolute;
/* float: right; */
/* padding-left: 55%; */
right: 19px;
top: 3px;
color: green;
margin-bottom: 4px;
}

118
static/css/nav.css → static/css/notification.css
View File

@ -1,122 +1,5 @@
/* Navbar styles */
.logo{
display: flex;
align-items: center;
}
.flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-bar{
padding: 3px 10px 0px 20px;
}
.nav-bar a{
color: #fff;
cursor: pointer;
}
.nav-bar .hm{
font-size: 20px;
}
#m-bar{
display: none;
font-size: 20px;
}
#menu-links ul{
margin: 0;
padding: 0;
}
#menu-links ul li{
display: inline-block;
margin: 0 35px;
list-style-type: none;
}
#menu-links a{
text-decoration: none;
font-weight: 500;
font-size: 15px;
text-transform: uppercase;
}
.nav-btn{
padding: 3px 15px;
background-color: #868686;
text-decoration: none;
color: black;
border-radius: 35px;
}
.nav-btn:hover{
background-color: #6791e0 !important;
}
.active{
color: #2d6cdf !important;
}
#menu-links a:hover{
color: #6dabf1 !important;
}
@media only screen and (max-width: 1105px){
#btn{
display: none;
}
.hidden-title{
display: none !important;
}
.inputHolder {
width: -webkit-fill-available !important;
}
.btn-remove {
right: 15px;
}
}
@media only screen and (max-width: 750px){
.nav-bar{
display: block;
text-align: center;
background-color: rgba(0, 0, 0, .4);
}
#menu-links ul li{
display: block;
margin: 25px 0;
}
#btn{
display: block;
}
#m-bar{
display: block;
}
.hidden{
display: none !important;
}
.not-hidden{
display: block !important;
}
.hidden-title{
display: block !important;
}
}
.bg-tarakan{
display: none;
position: absolute;
max-width: 1140px;
width: -webkit-fill-available;
}
.show-tarakan{
display: block;
}
/* toast notification */
.toast {
position: absolute;
top: 25px;
@ -128,6 +11,7 @@
overflow: hidden;
transform: translateX(calc(100% + 30px));
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
z-index: 100;
}
.toast-up{

170
static/css/options.css Normal file
View File

@ -0,0 +1,170 @@
.options-box {
color: white;
background-color: #1e1e1e;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
padding: 20px;
max-width: 400px;
/* position: relative; */
/* margin: auto; */
width: 66%;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 20px;
color: #ffffff; /* Close button color */
}
.option-title {
margin: 0 0 18px; /* Space below the title */
font-size: 20px; /* Title size */
text-align: center; /* Center the title */
}
.form-group {
display: flex; /* Flexbox for alignment */
align-items: flex-start;
justify-content: space-between; /* Space between label and input */
align-items: center; /* Vertically align items */
/* margin-top: 15px; */
}
.switch-title{
padding-top: 10px;
margin: 0;
}
label {
flex: 1; /* Takes available space */
font-size: 14px; /* Smaller font size for labels */
}
.options-button {
background-color: #3a3a3a; /* Button background */
color: #ffffff; /* Button text color */
border: none; /* No border */
padding: 10px; /* Padding inside buttons */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
width: 100%; /* Full width buttons */
margin-top: 15px; /* Space above buttons */
transition: background-color 0.3s; /* Smooth background transition */
}
.options-button:hover {
background-color: #505050; /* Lighter on hover */
}
hr {
border: none;
height: 1px;
background-color: rgba(255, 255, 255, 0.1); /* Light divider */
margin: 5px; /* Margin around the divider */
}
.centered {
text-align: center; /* Center align text in buttons */
}
/* has */
label.switch.has-label {
display: grid;
grid-template-areas: "col-1 col-2 ";
grid-gap: 1px;
align-items: center;
justify-content: space-between;
}
label.switch.has-label .off {
color: rgba(255, 255, 255 );
grid-area: col-1;
transition: var(--transition);
}
label.switch.has-label .on {
color: rgba(0, 0, 0, 0.3);
grid-area: col-3;
transition: var(--transition);
}
label.switch.has-label .track {
grid-area: col-2;
}
label.switch.has-label input[type=checkbox]:checked ~ .on {
color: rgb(255, 255, 255);
}
label.switch.has-label input[type=checkbox]:checked ~ .off {
color: rgb(255 253 253 / 47%);
}
/* Main Component Styles */
label.switch {
text-align: -webkit-right;
/* padding-bottom: 10px; */
--switch-size: 40px;
--thumb-gap: 4px;
--thumb-size: calc(var(--switch-size) * 0.55 - var(--thumb-gap));
--thumb-active-offset: calc(var(--switch-size) / 2);
--track-radius: calc(var(--switch-size) / 1.6666);
--thumb-color: #fff;
--track-color: rgba(146, 146, 146, 0.479);
--accent-color: #2f57d4;
--transition: 200ms ease;
}
label.switch .track {
width: var(--switch-size);
height: calc(var(--switch-size) / 1.6666);
background: var(--track-color);
border-radius: var(--track-radius);
border-radius: calc(var(--track-radius) / 2);
display: flex;
align-items: center;
box-shadow: inset 0px 0px 4px -2px rgba(0, 0, 0, 0.129);
transition: 250ms ease;
}
label.switch .thumb {
display: inline-block;
background: var(--thumb-color);
width: var(--thumb-size);
height: var(--thumb-size);
border-radius: 50%;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
transform: translateX(var(--thumb-gap));
transition: transform 250ms ease-in-out;
}
label.switch input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
label.switch input[type=checkbox]:checked + .track {
background: var(--accent-color);
}
label.switch input[type=checkbox]:checked + .track .thumb {
transform: translateX(var(--thumb-active-offset));
}
label.switch input[type=checkbox]:focus + .track {
box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
}
.addedButtonsContainer{
display: flex;
padding: 8px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.group-options-title{
margin: 9px 0px;
color: #818193a6;
font-size: 13px;
font-family: monospace;
}

169
static/css/style.css
View File

@ -1,14 +1,15 @@
html{
/* background: url(https://i.ibb.co/njV5xJS/background.jpg) no-repeat center center fixed;
html {
/* background: url(https://i.ibb.co/njV5xJS/background.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%; */
}
body {
font-family: 'Rubik', sans-serif;
/* margin:0; */
max-width: 1140px;
margin: 0 auto;
/* margin:0; */
max-width: 1140px;
margin: 0 auto;
overflow: hidden;
/* background-color: rgb(71, 71, 71); */
/* background: linear-gradient(135deg, #7d7e7d 0%, #0e0e0e 100%);
@ -19,9 +20,10 @@ body {
margin: auto;
}
.maparea{
.maparea {
margin: auto;
}
.buttons {
display: flex;
justify-content: space-around;
@ -65,15 +67,17 @@ body {
/* padding: 10px; */
/* text-align: center; */
}
.modelselect{
border-radius: 20px;
font-size: large;
padding: 10px 0px;
.modelselect {
border-radius: 20px;
font-size: large;
padding: 10px 0px;
/* padding: 10px; */
text-align: center;
align-self: center;
}
.modelselect option{
.modelselect option {
text-align: center;
overflow: hidden;
@ -129,19 +133,20 @@ body {
font-size: small;
}
.btn-remove{
.btn-remove {
cursor: pointer;
/* border-radius: 15px; */
color: red;
/* border-color: red; */
/* border-width: 2px; */
position: absolute;
margin-top: 5px !important;
z-index: 5;
padding: 5px;
font-size: x-large;
background: transparent;
border-style: none;
/* border-radius: 15px; */
color: red;
/* border-color: red; */
/* border-width: 2px; */
position: absolute;
margin-top: 5px !important;
z-index: 5;
padding: 5px;
font-size: x-large;
background: transparent;
border-style: none;
}
.clean {
@ -192,7 +197,7 @@ td {
left: 77px;
}
.visible-table{
.visible-table {
display: none !important;
}
@ -278,58 +283,27 @@ footer {
}
.bold{
.bold {
font-weight: bold;
color: darkred;
}
.not-show{
.not-show {
display: none !important;
}
#history{
#history {
display: flex;
justify-content: center;
justify-content: center;
}
.copy-text{
.copy-text {
margin: 15px;
padding: 10px;
padding: 10px;
}
.options-icon {
cursor: pointer;
}
.options-box {
width: 66%;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
z-index: 9999;
background: rgb(229 229 229 / 94%);
}
.options-box input {
padding: 5px;
border-radius: 7px;
margin: 2px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.additionalInfo {
background-color: yellow;
@ -345,7 +319,8 @@ footer {
border-radius: 5px;
cursor: pointer;
}
.centered{
/* .centered {
margin-left: 36%;
margin-top: 5px;
margin-right: 5px;
@ -355,10 +330,74 @@ footer {
padding-right: 20px;
padding-bottom: 3px;
padding-left: 20px;
}
} */
.additionalButtonsContainer{
.additionalButtonsContainer {
display: flex;
justify-content: center;
gap: 10px;
gap: 10px;
}
.blinking {
animation: blink 0.5s infinite;
/* border-radius: 5px; */
}
@keyframes blink {
/* 0% {border: white solid 5px; }
100% {border: red solid 5px; } */
0% {
box-shadow: 0px 0px 0px 5px white inset;
}
100% {
box-shadow: 0px 0px 0px 5px red inset;
}
}
.blinking2 {
animation: blink-animation 1s infinite;
}
@keyframes blink-animation {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@media only screen and (max-width: 1105px){
.inputHolder {
width: -webkit-fill-available !important;
}
.btn-remove {
right: 15px;
}
}
.bg-tarakan{
display: none;
position: absolute;
max-width: 1140px;
width: -webkit-fill-available;
}
.show-tarakan{
display: block;
}

BIN
static/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
static/images/profiles/ahmed.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 742 B

268
static/index2.html
View File

@ -21,7 +21,9 @@
<title>Pax S90</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/nav.css">
<link rel="stylesheet" href="/css/notification.css">
<link rel="stylesheet" href="/css/navbar.css">
<link rel="stylesheet" href="/css/options.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.maphilight.min.js"></script>
@ -29,6 +31,7 @@
<script src="https://kit.fontawesome.com/e8e55b4ad4.js" crossorigin="anonymous"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script src="js/navbar.js"></script>
</head>
<body>
@ -40,7 +43,6 @@
</div>
<div class="message">
<span class="text text-1">Success</span>
<span class="text text-2">Your changes has been saved</span>
@ -48,41 +50,41 @@
</div>
<i class="fa-solid fa-xmark close"></i>
<!-- Remove 'active' class, this is just to show in Codepen thumbnail -->
<div class="progress"></div>
</div>
<!-- <button class="buttonTest">Show Toast</button> -->
<div class="nav-bar flex">
<div class="first-holder flex">
<a class="logo"> <img src="/images/sv-org-logo.png" height="20"> СЕРВИС-ВОЛГА </a>
<a href="#" id="m-bar"><i class="fas fa-bars hm"></i></a>
<nav class="navbar">
<div class="navbar-brand" href="/">
<img src="/images/sv-org-logo.png" alt="Site Logo">
<span>СЕРВИС-ВОЛГА</span> <!-- Title as a span for styling -->
</div>
<div class="dropdown">
<img src="/images/profiles/ahmed.jpg" alt="User Photo" class="user-photo" onclick="toggleDropdown(event)">
<div class="dropdown-menu" id="dropdownMenu">
<div class="user-details">
<img src="/images/profiles/ahmed.jpg" alt="User Photo" class="user-photo"
style="width: 60px; height: 60px;"> <!-- Larger photo in dropdown -->
<div style="color: white; font-weight: bold;"><%= username %></div> <!-- Username -->
</div>
<a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>&nbsp Profile</a>
<a class="dropdown-item" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"></i>&nbsp
Settings</a>
<a class="dropdown-item" href="check-serials.html"><i class="fa-solid fa-list-check"></i>&nbsp Check
Serials</a>
<a class="dropdown-item" href="http://192.168.1.6:2150/"><i class="fa-solid fa-upload"></i>&nbsp Upload
xlsx</a>
<a id="showStorage" class="dropdown-item">
<div id="history-lable"><i class="fa-solid fa-floppy-disk"></i>&nbsp Show History</div>
</a>
<div id="menu-links" class="hidden">
<ul>
<li><a onClick="window.location.reload();" class=" "><i class="fa-solid fa-arrows-rotate"></i> <span
class="hidden-title"> Refresh</span>
</a> </li>
<li><a href="check-serials.html"> <i class="fa-solid fa-list-check"></i><span class="hidden-title">
Check Serials</span> </a></li>
<li><a href="http://192.168.1.6:2150/" target="_blank" rel="noopener noreferrer"> <i
class="fa-solid fa-upload"></i> <span class="hidden-title"> Upload</span></a></li>
<li><a class="options-icon" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"> <span
class="hidden-title"> Options</span></i></a>
</li>
<li>
</li>
</ul>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fa-solid fa-right-from-bracket"></i>&nbsp Logout</a>
</div>
</div>
<a id="showStorage" class="nav-btn hidden show">
<div id="history-lable"><i class="fa-solid fa-floppy-disk"></i> Show History</div>
</a>
</div>
</nav>
<div class="beta"><textarea id="titleInput" class="inputHolder" placeholder="" rows="" cols="" name=""
form=""> </textarea>
@ -95,35 +97,35 @@
<div class="buttons">
<select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
<option value="S90">S90</option>
<option value="S80">S80</option>
<option value="SP30">SP30</option>
<option value="S200">S200</option>
<option value="S300">S300</option>
<option value="S920">S920</option>
<option value="S900">S900</option>
<option value="A920">A920</option>
<option value="A930">A930</option>
<option value="D200">D200</option>
<option value="D230">D230</option>
<option value="IM20">IM20</option>
<select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
<option value="S90">S90</option>
<option value="S80">S80</option>
<option value="SP30">SP30</option>
<option value="S200">S200</option>
<option value="S300">S300</option>
<option value="S920">S920</option>
<option value="S900">S900</option>
<option value="A920">A920</option>
<option value="A930">A930</option>
<option value="D200">D200</option>
<option value="D230">D230</option>
<option value="IM20">IM20</option>
<option value="V240m">V240m</option>
<option value="V200t">V200t</option>
<option value="V205c">V205c</option>
<option value="V520">V520</option>
<option value="VX675">VX675</option>
<option value="VX680">VX680</option>
<option value="VX805">VX805</option>
<option value="VX820">VX820</option>
<option value="VX840">VX840</option>
<option value="V240m">V240m</option>
<option value="V200t">V200t</option>
<option value="V205c">V205c</option>
<option value="V520">V520</option>
<option value="VX675">VX675</option>
<option value="VX680">VX680</option>
<option value="VX805">VX805</option>
<option value="VX820">VX820</option>
<option value="VX840">VX840</option>
<option value="P400">P400</option>
<option value="PP1000se">PP1000se</option>
<option value="P400">P400</option>
<option value="PP1000se">PP1000se</option>
</select>
<div>
</select>
<div>
<form action="" id="SerialNumber" class="serialform">
<!-- <span>SerialNumber: </span> -->
<input type="text" id="serial" class="form-control" placeholder="serial number">
@ -391,65 +393,125 @@
<!-- OPTION TAG -->
<div id="options-box" class="options-box">
<!-- <span class="close-btn">&times;</span> -->
<div class="close-btn" onclick="closeOptionsBox()">✖</div>
<h2>Options</h2>
<label for="background-color">Background Color:</label>
<input type="color" id="background-color" onchange="changeBackgroundColor()">
<!-- <br>
<label for="font-size">Font Size (px):</label>
<input type="number" id="font-size" min="10" max="50" onchange="changeFontSize()"> -->
<h2 class="option-title">Options</h2>
<br>
<hr>
<label for="toggleCheckbox">Последние записи ... Скрыть? </label>
<input type="checkbox" id="toggleCheckbox" onchange="toggleTableVisibility()">
<br>
<label for="font-size">Максимальное количество последних записей :</label>
<input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
onchange="changeLastRecords()">
<br>
<div class="form-group">
<label for="background-color">Background Color:</label>
<input type="color" id="background-color" onchange="changeBackgroundColor()">
</div>
<hr>
<label for="toggleWaitingCheckbox">Скрыть кнопки (в ожидание запасных частей) ?</label>
<input type="checkbox" id="toggleWaitingCheckbox" onchange="toggleWaitingVisibility()">
<br>
<label for="newButtonInput">В ожидание :</label>
<input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
<br>
<button onclick="addButton()" class="additionalInfo centered">Добавить новую кнопку</button>
<div id="settingButtonsContainer"> </div>
<br>
<div class="form-group">
<p class="group-options-title">Таилица последних записей</p>
</div>
<div class="form-group">
<label for="toggleCheckbox" class="switch has-label">
<input type="checkbox" name="toggleCheckbox" id="toggleCheckbox"
onchange="toggleTableVisibility()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Скрыть Последние записи?</span>
</label>
</div>
<div class="form-group">
<label for="font-size">Максимальное количество последних записей :</label>
<input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
onchange="changeLastRecords()">
</div>
<hr>
<label for="toggleFixesCheckbox">Скрыть кнопки (доб. неисправность) ?</label>
<input type="checkbox" id="toggleFixesCheckbox" onchange="toggleFixesVisibility()">
<br>
<label for="new2ButtonInput">Заявленная неисправность :</label>
<input type="text" id="new2ButtonInput" placeholder="неисправность">
<br>
<!-- Additional input for button note -->
<label for="new2ButtonNote">Произведенная работа :</label>
<input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
<br>
<button onclick="add2Button()" class="additional2buttons centered">Добавить новую кнопку</button>
<div id="setting2ButtonsContainer"> </div>
<div class="form-group">
<p class="group-options-title">option в ожидание</p>
</div>
<div class="form-group">
<label for="toggleWaitingCheckbox" class="switch has-label">
<input type="checkbox" name="toggleWaitingCheckbox" id="toggleWaitingCheckbox"
onchange="toggleWaitingVisibility()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Скрыть кнопки (в ожидание запасных частей) ?</span>
</label>
</div>
<div class="form-group">
<label for="newButtonInput">Текст В ожидание :</label>
<input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
</div>
<div class="form-group">
<button onclick="addButton()" class=" options-button">Добавить новую кнопку</button>
</div>
<div class="addedButtonsContainer" id="settingButtonsContainer"> </div>
<hr>
<label for="toggleNotificationCheckbox">Уведомлени вверх ?</label>
<input type="checkbox" id="toggleNotificationCheckbox" onchange="toggleNotificationUP()">
<br>
<label for="togglePoliteCheckbox">Polite notification ?</label>
<input type="checkbox" id="togglePoliteCheckbox" onchange="toggleNotificationPolite()">
<br>
<br>
<br>
<button class="centered" onclick="saveSettings()">Save Settings</button>
<button onclick="clearSettings()">Clear Settings</button>
<div class="form-group">
<p class="group-options-title">option неисправность</p>
</div>
<div class="form-group">
<label for="toggleFixesCheckbox" class="switch has-label">
<input type="checkbox" name="toggleFixesCheckbox" id="toggleFixesCheckbox"
onchange="toggleFixesVisibility()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Скрыть кнопки (доб. неисправность) ?</span>
</label>
</div>
<div class="form-group">
<label for="new2ButtonInput">Заявленная неисправность :</label>
<input type="text" id="new2ButtonInput" placeholder="Произведенная работа">
</div>
<div class="form-group">
<label for="new2ButtonNote">Произведенная работа :</label>
<input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
</div>
<div class="form-group">
<button onclick="add2Button()" class="options-button">Добавить новую кнопку</button>
</div>
<div class="addedButtonsContainer" id="setting2ButtonsContainer"> </div>
<hr>
<div class="form-group">
<p class="group-options-title">Notifications</p>
</div>
<div class="form-group">
<label for="toggleNotificationCheckbox" class="switch has-label">
<input type="checkbox" name="toggleNotificationCheckbox" id="toggleNotificationCheckbox"
onchange="toggleNotificationUP()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Уведомлени вверх ?</span>
</label>
</div>
<div class="form-group">
<label for="togglePoliteCheckbox" class="switch has-label">
<input type="checkbox" name="togglePoliteCheckbox" id="togglePoliteCheckbox"
onchange="toggleNotificationPolite()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Polite notification ?</span>
<!-- <span class="on">ON</span> -->
</label>
</div>
<hr>
<div class="form-group">
<p class="group-options-title">Warning</p>
</div>
<div class="form-group">
<label for="enableBlinkingCheckbox" class="switch has-label">
<input type="checkbox" name="enableBlinkingCheckbox" id="enableBlinkingCheckbox"
onchange="toggleBlinking()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Blink selected problem?</span>
<!-- <span class="on">ON</span> -->
</label>
</div>
<button class="options-button" onclick="clearSettings()">Clear Settings</button>
<button class="options-button" onclick="saveSettings()">Save Options</button>
</div>

153
static/js/citydetails.js Normal file
View File

File diff suppressed because one or more lines are too long

124
static/js/diag.js
View File

@ -56,7 +56,7 @@ const models = {
manualSelectModel = false; // manual select model
let cityDetails = ''
let lastThreeRecords = [];
let tempDetails = []
@ -67,6 +67,7 @@ let isSerialHolderEmpty = true;
let copiedTitle = '';
let polite = true;
let enableBlinking = true;
$(function () {
$('.maparea').maphilight({
@ -77,42 +78,72 @@ $(function () {
});
});
let intervalIds = {}; // Object to store interval IDs
// External function to start blinking an element
function startBlinking(id) {
const element = $(`#${id}`);
const data = element.data('maphilight') || {};
if (intervalIds[id]) {
clearInterval(intervalIds[id]);
}
let isRed = true; // Track current color state
intervalIds[id] = setInterval(() => {
const currentColor = isRed ? 'ff0000' : '00ff00';
element.data('maphilight', {
...data,
strokeColor: currentColor
}).trigger('alwaysOn.maphilight');
isRed = !isRed; // Toggle color state
}, 500);
}
// External function to stop blinking an element
function stopBlinking(id) {
if (intervalIds[id]) {
clearInterval(intervalIds[id]);
delete intervalIds[id]; // Remove the interval ID from the object
}
}
// Click event handler for the map areas
$("#map area").click(function () {
// var data = $(this).attr("maphilight");
// const data = $(this).mouseout().data('maphilight') || {};
const data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
// console.log(data);
$(this).trigger('alwaysOn.maphilight');
const id = $(this).attr("id");
const gid = $(this).attr("gid");
// console.log(id +" is id");
// console.log('this issss:');
// console.log(this);
if (isSerialHolderEmpty) {
$('#searchText').text('Empty!')
// alert("Курва!!! \n Я пердолни, где серийный номер?");
showNotification('random', 'Где серийный номер?!' , 'danger')
showNotification('random', 'Где серийный номер?!', 'danger')
return;
}
if (data.alwaysOn) {
tempDetails.push(details[gid])
tempDetails.push(details[gid]);
console.log('tempDetails is: ', tempDetails);
}
else {
// tempDetails[gid] = false
// Start blinking the selected element
if (enableBlinking) {
startBlinking(id);
}
} else {
console.log('else temp: ', tempDetails[gid]);
console.log('else details: ', details[gid]);
var filteredArray = tempDetails.filter(e => e !== details[gid])
console.log('filteredArray is: ', filteredArray);
tempDetails = filteredArray
tempDetails = tempDetails.filter(e => e !== details[gid]);
console.log('filteredArray is: ', tempDetails);
// Stop blinking the deselected element
stopBlinking(id);
}
checkDetails()
checkDetails();
console.log('my tempDetails are: ', tempDetails);
// console.log('my chnages are: ', tempDetails);
});
$("#Tarakan").click(function () {
@ -201,6 +232,7 @@ checkDetails = () => {
}
$('#copyText').click(function () {
if (isSerialHolderEmpty) {
if (copiedTitle) {
@ -245,15 +277,19 @@ $('#copyText').click(function () {
saveToLocalStorage();
// var problem = Object.keys(tempDetails)[0]
// checkModel(($("#serial").val()), models)
const userName = document.getElementById("userName").innerText;
console.log("userName ", userName);
const CityDetails = getCityDetails();
const newDataUpload = {
'Модель': tempModel,
'Сер.номер': tempSerial,
'Заявленная неисправность': tempDetails[problem][1],
'Произведенная работа': makePlusList(tempDetails).toString(),
'filename': new Date().toLocaleTimeString()
'filename': CityDetails + ' ' + userName ,
'timestamp': new Date().toLocaleTimeString()
};
console.log(newDataUpload);
@ -421,6 +457,12 @@ $('#reset').on('click', () => {
const cleanAll = () => {
manualSelectModel = false;
document.getElementById("serial").focus();
for (let id in intervalIds) {
clearInterval(intervalIds[id]);
}
intervalIds = {}; // Reset the interval IDs object
$("#serial").select();
tempSerial = {}
@ -487,6 +529,8 @@ SerialNumber.addEventListener("submit", (e) => {
tempSerial = keyboardLayoutSwitch(serial.value)
$("#serial").val(tempSerial);
checkModel(tempSerial, models)
console.log('tempSerial, models', tempSerial, models);
fetchData(keyboardLayoutSwitch(serial.value), 'search2').then(data => {
console.log(data); // The response body
@ -593,6 +637,7 @@ function addRowWithoutHeaders(arr, table) {
$("#selectmodel").change(function () {
manualSelectModel = true;
$("#selectmodel").removeClass("blinking");
tempModel = document.getElementById("selectmodel").value;
// checkModel(tempSerial, tempModel);
checkDetails()
@ -602,6 +647,8 @@ $("#selectmodel").change(function () {
const checkModel = (serial, models) => {
// serial.includes("3K"); // true
console.log('func checkModel');
if (manualSelectModel) {
tempModel = document.getElementById("selectmodel").value;
@ -618,19 +665,34 @@ const checkModel = (serial, models) => {
// if (serial.indexOf(element[length])!=-1) { // search in any part of string
if (serial.startsWith(element[length])) {
console.log('found serial match: ' + key);
$("#selectmodel").val(key);
// tempModel = key
// console.log('list length is ', listSerialLength);
// console.log('Serial length is ', serial.length);
if (listSerialLength == serial.length) {
tempModel = key
$("#selectmodel").removeClass("blinking");
return;
}else if (listSerialLength == '0'){
tempModel = key
$("#selectmodel").removeClass("blinking");
return;
} else {
$("#selectmodel").addClass("blinking");
tempModel = 'ERROR'
showNotification('random', 'Не удалось определить модель', 'danger')
}
}
}
if (tempModel == 'ERROR'){
$("#selectmodel").addClass("blinking");
tempModel = 'ERROR'
showNotification('random', 'Не удалось определить модель', 'danger')
}
}
}
}
@ -643,21 +705,6 @@ $(document).ready(function () {
});
let toggle = document.getElementById('m-bar')
let holder = document.getElementById('menu-links')
let btn = document.getElementById('btn')
toggle.addEventListener('click', () => {
if (holder.className === "hidden") {
holder.className = "not-hidden"
btn.className = "not-hidden"
} else {
holder.className = "hidden"
btn.className = "hidden"
}
})
let history = document.getElementById('showStorage')
const historyLable = document.getElementById('history')
@ -666,11 +713,11 @@ const iconSave = '<i class="fa-solid fa-floppy-disk"></i>'
history.addEventListener('click', () => {
if (historyLable.className === "show") {
historyLable.className = "not-show"
historybtn.innerHTML = iconSave + " Show History"
historybtn.innerHTML = iconSave + "&nbsp Show History"
// btn.className = "not-hidden"
} else {
historyLable.className = "show"
historybtn.innerHTML = iconSave + " Hide History"
historybtn.innerHTML = iconSave + "&nbsp Hide History"
}
})
@ -773,3 +820,4 @@ function showNotification(msgTextTitle, msgTextContent, icon) {
progress.classList.remove("active");
}, 5300);
}

18
static/js/navbar.js Normal file
View File

@ -0,0 +1,18 @@
// Function to toggle the dropdown visibility
function toggleDropdown(event) {
const dropdown = document.getElementById('dropdownMenu');
dropdown.classList.toggle('show'); // Toggle 'show' class
}
// Close the dropdown if clicked outside
window.onclick = function(event) {
if (!event.target.matches('.user-photo')) {
const dropdowns = document.getElementsByClassName("dropdown-menu");
for (let i = 0; i < dropdowns.length; i++) {
const openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

32
static/js/options.js
View File

@ -23,6 +23,8 @@ function changeFontSize() {
function changeLastRecords() {
const last = document.getElementById("last-record-setting").value;
lastThreeRecordslength = last;
console.log('last recored setted to' , lastThreeRecordslength);
}
function toggleTableVisibility() {
@ -36,6 +38,8 @@ function toggleTableVisibility() {
tableList.classList.remove("visible-table");
// tableList.classList.add("hide");
}
console.log("toggleTableVisibility toggeled " );
}
function toggleWaitingVisibility() {
@ -87,6 +91,18 @@ function toggleNotificationPolite() {
}
}
function toggleBlinking() {
var checkbox = document.getElementById("enableBlinkingCheckbox");
if (checkbox.checked) {
enableBlinking = true
} else {
enableBlinking = false
}
console.log('enableBlinking is toggled ', enableBlinking);
}
function saveSettings() {
var backgroundColor = document.getElementById("background-color").value;
@ -97,6 +113,7 @@ function saveSettings() {
var notificationUP = document.getElementById("toggleNotificationCheckbox").checked;
var lastRecord = document.getElementById("last-record-setting").value;
var polite = document.getElementById("togglePoliteCheckbox").checked;
var enableBlinking = document.getElementById("enableBlinkingCheckbox").checked;
var settings = {
backgroundColor: backgroundColor,
@ -106,7 +123,8 @@ function saveSettings() {
toggleWaitingCheckbox: toggleWaitingCheckbox,
toggleFixesCheckbox: toggleFixesCheckbox,
notificationUP: notificationUP,
polite: polite
polite: polite,
enableBlinking: enableBlinking
};
console.log('settings is object as ', settings);
@ -132,7 +150,11 @@ function loadSettings() {
document.getElementById("font-size").value = settings.fontSize;
}
document.getElementById("background-color").value = settings.backgroundColor;
// if (settings.hasOwnProperty("backgroundColor")) {
// document.getElementById("background-color").value = settings.backgroundColor;
// }
if (settings.lastRecord) {
@ -161,6 +183,12 @@ function loadSettings() {
document.getElementById("togglePoliteCheckbox").checked = settings.polite;
toggleNotificationPolite(); // Call the function to apply visibility based on checkbox state
}
if (settings.hasOwnProperty("enableBlinking")) {
document.getElementById("enableBlinkingCheckbox").checked = settings.enableBlinking;
toggleBlinking(); // Call the function to apply visibility based on checkbox state
console.log('blinknig is ' , settings.enableBlinking);
}
}
}

290
views/home.ejs
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -20,7 +21,9 @@
<title>Pax S90</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/nav.css">
<link rel="stylesheet" href="/css/notification.css">
<link rel="stylesheet" href="/css/navbar.css">
<link rel="stylesheet" href="/css/options.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.maphilight.min.js"></script>
@ -28,6 +31,12 @@
<script src="https://kit.fontawesome.com/e8e55b4ad4.js" crossorigin="anonymous"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script src="js/navbar.js"></script>
<script src="js/citydetails.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.min.css">
<!-- <script src="https://code.jquery.com/jquery-3.7.1.js"></script> -->
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script>
</head>
<body>
@ -39,7 +48,6 @@
</div>
<div class="message">
<span class="text text-1">Success</span>
<span class="text text-2">Your changes has been saved</span>
@ -47,46 +55,56 @@
</div>
<i class="fa-solid fa-xmark close"></i>
<!-- Remove 'active' class, this is just to show in Codepen thumbnail -->
<div class="progress"></div>
</div>
<!-- <button class="buttonTest">Show Toast</button> -->
<div class="nav-bar flex">
<div class="first-holder flex">
<a class="logo"> <img src="/images/sv-org-logo.png" height="20"> СЕРВИС-ВОЛГА </a>
<a href="#" id="m-bar"><i class="fas fa-bars hm"></i></a>
<nav class="navbar">
<div class="navbar-brand" href="/">
<img src="/images/sv-org-logo.png" alt="Site Logo">
<span>СЕРВИС-ВОЛГА</span> <!-- Title as a span for styling -->
</div>
<div id="menu-links" class="hidden">
<ul>
<li><a onClick="window.location.reload();" class=" "><i class="fa-solid fa-arrows-rotate"></i> <span
class="hidden-title"> Refresh</span>
</a> </li>
<li><a href="check-serials.html"> <i class="fa-solid fa-list-check"></i><span class="hidden-title">
Check Serials</span> </a></li>
<li><a href="http://192.168.1.6:2150/" target="_blank" rel="noopener noreferrer"> <i
class="fa-solid fa-upload"></i> <span class="hidden-title"> Upload</span></a></li>
<li><a class="options-icon" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"> <span
class="hidden-title"> Options</span></i></a>
</li>
<li><a href="">Welcome <%= username %> </a>
</li>
<!-- <li><a href="/home">Home</a></li> -->
<li><a href="/logout">Logout</a></li>
</ul>
<div class="select-city">
<select name="banks" id="banksList" class="bank-list" placeholder="Banks" onchange="getCityDetails()">
<option value="Сбербанк" selected="selected">Сбербанк</option>
<option value="Алфабанк">Алфабанк</option>
<option value="Стандарт">Стандарт</option>
</select>
<div class="city-selection">
<div id="autocompleteText" class="auto-complete-text"></div>
<input type="text" id="cityInput" placeholder="Type a city..." onkeyup="filterCities()"" autocomplete="off">
<div id="cityList"></div>
</div>
<input type="text" id="datepicker" autocomplete="off" onchange="getCityDetails()">
</div>
<a id="showStorage" class="nav-btn hidden show">
<div id="history-lable"><i class="fa-solid fa-floppy-disk"></i> Show History</div>
</a>
</div>
<div class="dropdown">
<img src="<%= avatar %>" alt="User Photo" class="user-photo" onclick="toggleDropdown(event)">
<div class="dropdown-menu" id="dropdownMenu">
<div class="user-details">
<img src="<%= avatar %>" alt="User Photo" class="user-photo"
style="width: 60px; height: 60px;"> <!-- Larger photo in dropdown -->
<div id="userName" class="user-name" ><%= username %></div> <!-- Username -->
</div>
<a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>&nbsp Profile</a>
<a class="dropdown-item" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"></i>&nbsp
Settings</a>
<a class="dropdown-item" href="check-serials.html"><i class="fa-solid fa-list-check"></i>&nbsp Check
Serials</a>
<a class="dropdown-item" href="http://192.168.1.6:2150/"><i class="fa-solid fa-upload"></i>&nbsp Upload
xlsx</a>
<a id="showStorage" class="dropdown-item">
<div id="history-lable"><i class="fa-solid fa-floppy-disk"></i>&nbsp Show History</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout"><i class="fa-solid fa-right-from-bracket"></i>&nbsp Logout</a>
</div>
</div>
</nav>
<div class="beta"><textarea id="titleInput" class="inputHolder" placeholder="" rows="" cols="" name=""
form=""> </textarea>
@ -99,35 +117,35 @@
<div class="buttons">
<select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
<option value="S90">S90</option>
<option value="S80">S80</option>
<option value="SP30">SP30</option>
<option value="S200">S200</option>
<option value="S300">S300</option>
<option value="S920">S920</option>
<option value="S900">S900</option>
<option value="A920">A920</option>
<option value="A930">A930</option>
<option value="D200">D200</option>
<option value="D230">D230</option>
<option value="IM20">IM20</option>
<select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
<option value="S90">S90</option>
<option value="S80">S80</option>
<option value="SP30">SP30</option>
<option value="S200">S200</option>
<option value="S300">S300</option>
<option value="S920">S920</option>
<option value="S900">S900</option>
<option value="A920">A920</option>
<option value="A930">A930</option>
<option value="D200">D200</option>
<option value="D230">D230</option>
<option value="IM20">IM20</option>
<option value="V240m">V240m</option>
<option value="V200t">V200t</option>
<option value="V205c">V205c</option>
<option value="V520">V520</option>
<option value="VX675">VX675</option>
<option value="VX680">VX680</option>
<option value="VX805">VX805</option>
<option value="VX820">VX820</option>
<option value="VX840">VX840</option>
<option value="V240m">V240m</option>
<option value="V200t">V200t</option>
<option value="V205c">V205c</option>
<option value="V520">V520</option>
<option value="VX675">VX675</option>
<option value="VX680">VX680</option>
<option value="VX805">VX805</option>
<option value="VX820">VX820</option>
<option value="VX840">VX840</option>
<option value="P400">P400</option>
<option value="PP1000se">PP1000se</option>
<option value="P400">P400</option>
<option value="PP1000se">PP1000se</option>
</select>
<div>
</select>
<div>
<form action="" id="SerialNumber" class="serialform">
<!-- <span>SerialNumber: </span> -->
<input type="text" id="serial" class="form-control" placeholder="serial number">
@ -395,65 +413,125 @@
<!-- OPTION TAG -->
<div id="options-box" class="options-box">
<!-- <span class="close-btn">&times;</span> -->
<div class="close-btn" onclick="closeOptionsBox()">✖</div>
<h2>Options</h2>
<label for="background-color">Background Color:</label>
<input type="color" id="background-color" onchange="changeBackgroundColor()">
<!-- <br>
<label for="font-size">Font Size (px):</label>
<input type="number" id="font-size" min="10" max="50" onchange="changeFontSize()"> -->
<h2 class="option-title">Options</h2>
<br>
<hr>
<label for="toggleCheckbox">Последние записи ... Скрыть? </label>
<input type="checkbox" id="toggleCheckbox" onchange="toggleTableVisibility()">
<br>
<label for="font-size">Максимальное количество последних записей :</label>
<input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
onchange="changeLastRecords()">
<br>
<div class="form-group">
<label for="background-color">Background Color:</label>
<input type="color" id="background-color" onchange="changeBackgroundColor()">
</div>
<hr>
<label for="toggleWaitingCheckbox">Скрыть кнопки (в ожидание запасных частей) ?</label>
<input type="checkbox" id="toggleWaitingCheckbox" onchange="toggleWaitingVisibility()">
<br>
<label for="newButtonInput">В ожидание :</label>
<input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
<br>
<button onclick="addButton()" class="additionalInfo centered">Добавить новую кнопку</button>
<div id="settingButtonsContainer"> </div>
<br>
<div class="form-group">
<p class="group-options-title">Таилица последних записей</p>
</div>
<div class="form-group">
<label for="toggleCheckbox" class="switch has-label">
<input type="checkbox" name="toggleCheckbox" id="toggleCheckbox"
onchange="toggleTableVisibility()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Скрыть Последние записи?</span>
</label>
</div>
<div class="form-group">
<label for="font-size">Максимальное количество последних записей :</label>
<input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
onchange="changeLastRecords()">
</div>
<hr>
<label for="toggleFixesCheckbox">Скрыть кнопки (доб. неисправность) ?</label>
<input type="checkbox" id="toggleFixesCheckbox" onchange="toggleFixesVisibility()">
<br>
<label for="new2ButtonInput">Заявленная неисправность :</label>
<input type="text" id="new2ButtonInput" placeholder="неисправность">
<br>
<!-- Additional input for button note -->
<label for="new2ButtonNote">Произведенная работа :</label>
<input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
<br>
<button onclick="add2Button()" class="additional2buttons centered">Добавить новую кнопку</button>
<div id="setting2ButtonsContainer"> </div>
<div class="form-group">
<p class="group-options-title">option в ожидание</p>
</div>
<div class="form-group">
<label for="toggleWaitingCheckbox" class="switch has-label">
<input type="checkbox" name="toggleWaitingCheckbox" id="toggleWaitingCheckbox"
onchange="toggleWaitingVisibility()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Скрыть кнопки (в ожидание запасных частей) ?</span>
</label>
</div>
<div class="form-group">
<label for="newButtonInput">Текст В ожидание :</label>
<input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
</div>
<div class="form-group">
<button onclick="addButton()" class=" options-button">Добавить новую кнопку</button>
</div>
<div class="addedButtonsContainer" id="settingButtonsContainer"> </div>
<hr>
<label for="toggleNotificationCheckbox">Уведомлени вверх ?</label>
<input type="checkbox" id="toggleNotificationCheckbox" onchange="toggleNotificationUP()">
<br>
<label for="togglePoliteCheckbox">Polite notification ?</label>
<input type="checkbox" id="togglePoliteCheckbox" onchange="toggleNotificationPolite()">
<br>
<br>
<br>
<button class="centered" onclick="saveSettings()">Save Settings</button>
<button onclick="clearSettings()">Clear Settings</button>
<div class="form-group">
<p class="group-options-title">option неисправность</p>
</div>
<div class="form-group">
<label for="toggleFixesCheckbox" class="switch has-label">
<input type="checkbox" name="toggleFixesCheckbox" id="toggleFixesCheckbox"
onchange="toggleFixesVisibility()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Скрыть кнопки (доб. неисправность) ?</span>
</label>
</div>
<div class="form-group">
<label for="new2ButtonInput">Заявленная неисправность :</label>
<input type="text" id="new2ButtonInput" placeholder="Произведенная работа">
</div>
<div class="form-group">
<label for="new2ButtonNote">Произведенная работа :</label>
<input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
</div>
<div class="form-group">
<button onclick="add2Button()" class="options-button">Добавить новую кнопку</button>
</div>
<div class="addedButtonsContainer" id="setting2ButtonsContainer"> </div>
<hr>
<div class="form-group">
<p class="group-options-title">Notifications</p>
</div>
<div class="form-group">
<label for="toggleNotificationCheckbox" class="switch has-label">
<input type="checkbox" name="toggleNotificationCheckbox" id="toggleNotificationCheckbox"
onchange="toggleNotificationUP()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Уведомлени вверх ?</span>
</label>
</div>
<div class="form-group">
<label for="togglePoliteCheckbox" class="switch has-label">
<input type="checkbox" name="togglePoliteCheckbox" id="togglePoliteCheckbox"
onchange="toggleNotificationPolite()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Polite notification ?</span>
<!-- <span class="on">ON</span> -->
</label>
</div>
<hr>
<div class="form-group">
<p class="group-options-title">Warning</p>
</div>
<div class="form-group">
<label for="enableBlinkingCheckbox" class="switch has-label">
<input type="checkbox" name="enableBlinkingCheckbox" id="enableBlinkingCheckbox"
onchange="toggleBlinking()" />
<span class="track"><span class="thumb"></span></span>
<span class="off">Blink selected problem?</span>
<!-- <span class="on">ON</span> -->
</label>
</div>
<button class="options-button" onclick="clearSettings()">Clear Settings</button>
<button class="options-button" onclick="saveSettings()">Save Options</button>
</div>