Skip to content

Commit ad40bf1

Browse files
pixeloxxpixeloxx
committed
added monitoni price tag
1 parent c8901db commit ad40bf1

4 files changed

Lines changed: 249 additions & 23 deletions

File tree

‎src/index.js‎

Lines changed: 72 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ let sizes = [
1818
width: 62,
1919
height: 29,
2020
index: 1
21+
},
22+
{
23+
name: "monitoni_price_64mm_100mm",
24+
width: 100,
25+
height: 64,
26+
index: 2
2127
}
2228
];
2329

@@ -47,6 +53,7 @@ async function DOMContentLoadedEvent() {
4753
const formattedDate = `${year}-${month}-${day}`;
4854

4955
setUpSize()
56+
updateLabLineBreaks()
5057

5158
document.getElementById('date').value = formattedDate // set date default
5259
// buttons
@@ -56,9 +63,10 @@ async function DOMContentLoadedEvent() {
5663
});
5764
//
5865

59-
document.getElementById('sizeChange').addEventListener('click', function () {
66+
document.getElementById('sizeChange').addEventListener('change', function (event) {
6067
console.log("change size")
61-
setUpSize();
68+
let selectedIndex = parseInt(event.target.value);
69+
setUpSize(selectedIndex);
6270
});
6371

6472
let urlText = document.getElementById("url");
@@ -77,7 +85,7 @@ async function DOMContentLoadedEvent() {
7785

7886
const delegate = (selector) => (cb) => (e) => e.target.matches(selector) && cb(e);
7987

80-
const inputDelegate = delegate('input[type=text]');
88+
const inputDelegate = delegate('input[type=text], textarea');
8189

8290
['input', 'change'].forEach(function (evt) {
8391
document.body.addEventListener(evt, inputDelegate((el) => {
@@ -91,6 +99,43 @@ async function DOMContentLoadedEvent() {
9199
}
92100
));
93101
});
102+
103+
window.addEventListener('resize', () => {
104+
updateLabLineBreaks();
105+
if (url) {
106+
updateQRCode(url);
107+
}
108+
});
109+
}
110+
111+
function updateLabLineBreaks() {
112+
const labText = document.querySelector('.lab b');
113+
if (!labText) {
114+
return;
115+
}
116+
117+
const variants = [
118+
'PHYSICAL COMPUTING LAB', // 1 line
119+
'PHYSICAL<br>COMPUTING<br>LAB' // 3 lines (fallback)
120+
];
121+
122+
for (let variant of variants) {
123+
labText.innerHTML = variant;
124+
// Force layout recalculation multiple times to ensure browser recalculates
125+
labText.offsetHeight;
126+
labText.offsetHeight;
127+
128+
// Check if content is overflowing visually
129+
const isOverflowing = labText.scrollWidth > labText.clientWidth ||
130+
labText.scrollHeight > labText.clientHeight;
131+
132+
if (!isOverflowing) {
133+
return; // This variant fits, we're done
134+
}
135+
}
136+
137+
// Fallback to last variant if nothing else fits
138+
labText.innerHTML = variants[variants.length - 1];
94139
}
95140

96141
function updateQRCode(text) {
@@ -104,8 +149,17 @@ function updateQRCode(text) {
104149

105150
url = text;
106151
let QRCode = require('qrcode')
152+
153+
let qrWidth = 145;
154+
if (currentSize.name === 'monitoni_price_64mm_100mm') {
155+
const qrContainer = document.querySelector('.monitoni_price_64mm_100mm .header');
156+
if (qrContainer) {
157+
qrWidth = Math.floor(qrContainer.clientWidth - 24);
158+
}
159+
}
160+
107161
QRCode.toCanvas(canvas, text, {
108-
width: 145, margin: 0
162+
width: qrWidth, margin: 0
109163
}, function (error) {
110164
console.log('no QR code generated');
111165
})
@@ -116,24 +170,22 @@ function goToUrl() {
116170
window.open(url, '', 'width=800, height=400');
117171
}
118172

119-
function setUpSize() {
173+
function setUpSize(index) {
120174

121-
let index = currentSize.index;
122-
index++;
123-
124-
125-
if (index >= sizes.length) {
126-
index = 0;
175+
// If no index provided, use the current size index
176+
if (index === undefined) {
177+
index = currentSize.index;
127178
}
128179

129180
currentSize = sizes[index];
130181

131182
//remove old style
132183
document.getElementById("labelContainer").classList.remove('large_62mm_100mm');
133184
document.getElementById("labelContainer").classList.remove('small_29mm_62mm');
185+
document.getElementById("labelContainer").classList.remove('monitoni_price_64mm_100mm');
134186

135187

136-
let label = document.getElementById('sizeLabel');
188+
let label = document.getElementById('sizeLabel');
137189
label.innerHTML = '';
138190
label.innerHTML = currentSize.name;
139191
// change size
@@ -143,6 +195,14 @@ function setUpSize() {
143195
// add new style
144196

145197
document.getElementById("labelContainer").classList.add(currentSize.name);
198+
199+
updateLabLineBreaks();
200+
201+
// Update QR code size for the new format
202+
let urlText = document.getElementById("url");
203+
if (urlText && urlText.value) {
204+
updateQRCode(urlText.value);
205+
}
146206
}
147207

148208
function printCanvas() {

‎src/styles/_scaffolding.scss‎

Lines changed: 163 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,16 @@ body {
4444
float: right;
4545
}
4646

47+
#addRowButton {
48+
display: none;
49+
}
50+
51+
.monitoni_price_64mm_100mm #addRowButton {
52+
display: block;
53+
position: relative;
54+
float: right;
55+
}
56+
4757
#printbtnContainer {
4858
width: $labelWidth*$scaler;
4959
}
@@ -82,7 +92,7 @@ body {
8292
display: block;
8393
}
8494

85-
.large_62mm_100mm #outerWrapper{
95+
.large_62mm_100mm #outerWrapper {
8696
width: ($labelWidth*$scaler);
8797
height: ($labelHeight*$scaler);
8898
font-size: 14px;
@@ -94,6 +104,12 @@ body {
94104
font-size: 8px;
95105
}
96106

107+
.monitoni_price_64mm_100mm #outerWrapper {
108+
width: ($labelWidthPrice*$scaler);
109+
height: ($labelHeightPrice*$scaler);
110+
font-size: 14px;
111+
}
112+
97113
#wrapper {
98114
width: 100%;
99115
padding: $padding;
@@ -120,6 +136,13 @@ body {
120136
grid-template-rows: [row] 4fr [row] 1fr [row] 1fr [row] 1fr [row] 1fr;
121137
}
122138

139+
.monitoni_price_64mm_100mm #wrapper {
140+
height: ($labelHeight*$scaler)-2*$padding;
141+
width: ($labelWidth*$scaler)-2*$padding;
142+
grid-template-columns: [col] 1fr [col] 1fr;
143+
grid-template-rows: [row] 1fr [row] 6fr [row] auto;
144+
}
145+
123146
input {
124147
font-family: inherit;
125148
font-size: inherit;
@@ -133,6 +156,20 @@ input {
133156
background: transparent;
134157
}
135158

159+
textarea {
160+
font-family: inherit;
161+
font-size: inherit;
162+
resize: none;
163+
width: 95%;
164+
max-height: 100%;
165+
margin: 0;
166+
border: none;
167+
height: 100%;
168+
font-size: 1.0em;
169+
background: transparent;
170+
line-height: 1.25;
171+
}
172+
136173
.box {
137174
background-color: #fff;
138175
color: #000;
@@ -281,7 +318,7 @@ input {
281318

282319
.small_29mm_62mm .lab {
283320
grid-column: col 3 / span 1;
284-
grid-row: row 3 / span 3;
321+
grid-row: row 3 / span 3;
285322
background-color: #000;
286323
font-size: 2em;
287324
color: #fff;
@@ -290,4 +327,128 @@ input {
290327

291328
.small_29mm_62mm #printbtnContainer {
292329
width: $labelWidthSmall*$scaler;
330+
}
331+
332+
/* MONITONI PRICE TAG */
333+
334+
.monitoni_price_64mm_100mm #qrCode {
335+
position: relative;
336+
float: none;
337+
width: 100% !important;
338+
height: auto !important;
339+
aspect-ratio: 1 / 1;
340+
max-width: none;
341+
max-height: none;
342+
}
343+
344+
.monitoni-label {
345+
display: none;
346+
}
347+
348+
.monitoni_price_64mm_100mm .monitoni-label {
349+
display: block;
350+
text-align: center;
351+
font-size: 0.8em;
352+
font-weight: bold;
353+
margin-top: 0.2em;
354+
margin-bottom: 0;
355+
width: 100%;
356+
line-height: 1;
357+
color: #000;
358+
}
359+
360+
.monitoni_price_64mm_100mm .header {
361+
grid-column: col 2 / span 1;
362+
grid-row: row / span 2;
363+
align-self: stretch;
364+
display: flex;
365+
flex-direction: column;
366+
align-items: center;
367+
justify-content: flex-start;
368+
padding: 0.45em;
369+
gap: 0.1em;
370+
}
371+
372+
.monitoni_price_64mm_100mm .url {
373+
grid-column: col 2 / span 1;
374+
grid-row: row 3;
375+
font-size: 0.72em;
376+
height: auto;
377+
}
378+
379+
.monitoni_price_64mm_100mm .material,
380+
.monitoni_price_64mm_100mm .materialInfo,
381+
.monitoni_price_64mm_100mm .contact,
382+
.monitoni_price_64mm_100mm .contactInfo,
383+
.monitoni_price_64mm_100mm .date,
384+
.monitoni_price_64mm_100mm .dateInfo,
385+
.monitoni_price_64mm_100mm .dept,
386+
.monitoni_price_64mm_100mm .room,
387+
.monitoni_price_64mm_100mm .zhdk {
388+
display: none;
389+
}
390+
391+
.monitoni_price_64mm_100mm .notes {
392+
display: block;
393+
grid-column: col / span 1;
394+
grid-row: row 2 / span 2;
395+
font-size: 1.2em;
396+
padding: 0.8em;
397+
}
398+
399+
.price-table {
400+
display: none;
401+
}
402+
403+
.monitoni_price_64mm_100mm .price-table {
404+
display: flex;
405+
flex-direction: column;
406+
grid-column: col / span 1;
407+
grid-row: row 2 / span 2;
408+
gap: 0.0em;
409+
padding: 0px !important;
410+
}
411+
412+
.price-row {
413+
display: grid;
414+
grid-template-columns: 2fr 1fr 1fr;
415+
gap: 0.2em;
416+
}
417+
418+
.price-row.emptySpace {
419+
background: url(assets/tile.png);
420+
}
421+
422+
.price-spacer {
423+
display: none;
424+
flex: 1;
425+
background: url(assets/tile.png);
426+
}
427+
428+
.monitoni_price_64mm_100mm .price-spacer {
429+
display: block;
430+
}
431+
432+
.price-item,
433+
.price-price,
434+
.price-unit {
435+
font-family: inherit;
436+
font-size: 0.75em;
437+
resize: none;
438+
margin: 0;
439+
padding: 0.2em;
440+
background: transparent;
441+
}
442+
443+
.monitoni_price_64mm_100mm .lab {
444+
grid-column: col / span 1;
445+
grid-row: row 1;
446+
background-color: #000;
447+
font-size: 1.25em;
448+
color: #fff;
449+
text-align: center;
450+
}
451+
452+
.monitoni_price_64mm_100mm #printbtnContainer {
453+
width: $labelWidthPrice*$scaler;
293454
}

‎src/styles/_variables.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,16 @@ $labelHeight: 62px;
1212
$labelWidth: 100px;
1313
$labelHeightSmall: 29px;
1414
$labelWidthSmall: 62px;
15+
$labelHeightPrice: 62px;
16+
$labelWidthPrice: 100px;
1517

1618
:export {
1719
labelHeight: $labelHeight;
1820
labelWidth: $labelWidth;
1921
labelHeightSmall: $labelHeightSmall;
2022
labelWidthSmall: $labelWidthSmall;
23+
labelHeightPrice: $labelHeightPrice;
24+
labelWidthPrice: $labelWidthPrice;
2125
scaler: $scaler;
2226
pad: $padding;
2327
}

0 commit comments

Comments
 (0)