GS1DigitalLinkToolkit.js/index.html at master · gs1/GS1DigitalLinkToolkit.js

Cannot retrieve contributors at this time

143 lines (138 sloc) 6.23 KB

	<html>
	<head>
	<title>Demo page for https://github.com/gs1/GS1DigitalLinkToolkit.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script src="js/GS1DigitalLinkToolkit.js"></script>
	<style type="text/css">
	body { background-color: #FFFFFF; font-size: 1en; font-family: Arial, Helvetica, Geneva, sans-serif; }
	h1 { text-align: center; }
	table { width: 100%; }
	td.label { width: 14em; }
	td.demobutton { width: 4em; }
	tr.elementString { background-color: #CCCCFF;}
	tr.options { background-color: #EEEEEE;}
	tr.digitalLink { background-color: #FFD9CC;}
	tr.spacer {background-color: #FFFFFF; height: 1en;}
	tr.errorMessage { background-color: #FF0000; color: #FFFFFF;}
	input.elementString { background-color: #CCCCFF; font-size: 1em;}
	input.digitalLink { background-color: #FFD9CC; font-size: 1em;}
	textarea.errorMessage { background-color: #FFEEEE; font-size: 1em; height: 3em; width: 100%;}
	select.elementString { background-color: #CCCCFF; font-size: 1em}
	select.digitalLink { background-color: #FFD9CC; font-size: 1em}
	input {width: 100%;}
	div.showHide {background-color: #EEEEEE; font-size: 1em; width: 25em; height: 1em; text-align: center; border-radius: 0.8em; padding-top: 0.3em; padding-bottom: 0.3em;}
	</style>
	</head>
	<body>
	<h1>Simple demo page for GS1DigitalLinkToolkit.js</h1>
	<p>This simple demo page can be further developed to add further features.
	<br>It uses <a href="https://github.com/gs1/GS1DigitalLinkToolkit.js" target="_blank">GS1DigitalLinkToolkit.js</a> to translate between GS1 element strings and GS1 Digital Link URI syntax.
	<br>It uses <a href="https://vuejs.org/" target="_blank">vue.js</a> to update the Web page in real time, all client-side.</p>
	<br>It uses the API linked from <a href="https://zxing.appspot.com/generator" target="_blank">https://zxing.appspot.com/generator</a> to generate the QR code in real time.</p>
	<br/>
	<hr/>
	<br/>
	<div id="app1">
	<h2>Convert GS1 element strings to GS1 Digital Link URI</h2>
	<table>
	<tr class="elementString"><td class="label">Input: Element string</td><td><input class="elementString" type="text" v-model="elementStringInput"></td><td class="demobutton"><input class="elementString" type="button" value="Example" @click="demo1"></td></tr>
	<tr class="options"><td class="label">Options</td><td colspan="2">Use alphabetic short names e.g. /gtin/ <select class="digitalLink" v-model="shortnames"><option value="true">Yes</option><option value="false">No</option></select><br>Custom URI stem <input type="text" class="digitalLink" v-model="uristem" style="width: 80%"></td></tr>
	<tr class="spacer"><td colspan="3"> </td></tr>
	<tr class="digitalLink" v-show="digitalLinkOutput !== ''"><td class="label">Output: GS1 Digital Link URI</td><td colspan="2"><input class="digitalLink" type="text" :value="digitalLinkOutput"></td></tr>
	<tr class="errorMessage" v-show="error1 !== ''"><td class="label">Error:</td><td colspan="2"><textarea class="errorMessage" v-model="error1"></textarea></td></tr>
	</table>
	<br/>
	<div @click="showHideQRcode" class="showHide" v-if="digitalLinkOutput !== ''">{{showHideMessage[showHide]}}</div>
	<div v-if="showHide==1">
	<img id="qrCode" v-bind:src="qrURI" width="350" height="350"/>
	</div>
	<hr/>
	<br/>
	<h2>Convert GS1 Digital Link URI to GS1 element strings</h2>
	<table>
	<tr class="digitalLink"><td class="label">Input: GS1 Digital Link URI</td><td><input class="digitalLink" type="text" v-model="digitalLinkInput"></td><td class="demobutton"><input class="digitalLink" type="button" value="Example" @click="demo2"></td></tr>
	<tr class="options"><td class="label">Options</td><td colspan="2">Use brackets / human-readable output <select class="elementString" v-model="brackets"><option value="true">Yes</option><option value="false">No</option></select></td></tr>
	<tr class="spacer"><td colspan="3"> </td></tr>
	<tr class="elementString" v-show="elementStringOutput !== ''"><td class="label">Output: Element string</td><td colspan="2"><input class="elementString" type="text" :value="elementStringOutput"></td></tr>
	<tr class="errorMessage" v-show="error2 !== ''"><td class="label">Error:</td><td colspan="2"><textarea class="errorMessage" v-model="error2"></textarea></td></tr>
	</table>

	</div>
	<script language="javascript">
	var digitalLinkInput = "";
	var elementStringInput = "";
	var error1 = "";
	var error2 = "";
	var shortnames="true";
	var uristem="http://example.org";
	var brackets="true";
	var gs1dlt = new GS1DigitalLinkToolkit();
	var showHide=0;
	var showHideMessage=["Show QR code encoded with GS1 Digital Link URI","Hide QR code encoded with GS1 Digital Link URI"];
	var qrURI="blank.png";

	var app1 = new Vue({
	el: "#app1",
	data : {
	elementStringInput : elementStringInput,
	digitalLinkInput : digitalLinkInput,
	error1: error1,
	error2: error2,
	gs1dlt : gs1dlt,
	shortnames: shortnames,
	uristem: uristem,
	brackets: brackets,
	showHide: showHide,
	showHideMessage: showHideMessage,
	blank: qrURI
	},
	computed : {
	qrURI: function() {
	if (this.digitalLinkOutput !== "") {
	return "https://zxing.org/w/chart?cht=qr&chs=350x350&chld=L&choe=UTF-8&chl="+encodeURIComponent(this.digitalLinkOutput);
	} else {
	return this.blank;
	}
	},


	digitalLinkOutput : function() {
	if (this.elementStringInput !== "") {
	try {
	this.error1="";
	return gs1dlt.gs1ElementStringsToGS1DigitalLink(this.elementStringInput, (this.shortnames =="true"), this.uristem);
	} catch(err) {
	this.digitalLinkOutput="";
	this.error1=err;
	return "";
	}
	} else {
	return "";
	}
	},
	elementStringOutput : function() {
	if (this.digitalLinkInput !== "") {
	try {
	this.error2="";
	return gs1dlt.gs1digitalLinkToGS1elementStrings(this.digitalLinkInput, (this.brackets =="true"));
	} catch(err) {
	this.elementStringOutput="";
	this.error2=err;
	return "";
	}
	} else {
	return "";
	}
	}
	},
	methods : {
	demo1 : function() {
	this.elementStringInput="(3103)000189(01)05412345000013(3923)2172(10)ABC&+123";
	},
	demo2 : function() {
	this.digitalLinkInput="https://example.org/gtin/054123450013/lot/ABC%26%2B123?3103=000189&3923=2172";
	},
	showHideQRcode : function() {
	this.showHide = 1- this.showHide;
	}
	}
	});

	</script>
	</body>
	</html>