Skip to content

Commit 321d28c

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

File tree

2 files changed

+203
-29
lines changed

2 files changed

+203
-29
lines changed

‎docs/client-demo.html‎

Lines changed: 201 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,205 @@
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: 8px;
37+
}
38+
#console-log-text::-webkit-scrollbar-track {
39+
background: #1f2937;
40+
}
41+
#console-log-text::-webkit-scrollbar-thumb {
42+
background: #4b5563;
43+
border-radius: 4px;
44+
}
45+
#console-log-text::-webkit-scrollbar-thumb:hover {
46+
background: #6b7280;
47+
}
48+
49+
/* Flex layout to make the console fill remaining height */
50+
body {
51+
display: flex;
52+
flex-direction: column;
53+
height: 100vh;
54+
margin: 0;
55+
overflow: hidden; /* Prevent body scrolling, let console scroll */
56+
}
57+
58+
.main-container {
59+
flex: 1;
60+
display: flex;
61+
flex-direction: column;
62+
padding-bottom: 2rem;
63+
}
64+
65+
.terminal-container {
66+
flex: 1;
67+
display: flex;
68+
flex-direction: column;
69+
min-height: 0; /* Important for flex child scrolling */
70+
}
71+
72+
#console-log-text {
73+
flex: 1;
74+
overflow-y: auto;
75+
}
76+
</style>
77+
</head>
78+
<body class="bg-gray-50 font-sans text-gray-800">
79+
80+
<!-- I've forced the max width of the whole container to exactly 1024px and centered it -->
81+
<div class="main-container w-[1024px] max-w-[1024px] mx-auto pt-8 px-4">
82+
83+
<!-- Header Section -->
84+
<div class="text-center mb-6">
85+
<h1 class="text-4xl font-extrabold text-gray-900 tracking-tight mb-2">
86+
<span class="block text-brand">Labs64</span>
87+
<a href="https://netlicensing.io/" target="_blank" class="hover:text-brand-hover transition-colors">
88+
NetLicensing JavaScript Client
89+
</a>
90+
</h1>
91+
<p class="mt-2 text-lg text-gray-500 max-w-2xl mx-auto">
92+
Interactive demo showcasing <a href="https://netlicensing.io/wiki/restful-api" target="_blank" class="text-brand hover:underline">RESTful API</a> access.
93+
</p>
94+
</div>
95+
96+
<!-- Controls Section -->
97+
<div class="flex justify-center gap-4 mb-6 shrink-0">
98+
<button
99+
onclick="NetLicensingDemo()"
100+
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">
101+
<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>
102+
Execute Demo
103+
</button>
104+
105+
<button
106+
onclick="clearBox('console-log-text')"
107+
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">
108+
<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>
109+
Clear Console
110+
</button>
111+
</div>
112+
113+
<!-- Terminal Output Section -->
114+
<div class="terminal-container bg-gray-900 rounded-lg shadow-xl overflow-hidden border border-gray-700 w-full">
115+
<!-- Mac-style window header -->
116+
<div class="bg-gray-800 px-4 py-2 border-b border-gray-700 flex items-center shrink-0">
117+
<div class="flex space-x-2">
118+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
119+
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
120+
<div class="w-3 h-3 rounded-full bg-green-500"></div>
121+
</div>
122+
<div class="mx-auto text-gray-400 text-xs font-mono">demo-output.log</div>
123+
</div>
124+
125+
<!-- Output container now takes up remaining screen height -->
126+
<div class="p-4 font-mono text-sm w-full" id="console-log-text">
127+
<div class="text-gray-500 mb-2">Ready. Click 'Execute Demo' to start the NetLicensing API simulation...</div>
128+
</div>
129+
</div>
130+
</div>
131+
132+
<!-- Intercept Console Output -->
133+
<script>
134+
(function() {
135+
const oldLog = console.log;
136+
const oldError = console.error;
137+
const oldWarn = console.warn;
138+
const logger = document.getElementById('console-log-text');
139+
140+
function formatArgs(args) {
141+
return Array.from(args).map(arg => {
142+
if (arg instanceof Error) {
143+
return arg.stack || arg.message;
144+
}
145+
if (typeof arg === 'object' && arg !== null) {
146+
try {
147+
return JSON.stringify(arg, null, 2);
148+
} catch (e) {
149+
return String(arg);
150+
}
151+
}
152+
return String(arg);
153+
}).join(' ');
154+
}
155+
156+
function appendLog(args, colorClass, prefixChar = '>') {
157+
const msg = formatArgs(args);
158+
const div = document.createElement('div');
159+
div.className = `mb-2 whitespace-pre-wrap break-all ${colorClass}`;
160+
161+
const prefix = document.createElement('span');
162+
prefix.className = 'text-[#E14817] mr-2 select-none font-bold';
163+
prefix.textContent = prefixChar;
164+
165+
div.appendChild(prefix);
166+
div.appendChild(document.createTextNode(msg));
167+
168+
logger.appendChild(div);
169+
logger.scrollTop = logger.scrollHeight;
170+
}
171+
172+
console.log = function() {
173+
oldLog.apply(console, arguments);
174+
appendLog(arguments, 'text-green-400');
175+
};
176+
177+
console.error = function() {
178+
oldError.apply(console, arguments);
179+
appendLog(arguments, 'text-red-400', '✖');
180+
};
181+
182+
console.warn = function() {
183+
oldWarn.apply(console, arguments);
184+
appendLog(arguments, 'text-yellow-400', '⚠');
185+
};
186+
187+
window.onerror = function(message, source, lineno, colno, error) {
188+
console.error("Uncaught Error: " + message);
189+
return false;
190+
};
191+
192+
window.addEventListener("unhandledrejection", function(event) {
193+
console.error("Unhandled Promise Rejection: " + (event.reason ? event.reason.stack || event.reason : event));
194+
});
195+
196+
window.clearBox = function(elementID) {
197+
const el = document.getElementById(elementID);
198+
if (el) {
199+
el.innerHTML = '<div class="text-gray-500 mb-2">Console cleared. Ready.</div>';
200+
}
201+
};
202+
})();
203+
</script>
204+
</body>
31205
</html>

‎docs/client-demo.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ const NetLicensingDemo = async () => {
3838

3939
console.log('UtilityService.listLicenseTypes() :', await UtilityService.listLicenseTypes(context));
4040
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());
41+
//console.log('UtilityService.listCountries() :', await UtilityService.listCountries(context));
42+
//console.log((await UtilityService.listCountries(context)).getContent());
4343
// endregion
4444

4545
// region ********* Product

0 commit comments

Comments
 (0)