I am trying to create a small web app that is for offline use and this is my very first real project and first question on here. I've tried searching this site (stack overflow) which has gotten me through a few hurdles to where I am now, which is almost complete.
*Keep in mind - this is being used locally and not connected to the internet, and I am looking to solve with no web dependencies. Using only html and javascript and maybe a little CSS to make it pretty after.
Big Picture Goal: The user will click on an index.html file on the desktop (MACs only) then answer some questions in the form of checkboxes regarding the physical condition of used Mac computers for sale.
This would update a QR Code with the checked items and copy the values of the checkboxes into a text string in this exact format and order - Case A;LCD B; LCD Bruising; LCD Scratched;etc..
Then the user would hit the "print a QR!" button and this would prompt the print dialog. The QR Code with the checked checkbox values & the Text String (Case A;LCD B; LCD Bruising; LCD Scratched; etc.) would get printed onto a DYMO label.
This DYMO label that has the QR code of the conditions and a text field of the values in a string will be placed on the computer as an asset tag of sorts as it makes its way through their audit process.
I am also interested in using fieldset for the form since its so long. Would be nice to break it up.
Thats the complete goal. Now for some problems.
-
QR code prints and a the formtext will print but does not have the text string values of checkboxes in it.
-
Is it possible to have the print button submit checkbox values, update the QR code, and print the label all at the same time? Currently you have to click in the formtext field and hit enter to update the QR Code image then click Print a QR!
-
In printing am I able to send the print settings or does that have to be adjusted in the print dialog box on the computer each time?
Sorry for so many words. Here is a link to the form on my GitHub (it has the QR Code library dependent files) Link To Form. And here is the Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="https://modalityconsulting.github.io/Moat-VMI/qrcode.js"></script>
<title>boat | ocular patdown</title>
<style>
#header {
text-align: center;
}
body {
width: 800px;
font-family: helvetica;
font-size: 12px;
}
h1 {
color: #5189ba;
}
label {
display: block;
padding-left: 10px;
text-indent: -5px;
}
input {
color: #fffff;
font: 14px Arial, Helvetica, sans-serif;
word-break: break-word;
text-align-last: left;
}
</style>
</Head>
<html>
<body>
<h1 id="header">boat | visual mechanical inspection</h1>
<form>
<div id="grade">
<div id="casegrade">
<h3>Overall Case Grade</h3>
<label><input type="checkbox" id="casegradeA" onclick="updatebox()"/>Case Grade: A</label>
<label><input type="checkbox" id="casegradeB" onclick="updatebox()"/>Case Grade: B</label>
<label><input type="checkbox" id="casegradeC" onclick="updatebox()"/>Case Grade: C</label>
</div>
<div>
<h3>Overall LCD Grade</h3>
<label><input type="checkbox" id="lcdgradeA" onclick="updatebox()"/>LCD Grade: A</label>
<label><input type="checkbox" id="lcdgradeB" onclick="updatebox()"/>LCD Grade: B</label>
<label><input type="checkbox" id="lcdgradeC" onclick="updatebox()"/>LCD Grade: C</label>
</div><br/>
<div>
<div>
<h1>Display Issues</h1>
<h3>LCD</h3>
<label><input type="checkbox" id="lcdbruising" onclick="updatebox()"/>LCD Bruising</label>
<label><input type="checkbox" id="lcdscratched" onclick="updatebox()"/>LCD Scratched</label>
<label><input type="checkbox" id="lcdcracked" onclick="updatebox()"/>LCD Cracked</label>
<label><input type="checkbox" id="lcdspecks" onclick="updatebox()"/>LCD Specks</label>
<label><input type="checkbox" id="linesinlcd" onclick="updatebox()"/>Lines in LCD</label>
<label><input type="checkbox" id="keyboardimprints" onclick="updatebox()"/>Keyboard Imprints</label>
<label><input type="checkbox" id="logobruise" onclick="updatebox()"/>Logo Bruise</label><br/>
<h3>Glass Issues</h3>
<label><input type="checkbox" id="chippedglass" onclick="updatebox()"/>Chipped Glass</label>
<label><input type="checkbox" id="crackedglass" onclick="updatebox()"/>Cracked Glass</label>
<label><input type="checkbox" id="scratchedglass" onclick="updatebox()"/>Scratched Glass</label><br/>
<h3>Backlight Issues</h3>
<label><input type="checkbox" id="spotlighting" onclick="updatebox()"/>Spotlighting</label>
<label><input type="checkbox" id="backlightedgebleed" onclick="updatebox()"/>Backlight Edge Bleeding</label>
<label><input type="checkbox" id="flickeringbacklight" onclick="updatebox()"/>Flickering Backlight</label>
<label><input type="checkbox" id="unevenbacklight" onclick="updatebox()"/>Uneven Backlight</label>
<label><input type="checkbox" id="dimbacklight" onclick="updatebox()"/>Dim Backlight</label>
<label><input type="checkbox" id="colordistortion" onclick="updatebox()"/>Color Distortion (not seen on external display)</label>
</div>
</div><br/>
<div>
<h1>Physical/Mechanical Issues</h1>
<h2>Case</h2>
<label><input type="checkbox" id="crackedcase" onclick="updatebox()"/>Cracked Case</label>
<label><input type="checkbox" id="dentedcase" onclick="updatebox()"/>Dented Case</label>
<label><input type="checkbox" id="bentcase" onclick="updatebox()"/>Bent case</label>
<label><input type="checkbox" id="hingecracks" onclick="updatebox()"/>Hinge Cracks</label>
<label><input type="checkbox" id="loosehinges" onclick="updatebox()"/>Loose Hinges</label>
<label><input type="checkbox" id="deepscratch" onclick="updatebox()"/>Deep Scratch</label>
<label><input type="checkbox" id="bentimacstand" onclick="updatebox()"/>Bent iMac Stand</label>
<label><input type="checkbox" id="weakimachinge" onclick="updatebox()"/>Weak iMac Stand Hinge</label>
<label><input type="checkbox" id="damagedclutchcover" onclick="updatebox()"/>Damaged Clutch Cover</label><br/>
<h1>Input Device Issues</h1>
<h2>Trackpad Issues</h2>
<label><input type="checkbox" id="crackedtrackpad" onclick="updatebox()"/>Cracked Trackpad</label>
<label><input type="checkbox" id="weaknoforcetouchclick" onclick="updatebox()"/>Weak/No Force-Touch Click</label>
<label><input type="checkbox" id="stucktrackpad" onclick="updatebox()"/>Stuck Trackpad</label>
<label><input type="checkbox" id="loosetrackpad" onclick="updatebox()"/>Loose Trackpad</label>
<label><input type="checkbox" id="erratictrackpad" onclick="updatebox()"/>Erratic Trackpad</label><br/>
<h2>Keyboard Issues</h2>
<label><input type="checkbox" id="missingkeycupnipple" onclick="updatebox()"/>Missing Key Cup/Nipple</label>
<label><input type="checkbox" id="wornshinykeys" onclick="updatebox()"/>Worn/Shiny Keys</label>
<label><input type="checkbox" id="nonfunctionalkeys" onclick="updatebox()"/>Non-functional keys</label>
<label><input type="checkbox" id="stickykeys" onclick="updatebox()"/>Sticky Keys</label>
<label><input type="checkbox" id="damagedkeycap" onclick="updatebox()"/>Damaged Keycap</label>
<h1>Other Hardware Issues</h1>
<label><input type="checkbox" id="noharddrive" onclick="updatebox()"/>No Hard Drive</label>
<label><input type="checkbox" id="badramslot" onclick="updatebox()"/>Bad RAM Slot</label>
<label><input type="checkbox" id="debrisinports" onclick="updatebox()"/>Debris in ports</label>
<label><input type="checkbox" id="damagedports" onclick="updatebox()"/>Damaged Ports</label>
<label><input type="checkbox" id="noisight" onclick="updatebox()"/>No iSight</label>
</div><br/>
</div>
</form>
<Section id="printableArea">
<results><input type="text" id="formtext" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit." style="width:400px; height:300px;"></results><br/>
</body>
<!-- form output is in the form of text and has the id of "formtext" -->
<script>
var casea = document.getElementById('casegradeA');
var caseb = document.getElementById('casegradeB');
var casec = document.getElementById('casegradeC');
var lcda = document.getElementById('lcdgradeA');
var lcdb = document.getElementById('lcdgradeB');
var lcdc = document.getElementById('lcdgradeC');
var one = document.getElementById('lcdbruising');
var two = document.getElementById('lcdscratched');
var three = document.getElementById('lcdcracked');
var four = document.getElementById('linesinlcd');
var five = document.getElementById('keyboardimprints');
var six = document.getElementById('logobruise');
var seven = document.getElementById('scratchedglass');
var eight = document.getElementById('chippedglass');
var nine = document.getElementById('crackedglass');
var ten = document.getElementById('lcdspecks');
var eleven = document.getElementById('spotlighting');
var twelve = document.getElementById('backlightedgebleed');
var thirteen = document.getElementById('flickeringbacklight');
var fourteen = document.getElementById('unevenbacklight');
var fifteen = document.getElementById('dimbacklight');
var sixteen = document.getElementById('colordistortion');
var seventeen = document.getElementById('crackedcase');
var eighteen = document.getElementById('dentedcase');
var ninteen = document.getElementById('hingecracks');
var twenty = document.getElementById('loosehinges');
var twentyone = document.getElementById('deepscratch');
var twentytwo = document.getElementById('bentimacstand');
var twentythree = document.getElementById('damagedclutchcover');
var twentyfour = document.getElementById('weakimachinge');
var twentyfive = document.getElementById('crackedtrackpad');
var twentysix = document.getElementById('weaknoforcetouchclick');
var twentyseven = document.getElementById('stucktrackpad');
var twentyeight = document.getElementById('loosetrackpad');
var twentynine = document.getElementById('erratictrackpad');
var thirty = document.getElementById('missingkeycupnipple');
var thirtyone = document.getElementById('wornshinykeys');
var thirtytwo = document.getElementById('nonfunctionalkeys');
var thirtythree = document.getElementById('stickykeys');
var thirtyfour = document.getElementById('noharddrive');
var thirtyfive = document.getElementById('badramslot');
var thirtysix = document.getElementById('damagedkeycap');
var thirtyseven = document.getElementById('debrisinports');
var thirtyeight = document.getElementById('damagedports');
var thirtynine = document.getElementById('bentcase');
var forty = document.getElementById('noisight');
var qrtextbox = document.getElementById('formtext');
// <-- var qrtextbox document_get element byID above is linked to the codeblock above which is the form -->
function updatebox() {
var qrcode = "";
if (casegradeA.checked)
qrcode += "Case A; ";
if (casegradeB.checked)
qrcode += "Case B; ";
if (casegradeC.checked)
qrcode += "Case C; ";
if (lcdgradeA.checked)
qrcode += "LCD A; ";
if (lcdgradeB.checked)
qrcode += "LCD B; ";
if (lcdgradeC.checked)
qrcode += "LCD C; ";
if (lcdbruising.checked)
qrcode += "LCD Bruising; ";
if (lcdscratched.checked)
qrcode += "LCD Scratched; ";
if (lcdcracked.checked)
qrcode += "LCD Cracked; ";
if (linesinlcd.checked)
qrcode += "Lines in LCD; ";
if (keyboardimprints.checked)
qrcode += "Keyboard Imprints; ";
if (logobruise.checked)
qrcode += "Logo Bruise; ";
if (scratchedglass.checked)
qrcode += "Scratched Glass; ";
if (chippedglass.checked)
qrcode += "Chipped Glass; ";
if (crackedglass.checked)
qrcode += "Cracked Glass; ";
if (lcdspecks.checked)
qrcode += "LCD Specks; ";
if (spotlighting.checked)
qrcode += "Spotlighting; ";
if (backlightedgebleed.checked)
qrcode += "Backlight Edge Bleeding; ";
if (flickeringbacklight.checked)
qrcode += "Flickering Backlight; ";
if (unevenbacklight.checked)
qrcode += "Uneven Backlight; ";
if (dimbacklight.checked)
qrcode += "Dim Backlight; ";
if (colordistortion.checked)
qrcode += "Color Distortion (not seen on external display); ";
if (crackedcase.checked)
qrcode += "Cracked Case; ";
if (dentedcase.checked)
qrcode += "Dented Case; ";
if (hingecracks.checked)
qrcode += "Hinge Cracks; ";
if (loosehinges.checked)
qrcode += "Loose Hinges; ";
if (deepscratch.checked)
qrcode += "Deep Scratch; ";
if (bentimacstand.checked)
qrcode += "Bent iMac Stand; ";
if (damagedclutchcover.checked)
qrcode += "Damaged Clutch Cover; ";
if (weakimachinge.checked)
qrcode += "Weak iMac Stand Hinge; ";
if (crackedtrackpad.checked)
qrcode += "Cracked Trackpad; ";
if (weaknoforcetouchclick.checked)
qrcode += "Weak/No Force-Touch Click; ";
if (stucktrackpad.checked)
qrcode += "Stuck Trackpad; ";
if (loosetrackpad.checked)
qrcode += "Loose Trackpad; ";
if (erratictrackpad.checked)
qrcode += "Erratic Trackpad; ";
if (missingkeycupnipple.checked)
qrcode += "Missing Key Cup/Nipple; ";
if (wornshinykeys.checked)
qrcode += "Worn/Shiny Keys; ";
if (nonfunctionalkeys.checked)
qrcode += "Non-functional keys; ";
if (stickykeys.checked)
qrcode += "Sticky Keys; ";
if (noharddrive.checked)
qrcode += "No Hard Drive; ";
if (badramslot.checked)
qrcode += "Bad RAM Slot; ";
if (damagedkeycap.checked)
qrcode += "Damaged Keycap; ";
if (debrisinports.checked)
qrcode += "Debris in ports; ";
if (damagedports.checked)
qrcode += "Damaged Ports; ";
if (bentcase.checked)
qrcode += "Bent case; ";
if (noisight.checked)
qrcode += "No iSight; ";
qrtextbox.value = qrcode;
}
</script>
<!-- qrtextbox.value above is linked to the codeblock above it (var)-->
<div id="qrcode" style="width:300px; height:300px; margin-top:15px; float:left;"></div>
</section>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 250,
height: 250,
});
function makeCode() {
var elText = document.getElementById("formtext");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#formtext").
on("blur", function() {
makeCode();
}).
on("keydown", function(e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
<!-- Printing Button Below -->
<div id="printableArea"></div>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<br><br><br><br><br><br><input type="button" id="printbtn" onclick="printDiv('printableArea')" value="Print A QR!" />
Aucun commentaire:
Enregistrer un commentaire