initial commit
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"singleQuote": true,
|
||||||
|
"arrowParens": "avoid"
|
||||||
|
}
|
||||||
Vendored
+4
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"liveServer.settings.port": 5501,
|
||||||
|
"editor.formatOnSave": true
|
||||||
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Scanner Configuration Tool</title>
|
||||||
|
<link href="style.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Motorola Scanner Configuration Tool</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="lookup" id="config-string" >
|
||||||
|
<!-- TODO Remove this from a form and use div/span to create the layout -->
|
||||||
|
<h2>Configuration Lookup</h2>
|
||||||
|
<p class="input">Complete Configuration Code Lookup</p>
|
||||||
|
|
||||||
|
<select id="devices" name="devices">
|
||||||
|
<!-- TODO populate based on array -->
|
||||||
|
<option value='MC3190'>MC3190</option>
|
||||||
|
<option value='MC32N0'>MC32N0</option>
|
||||||
|
<option value="MC9090">MC9090</option>
|
||||||
|
<option value="MC9190">MC9190</option>
|
||||||
|
<option value="MC92N0">MC92N0</option>
|
||||||
|
</select>
|
||||||
|
-
|
||||||
|
<input type="text" placeholder="Enter Config" id="configuration-string" />
|
||||||
|
|
||||||
|
<button class="btnSubmitStr">Submit</button>
|
||||||
|
<button class="btnClear">Clear</button>
|
||||||
|
<p class="results hidden">
|
||||||
|
<!-- TODO Dynamically change text, display as a table maybe -->
|
||||||
|
Results Go Here
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<form id="code-lookup" class='hidden'>
|
||||||
|
<!-- TODO Remove this from a form and use div/span to create the layout -->
|
||||||
|
<h2>Individual Lookup</h2>
|
||||||
|
<p class="input">Specific Configuration Lookup</p>
|
||||||
|
|
||||||
|
<select id="devices" name="devices">
|
||||||
|
<!-- <option value='3190'>MC3190</option>
|
||||||
|
<option value='32n0'>MC32N0</option>
|
||||||
|
<option value="9090">MC9090</option>
|
||||||
|
<option value="9190">MC9190</option>
|
||||||
|
<option value="92n0">MC92N0</option> -->
|
||||||
|
</select>
|
||||||
|
|
||||||
|
- G0
|
||||||
|
|
||||||
|
<select id="scanner" name="scanner">
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
<select id='display' name='display'>
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
<select id='memory' name='memory'>
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
<select id='keypad' name='keypad'>
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
<select id='os' name='os'>
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
<select id='features' name='features'>
|
||||||
|
<!-- TODO (2-digits) populate based on 'devices' -->
|
||||||
|
<option value='a'>A6</option>
|
||||||
|
</select>
|
||||||
|
<select id='region' name=region'>
|
||||||
|
<!-- TODO (2-digits) populate based on 'devices' -->
|
||||||
|
<option value='a'>WR</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<button class="btnSubmit">Submit</button>
|
||||||
|
<button class="btnReset">Reset</button>
|
||||||
|
</form>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/* background-color: white; */
|
||||||
|
/* text-align: center; */
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 100vh;
|
||||||
|
color: #333;
|
||||||
|
background-image: linear-gradient(to top left, #c4d93f 0%, #00b2ed 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LAYOUT */
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
height: 35vh;
|
||||||
|
border-bottom: 7px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
width: 100rem;
|
||||||
|
height: 60rem;
|
||||||
|
background-color: rgba(255, 255, 255, 0.35);
|
||||||
|
backdrop-filter: blur(200px);
|
||||||
|
filter: blur();
|
||||||
|
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 9px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
/* margin-bottom: 20px; */
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* form {
|
||||||
|
background-color: lightgray;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 25px;
|
||||||
|
width: 450px;
|
||||||
|
border: 5px solid rgb(117, 108, 87);
|
||||||
|
border-radius: 1em;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* ELEMENTS */
|
||||||
|
|
||||||
|
/* .lookup {
|
||||||
|
background-color: lightgray;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 25px;
|
||||||
|
width: 450px;
|
||||||
|
border: 5px solid rgb(117, 108, 87);
|
||||||
|
border-radius: 1em;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
flex: 50%;
|
||||||
|
padding: 9rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.75s;
|
||||||
|
} */
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.3em 1.2em;
|
||||||
|
margin: 0 0.3em 0.3em 0;
|
||||||
|
border-radius: 2em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #4eb5f1;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #4095c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* select {
|
||||||
|
width: 30%;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: cadetblue;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.results {
|
||||||
|
color: cornflowerblue;
|
||||||
|
margin-top: 10px;
|
||||||
|
/* padding-top: 10px; */
|
||||||
|
background-color: cornsilk;
|
||||||
|
/* font-family: 'Courier New', Courier, monospace; */
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#config-string {
|
||||||
|
}
|
||||||
|
|
||||||
|
#code-lookup {
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@@ -0,0 +1,358 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
background-image: linear-gradient(to top left, #c1d830 0%, #0ebbfe 100%);
|
||||||
|
/* background: #0f2137; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LAYOUT */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
font-family: 'Source Code Pro', monospace;
|
||||||
|
font-size: 15px;
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
/* Responsive Mobile Layout */
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
|
/* grid-template-rows: 0.4fr 1.2fr 2.2fr 1.2fr 1.2fr 1fr; */
|
||||||
|
grid-template-areas:
|
||||||
|
'header'
|
||||||
|
'sidebar'
|
||||||
|
'app'
|
||||||
|
/* 'left-ad' */
|
||||||
|
'right-ad'
|
||||||
|
'right-ad2'
|
||||||
|
'footer';
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container div {
|
||||||
|
padding: 10px;
|
||||||
|
/* border: 1px solid #000000; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ELEMENTS */
|
||||||
|
|
||||||
|
.ad {
|
||||||
|
/* border: 1px solid #000000; */
|
||||||
|
padding: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-left {
|
||||||
|
/* grid-row-start: 2; */
|
||||||
|
/* grid-row-end: span 2; */
|
||||||
|
align-self: center;
|
||||||
|
grid-area: left-ad;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-right {
|
||||||
|
/* grid-column-start: 4;
|
||||||
|
grid-row-start: 2; */
|
||||||
|
grid-area: right-ad;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-right2 {
|
||||||
|
grid-area: right-ad2;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appcontainer {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 0.5fr 50px 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
display: inline-grid;
|
||||||
|
position: relative;
|
||||||
|
background-color: #696b7267;
|
||||||
|
backdrop-filter: blur(200px);
|
||||||
|
filter: blur();
|
||||||
|
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 9px;
|
||||||
|
overflow: hidden;
|
||||||
|
grid-area: app;
|
||||||
|
grid-template-areas:
|
||||||
|
'main'
|
||||||
|
'photo'
|
||||||
|
'ddselect'
|
||||||
|
'results';
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.3em 1.2em;
|
||||||
|
margin: 0 0.3em 0.3em 0;
|
||||||
|
border-radius: 2em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #0ebbfe;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.2s ease-in;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #c1d830;
|
||||||
|
}
|
||||||
|
|
||||||
|
#device-image {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
border: 2px solid #0ebbfe;
|
||||||
|
border-radius: 3em;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
/* width: 250px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-select {
|
||||||
|
/* display: inline; */
|
||||||
|
align-self: center;
|
||||||
|
justify-self: center;
|
||||||
|
grid-area: ddselect;
|
||||||
|
/* border: 1px solid black; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.devices {
|
||||||
|
grid-area: device-select;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
/* grid-row-start: 4;
|
||||||
|
grid-column-start: 2;
|
||||||
|
grid-column-end: span 2; */
|
||||||
|
font-size: 15px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
align-self: center;
|
||||||
|
justify-self: center;
|
||||||
|
grid-area: footer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
float: right;
|
||||||
|
/* border: 1px solid #000000; */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
/* background: -webkit-linear-gradient(left, #0ebbfe, #c1d830);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent; */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
/* margin-bottom: 20px; */
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
/* grid-column: 1 / 6; */
|
||||||
|
align-self: center;
|
||||||
|
grid-area: header;
|
||||||
|
/* border: 1px solid #000000; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
/* float: left; */
|
||||||
|
height: 25px;
|
||||||
|
/* margin-left: 10px; */
|
||||||
|
/* margin-top: 30px; */
|
||||||
|
overflow: hidden;
|
||||||
|
content: url('images/logo.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
/* grid-column-end: span 2;
|
||||||
|
grid-row-end: span 2; */
|
||||||
|
display: flex;
|
||||||
|
/* align-items: center; */
|
||||||
|
justify-content: center;
|
||||||
|
grid-area: main;
|
||||||
|
/* border: 1px solid #000000; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-gradient {
|
||||||
|
background-color: #0ebbfe;
|
||||||
|
background-image: linear-gradient(to right, #0ebbfe, #c1d830);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo {
|
||||||
|
display: flex;
|
||||||
|
float: right;
|
||||||
|
width: 300px;
|
||||||
|
overflow: hidden;
|
||||||
|
grid-area: photo;
|
||||||
|
/* content: url('images/blank.jpg'); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.results {
|
||||||
|
color: cornflowerblue;
|
||||||
|
margin-top: 10px;
|
||||||
|
/* padding-top: 10px; */
|
||||||
|
background-color: rgba(255, 248, 220, 0.2);
|
||||||
|
/* font-family: 'Courier New', Courier, monospace; */
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
border-radius: 9px;
|
||||||
|
grid-area: results;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* select {
|
||||||
|
width: 30%;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: cadetblue;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
/* grid-column-start: 5;
|
||||||
|
grid-row-start: 2;
|
||||||
|
grid-row-end: span 3; */
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(255, 255, 255, 0.151);
|
||||||
|
backdrop-filter: blur(200px);
|
||||||
|
filter: blur();
|
||||||
|
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 9px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
grid-area: sidebar;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table,
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.tbl-param {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.tbl-result {
|
||||||
|
padding-right: 10px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.tbl-code {
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.tbl-code,
|
||||||
|
tr.tbl-code {
|
||||||
|
width: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.tbl-param {
|
||||||
|
width: 23%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.tbl-result {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: white;
|
||||||
|
background-color: #696b72;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(odd) {
|
||||||
|
background-color: rgba(211, 211, 211, 0.353);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background-color: #696b7248;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MOBILE RESPONSIVE - DESKTOP VIEW */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
font-size: 20px;
|
||||||
|
/* grid-template-columns: repeat(5, 1fr); */
|
||||||
|
/* grid-template-columns: 250px 1fr 1fr 300px 300px; */
|
||||||
|
grid-template-columns: 0.5fr 1.5fr 1.5fr 0.5fr 0.7fr;
|
||||||
|
grid-template-rows: 50px 1fr 1fr 25px;
|
||||||
|
grid-template-areas:
|
||||||
|
'header header header header header'
|
||||||
|
'left-ad app app right-ad sidebar'
|
||||||
|
'left-ad app app right-ad2 sidebar'
|
||||||
|
'left-ad footer footer right-ad2 sidebar';
|
||||||
|
}
|
||||||
|
|
||||||
|
.appcontainer {
|
||||||
|
grid-template-columns: 1fr 0.25fr;
|
||||||
|
grid-template-rows: 0.5fr 50px 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
background-color: #696b7267;
|
||||||
|
backdrop-filter: blur(200px);
|
||||||
|
filter: blur();
|
||||||
|
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 9px;
|
||||||
|
overflow: hidden;
|
||||||
|
grid-area: app;
|
||||||
|
grid-template-areas:
|
||||||
|
'main photo'
|
||||||
|
'ddselect photo'
|
||||||
|
'results results';
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-left {
|
||||||
|
display: inline;
|
||||||
|
/* align-self: center; */
|
||||||
|
/* justify-self: center; */
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 952 KiB |
+242
@@ -0,0 +1,242 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Scanner Configuration Lookup</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link href="grid.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header main-gradient">
|
||||||
|
<h1>Scanner Configuration Lookup Tool</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ad ad-left">
|
||||||
|
<script
|
||||||
|
async
|
||||||
|
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
|
||||||
|
></script>
|
||||||
|
<!-- Skyscraper -->
|
||||||
|
<ins
|
||||||
|
class="adsbygoogle"
|
||||||
|
style="display: block"
|
||||||
|
data-ad-client="ca-pub-7048069561558533"
|
||||||
|
data-ad-slot="4695347982"
|
||||||
|
data-ad-format="auto"
|
||||||
|
data-full-width-responsive="true"
|
||||||
|
></ins>
|
||||||
|
<script>
|
||||||
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="appcontainer">
|
||||||
|
<div class="device-select">
|
||||||
|
<select class="devices" name="devices">
|
||||||
|
<!-- NOTE Populated from our list (object) -->
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<span>-</span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter Config"
|
||||||
|
id="configuration-string"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button class="btnSubmitStr main-gradient">Submit</button>
|
||||||
|
<button class="btnClear">Clear</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="lookup" id="by-string">
|
||||||
|
<h2>Configuration Lookup</h2>
|
||||||
|
<p class="input">Complete Configuration Code Lookup</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lookup hidden" id="by-code">
|
||||||
|
<!-- <h2>Individual Lookup</h2> -->
|
||||||
|
<p class="input">Specific Configuration Lookup</p>
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
<select id='formfactor' name='formfactor>
|
||||||
|
<option value='G'>G</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id='network' name='network'>
|
||||||
|
<option value='0'>0</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id="scanner" name="scanner">
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id='display' name='display'>
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id='memory' name='memory'>
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id='keypad' name='keypad'>
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id='os' name='os'>
|
||||||
|
<!-- TODO populate based on 'devices' -->
|
||||||
|
<option value='a'>a</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id='features' name='features'>
|
||||||
|
<!-- TODO (2-digits) populate based on 'devices' -->
|
||||||
|
<option value='a'>A6</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id='region' name=region'>
|
||||||
|
<!-- TODO (2-digits) populate based on 'devices' -->
|
||||||
|
<option value='a'>WR</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class="btnSubmit">Submit</button>
|
||||||
|
<button class="btnReset">Reset</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="photo">
|
||||||
|
<img src='images/mc9090.png' id='device-image' alt='Image of MC9090 Scanner'>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="results hidden" style="overflow-x:auto;">
|
||||||
|
<!-- TODO Dynamically change text, display as a table maybe -->
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th class='tbl-param'>Parameter</th>
|
||||||
|
<th class='tbl-code'>Code</th>
|
||||||
|
<th class='tbl-result'>Result</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class='tbl-param'>Scan Engine</td>
|
||||||
|
<td class='tbl-code'>J</td>
|
||||||
|
<td class='tbl-result'>SE 1524ER Lorax</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ad ad-right">
|
||||||
|
<script
|
||||||
|
async
|
||||||
|
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
|
||||||
|
></script>
|
||||||
|
<!-- Horizontal Responsive -->
|
||||||
|
<ins
|
||||||
|
class="adsbygoogle"
|
||||||
|
style="display: block"
|
||||||
|
data-ad-client="ca-pub-7048069561558533"
|
||||||
|
data-ad-slot="2141017815"
|
||||||
|
data-ad-format="auto"
|
||||||
|
data-full-width-responsive="true"
|
||||||
|
></ins>
|
||||||
|
<script>
|
||||||
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="ad ad-left">Left Ad 2</div> -->
|
||||||
|
|
||||||
|
<div class="ad ad-right2">
|
||||||
|
<script
|
||||||
|
async
|
||||||
|
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
|
||||||
|
></script>
|
||||||
|
<!-- Horizontal Responsive -->
|
||||||
|
<ins
|
||||||
|
class="adsbygoogle"
|
||||||
|
style="display: block"
|
||||||
|
data-ad-client="ca-pub-7048069561558533"
|
||||||
|
data-ad-slot="2141017815"
|
||||||
|
data-ad-format="auto"
|
||||||
|
data-full-width-responsive="true"
|
||||||
|
></ins>
|
||||||
|
<script>
|
||||||
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar">
|
||||||
|
<!-- I don't know what to put here.. maybe a history of lookups (localStorage)? -->
|
||||||
|
Sidebar
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
Copyright ©2021,
|
||||||
|
<a href="https://charlesdanesi.net/" target="_blank"
|
||||||
|
><img src='images/logo.png' class="logo"
|
||||||
|
/></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,244 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// TODO is there a better way?
|
||||||
|
const symbolScanner = {
|
||||||
|
// Our list of Moto scanners that we can look up
|
||||||
|
manufacturer: 'Symbol / Motorola',
|
||||||
|
models: [
|
||||||
|
// 'MC3190',
|
||||||
|
// 'MC32N0',
|
||||||
|
'MC9000',
|
||||||
|
'MC9060',
|
||||||
|
'MC9090',
|
||||||
|
// 'MC9190',
|
||||||
|
// 'MC92N0',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const psionScanner = {
|
||||||
|
// TODO Implement Psion WAP configurations
|
||||||
|
manufacturer: 'Psion Techlogix',
|
||||||
|
models: ['WAP4'],
|
||||||
|
};
|
||||||
|
|
||||||
|
const mc9000 = {
|
||||||
|
// This should handle 9000/9060/9090 series
|
||||||
|
config: 'MC',
|
||||||
|
productFamily: '90',
|
||||||
|
radio: ['0', '6', '9'],
|
||||||
|
wan: ['0', '2', '3', '4', '7'],
|
||||||
|
formFactor: ['G', 'K', 'S'],
|
||||||
|
scanEngine: ['F', 'H', 'J', 'K', 'U', 'W'],
|
||||||
|
carrier: ['0', 'A', 'B', 'E', 'F'],
|
||||||
|
display: ['H', 'J'],
|
||||||
|
memory: ['A', 'B', 'C', 'J', '9'],
|
||||||
|
keyboard: ['A', 'E', 'F', 'G', 'H', 'J', 'L'],
|
||||||
|
operatingSystem: ['B', 'E', 'F', 'G', 'H', 'Q'],
|
||||||
|
features: ['00', 'A2', 'A4', 'A6', 'A7', 'B5', 'B6', 'C2', 'C6'],
|
||||||
|
region: ['00', '50', 'US', 'FB', 'WW', 'WR'],
|
||||||
|
// NOTE These won't work for multiple devices...
|
||||||
|
productPage: 'http://insert.the.url',
|
||||||
|
productManual: 'manual.pdf',
|
||||||
|
// Maybe we can use a multi-dimensional array..
|
||||||
|
productInfo: [
|
||||||
|
['MC9000', 'http://url', 'manual.pdf'],
|
||||||
|
['MC9060', 'http://url', 'manual.pdf'],
|
||||||
|
['MC9090', 'http://url', 'manual.pdf'],
|
||||||
|
],
|
||||||
|
|
||||||
|
// TODO Parse function in each object?
|
||||||
|
|
||||||
|
// TODO Reference each config variable to a description
|
||||||
|
|
||||||
|
// TODO Error Checking (make sure an entered value exists in our table above)
|
||||||
|
};
|
||||||
|
|
||||||
|
// SELECTORS
|
||||||
|
const devices = document.querySelector('.devices');
|
||||||
|
const btnSubmit = document.querySelector('.btnSubmit');
|
||||||
|
const btnSubmitStr = document.querySelector('.btnSubmitStr');
|
||||||
|
const btnReset = document.querySelector('.btnReset');
|
||||||
|
const btnClear = document.querySelector('.btnClear');
|
||||||
|
const strConfig = document.getElementById('configuration-string');
|
||||||
|
const results = document.querySelector('.results');
|
||||||
|
|
||||||
|
// Initialize defaults
|
||||||
|
const init = function () {
|
||||||
|
// TODO Load last selected device and input fields from localStorage in case of browser crash...
|
||||||
|
let bSelected = false;
|
||||||
|
let arr = symbolScanner.models.sort();
|
||||||
|
|
||||||
|
for (let i = 0; i < symbolScanner.models.length; i++) {
|
||||||
|
let opt = arr[i];
|
||||||
|
var el = document.createElement('option');
|
||||||
|
el.textContent = opt; // The text that shows up in the dropdown
|
||||||
|
el.value = opt; // We can set the value here, if we want to change it...
|
||||||
|
|
||||||
|
if (opt === 'MC9090') el.setAttribute('selected', bSelected); // Set the default option to 9090
|
||||||
|
|
||||||
|
devices.appendChild(el);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onload = init; // Initialize on page load...
|
||||||
|
|
||||||
|
// FIXME Here's the heart of the application. We'll parse the given string, check for errors, and use this to lookup specific values. Multiple returns aren't great here
|
||||||
|
const parseConfiguration = function (model, config) {
|
||||||
|
const [c1, c2, fam1, fam2, radio, wan] = model.split('');
|
||||||
|
const [
|
||||||
|
formFactor,
|
||||||
|
scanEngine,
|
||||||
|
carrier,
|
||||||
|
display,
|
||||||
|
memory,
|
||||||
|
keyboard,
|
||||||
|
operatingSystem,
|
||||||
|
f1,
|
||||||
|
f2,
|
||||||
|
r1,
|
||||||
|
r2,
|
||||||
|
] = config.toUpperCase().split(''); // Make sure everything is uppercase
|
||||||
|
|
||||||
|
// Combine multi-digit values
|
||||||
|
const config_ = c1 + c2;
|
||||||
|
const family = fam1 + fam2;
|
||||||
|
const features = f1 + f2;
|
||||||
|
const region = r1 + r2;
|
||||||
|
|
||||||
|
// Debugging text, so I can view the config string
|
||||||
|
console.log(`${model}-${config.toUpperCase()}`);
|
||||||
|
console.log(
|
||||||
|
config_,
|
||||||
|
family,
|
||||||
|
radio,
|
||||||
|
wan,
|
||||||
|
scanEngine,
|
||||||
|
display,
|
||||||
|
memory,
|
||||||
|
keyboard,
|
||||||
|
operatingSystem,
|
||||||
|
features,
|
||||||
|
region
|
||||||
|
);
|
||||||
|
|
||||||
|
return [
|
||||||
|
config_,
|
||||||
|
family,
|
||||||
|
radio,
|
||||||
|
wan,
|
||||||
|
formFactor,
|
||||||
|
scanEngine,
|
||||||
|
carrier,
|
||||||
|
display,
|
||||||
|
memory,
|
||||||
|
keyboard,
|
||||||
|
operatingSystem,
|
||||||
|
features,
|
||||||
|
region,
|
||||||
|
];
|
||||||
|
};
|
||||||
|
// parseConfiguration('MC9090', 'GJ0HJHGA6WR'); // IT WORKS!
|
||||||
|
|
||||||
|
btnSubmit.addEventListener('click', function () {
|
||||||
|
// Submit button
|
||||||
|
console.log('Submit button');
|
||||||
|
});
|
||||||
|
|
||||||
|
btnSubmitStr.addEventListener('click', function () {
|
||||||
|
// Submit button (config string)
|
||||||
|
// NOTE This was for testing the parser. Might move to individual functions inside the scanner objects
|
||||||
|
|
||||||
|
// Check to make sure our string is the correct length
|
||||||
|
// TODO Each device will have a different check
|
||||||
|
if (strConfig.value.length !== 11) {
|
||||||
|
alert('Please enter a valid configuration string!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = parseConfiguration(devices.value, strConfig.value);
|
||||||
|
console.log(result);
|
||||||
|
|
||||||
|
if (
|
||||||
|
devices.value === 'MC9000' ||
|
||||||
|
devices.value === 'MC9060' ||
|
||||||
|
devices.value === 'MC9090'
|
||||||
|
) {
|
||||||
|
// use mc9000 object
|
||||||
|
console.log('Is an MC9000 Series device');
|
||||||
|
for (let i = 0; i < result.length; i++) {
|
||||||
|
// for (let j = 0; j < mc9000.display.length; j++) {
|
||||||
|
// if (result[7] === mc9000.display[j]) {
|
||||||
|
// // FIXME It's finding the result, but it's finding it with EACH iteration of the result loop
|
||||||
|
// console.log(i, j, 'Found it!');
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
if (mc9000.display.includes(result[i]))
|
||||||
|
console.log('Found', mc9000.display, result[i], i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
results.classList.remove('hidden'); // show the results table
|
||||||
|
});
|
||||||
|
|
||||||
|
btnReset.addEventListener('click', function () {
|
||||||
|
// Reset select boxes
|
||||||
|
console.log('Reset Button');
|
||||||
|
});
|
||||||
|
|
||||||
|
btnClear.addEventListener('click', function () {
|
||||||
|
// Clear input string
|
||||||
|
console.log('Clear button');
|
||||||
|
strConfig.value = ''; // Clear the input field
|
||||||
|
results.classList.add('hidden'); // Hide the results table
|
||||||
|
});
|
||||||
|
|
||||||
|
devices.addEventListener('change', function () {
|
||||||
|
// Check image exists or display default image
|
||||||
|
fetch(`images/${devices.value}.png`, { method: 'HEAD' })
|
||||||
|
.then(res => {
|
||||||
|
if (res.ok) {
|
||||||
|
document.getElementById(
|
||||||
|
'device-image'
|
||||||
|
).src = `images/${devices.value}.png`;
|
||||||
|
document.getElementById(
|
||||||
|
'device-image'
|
||||||
|
).alt = `Image of ${devices.value} scanner`;
|
||||||
|
} else {
|
||||||
|
document.getElementById('device-image').src = 'images/blank.png';
|
||||||
|
document.getElementById('device-image').alt = 'No Image';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(err => console.error('Error:', err));
|
||||||
|
|
||||||
|
// TODO also populate the individual selectors :D
|
||||||
|
|
||||||
|
// TODO Insert links to product page and user manual
|
||||||
|
});
|
||||||
|
|
||||||
|
// Testing
|
||||||
|
// function generateTableHead(table, data) {
|
||||||
|
// let thead = table.createTHead();
|
||||||
|
// let row = thead.insertRow();
|
||||||
|
|
||||||
|
// for (let key of data) {
|
||||||
|
// let th = document.createElement('th');
|
||||||
|
// let text = document.createTextNode(key);
|
||||||
|
// th.appendChild(text);
|
||||||
|
// row.appendChild(th);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function generateTable(table, data) {
|
||||||
|
// for (let element of data) {
|
||||||
|
// let row = table.insertRow();
|
||||||
|
// for (key in element) {
|
||||||
|
// let cell = row.insertCell();
|
||||||
|
// let text = document.createTextNode(element[key]);
|
||||||
|
// cell.appendChild(text);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let table = document.querySelector('table');
|
||||||
|
// generateTableHead(table, ['Parameter', 'Code', 'Result']);
|
||||||
|
// generateTable(table, ['Scan Engine', 'J', 'Lorax Scan Engine']);
|
||||||
Reference in New Issue
Block a user