Skip to content

Commit cdfc67a

Browse files
r-brownr-brown
committed
Improve demo application
1 parent fc91241 commit cdfc67a

File tree

4 files changed

+278
-31
lines changed

4 files changed

+278
-31
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ node_modules/
33
npm-debug.log
44
.build*
55
.idea
6-
index.html
76
dist/
7+
test/coverage/lcov-report/index.html

‎docs/client-demo.html‎

Lines changed: 216 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,220 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Labs64 NetLicensing JavaScript Client Demo</title>
6-
<script src="../dist/index.global.js"></script>
7-
<script src="client-demo.js"></script>
8-
<style>
9-
.console-log-div {
10-
border: 1px solid gray;
11-
padding: 5px 10px;
12-
border-radius: 5px;
13-
width: 95% !important;
14-
background-color: #efefef;
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Labs64 NetLicensing JavaScript Client Demo</title>
7+
8+
<!-- Load Tailwind CSS for modern styling -->
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
11+
<!-- Configure Tailwind theme for Labs64 Brand Color -->
12+
<script>
13+
tailwind.config = {
14+
theme: {
15+
extend: {
16+
colors: {
17+
brand: {
18+
DEFAULT: '#E14817',
19+
hover: '#C23E14'
20+
}
21+
}
22+
}
1523
}
16-
</style>
17-
</head>
18-
19-
<body>
20-
<h1><p align="center"><strong>Labs64 <a href="https://netlicensing.io">NetLicensing</a><br/>JavaScript Client
21-
Demo</strong></p></h1>
22-
<p align="center">This demo showcases <a href="https://netlicensing.io/wiki/restful-api">RESTful API</a> access
23-
to NetLicensing’s core features.</p>
24-
<p align="center">
25-
<input type="button" value="Execute" onclick="NetLicensingDemo();"/>
26-
<input type="button" value="Clear" onclick="clearBox('console-log-text')"/>
27-
</p>
28-
29-
<script src="https://cdn.jsdelivr.net/npm/console-log-div@0.6.3/console-log-div.min.js"></script>
30-
</body>
24+
}
25+
</script>
26+
27+
<!-- Load latest NetLicensing Client from unpkg -->
28+
<script src="https://unpkg.com/netlicensing-client@latest/dist/index.global.js"></script>
29+
30+
<!-- Load your demo logic (Ensure this matches your local file name) -->
31+
<script src="client-demo.js"></script>
32+
33+
<style>
34+
/* Custom scrollbar for the console output */
35+
#console-log-text::-webkit-scrollbar {
36+
width: 10px;
37+
}
38+
#console-log-text::-webkit-scrollbar-track {
39+
background: #111827;
40+
border-left: 1px solid #374151;
41+
}
42+
#console-log-text::-webkit-scrollbar-thumb {
43+
background: #4b5563;
44+
border-radius: 5px;
45+
border: 2px solid #111827;
46+
}
47+
#console-log-text::-webkit-scrollbar-thumb:hover {
48+
background: #6b7280;
49+
}
50+
51+
/* Flex layout setup */
52+
body {
53+
display: flex;
54+
flex-direction: column;
55+
height: 100vh;
56+
margin: 0;
57+
overflow: hidden;
58+
}
59+
60+
.main-container {
61+
flex: 1;
62+
display: flex;
63+
flex-direction: column;
64+
padding-bottom: 2rem;
65+
min-height: 0; /* Crucial for flex child to allow inner scrolling */
66+
}
67+
68+
.terminal-container {
69+
flex: 1;
70+
display: flex;
71+
flex-direction: column;
72+
min-height: 0; /* Crucial for flex child to allow inner scrolling */
73+
}
74+
75+
#console-log-text {
76+
flex: 1;
77+
overflow-y: auto; /* Enables vertical scrolling */
78+
word-wrap: break-word;
79+
}
80+
81+
/* Prevent layout shift during auto-scroll */
82+
.log-entry {
83+
margin-bottom: 0.5rem;
84+
white-space: pre-wrap;
85+
word-break: break-all;
86+
}
87+
</style>
88+
</head>
89+
<body class="bg-gray-50 font-sans text-gray-800">
90+
91+
<div class="main-container w-[1024px] max-w-[1024px] mx-auto pt-8 px-4">
92+
93+
<!-- Header Section -->
94+
<div class="text-center mb-6 shrink-0">
95+
<h1 class="text-4xl font-extrabold text-gray-900 tracking-tight mb-2">
96+
<span class="block text-brand">Labs64</span>
97+
<a href="https://netlicensing.io/" target="_blank" class="hover:text-brand-hover transition-colors">
98+
NetLicensing JavaScript Client
99+
</a>
100+
</h1>
101+
<p class="mt-2 text-lg text-gray-500 max-w-2xl mx-auto">
102+
Interactive demo showcasing <a href="https://netlicensing.io/wiki/restful-api" target="_blank" class="text-brand hover:underline">RESTful API</a> access.
103+
</p>
104+
</div>
105+
106+
<!-- Controls Section -->
107+
<div class="flex justify-center gap-4 mb-6 shrink-0">
108+
<button
109+
onclick="NetLicensingDemo()"
110+
class="inline-flex items-center px-6 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-brand hover:bg-brand-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand transition-colors duration-200">
111+
<svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
112+
Execute Demo
113+
</button>
114+
115+
<button
116+
onclick="clearBox('console-log-text')"
117+
class="inline-flex items-center px-6 py-2 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand transition-colors duration-200 shadow-sm">
118+
<svg class="w-5 h-5 mr-2 -ml-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
119+
Clear Console
120+
</button>
121+
</div>
122+
123+
<!-- Terminal Output Section -->
124+
<div class="terminal-container bg-gray-900 rounded-lg shadow-xl overflow-hidden border border-gray-700 w-full relative">
125+
<!-- Mac-style window header -->
126+
<div class="bg-gray-800 px-4 py-2 border-b border-gray-700 flex items-center shrink-0 z-10">
127+
<div class="flex space-x-2">
128+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
129+
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
130+
<div class="w-3 h-3 rounded-full bg-green-500"></div>
131+
</div>
132+
<div class="mx-auto text-gray-400 text-xs font-mono">demo-output.log</div>
133+
</div>
134+
135+
<!-- Output container now takes up remaining screen height AND allows scrolling -->
136+
<div class="p-4 font-mono text-sm w-full" id="console-log-text">
137+
<div class="text-gray-500 mb-2">Ready. Click 'Execute Demo' to start the NetLicensing API simulation...</div>
138+
</div>
139+
</div>
140+
</div>
141+
142+
<!-- Intercept Console Output -->
143+
<script>
144+
(function() {
145+
const oldLog = console.log;
146+
const oldError = console.error;
147+
const oldWarn = console.warn;
148+
const logger = document.getElementById('console-log-text');
149+
150+
function formatArgs(args) {
151+
return Array.from(args).map(arg => {
152+
if (arg instanceof Error) {
153+
return arg.stack || arg.message;
154+
}
155+
if (typeof arg === 'object' && arg !== null) {
156+
try {
157+
return JSON.stringify(arg, null, 2);
158+
} catch (e) {
159+
return String(arg);
160+
}
161+
}
162+
return String(arg);
163+
}).join(' ');
164+
}
165+
166+
function appendLog(args, colorClass, prefixChar = '>') {
167+
const msg = formatArgs(args);
168+
const div = document.createElement('div');
169+
div.className = `log-entry ${colorClass}`;
170+
171+
const prefix = document.createElement('span');
172+
prefix.className = 'text-[#E14817] mr-2 select-none font-bold';
173+
prefix.textContent = prefixChar;
174+
175+
div.appendChild(prefix);
176+
div.appendChild(document.createTextNode(msg));
177+
178+
logger.appendChild(div);
179+
180+
// Ensure the scroll goes all the way to the newly added item
181+
// Use requestAnimationFrame to ensure the DOM has updated before calculating height
182+
requestAnimationFrame(() => {
183+
logger.scrollTop = logger.scrollHeight;
184+
});
185+
}
186+
187+
console.log = function() {
188+
oldLog.apply(console, arguments);
189+
appendLog(arguments, 'text-green-400');
190+
};
191+
192+
console.error = function() {
193+
oldError.apply(console, arguments);
194+
appendLog(arguments, 'text-red-400', '✖');
195+
};
196+
197+
console.warn = function() {
198+
oldWarn.apply(console, arguments);
199+
appendLog(arguments, 'text-yellow-400', '⚠');
200+
};
201+
202+
window.onerror = function(message, source, lineno, colno, error) {
203+
console.error("Uncaught Error: " + message);
204+
return false;
205+
};
206+
207+
window.addEventListener("unhandledrejection", function(event) {
208+
console.error("Unhandled Promise Rejection: " + (event.reason ? event.reason.stack || event.reason : event));
209+
});
210+
211+
window.clearBox = function(elementID) {
212+
const el = document.getElementById(elementID);
213+
if (el) {
214+
el.innerHTML = '<div class="text-gray-500 mb-2">Console cleared. Ready.</div>';
215+
}
216+
};
217+
})();
218+
</script>
219+
</body>
31220
</html>

