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