‎docs/client-demo.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const NetLicensingDemo = async () => {
2+
try {
23
const {
34
Context,
45
LicenseType,
@@ -38,8 +39,8 @@ const NetLicensingDemo = async () => {
3839

3940
console.log('UtilityService.listLicenseTypes() :', await UtilityService.listLicenseTypes(context));
4041
console.log('UtilityService.listLicensingModels() :', await UtilityService.listLicensingModels(context));
41-
console.log('UtilityService.listCountries() :', await UtilityService.listCountries(context));
42-
console.log((await UtilityService.listCountries(context)).getContent());
42+
//console.log('UtilityService.listCountries() :', await UtilityService.listCountries(context));
43+
//console.log((await UtilityService.listCountries(context)).getContent());
4344
// endregion
4445

4546
// region ********* Product
@@ -301,8 +302,21 @@ const NetLicensingDemo = async () => {
301302
// region ********* CleanUp
302303

303304
console.log('All done.');
304-
await ProductService.delete(context, productNumber, true);
305+
await ProductService.delete(context, productNumber, true);
305306
// endregion
307+
308+
} catch (error) {
309+
console.error('❌ NetLicensing API Error:');
310+
311+
// Check if it's an Axios/API response error
312+
if (error.response && error.response.data) {
313+
console.error('Status Code:', error.response.status);
314+
console.error(JSON.stringify(error.response.data, null, 2));
315+
} else {
316+
// Standard JS/Network error
317+
console.error(error.message || error);
318+
}
319+
}
306320
};
307321

308322
function numberWithPrefix(prefix, number) {

‎docs/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="refresh" content="0; url=client-demo.html">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Redirecting to Labs64 NetLicensing Client Demo</title>
8+
<script>
9+
// Fallback JavaScript redirect in case meta refresh is disabled
10+
window.location.href = "client-demo.html";
11+
</script>
12+
<style>
13+
body {
14+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
15+
background-color: #f9fafb;
16+
color: #374151;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
height: 100vh;
21+
margin: 0;
22+
text-align: center;
23+
}
24+
.container {
25+
max-width: 500px;
26+
padding: 2rem;
27+
}
28+
a {
29+
color: #E14817; /* Labs64 Brand Color */
30+
text-decoration: none;
31+
font-weight: 600;
32+
}
33+
a:hover {
34+
text-decoration: underline;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<div class="container">
40+
<h2>Redirecting to Demo...</h2>
41+
<p>If you are not redirected automatically, please <a href="client-demo.html">click here</a>.</p>
42+
</div>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)